Dev Dastan
324 subscribers
49 photos
2 videos
41 links
πŸ”Έ Programming Tips and Concepts πŸ‘Ύ

πŸ”ΉContact: @Hossein13M 🀘🏻
Download Telegram
βœ…οΈ Habits Of Great Software Engineers


1️⃣ Focusing beyond the code
As a developer you will code 20% of your time. You should excel at coding nonetheless, but it won't be enough to be great


2️⃣ Efficiency / Antifragility
Making sure everything around you runs smoothly and has forward momentum


3️⃣ Joy of tinkering
Build projects, try out frameworks, build stuff on the side. Keeps the spark alive


4️⃣ Knowing the why
It's important to know why your code does what it does, too many abstractions nowadays that rarely someone thinks below the level of their language e.g JS devs not thinking about the engine that runs their code


5️⃣ Thinking in systems
Knowing how your code impacts not only your individual system but other parts of the business/application/life


6️⃣ Tech detox
Recharging away from your monitor makes you a better programmer


7️⃣ The art of approximation
Knowing important tech numbers to approximate calculations when making decisions when programming


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
πŸ–ΌοΈ YouTube Video: [here]
βž–βž–βž–βž–βž–βž–
#softwareEngineering #softSkill


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘10❀3🀯3
πŸ–ΌοΈ How to Google like a Pro – 10 Tips for More Effective Googling


1️⃣ Use quotes to get an "EXACT" match

2️⃣ Search within a specific site with site:

3️⃣ Exclude a term from search results with -

4️⃣ Search images of a particular size with imagesize:

5️⃣ Search for a particular filetype with filetype:

6️⃣ Use wildcard * to make searches

7️⃣ Combine searches with OR, AND logic

8️⃣ Filter out searches with AFTER:, BEFORE: or .. between two numbers

9️⃣ Check out related websites using related:

1️⃣0️⃣ Use cache: to see Google's cached version of a website


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#softwareEngineering #softSkill


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘11❀2🍌1
🍼 Powerful Practices Every New Developer Should Adopt


1️⃣ Get Down with the Mechanics of Coding πŸ› 

2️⃣ Develop a Problem-Solving Mindset 🧠

3️⃣ Code Every Day πŸ’»

4️⃣ Embrace Version Control Systems πŸ“

5️⃣ Explore Open Source Projects πŸ”“

6️⃣ Regularly Refactor Your Code πŸ”„

7️⃣ Learn to Read Documentation Effectively πŸ“š

8️⃣ Stay Curious About New Technologies 🌐 BEFORE: or .. between two numbers

9️⃣ Network with Other Developers 🀝

1️⃣0️⃣ Balance Learning with Practical Application βš–οΈ


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#softwareEngineering #softSkill


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘13❀4🀯1
πŸ“± JavaScript Quiz

⁉️ What is the event.target when clicking the button?

<div onclick="console.log('first div')">
<div onclick="console.log('second div')">
<button onclick="console.log('button')">
Click!
</button>
</div>
</div>


πŸ”€ Outer div
πŸ”€ Inner div
πŸ”€ button
πŸ”€ An array of all nested elements.

βœ”οΈ Answer: πŸ” 
The deepest nested element that caused the event is the target of the event. You can stop bubbling by event.stopPropagation


βž–βž–βž–βž–βž–βž–
#JavaScript #Quiz


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
🀯5πŸ‘4❀3
πŸ‘¨β€πŸ’» Optimizing Your Work-from-Home Setup for Career Success


1️⃣ Routine and Structure
I’ll stick to regular hours and take breaks to prevent burnout. As I adjust to Booz Allen Hamilton’s schedule, I’ll optimize my routine.

2️⃣ Stepping Outside
Breaks outdoors are essential. I enjoy the nearby park for walks, clearing my mind, and playing PokΓ©mon Go with friends.

