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

🖼️ React State vs Refs


🔣 State: For data that changes the UI. Updates trigger re-renders.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

🔣 Refs: For directly accessing DOM elements or storing mutable values. Don't trigger re-renders.

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

✨ Keep in mind that:

- State is immutable
- Avoid reading/writing refs during rendering
- Both persist data and have different update behaviors

➖➖➖➖➖➖
📚 Article: [here]
➖➖➖➖➖➖
#JavaScript #ReactJS


🖥 Follow @devDastan for more content.

🟦 TypeScript Tips and Tricks Series (Part 2)

❤ Read Previous Parts: [part 1]

🔣 Higher-Order Types (HOT):

Utilize functions that take and return types, enabling powerful abstractions like generic type predicates and type builders.

type IsStringLiteral<T> = T extends string ? true : false;

function logIfString<T>(value: T): T extends string ? void : T {
  if (IsStringLiteral<T>) {
    console.log(value);
  }
  return value;
}

✨ Use Case:
Creating dynamic component that have multiple states and behaviors.

➖➖➖➖➖➖
#TypeScript


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What's the output?

const user = {
  email: "mail@hmouasvi.dev",
  updateEmail: email => {
    this.email = email;
  }
}

user.updateEmail("new@hmousavi.dev")
console.log(user.email)

🔤 mail@hmousavi.dev
🔤 new@hmousavi.dev
🔤 undefined
🔤 ReferenceError

✔️ Answer:
The updateEmail function is an arrow function, and is not bound to the user object. This means that the this keyword is not referring to the user object, but refers to the global scope in this case. The value of email within the user object does not get updated. When logging the value of user.email, the original value of mail@hmousavi.dev gets returned.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.

✨ Software Engineering Quote

💬 Programs must be written with the idea that they will be read by people, and only incidentally for machines to execute.

🔣 Harold Abelson

➖➖➖➖➖➖
#Agile #softwareEngineering

🖥 Follow @devDastan for more content.

🖼️ CSS Selectors Cheat Sheet

🔣 At its core, CSS is about selecting elements from the DOM to apply styles to them.

✨ Child and Sibling Combinators (+ , ~, >)

/* Child combinator: selects direct children of an element */
.parent > .child {
 color: red;
}

✨ Pseudo-Classes (:nth-child(), :nth-of-type(), :not(), :focus, :hover):

.faq-item:nth-of-type(odd) .faq-question{
 background-color: #fff; /* For odd items
 */
} 

✨ Structural Pseudo-Classes (:first-child, :last-child, :empty, :only-child):

.faq-item:first-of-type .faq-question {
  border-top: 2px solid #007BFF; 
}

✨ Pseudo-Elements (::before, ::after, ::first-letter, ::first-line):

/* ::after used to display "+" symbol */
.faq-question::after {
  content: '+';
  color: #00ad8f;
  font-size: 1.4em;
}

✨ Attribute Selectors ( [attr^="value"], [attr$="value"], [attr*="value"]):

.faq-item[data-category^="important"] .faq-question {
  color: #E91E63; 
}

✔️ We will learn more about the use case of each CSS selector in advance later!

➖➖➖➖➖➖
📚 Article: [here]
📱 Image Credit: [here]
➖➖➖➖➖➖
#css


🖥 Follow @devDastan for more content.

🟦 TypeScript Tips and Tricks Series (Part 3)

❤ Previous Parts: [part 1 | Part 2]

🔣 Conditional Types:

Shape types based on conditions, creating dynamic type hierarchies. For example, defining a type that’s an object with specific properties depending on a provided string value.




type Config = {
  type: 'basic' | 'advanced';
};

type BasicConfig = Config & { type: 'basic' };
type AdvancedConfig = Config & { type: 'advanced' };

function configure(config: Config): void {
  if (config.type === 'basic') {
    console.log('Applying basic configuration');
  } else {
    console.log('Applying advanced configuration');
  }
}

