✨ The software development lifecycle (SDLC)


⚡️ SDLC outlines software development stages and manages the process from concept to product.

1️⃣ Planning: Identify goals, user requirements, and create a project plan to set the project's foundation.

2️⃣ Analysis: Analyze user requirements in detail, assess feasibility, and determine necessary resources and timeframe.

3️⃣ Design: Develop a detailed plan including user interface, software architecture, and component interactions to solve technical issues beforehand.

4️⃣ Implementation: Develop the software, write code, and conduct testing and debugging to shape the software as intended.

5️⃣ Testing: Test the software for user requirements and bug-free operation, including unit, integration, and user acceptance testing.

6️⃣ Deployment: Deploy stable software to users, either by installation on computers or deployment to servers, ensuring a smooth process.

7️⃣ Maintenance: Continuously maintain the software, fixing bugs, making improvements, and ensuring security to sustain its longevity and user satisfaction.


➖➖➖➖➖➖
📕 Books to read:
Software Engineering: A Practitioner’s Approach - Roger S. Pressman
➖➖➖➖➖➖
📕 Article: [here]


🖥 Follow @devDastan for more content.

✨ Headless CMS


⚡️ A Headless CMS separates the presentation layer (front end) from the content repository (back end), allowing content to be delivered to various channels through APIs.

‼️ Headless CMS Pros and Cons:

✔️ Pros:

1️⃣ Multi-channel experience: Content can be delivered across multiple channels.

2️⃣ Scalability: Easily adapts to new technologies and platforms without changing the CMS.

3️⃣ Flexible & quick development: Allows integration of any codebase or programming language for custom frontend frameworks.

4️⃣ Enhanced security: Separation of presentation layer and database reduces security risks.


❌ Cons:

1️⃣ Complexity: High flexibility leads to a more complex architecture.

2️⃣ Need for more development support: Requires a team of developers with expertise in various programming languages.

3️⃣ Limited tools for content creators: Lack of user-friendly content creation tools may increase non-technical staff workload.

➖➖➖➖➖➖
📕 Article: [here]
➖➖➖➖➖➖
#architecture


🖥 Follow @devDastan for more content.

✨ Concurrency vs Parallelism

⚡️ Concurrency means that an application is making progress on more than one task - at the same time or at least seemingly at the same time.

⚡️ Parallel execution is when a computer has more than one CPU or CPU core, and makes progress on more than one task simultaneously.

⚡️ If multiple CPUs are running multiple threads, the process is Parallel Concurrent.

➖➖➖➖➖➖
📚Article: [here]
🎬 YouTube Video: [here]
➖➖➖➖➖➖
#systemDesign #computerScience


🖥 Follow @devDastan for more content.

✨ Multiple Window 3D Scene Using Three.JS

💥 This project demonstrates a unique approach to creating and managing a 3D scene across multiple browser windows using Three.JS and localStorage.

➖➖➖➖➖➖
💻GitHub Repository: [here]
➖➖➖➖➖➖
#threeJS #GitHub


🖥 Follow @devDastan for more content.

✨ Soft Skill Quote

💬 Onboarding yourself and reading the documentation can also give you a fresh perspective.
Just like the person in the air freshener commercial who can’t smell their own smelly apartment, the more you interact with a software system, the more biased you become.
A new perspective can make all the difference in identifying problems and solutions that others may miss.


➖➖➖➖➖➖
#softSkill #softwareEngineering


🖥 Follow @devDastan for more content.

✨ Object.freeze vs Object.seal in JavaScript


❓ Object.seal prevents adding and/or removing properties from the sealed object and makes every existing property non-configurable.

❓ Object.freeze does Exactly what Object.seal do, plus It prevents modifying any existing properties.


❗️ There are Object.isFrozen() and Object.isSealed() methods to check if an object is frozen or sealed.


➖➖➖➖➖➖
📸 Image Credit: [here]
📖 Stack Overflow Answer: [here]
➖➖➖➖➖➖
#JavaScript #Programming


🖥 Follow @devDastan for more content.

✨ JavaScript's Garbage Collection

