The Journey of #100DaysOfCode (@Nisrine_bg)

Nisrine_bg · 2024-07-25T05:40:56.279Z

Day 15: Essential Soft Skills Needed in the Tech Field

1. Communication

Verbal and Written Communication: Clearly expressing ideas, requirements, and feedback.
Active Listening: Understanding and considering others’ perspectives and inputs.
Technical Writing: Documenting code, processes, and user guides effectively.

2. Problem-Solving

Analytical Thinking: Breaking down complex problems into manageable parts.
Creativity: Finding innovative solutions to technical challenges.
Decision-Making: Making informed choices quickly and confidently.

3. Teamwork and Collaboration

Collaboration: Working effectively within a team to achieve common goals.
Conflict Resolution: Handling disagreements and finding mutually beneficial solutions.
Empathy: Understanding and valuing others’ viewpoints and contributions.

4. Adaptability and Flexibility

Adaptability: Quickly adjusting to new technologies, processes, and environments.
Resilience: Staying positive and productive in the face of challenges and setbacks.
Time Management: Prioritizing tasks and managing time efficiently.

5. Critical Thinking

Evaluation: Assessing situations, processes, and tools critically.
Strategic Thinking: Planning long-term solutions and improvements.
Attention to Detail: Ensuring accuracy and precision in work.

6. Leadership and Management

Leadership: Guiding and motivating a team towards success.
Project Management: Organizing tasks, timelines, and resources effectively.
Delegation: Assigning tasks appropriately to team members.

7. Continuous Learning

Curiosity: Seeking out new knowledge and staying updated with industry trends.
Open-mindedness: Being open to new ideas and approaches.
Self-Motivation: Taking initiative to improve skills and knowledge.

8. Interpersonal Skills

Networking: Building and maintaining professional relationships.
Mentoring: Guiding and supporting junior team members.
Persuasion: Influencing and convincing others effectively.

9. Customer Orientation

User-Centric Mindset: Focusing on the needs and experiences of the end-users.
Service Orientation: Providing excellent support and service to clients and users.
Feedback Handling: Accepting and utilizing feedback constructively.

10. Ethical Understanding

Integrity: Upholding honesty and strong moral principles.
Accountability: Taking responsibility for one’s actions and their impact.
Confidentiality: Protecting sensitive information and respecting privacy

These soft skills complement technical expertise and are crucial for success in the tech field, enhancing your ability to work well with others, adapt to changing environments, and continuously improve.

lebanon-mug 100daysofcode

20171018softskills

Amir_BouGhanem · 2024-07-25T06:45:32.701Z

I love the information you’ve been putting out!!

Nisrine_bg · 2024-07-26T20:34:17.773Z

Day 16: That's Why You shouldn't Deploy on Fridays!

Why do developers deploy on Friday? Because they love living on the edge! Who needs a relaxing weekend when you can spend it frantically fixing bugs and answering angry user emails?

Screenshot 2024-07-26 232646501×520 230 KB

Nisrine_bg · 2024-07-27T20:20:19.410Z

Day 17 of #100daysofcode : Mongoose: Streamlined Data Modeling for MongoDB and Node.js

Mongoose is a powerful Object Data Modeling (ODM) library for MongoDB and Node.js. It provides a straightforward, schema-based solution to model application data, including built-in type casting, validation, query building, and business logic hooks.

Mongoose is used to define schemas for data models and to interact with MongoDB databases in a more structured and organized manner.

By using Mongoose, you can ensure that your data follows a consistent structure, and you can leverage its robust API to perform CRUD operations efficiently.

Whether you’re building small applications or complex systems, Mongoose simplifies data manipulation and enhances code maintainability.

lebanon-mug 100daysofcode

1_OYpEW3PMltGC2MVvJ-5QTw1050×500 34.9 KB

Nisrine_bg · 2024-07-28T16:44:43.052Z

Day 18: Working with CSS

I understand how working with CSS can be frustrating, especially for developers who prefer backend and logic-focused tasks. However, here’s a trick to help you become more comfortable with CSS:

Start by identifying the HTML tags and requirements needed in the provided design.
When writing CSS, think broadly:
- Begin with the body, then move on to forms, and finally handle inputs, buttons, etc.
- Always follow a hierarchical approach to ensure you cover the entire screen.
- Don’t worry about memorizing CSS selectors, as most designs share basic and common CSS patterns.

lebanon-mug 100daysofcode

Screenshot 2024-07-28 185940935×841 21.3 KB

Nisrine_bg · 2024-07-29T20:50:19.566Z

Day 19: Mastering Flexbox: Align and Distribute Elements with Ease

Flexbox, or “flex,” is a CSS layout module that allows you to design complex layouts with ease and precision.

Flex is used to align and distribute space among items in a container, even when their size is unknown or dynamic.

The key feature of flexbox is its ability to alter the width, height, and order of items to best fill the available space.

