🟦 TypeScript Tips and Tricks Series (Part 4)

❤ Previous Parts: [part 1 | Part 2 | Part 3]

🔣 Mapped Types

Transform existing types by applying operations to each property. Useful for adding prefixes/suffixes to properties, creating key-value pairs from objects, etc.

interface User {
  name: string;
  age: number;
}

type ReadOnly<T> = { readonly [P in keyof T]: T[P] };

const readOnlyUser: ReadOnly<User> = {
  name: 'Kurt',
  age: 27
};

// readOnlyUser.name = 'Chester';
// Error: Cannot assign to 'name' because it is a read-only property

✨ Use Case:
Useful for manipulate and transform data from the API or before passing data to another component, with different data types.

➖➖➖➖➖➖
#TypeScript


🖥 Follow @devDastan for more content.

🖥 Difference Between Encryption, Encoding, Hashing, Obfuscation


💬 Encoding
✔️ Encoding is for maintaining data usability and can be reversed by employing the same algorithm that encoded the content, i.e. no key is used.


💬 Encryption
✔️ Encryption is for maintaining data confidentiality and requires the use of a key (kept secret) in order to return to plaintext.


💬 Hashing
✔️ Hashing is for validating the integrity of content by detecting all modification thereof via obvious changes to the hash output.


💬 Obfuscation
✔️ Obfuscation is used to prevent people from understanding the meaning of something, and is often used with computer code to help prevent successful reverse engineering and/or theft of a product’s functionality.


➖➖➖➖➖➖
📚 Article: [here]
🥳 Medium Article: [here]
🖼️ YouTube Video: [here]
➖➖➖➖➖➖
#softwareEngineering #security


🖥 Follow @devDastan for more content.

✨ Explaining Software Development Methods Comic

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#softwareEngineering #softwareDevelopment #comic

🖥 Follow @devDastan for more content.

✅️ 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.

🖼️ 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.

🍼 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.

📱 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.

👨‍💻 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.

🔐 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.

🖼 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

🖼️ 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.

🖼️ 🖼️ 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.

✨ 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.

🖼️ 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.

🔠🔠🔠 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.

🧱 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.

📱 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.

🖼️ 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.

🔸 Epic Programming Principles


➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#softwareEngineering


🖥 Follow @devDastan for more content.

🖼️ 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.