ℹ️ The garbage collector in JavaScript is responsible for reclaiming memory occupied by objects that are no longer needed. This mechanism is done using mark-and-sweep algorithm.

ℹ️ The mark-and-sweep algorithm consists of two main phases:

1️⃣Marking: Garbage collector marks reachable objects from the global object, ensuring none are left unmarked if reachable from a rooted object.

2️⃣ Sweeping: Garbage collector reclaims memory from unmarked objects, freeing it up for future use.


📕 Learn more about the JS's garbage collector's mechanism and best practices on the Medium I have written.


➖➖➖➖➖➖
📚Article (Written by me!): [here]
➖➖➖➖➖➖
#JavaScript #Algorithm


🖥 Follow @devDastan for more content.

📱 Abstract Syntax Trees (AST) in JavaScript


ℹ️ AST in JavaScript represents the syntactic structure of code. It's a hierarchical tree-like structure composed of nodes, each representing a syntactic element like variable declarations or function calls. An AST is created through two key stages:


1️⃣ Lexical Analysis (Tokenization): Code is tokenized by a Lexical Analyzer, breaking it down into tokens. Lexical Analysis: Code is tokenized by a Lexical Analyzer, breaking it down into tokens.

2️⃣ Syntax Analysis (Parsing): Tokens are structured into an AST by a Syntax Analyzer or Parser, enabling deeper code analysis.

✔️ AST use cases:

🔣Code Analysis: ESLint, JSHint, TypeScript Compiler (TSC), SonarQube

🔣Code Transformation: Babel, TypeScript Compiler (TSC), SWC

🔣Refactoring: TSLint, TypeScript Compiler (TSC)

🔣Code Generation: TypeScript Compiler (TSC), Babel

🔣Language Tooling: Visual Studio Code, WebStorm, Atom, Sublime Text

🔣Optimization: V8 JavaScript Engine, LLVM (Low-Level Virtual Machine)


➖➖➖➖➖➖
📚 Article: [here]
💻 AST Explorer Tool: [here]
➖➖➖➖➖➖
#JavaScript #computerScience


🖥 Follow @devDastan for more content.

🌐 The OSI Layer Model


⚡️ The OSI model is a framework that standardizes network communication into 7 layers.


1️⃣ Physical Layer: Handles physical transmission of data.

2️⃣ Data Link Layer: Provides error detection and framing of data packets.

3️⃣ Network Layer: Routes data between different networks.

4️⃣ Transport Layer: Ensures reliable data delivery.

5️⃣ Session Layer: Manages communication sessions between applications.

6️⃣ Presentation Layer: Handles data formatting and encryption.

7️⃣ Application Layer: Provides interfaces for user applications to access network services.

We will learn about the security concerns for each layer in the next post. Stay tuned!

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


🖥 Follow @devDastan for more content.

🌐 Common Security Attacks in the OSI Layer Model

❤ Read Previous Parts: [OSI Layers Review]

Physical Layer: Sniffing
🔣 Sniffing attacks capture network traffic to steal sensitive information.

Data Link Layer: Spoofing
🔣 Spoofing attacks alter MAC addresses to impersonate devices and gain unauthorized access.

Network Layer: Man-in-the-Middle (MITM)
🔣 MITM attacks intercept and modify communication between parties to steal data.

Transport Layer: Reconnaissance
🔣 Reconnaissance attacks probe transport protocols to gather information about a target system.

Session Layer: Hijacking
🔣 Hijacking attacks take control of established communication sessions to gain unauthorized access.

Presentation Layer: Phishing
🔣 Phishing attacks trick users into revealing sensitive information through fake emails or websites.

Application Layer: Exploit
🔣 Exploit attacks target software vulnerabilities to gain unauthorized access or perform malicious actions.

We will learn how we can prevent our website from some of these attacks in future posts!

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#network #security


🖥 Follow @devDastan for more content.

📱 JavaScript Signals Standard Proposal (Stage 1)


🕯 Signals are a reactive state management mechanism for JavaScript apps. Each Signal is a source of a value. When the value changes, the Signal makes sure all dependent states (or other Signals) are notified and updated.