lebanon-mug 100daysofcode

image1914×733 31.2 KB

Nisrine_bg · 2024-07-30T19:13:03.810Z

Day 20: Key CSS Principles

Box Model: Understand how elements are structured in CSS with properties like width, height, padding, border, and margin, which collectively define the space an element occupies on the page.
Selectors and Specificity: Master CSS selectors to efficiently target elements based on their attributes, classes, IDs, and relationships. Understand specificity to resolve conflicts when multiple styles apply to the same element.
Responsive Design: Learn techniques like media queries, flexbox, and grid layout to create responsive designs that adapt to different screen sizes and devices, ensuring a consistent user experience across platforms.

Middle East - Africa lebanon-mug 100daysofcode

Nisrine_bg · 2024-07-31T19:43:06.735Z

𝗗𝗮𝘆 21 - Anonymous Functions in JavaScript

Sharing @Amir_BouGhanem post on Anonymous Functions:

Anonymous functions are functions that are not identified by a variable name, or in other words, of unknown name. They offer concise, easy to read code, and are recommended over regular functions for short term-use. Anonymous functions are wonderful when paired with functions that are executed upon declaration, such as with put, patch, post and all server-side requests in addition to timeout functions, and much more!

c0a8124c025f0c23d2bc26d6548240969b33f062_2_673x750673×750 105 KB

Nisrine_bg · 2024-08-01T20:14:01.941Z

Day 22: Implementing CSS Animations

CSS animations allow you to add smooth, interactive effects to your web elements. You can define animations using @keyframes and apply them with the animation property. Transitions offer another way to animate changes to properties smoothly.

Example: Bouncing Ball Animation

Here’s a short example of creating a bouncing ball animation using CSS.

CSS Animation Example

    .ball {
        width: 50px;
        height: 50px;
        background-color: #3498db;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        animation: bounce 2s infinite;
    }

    @keyframes bounce {
        0% {
            top: 0;
        }
        50% {
            top: 200px;
        }
        100% {
            top: 0;
        }
    }
</style>

Nisrine_bg · 2024-08-02T19:37:20.216Z

Day 23: Implementing CSS Transitions

CSS transitions allow you to smoothly change the style of an element from one state to another over a specified duration. This creates a more interactive and visually appealing experience.

Example: Button Hover Effect

Here’s a short example of creating a smooth color and size transition on a button when hovered over.

CSS Transition Example

<style>
    .button {
        background-color: #0000ff ;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .button:hover {
        background-color: #2980b9;
        transform: scale(1.1);
    }
</style>

Hover Me!

Nisrine_bg · 2024-08-03T20:14:50.746Z

Day 24: Implementing CSS Preprocessors

CSS preprocessors like Sass, LESS, and Stylus extend the capabilities of CSS by introducing variables, nesting, functions, and more. This helps create more maintainable, scalable, and reusable CSS code.

Example: Using Sass to Create a Themed Button

Below is an example of how to implement a button style using Sass:

// Variables
$primary-color: #3498db;
$secondary-color: #2980b9;
$font-color: white;
$padding: 10px 20px;
$border-radius: 5px;

// Mixin for button styles
@mixin button-styles($bg-color, $hover-color) {
background-color: $bg-color;
color: $font-color;
padding: $padding;
border: none;
border-radius: $border-radius;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
    background-color: $hover-color;
}
}

// Button class using the mixin
.button {
@include button-styles($primary-color, $secondary-color);
}

Nisrine_bg · 2024-08-04T21:06:15.576Z

Day 25: Implementing Cross-Browser Compatibility

Cross-browser compatibility ensures that your website or web application looks and functions consistently across different web browsers. Given the variations in how browsers interpret CSS, following best practices and using specific techniques can help maintain compatibility.

Best Practices for Cross-Browser Compatibility

Use a CSS Reset or Normalize.css:

Browsers have different default styles, so using a CSS reset or Normalize.css can help standardize the styling across all browsers.

Vendor Prefixes:

Some CSS properties may require vendor prefixes (like -webkit-, -moz-, -ms-, -o-) for compatibility with different browsers.

Feature Detection with Modernizr:

Use tools like Modernizr to detect whether the user’s browser supports certain CSS features and apply fallbacks accordingly.

Graceful Degradation and Progressive Enhancement:

Design your site to work in older browsers first (graceful degradation) and then add enhanced features for modern browsers (progressive enhancement).

Use Autoprefixer:

Automatically add necessary vendor prefixes to your CSS by using tools like Autoprefixer, which integrates with many build systems and preprocessors.

Test on Multiple Browsers and Devices:

Regularly test your site on different browsers and devices to identify and fix compatibility issues early.

Avoid Browser-Specific Hacks:

Instead of relying on CSS hacks to target specific browsers, use feature detection and progressive enhancement techniques.