3️⃣ Ergonomic Considerations
A comfortable chair and desk setup are key. I focus on good posture and regular stretching to stay comfortable and focused.

4️⃣ Clear Goals
Setting daily goals with tools like Trello keeps me organized. I mix in activities like the gym and socializing to stay refreshed.

5️⃣ Anticipated Challenges
Adapting to a new industry is challenging. I’m focusing on continuous learning and effective time management to balance work and learning.

6️⃣ Adapting to Change
I’m embracing the learning curve with a positive mindset, knowing discomfort leads to growth. Staying flexible and proactive is my approach.


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#softwareEngineering #softSkill


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘6❀5😎3
πŸ” How does SSH work?

βœ”οΈ SSH (Secure Shell) is a network protocol used to securely connect to remote machines over an unsecured network. It encrypts the connection and provides various mechanisms for authentication and data transfer.

It has three main layers:


1️⃣ Transport Layer
The Transport Layer provides encryption, integrity, and data protection to ensure secure communication between the client and server.

2️⃣ Authentication Layer
The Authentication Layer verifies the identity of the client to ensure that only authorized users can access the server.

3️⃣ Connection Layer
The Connection Layer multiplexes the encrypted and authenticated communication into multiple logical channels.


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#softwareEngineering #network


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀3πŸ‘2🀯1
πŸ–Ό 45 JavaScript Super Hacks Every Developer Should Know


βœ” JavaScript is a versatile and powerful language that is essential for modern web development. Here are super hacks that will make you a more efficient and effective JavaScript developer, with detailed explanations and examples for each one.

πŸ”— Please open the link below to read them all!

βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘5
πŸ–ΌοΈ Rendering Strategies With Nuxt 3

βœ”οΈ With Nuxt 3, there are different rendering strategies for specific situations and purposes. Rendering refers to the interpretation of JavaScript code by both the browser and the server to convert Vue.js components into HTML elements.

1️⃣ Universal Rendering

Advantages: Enhances SEO, improves initial page load performance.
Disadvantages: More complex to implement due to dual rendering paths.
Usage: Best for applications that benefit from both SEO and rich client-side interactivity.

2️⃣ Hybrid Rendering

Advantages: Flexibility to use the best rendering method for each application part, optimizing performance.
Disadvantages: Increased complexity in configuration and potential overhead in maintaining different rendering paths.
Usage: Ideal for large applications with diverse content needs (dynamic, static, interactive).

3️⃣ Server-Side Rendering (SSR)

Advantages: Faster initial load time, better SEO, simplified debugging, and improved accessibility.
Disadvantages: Higher server resource requirements and potentially slower subsequent page loads.
Usage: Suitable for content-heavy sites where SEO and initial rendering speed are critical.

4️⃣ Client-Side Rendering (CSR)

Advantages: Lower server load, simpler deployment, and dynamic interfaces.
Disadvantages: Slower initial load, poorer SEO, and reduced accessibility for some users.
Usage: Best for interactive single-page applications where SEO is not a priority.

5️⃣ Static Site Generation (SSG)

Advantages: High performance, enhanced security, and reduced server load.
Disadvantages: Not suitable for sites requiring frequent updates.
Usage: Ideal for websites with static content, such as blogs and documentation.

6️⃣ Incremental Static Regeneration (ISR)

Advantages: Combines the benefits of static generation with flexibility for content updates, maintaining high performance.
Disadvantages: More complex to set up and manage compared to traditional SSG.
Usage: Perfect for sites that need regular content updates but also want the performance benefits of static rendering.


βž–βž–βž–βž–βž–βž–
πŸ–ΌοΈ NuxtJS Doc: [here]
πŸ“š Article: [here]
πŸŸ₯ YouTube: [here]
βž–βž–βž–βž–βž–βž–
#nuxt #vue


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ‘2
πŸ–ΌοΈ πŸ–ΌοΈ WebStorm and Rider Are Now Free for Non-Commercial Use