✨ Use Case:
Useful for strategy patterns and implementing high-level business logic.

➖➖➖➖➖➖
#TypeScript


🖥 Follow @devDastan for more content.

🔐 Best Practices For Building Secure FrontEnd Applications

❤ Read Previous Parts: [OSI Layers Review | Common Security Attacks]

✔️ Cultivate a security-focused culture
🔸 Involve all stakeholders in mapping security risks and protections.
🔸 Develop a strong security culture affecting daily procedures and offerings.

✔️ Implement Input/Output Sanitization Strategy
🔸 Validate incoming data at each application stage.
🔸 Use libraries like dom-purify for quicker security implementation.
🔸 Refer to OWASP cheat sheet series for input/output sanitization.

✔️ Regularly examine components and execute a Content Security Policy (CSP)
🔸 Use Software Composition Analysis (SCA) for third-party library security.
🔸 Implement Content-Security-Policy (CSP) for front-end security.

We will learn more about the tools we can use to check our website's security!

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


🖥 Follow @devDastan for more content.

👨‍💻 Best Practices for Code Review


🗣️ Review fewer than 400 lines of code at a time

🗣️ Take your time. Inspection rates should under 500 LOC per hour

🗣️ Foster a positive code review culture

➖➖➖➖➖➖
📚 Article: [here]
📱 YouTube Video: [here]
➖➖➖➖➖➖
#softwareEngineering #softSkill


🖥 Follow @devDastan for more content.

✨ Software Engineering Quote

💬 Code is like humor. When you have to explain it, it’s bad.

🔣 Cory House

➖➖➖➖➖➖
#softwareEngineering #programming

🖥 Follow @devDastan for more content.

🔺 Code Review Pyramid

❤ Read Previous Parts: [Code Review Best Practices]

🗣️ Each layer of Code Review Pyramid is a characteristic to which the reviewed code must conform.
The bottom layer is the correctness of the code, which is of prime importance.


1️⃣ Code Style
🟢 Consistent naming and formatting.
🔘 Avoid duplication and unused imports.
🟢 Use automatic code formatting tools.

2️⃣ Tests
🟢 Review test cases for coverage.
🔘 Automate testing using plugins.

3️⃣ Documentation
🟢 Keep documentation comprehensive and up-to-date.

4️⃣ Implementation Semantics
🟢 Ensure code meets requirements, is efficient, and secure.
🔘 Check for error handling, resource management, concurrency, and third-party libraries.
🟢 Avoid code smells and anti-patterns.

5️⃣ API Semantics
🟢 Ensure API design follows best practices and provides a clear interface.
🔘 Check for consistency, versioning, error messages, pagination, filtering, and performance.
🟢 Ensure no internal logic leakage, no breaking of existing API, and proper authentication/authorization.

⚠️ Code review shouldn’t proceed to upper layers until the bottom layer, correctness, gets approved.


➖➖➖➖➖➖
📚 Article: [here]
🥳 Medium Article: [here]
➖➖➖➖➖➖
#softwareEngineering #softSkill


🖥 Follow @devDastan for more content.

📱 JavaScript Quiz

⁉️ What's the output?

const box = { x: 10, y: 20 };

Object.freeze(box);

const shape = box;
shape.x = 100;

console.log(shape);



🔤 { x: 100 , y: 20 }
🔤 { x: 10, y: 20 }
🔤 { x: 100 }
🔤 ReferenceError

✔️ Answer: 🔤
Object.freeze prevents adding, removing, or modifying properties of an object (unless the property’s value is another object).

When we create the variable shape and set it equal to the frozen object box, shape also refers to a frozen object. You can check if an object is frozen using Object.isFrozen. In this case, Object.isFrozen(shape) returns true.

Since shape is frozen and x is not an object, we cannot modify x. Therefore, x remains 10, and { x: 10, y: 20 } gets logged.

➖➖➖➖➖➖
#JavaScript #Quiz


🖥 Follow @devDastan for more content.