Vigo's Weekly - Issue #06
📒Articles
CSS
CSS Tricks To Master The clip-path Property
In this article, I will share a few techniques I rely on when using the polygon() value of clip-path. Techniques that can make the process of creating CSS shapes easier.
Creating Wavy Circles with Fancy Animations in CSS
This article is a follow-up where we will create a flower like shape and also introduce some fancy animations.
Using The Upcoming CSS When/Else Rules
CSS is always evolving, and new proposed rules provide extra features that you should be aware of. This article will explain two new expansions, @when and @else, so that you can be prepared.
JavaScript
All About URL Encoding And Decoding In JavaScript
Encoding is like changing these symbols into something everyone can understand. It’s important because some URL symbols have special meanings and can make things confusing if not changed correctly.
The Module System in Javascript
In the ever-evolving landscape of JavaScript development, mastering the module system is crucial for creating scalable, maintainable, and efficient code, transforming how developers structure and share their projects across the modern web.
🧰Curated Tools
Sponsored by Handpicked Tools
Mermaid
JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
Admin js
Open-Source Admin Panel for your Node.js Application
Penpot
Penpot is the web-based open-source design tool that bridges the gap between designers and developers.
🛠Code Corner
What is a spread operator?
The spread operator in JavaScript is a useful syntax for adding elements to an array, combining arrays into one larger one, spreading an array inside the arguments of a function, and more.
// Concatenating arrays and objects
let arr1 = [1,2,3];
let arr2 = [4,5];
let newArray = [...arr1,...arr2];
console.log(newArray);
// Output: [ 1, 2, 3, 4, 5 ]
// Copying array elements
let arr = ["a","b","c"];
let newArray = [...arr];
console.log(newArray);
// Output: ["a", "b", "c"]
// Expanding arrays
let arr = ["a","b"];
let newArray = [...arr,"c","d"];
console.log(newArray);
// Output: ["a", "b", "c", "d"]
// Merging objects
const userBasic = {
name: "Arun",
age: 32,
};
const userMoreInfo = {
country: "India",
city: "Chennai",
};
const user = {... userBasic, ... userMoreInfo};
// Output: { name: "Arun", age: 32, country: "India", city: "Chennai" }