βž– If you’re using these IDEs for non-commercial purposes, such as learning, open-source project development, content creation, or hobby development, you can now do so for free.


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#ide #news


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀6πŸ‘2
✨ What gives programmers feelings of power

βž– P.S. I have actually removed more lines of code than writing throughout my career!


βž–βž–βž–βž–βž–βž–
#softwareEngineering #softwareDevelopment #fun

πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘15😎7
πŸ–ΌοΈ React is Just document.createElement() With Good Marketing, and I Can Prove It

βž– React, the darling of modern web development, is nothing more than document.createElement() wrapped in excellent marketing and increasingly complex abstractions.

βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#javaScript #react


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀7πŸ‘Ž1
πŸ” πŸ” πŸ”  What is the Model Context Protocol (MCP)?


βž– MCP is an open standard developed by Anthropic that standardizes how AI applications, particularly large language models (LLMs), connect to external data sources and tools. It simplifies integrations by providing a universal protocol, like a USB-C for AI, enabling secure, scalable, and context-aware interactions without custom APIs for each tool or data source.


🟑AI assistants have entered their intern era. They'll ace any single task you throw at themβ€”analyzing PDFs, generating SQL, cracking dad jokes about Kubernetesβ€”but ask them to coordinate across Slack, Gmail, and Jira? Now you're debugging a Rube Goldberg machine of API keys.


🟑 Anthropic's Model Context Protocol (MCP) aims to standardize this mess. For users, it means connecting AI models to your Figma file and Linear tickets without needing a CS degree. For developers, it means fewer "why is the model just returning goat emojis" moments.


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#AI #LLM #MCP


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ‘1
🧱 5 Core Pillars of System Design


βœ”οΈ Designing systems is one thing, but mastering the principles that guide their creation is where the real magic happens.


1️⃣ Availability Ensures systems are up and running.
⚠️ Trade-off: Complexity vs. uptime.


2️⃣ Scalability Handles growing loads efficiently.
⚠️ Trade-off: Cost vs. performance.


3️⃣ Reliability Guarantees consistent performance.
⚠️ Trade-off: Redundancy vs. simplicity.


4️⃣ Maintainability Eases updates and debugging.
⚠️ Trade-off: Initial effort vs. long-term gains.


5️⃣ Performance Optimizes speed and responsiveness.
⚠️ Trade-off: Resources vs. user experience.



βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#systemDesign #softwareEngineering


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ‘1😎1
πŸ“± How Notion Handles 200 BILLION Notes (Without Crashing)


βœ”οΈ In this video, you can see Notion's incredible engineering journey from a single database to an infrastructure that manages over 200 BILLION blocks without breaking a sweat. You can see the following in the video:


1️⃣ How Notion's engineers tackled explosive growth that doubled every 6-12 months

2️⃣ The sharding strategy that transformed performance

3️⃣ Why they built their own custom data lake after outgrowing traditional solutions

4️⃣ The behind-the-scenes story of how they tripled their infrastructure without any downtime


βž–βž–βž–βž–βž–βž–
πŸŸ₯ YouTube: [here]
βž–βž–βž–βž–βž–βž–
#systemDesign #softwareEngineering


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘3❀2
This media is not supported in your browser
VIEW IN TELEGRAM
πŸ–ΌοΈ The Hidden Cost of JavaScript Arrays (Part 1 - Memory Allocation)


βœ”οΈ JS arrays can tank performance and there are ways to optimize them.

❌ Operations like push(), pop(), and splice() can trigger memory reallocation, copying, and fragmentation.

βœ… Using fixed-size or oversized arrays can be more efficient.



// Inefficient: Repeatedly resizing the array

let arr = [];

for (let i = 0; i < 10000; i++) {
arr.push(i);
}

// Efficient: Using a pre-sized array

let arr2 = new Array(10000);


for (let i = 0; i < 10000; i++) {
arr2[i] = i;
}




βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#javaScript #performance #softwareEngineering


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀3πŸ‘2
πŸ”Έ Epic Programming Principles


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#softwareEngineering


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4😎1
πŸ–ΌοΈ A Brief History of JavaScript: This year, JavaScript turns 30


πŸ”Έ 1994: Netscape releases Netscape Navigator 1.0


πŸ”Έ 1995: Brendan Eich creates the very first version of JavaScript


πŸ”Έ 1996: Microsoft introduces JScript in Internet Explorer 3 to compete with Netscape Navigator


πŸ”Έ 1996: Netscape Navigator 2.0 is released with JavaScript 1.0


πŸ”Έ 1997: Netscape submits JavaScript to ECMA International


πŸ”Έ 1998: Official release of the first ECMAScript language specification (ECMAScript 2)


πŸ”Έ 1999: Microsoft releases Internet Explorer 5, which uses more proprietary technology than before.


πŸ”Έ 2001: The first JSON message is sent


πŸ”Έ 2002: JSLint, the β€œgrandfather of all JavaScript syntax checkers” is introduced


πŸ”Έ 2003: Apple introduces Safari and WebKit


πŸ”Έ 2004: A beta version of Gmail is released, which uses a new asynchronous JavaScript protocol, β€œAJAX”


πŸ”Έ 2006: John Resig creates first commit to a project named jQuery


πŸ”Έ 2007: The first Apple iPhone is released with its mobile safari not supporting Flash


πŸ”Έ 2008: Netscape Navigator is sunset, marking the end of the β€œFirst Browser War”


πŸ”Έ 2008: Douglas Crockford publishes β€œJavaScript: The Good Parts”


πŸ”Έ 2008: Google releases the Chrome browser, the fastest web browser at the time, and with it, the V8 engine.


πŸ”Έ 2009: Ryan Dahl begins work on Node.js


πŸ”Έ 2009: The first commit on Express.js is created


πŸ”Έ 2010: npm 1.0 is released


πŸ”Έ 2010: WebStorm 1.0, a new JavaScript IDE by JetBrains, is released


πŸ”Έ 2010: AngularJS and Backbone.js are released


πŸ”Έ 2012: Webpack, a module bundler, is introduced


πŸ”Έ 2012: Microsoft makes TypeScript 0.8 available for the public


πŸ”Έ 2013: Facebook releases React


πŸ”Έ 2014: Vue.js is released


πŸ”Έ 2014: The first commit to Babel.js is created


πŸ”Έ 2014: Amazon announces AWS Lambda, powered by Node.js


πŸ”Έ 2015: GraphQL, a query language for APIs, is launched


πŸ”Έ 2015: Redux is released


πŸ”Έ 2015: Web assembly is released


πŸ”Έ 2015: ECMAScript 6 (ES2015) is released


πŸ”Έ 2016: Microsoft releases VSCode 1.0, a lightweight, fast, cross-platform IDE


πŸ”Έ 2016: Angular (Angular2) is released


πŸ”Έ 2016: Next.js 1.0 is released


πŸ”Έ 2017: Prettier 1.0 is released


πŸ”Έ 2017: Facebook launches Yarn, a new package manager


πŸ”Έ 2018: TensorFlow.js is released, bringing machine learning to the browser via WebGL or WebGPU without needing compute


πŸ”Έ 2019: Node.js stabilizes support for ECMAScript modules in v13.2.0


πŸ”Έ 2020: JavaScript makes it into space with SpaceX Dragon


πŸ”Έ 2020: Deno 1.0 is released


πŸ”Έ 2022: Internet Explorer 11 is retired


πŸ”Έ 2023: Bun 1.0 is released


πŸ”Έ 2025: TypeScript will be ported to Go


βž–βž–βž–βž–βž–βž–
πŸ“š Article: [here]
βž–βž–βž–βž–βž–βž–
#JavaScript


πŸ–₯ Follow @devDastan for more content.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀13πŸ‘5😎1