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

🖼️ Angular 18 Release Changes!


🔣 Release Highlights:

✅ Experimental support for zoneless change detection.
✅ Angular.dev is the new home for Angular developers.
✅ Material 3, deferrable views, built-in control flow are now stable.
✅ Server-side rendering improvements: i18n hydration support, better debugging, event replay.

🔣 Other Release Features:

✅ Zoneless Change Detection
✅ Native await for Zoneless Apps
✅ Components Support Zoneless
✅ Signal APIs in Developer Preview
✅ Firebase App Hosting


➖➖➖➖➖➖
🖼️ My LinkedIn Post With Full Details: [here]
🥳 Medium Article: [here]
🖼️ YouTube Video: [here]
➖➖➖➖➖➖
#angular


🖥 Follow @devDastan for more content.

✨ Software Engineering Quote

💬 Even the most complex systems are inherently simple when viewed from the right angle.

🔣 Eliyahu M. Goldratt

➖➖➖➖➖➖
#softwareEngineering #systemDesign

🖥 Follow @devDastan for more content.

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