The Code Dose

Ever wondered how to achieve that smooth scrolling effect that automatically snaps to the nearest section? 🧐 Well, you can achieve that with just HTML & CSS! 🎯 What is the scroll snap effect? The scroll snap effect ensures a smooth and controlled scrolling experience on a webpage. It automatically aligns the scroll position to predefined points, like a section's start, center, or end, enhancing navigation with visually pleasing and predictable behavior. It’s implemented using the `scroll-snap-type` and `scroll-snap-align` properties. The `scroll-snap-align` property defines the snap position, it can be `none`, `start`, `center`, or `end`. And the `scroll-snap-type` CSS property sets how strictly snap points are enforced on the scroll container in case there is one. For example: ➡️ This always snaps to the center of the container on the Y-axis: ``` .container { scroll-snap-type: y mandatory; } .child { scroll-snap-align: center; } ```

What will be the output of the following JS code?

What will be the output of this JS code? Hint: https://lnkd.in/dqKZTVAq

Amusing terms that you might come across as a software engineer part 2: 🪄Magic Number - It is an arbitrary numerical value that appears in code without any explained context or meaning. 🍝 Spaghetti Code - Commonly used to refer to code that is hard to understand or maintain. 👃Code Smell - A code smell is an indication that there is a problem in the fundamental design of the code. 🐤 Rubber Duck Debugging - It is the action of explaining a code problem in natural language to a rubber duck with hopes of identifying the issue while you explain it. 🔥Hotfix - A hotfix is a small and quick software update to resolve a bug. 🪒Yak Shaving - It refers to a situation when in order to achieve a goal, you must perform a series of seemingly unrelated tasks.

Here are some useful git aliases to be more productive in your daily git workflows! How to add aliases in .gitconfig: https://lnkd.in/d7Nj-UAX

What will be the output of this JavaScript code?

Amusing terms that you might come across as a software engineer 😄

Have you ever wondered how `console.log` accepts a variable number of arguments? If you’ve worked with JavaScript, then you must have used the console.log method. The console.log method simply just takes n number of arguments and logs them to the console: console.log(n1, n2, n3, n4.....n) But have you wondered how it handles these variable number of arguments? Well, such functions are also known as variadic functions and you can create them in JavaScript using the rest operator `...`. Let’s take an example of A variadic function that accepts n numbers as arguments and returns their sum. First, create a new function that uses the rest operator to combine all of its arguments into an array. This allows you to pass indefinite number of arguments to a function: function sum(...args) { console.log(args) } sum(1, 2, 3, 4, 5, 6); sum(0); sum(10, 20, 30); // OUTPUT [1, 2, 3, 4, 5, 6] [0] [10, 20, 30] You can see the value of the args is an array for these three function calls. And now you can process this array accordingly to return the result: function sum(...args) { // assuming all args are valid numbers return args.reduce((total, n) => total + n) } sum(1, 2, 3, 4, 5, 6); sum(0); sum(10, 20, 30);

Craft a winning resume using these tips!

This accordion or disclosure widget that you’re seeing was built with just HTML and CSS, no JavaScript! If you’re wondering how’s it possible, then you need to know about the <detail> and <summary> elements in HTML. Both of them together are used create this disclosure or accordion UI. The details tag contains some elements which are only visible only when the widget is toggled into an "open" state. By default only the label is visible next to the triangle icon. When you click on it, the information is revealed. <details> <p>Hello, World!</p> </details> By default, the text that’s displayed as the label is “Details”. You can customise it by using the <summary> element: <details> <summary>Open me</summary> <p>Hello, World!</p> </details> You can also use JavaScript to programmatically open and close the widget by setting/removing its open attribute. Though unfortunately there's no built-in way to animate the transition between open and closed yet. You can check out the CodePen for this here - https://lnkd.in/drGPmmNy