❗️ Frameworks like Angular, VueJS, SolidJS, and ... heavily utilize Signals. Establishing a standard for JavaScript itself would be beneficial (it is currently at stage 1).

✔️ Advantages of Signals:

🔣 Simplified Reactive Programming

🔣 Automated State Tracking and Updating

🔣 Efficient Performance

🔣 Cross-Framework Unity


🔠 A simple proposed signal example:

const counter = new Signal.State(0);

// Read the value of Signal
console.log(counter.get()); // Output: 0

// Change the value of Signal
counter.set(1);
console.log(counter.get()); // Output: 1

⚠️ If you have experience using ref in VueJS, understanding Signals should pose no challenge.

⚠️ The purpose of using Signals is to update only the dependencies in the DOM and execute subscriber functions in JavaScript.

➖➖➖➖➖➖
📱 GitHub Proposal Repo: [here]
📚 Article: [here]
📱 YouTube Video: [here]
➖➖➖➖➖➖
#JavaScript #EcmaScript


🖥 Follow @devDastan for more content.

✨ Software Engineering Quote

💬 In software development, “perfect” is a verb, not an adjective. There is no perfect process. There is no perfect design. There are no perfect stories. You can, however, perfect your process, your design, and your stories.

🔣 Kent Beck

➖➖➖➖➖➖
#Agile #softwareEngineering

🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What is the output of this code?

function Car() {
  this.make = 'Lamborghini';
  return { make: 'Maserati' };
}

const myCar = new Car();
console.log(myCar.make);

✔️ Answer:
When a constructor function is invoked with the new keyword, it creates an object and sets this to refer to that object. If the constructor function doesn't explicitly return anything, it defaults to returning the newly created object. In the case of the constructor function Car, it explicitly returns a new object with 'make' set to "Maserati", overriding the default behavior. Therefore, when new Car() is called, the returned object is assigned to myCar, resulting in the output "Maserati" when myCar.make is accessed.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

📱 Promise.all vs Promise.allSettled


🕯 Promise.all and Promise.allSettled are two methods provided by JavaScript's Promise API, but they have different behaviors and use cases.

🔣 Promise.all
Waits for all promises to resolve or rejects immediately if any promise rejects. Resolves with an array of resolved values.


🔣 Promise.allSettled
Waits for all promises to settle (resolve or reject) and always resolves. Returns an array of objects representing the outcomes of the promises, including their status and value/reason.


➖➖➖➖➖➖
📚 Article: [here]
📱 YouTube Video: [here]
📱 Image Credit (on X.com): [here]
➖➖➖➖➖➖
#JavaScript


🖥 Follow @devDastan for more content.

🏛 API Architecture Style


🗣️ Architecture styles define how different components of an API interact with one another. As a result, they ensure efficiency, reliability, and ease of integration with other systems by providing a standard approach to designing and building APIs.

🗣️ You can check out the different types of API architecture styles in the attached image.


➖➖➖➖➖➖
📚 Article: [here]
📱 YouTube Video: [here]
➖➖➖➖➖➖
#systemDesign #api


🖥 Follow @devDastan for more content.

🟦 TypeScript Tips and Tricks Series (Part 1)

🔣 Template Literal Types:

Build complex string types using dynamic expressions within backticks.

type Endpoint = `/users/${number}`;

const validEndpoint: Endpoint = '/users/123';

// const invalidEndpoint: Endpoint = '/posts/456'; // Error: Type '"/posts/456"' is not assignable to type 'Endpoint'

✨ Use Case:
representing API responses, URL patterns, or validation formats.

➖➖➖➖➖➖
#TypeScript


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What's the value of num?

const num = parseInt('7*6', 10);

🔤 42
🔤 "42"
🔤 7
🔤 NaN

✔️ Answer:
parseInt returns only the first number in the string. Depending on the radix (the second argument specifying the number type: base 10, hexadecimal, octal, binary, etc.), parseInt validates the characters in the string. If it encounters an invalid character, it stops parsing and ignores the rest.

For example, in "78", only "7" is valid, so it parses it into the decimal 7, ignoring the "" and "8". Thus, num now equals 7.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.