Example: Implementing Vendor Prefixes for Flexbox

Here’s an example of using vendor prefixes to ensure cross-browser compatibility for a flexbox layout.

/* CSS Reset */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Flexbox Layout with Vendor Prefixes /
.container {
display: -webkit-box; / Old Safari, iOS /
display: -moz-box; / Old Firefox /
display: -ms-flexbox; / IE 10 /
display: -webkit-flex; / Newer Safari /
display: flex; / Standard */
justify-content: space-around;
}

.item {
background-color: #3498db;
color: white;
padding: 20px;
margin: 10px;
border-radius: 5px;
text-align: center;
}

Nisrine_bg · 2024-08-05T19:41:28.880Z

Day 26: Working with variables in JS

In JavaScript, variables are used to store data values that can be referenced and manipulated throughout your code. You can declare variables using `var`, `let`, or `const`. `var` is function-scoped, while `let` and `const` are block-scoped, with `const` being used for values that shouldn’t change.

Here’s a simple example:

let name = “Alice”;
const age = 25;
var isStudent = true;

name = “Bob”; // Allowed because ‘let’ allows reassignment
// age = 26; // Error: Assignment to constant variable

Nisrine_bg · 2024-08-07T11:01:26.743Z

Day 27: DOM Manipulation

DOM Manipulation in JavaScript allows you to interact with and modify HTML elements dynamically. You can select elements using methods like getElementById, querySelector, and getElementsByClassName, then change their content, style, or attributes. This is essential for creating interactive web pages.

document.getElementById(“myButton”).addEventListener(“click”, function() {
document.getElementById(“myText”).innerText = “Hello, World!”;
});

Nisrine_bg · 2024-08-07T19:38:48.169Z

Day 28: Event Handling in JS

Event handling in JavaScript involves capturing and responding to user interactions such as clicks, keyboard inputs, and mouse movements. By attaching event listeners to elements, you can define functions that execute when specific events occur, enhancing interactivity.

document.addEventListener(“keydown”, function(event) {
if (event.key === “Enter”) {
alert(“Enter key pressed!”);
}
});

In this example, an event listener is added to the entire document, triggering an alert when the Enter key is pressed. Event handling is crucial for making web pages responsive to user actions.

Nisrine_bg · 2024-08-08T18:51:53.085Z

Day 29: Asynchronous JavaScript

Asynchronous JavaScript allows you to handle operations like data fetching, file loading, or timers without blocking the main execution thread. You can manage asynchronous tasks using callbacks, promises, or the more modern async/await syntax, making your code cleaner and easier to understand. Here’s an example using async/await:

async function fetchData() {
let response = await fetch(‘https://api.example.com/data’);
let data = await response.json();
console.log(data);
}

fetchData();

In this example, the fetchData function asynchronously fetches data from an API and logs it to the console once the data is available, ensuring smooth and responsive user experiences.

Nisrine_bg · 2024-08-09T20:16:08.656Z

Day 30: Functions in JS

Functions in JavaScript are reusable blocks of code that can accept inputs, perform actions, and return outputs. Understanding scope—global, local, and block—is crucial, as it determines where variables are accessible within your code. Closures occur when a function retains access to its outer scope, even after the outer function has finished executing.

function outerFunction() {
let outerVar = “Hello”;
function innerFunction() {
console.log(outerVar); // Accesses outerVar from outer scope
}
return innerFunction;
}
const closure = outerFunction();
closure(); // Outputs: Hello

Nisrine_bg · 2024-08-11T18:50:35.896Z

Day 31: Array Methods

JavaScript provides powerful array methods like map, filter, and reduce to manipulate and transform data efficiently. map creates a new array by applying a function to each element, filter returns a new array with elements that meet a specific condition, and reduce combines all elements into a single value based on a function.

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]
const even = numbers.filter(num => num % 2 === 0); // [2, 4]
const sum = numbers.reduce((total, num) => total + num, 0); // 10

These methods help you perform common tasks like transforming, filtering, and aggregating data in a clean and concise way.

Nisrine_bg · 2024-08-11T19:00:43.405Z

Day 32: Object-Oriented Programming (OOP) in JavaScript

Object-Oriented Programming (OOP) in JavaScript leverages prototype-based inheritance, allowing you to create reusable and organized code structures. By defining classes, you can create objects with shared properties and methods, and use inheritance to extend these classes with additional functionality.

class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(${this.name} makes a sound.);
}
}

class Dog extends Animal {
speak() {
console.log(${this.name} barks.);
}
}

const myDog = new Dog(“Rex”);
myDog.speak(); // Outputs: Rex barks.

In this example, Dog inherits from Animal, showcasing how OOP in JavaScript enables code reuse and logical structure through classes and inheritance.

system · 2025-01-07T15:50:25.174Z

This topic was automatically closed after 180 days. New replies are no longer allowed.