Forem: Ahmed Zougari

Add TailwindCSS IntelliSense and Prettier Plugin Support for TS/JS Files

Ahmed Zougari — Sun, 31 Aug 2025 22:05:09 +0000

When you're working with TailwindCSS, sometimes you need to write class strings in non-TSX files, like exporting variants when using cva (class-variance-authority.

The problem is that you get neither Tailwind IntelliSense nor class sorting from the Prettier Tailwind plugin.

What is the cn utility?

If you're familiar with shadcn, you already know it; if not, the snippet below explains it.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Add TailwindCSS Intellisense to typescript files

VSCode: In your settings.json, add this line (you can include any name for your functions).

{
  "tailwindCSS.classFunctions": ["cva", "cn"]
}

NeoVim: Make sure you have nvim-lspconfig installed

require 'lspconfig'.tailwindcss.setup({
  settings = {
    tailwindCSS = {
      classFunctions = { "cva", "cn" },
    },
  },
})

Prettier TailwindCSS Plugin Support

Simply add this to your existing Prettier config file

{
  "plugins": [
    "prettier-plugin-tailwindcss"
  ],
  "tailwindFunctions": ["cva", "cn"]
}

Bonus: Show the added utilities with the IntelliSense suggestions

If you're creating utilities in your CSS file, and they aren't showing with IntelliSense, instead of doing it like this:

@layer utilities {
  .bg-gradient {
    background: linear-gradient(180deg, #f5f5ff 73%, #e0e0ff 100%);
  }
  .txt-preset-1 {
    @apply text-[52px] font-bold leading-[140%] tracking-[-2px];
  }

  .txt-preset-1-mobile {
    @apply text-[46px] font-bold leading-[120%] tracking-[-2px];
  }

  .txt-preset-2 {
    @apply text-[40px] font-bold leading-[120%] tracking-[-0.3px];
  }
}

Do this; it not only shows in IntelliSense but also works with variants like hover, focus, and lg:.

@utility bg-gradient {
  background: linear-gradient(180deg, #f5f5ff 73%, #e0e0ff 100%);
}
@utility txt-preset-1 {
  @apply text-[52px] font-bold leading-[140%] tracking-[-2px];
}
@utility txt-preset-1-mobile {
  @apply text-[46px] font-bold leading-[120%] tracking-[-2px];
}

Boost Your Productivity with These 25 VS Code Extensions

Ahmed Zougari — Mon, 03 Apr 2023 12:30:09 +0000

VS Code is a popular open-source code editor that supports a wide range of extensions to enhance its functionality. In this blog, we will explore some of the best extensions available to improve your coding experience and productivity.

1. Live Server

If you're working on a project HTML/CSS/JavaScript only, this extension Launches a local development server with a live reload feature (on file change).

Make sure you're opening the folder not the file in Visual Studio Code.
Open your HTML file and press alt+L+alt+O.

2. HTML End Tag Labels

When you work on a static website without any JavaScript framework like React, you may have a long HTML file and you get confused when you see the nested <div>. This extension comes in handy because it shows you at the end of the tag the Id and the Class for the closed tag.

3. Auto Rename Tag

Automatically rename paired HTML/XML.

4. HTML CSS Support

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.

5. Material Icon Theme

This extension provides beautiful icons for your files and folder like the image below.

6. Fluent Icons

This extension offers a set of icons based on Microsoft's Fluent design language. It enhances the appearance of the code editor by adding these icons to various parts, including the file explorer, providing a more visually appealing and consistent interface.

7. CodeSnap

A tool that allows developers to take screenshots of their code snippets. With this extension, developers can easily capture an image of their code and include it in their documentation, and blog posts...

Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for CodeSnap.
Select the code you'd like to screenshot.
Adjust the width of the screenshot if desired.
Click the shutter button to save the screenshot to your disk.

8. Code Spell Checker

This spell checker is an essential tool for catching spelling mistakes in both code and documents. It is designed to be highly accurate, reducing the number of false positives to a minimum. You can trust its ability to help you produce typo-free work.

9. VSCode Dimmer

The "Dimmer" extension helps you focus on selected code by reducing the opacity of text outside of selections. This extension supports multiple selections, making it an excellent tool for working on large code files. You can set a keybinding for "dimmer.ToggleDimmer"

Search for "Toggle Dimmer" in the command palette, or use the "dimmer.enabled" setting to toggle the extension on and off.

By default, the extension will dim all lines that do not have an extension. You can use the "dimmer.context" setting to leave a specific number of lines before and after the un-dimmed lines.

You can also set the value to a negative number to dim everything except the selection. This extension comes in handy when you are working with long code files and need help tracking your current position.

10. Footsteps

The ability to jump between different parts of your code is a crucial aspect of modern software development. With the "highlight and fade" functionality provided by this VSCode extension, you can keep track of where you are in your code, and which lines you have recently edited.

As you move away from a particular line, it will gradually fade, making it easier to see which lines are currently relevant to your work. Additionally, the extension supports quick navigation between lines using keyboard shortcuts, such as ctrl+alt+left and ctrl+alt+right.

By using this extension to keep your place when navigating your code, you can focus on the task at hand and get more done in less time.

11. Path Intellisense

Visual Studio Code plugin that autocompletes filenames.

12. IntelliCode

Visual Studio IntelliCode is a suite of AI-powered tools that improve developer productivity with features like AI-assisted IntelliSense and statement completion, code formatting, and style rule inference. These capabilities help developers write code faster, more accurately, and in compliance with best practices.

Alternative:

GitHub Copilot
Tabnine AI

13. Import Cost

This VSCode extension allows you to easily check the size of any imported packages directly in the editor.

14. Comment Anchors

Comment Anchors is a VSCode extension that lets you add bookmarks to your code by placing anchors within comments or strings. These anchors can be used to track TODOs, write notes, create foldable sections, or build a simple navigation system that makes it easier to navigate your files.

The extension offers an easy-to-use sidebar for viewing anchors in the current file or across the entire workspace. With many configuration options available, Comment Anchors can be customized to fit your personal workflow and increase your productivity.

Alternative:

Todo Tree
TODO Highlight
Better Comments

15. Image preview

Shows an image preview in the gutter and on hover.

15. CSS Peek

HTML and ejs code editing will get enhanced by this extension, which adds support for "Go To Definition" and "Go To Symbol" in Workspace. It also identifies Classes and IDs in CSS/sass/less strings within the source code.

16. Turbo Console Log

This extension makes debugging much easier by automating the operation of writing meaningful log messages.

Selecting or hovering the variable which is the subject of the debugging (Manual selection will always take over the hover selection)
Pressing ctrl + alt + L (Windows) or ctrl + option + L (Mac)

16. Quokka.js

Quokka.js is a productivity tool for developers, designed to facilitate rapid prototyping of JavaScript/TypeScript. As you type, the runtime values are constantly updated and displayed alongside your code in your IDE.

17. SCSS IntelliSense

SCSS IntelliSense (Variables, Mixins, and Functions) for all files in the workspace.

18. Live Sass Compiler

There are various methods to compile SASS code, such as using SASS CLI. However, if you prefer a faster approach, this extension can come in handy. It is a VSCode extension that assists you in compiling/transpiling your SASS/SCSS files into CSS files in real-time and with live browser reload.

19. GitLens

GitLens enhances the capabilities of Git within VS Code, revealing previously undiscovered insights within each repository. It allows you to quickly view code authorship details through Git blame annotations and CodeLens, effortlessly navigate and investigate Git repositories, obtain valuable information through comprehensive visualizations and robust comparison commands, and much more.

20. ES7+ React/Redux/React-Native snippets

ES7+ React/Redux/React-Native Snippets is a popular extension for Visual Studio Code that provides a collection of code snippets to help developers write code faster when working with React, Redux, and React Native. The extension includes snippets for common tasks such as creating new components, adding event handlers, and managing Redux state.

21. Sapling

A convenient way to navigate through your React application. With Sapling, you can easily traverse your component tree and find the exact component you're looking for.

22. Glean

The extension provides refactoring tools for your React codebase.

23. REST Client

REST Client allows you to send HTTP requests and view the response in Visual Studio Code directly.

24. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense provides intelligent code completion, linting, and hover previews for Tailwind CSS classes in your HTML, CSS, and JavaScript files. It helps you write code faster and with fewer errors by suggesting the correct class names.

25. Prettier

If you don't have prettier already installed on your project it's good to have this extension that allows you to format your code on file save.

26. Next JS/TS Snippets

If you're working with Next.js, these snippets can help you speed up your development process.

np - nextPage
npssp - nextPageServerSideProps
npsp - nextPageStaticProps
npspth - nextPageStaticPaths
nssp - nextServerSideProps
nsp - nextStaticProps
nspth - nextStaticPaths
nip - nextInitialProps
nimg - nextImage
napp - nextApp
ndoc - nextDocument
napi - nextApi
nmid - nextMiddleware

Don't miss these other lists!

50+ websites for web developers

Ahmed Zougari — Wed, 02 Nov 2022 11:42:12 +0000

After I have shared these two huge lists

I decided to share another one. But this time you can contribute. The table below is from this repository.

And I will update the blog from time to time to make sure it's not outdated. So you can help by adding your favorite site or fixing typos, or broken links ...

#	Name	Keywords	Description
1	10015	Mixed	All online tools you need in one box for free. Build anything online with “all-in-one toolbox”. All tools are easy-to-use, blazing fast & free.
2	Animate.css	Froentend, CSS, Animation	Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
3	Animista	Frontend, CSS, Animation	Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.
4	Ayro UI	Frontend, Bootstrap, UI Library	Free Bootstrap Snippets, UI Components, and Library
5	Bg Jar	Frontend, CSS, SVG, Background	Free svg background generator for your websites, blogs and app.
6	Blob Maker	Frontend, CSS, SVG	Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.
7	Box-shadow.dev	Frontend, CSS, Box-shadow	Customize Shadows.
8	Branition Colors	Frontend, CSS, Colors	Hand-curated collection of color palettes best fitted for branding.
9	CSS Box Shadow Examples	Frontend, CSS, Box-shadow	Beautiful CSS box-shadow examples.
10	CSS Buttons Examples	Frontend, CSS, Buttons	🎨 Curated collection of 88 free beautiful CSS buttons, ready-to-use for your next projects. Click to copy.
11	CSS Gradient	Frontend, CSS, Colors, Gradient	CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites.
12	CSS Grid Generator	Frontend, CSS, Grid	CSS Grid generator.
13	CSS Triangle Generator	Frontend, CSS, Border	CSS triangle generator - A generator for pure CSS triangle.
14	Charts CSS	Frontend, CSS, Charts	CSS data visualization framework.
15	Clippy	Frontend, CSS, Clip-path	The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
16	ColorHub	Frontend, CSS, Colors	Find the perfect color palette for your next project.
17	ColorHunt	Frontend, CSS, Colors	Color Palettes for Designers and Artists.
18	ColorPalettes	Frontend, CSS, Colors	30+ Hand curated color palettes. To see the preview just click on the palette.
19	ColorsMuzLi	Frontend, CSS, Colors	Color Palette Generator. Create Beautiful Color Schemes that works.
20	Convert A Color	Frontend, CSS, Colors	Convert a color to different formats.
21	Cool Backgrounds	Frontend, CSS, Background	Cool Backgrounds is a collection of tools to create compelling, colorful images for blogs, social media, and websites.
22	Cool Backgrounds	Frontend, CSS, Colors	Never waste Hours on finding the perfect Color Palette again!
23	CoolHue	Frontend, CSS, Colors, Gradient	60 linear gradients collection.
24	Coolors	Frontend, CSS, Colors	The super fast color palettes generator!
25	Cubic Bezier	Frontend, CSS, Animation	A better tool for cubic-bezier() easing.
26	Doodad Pattern Generator	Frontend, CSS, SVG, Background	Generate seamless, unique, royalty-free patterns to use for free in any project. Export as SVG, JPEG, or PNG.
27	Fancy Border Radius	Frontend, CSS, Border-radius	Generator to build organic shapes with CSS3 border-radius.
28	Flat UI Colors	Frontend, CSS, Colors	280 handpicked colors ready for COPY & PASTE.
29	Flowbite	Frontend, CSS, Tailwind	Get started with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
30	Flowbite	Frontend, CSS, Tailwind	Get started with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
31	Frontend Toolkit	Mixed	Frontend Toolkit is a customizable dashboard for your recurring Frontend tasks. Base64 encoder/decoder, SVG optimizations, SVG to JSX and many more!
32	Get Waves	Frontend, CSS, SVG, Waves	A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!
33	Grid Layoutit	Frontend, CSS, Grid	CSS Grid generator.
34	Headless UI	Frontend, Tailwind, React, Vue, UI Library	Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
35	Layout Bradwoods	Frontend, CSS, Grid, Flex	CSS Grid/FLEX generator.
36	Lottiefiles	GIF, Animation	The world’s largest platform for Lottie animations. Add free animations anywhere (even if you don’t know motion design) or create, collaborate & ship motion easily with LottieFiles’ design & developer tools.
37	MeshGradient	Frontend, CSS, Colors, Gradient	Create beautiful gradients.
38	Moving Letters	Frontend, CSS, JS, Animation, animejs	Text animated with JavaScript & anime.js.
39	Neumorphism	Frontend, CSS, Box-shadow	Generate Soft-UI CSS code.
40	Next UI	Frontend, Next, React, UI Library	Make beautiful websites regardless of your design experience.
41	Open Props	Frontend, CSS	Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.
42	SVG Wave	Frontend, CSS, SVG, Waves	SVG Wave is a minimal svg wave generator with a lot of customization. It lets you ability to generate and export pngs and svgs of beautiful waves. SVG wave also lets you layer multiple waves. Create SVGs for your website designs.
43	Shadows.brumm.af	Frontend, CSS, Box-shadow	Make a smooth shadow, friend.
44	Spinkit	Frontend, CSS, Animation	Simple CSS Spinners.
45	Tails	Frontend, CSS, Tailwind	Tails - TailwindCSS Page Builder.
46	Tailwind Components	Frontend, CSS, Tailwind	A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!
47	Tailwind Kit	Frontend, CSS, Tailwind	Over 200 free and open source components and templates for tailwind css to build beautiful UI. All are fully coded and work with React, Angular and VueJS.
48	Transition Style	Frontend, CSS, Animation	Drop-in CSS transitions.
49	UI Verse	Frontend, HTML, CSS, UI	Universe of UI elements made with HTML & CSS.
50	Vizzu	Frontend, CSS, Charts, Javascript	Open-source JavaScript library designed to easily create animated data visualizations and data stories.
51	Web Gradients	Frontend, CSS, Colors, Gradient	WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.
52	Whirl	Frontend, CSS, Animation	CSS loading animations with minimal effort!
53	Woah	Frontend, CSS, Animation	Woah.css is a CSS animation library created by Joe Rezendes that was made for eccentric developers.

Top +30 Web/App Design Inspiration sites for your next project

Ahmed Zougari — Thu, 23 Jun 2022 18:43:42 +0000

After sharing 50 websites for remote work I decided to share another list for design inspiration.

here are +30 websites. my advice tries them all and makes five that work for you your favorite.
If you find it useful don't forget to leave a comment or share it with the community 🚀.

#	Website
1	collectui.com
2	behance.net
3	dribbble.com
4	designspiration.com
5	uikitfree.com
6	landingfolio.com
7	onepagelove.com
8	uxmovement.com
9	land-book.com
10	sketchrepo.com
11	screenlane.com
12	freebiesui.com
13	uispace.net
14	uistore.design
15	uigarage.net
16	lapa.ninja
17	uibundle.com
18	saasland.droitlab.com
19	mobbin.com
20	awwwards.com
21	logoinspirations.co
22	xdguru.com
23	siteinspire.com
24	pageflows.com
25	scrnshts.club
26	httpster.net
27	thefwa.com
28	scrnshts.club
29	saaspik.pixelsigns.art
30	www.uplabs.com
31	uidesigndaily.com
32	mobbin.com

Connect with me:

How to center div tailwindCSS vs Bootstrap

Ahmed Zougari — Mon, 06 Jun 2022 08:25:12 +0000

All know how much we suffer while centering a div😜. so I decided to share this tutorial. How to center a div using utility classes tailwind and bootstrap.

NB: this is not a comparison between tailwind and bootstrap.

Absolute

tailwind

<div class="relative">
 <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"></div>
</div>

bootstrap

<div class="position-relative">
 <div class="position-absolute top-50 start-50 translate-middle"></div>
</div>

Flex

tailwind

<div class="flex justify-center items-center">
 <div class=""></div>
</div>

bootstrap

<div class="d-flex justify-content-center align-items-center">
 <div class=""></div>
</div>

Flex with margin

tailwind

<div class="flex">
 <div class="m-auto"></div>
</div>

bootstrap

<div class="d-flex">
 <div class="m-auto"></div>
</div>

Grid

tailwind

<div class="grid place-items-center">
 <div class=""></div>
</div>

bootstrap

<div class="d-grid justify-content-center align-items-center">
 <div class=""></div>
</div>

Grid with margin

tailwind

<div class="grid">
 <div class="m-auto"></div>
</div>

bootstrap

<div class="d-grid">
 <div class="m-auto"></div>
</div>

Which one is your favorite🤔. let us know in comments💬.

How to import SVG in React

Ahmed Zougari — Sun, 29 May 2022 19:13:17 +0000

Method 1

using it as a source for img tag

import icon from './icon.svg';

const Footer = () => {
  return(
    <Footer>
      {/*... */}
      <a href='#'>
        <img src={icon} alt=""/>
      </a>
    </Footer>
  )
}

Method 2

use it as component. In this way you can style SVG with CSS. change colors or animation with attributes like (storke, fill, stroke-dasharray ...)

import { ReactComponent as Icon } from './icon.svg';

const Footer = () => {
  return(
    <Footer>
      {/*... */}
      <a href='#'>
        <Icon />
      </a>
    </Footer>
  )
}

Method 3

Include SVGs directly in JSX. This is like the previous method but it may not be scalable for a large number of SVGs.

const Icon = () => {
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
}

const Footer = () => {
  return(
    <Footer>
      {/*... */}
      <a href='#'>
        <Icon />
      </a>
    </Footer>
  )
}

Best 50 websites for freelance / full-time remote jobs

Ahmed Zougari — Sat, 21 May 2022 21:23:55 +0000

looking for a remote job or freelance? well, I made this great list for you.

without any introduction 👇

#	Name
01	linkedin
02	guru
03	fiverr
04	toptal
05	turing
06	upwork
07	flexjobs
08	soshace
09	crossover
10	taskrabbit
11	freelancer
12	truelancer
13	worksome
14	simplyhired
15	speedlancer
16	peopleperhour
17	cloudpeeps
18	remoteok
19	devitjobs
20	remotefrontendjobs
21	nocsdegree
22	weworkinspace
23	whoishiring
24	remoteml
25	weworkremotely
26	remote
27	dice
28	remotive
29	workingnomads
30	triplebyte
31	nodesk
32	epicjobs
33	remotehunt
34	angellist
35	yunojuno
36	jsremotely
37	justremote
38	jobspresso
39	dailyremote
40	angel
41	remoteleads
42	remotetechjobs
43	hired

Web3 Jobs

#	Name
44	web3career
45	cryptocurrencyjobs
46	cryptojobs
47	buildspace
48	remote3
49	hellocryptojobs
50	useweb3

That's it. it took me a lot of time to make this collection. I hope you found it useful. don't forget to share it with the community 🚀.

How to customize your Github profile

Ahmed Zougari — Wed, 11 May 2022 15:47:47 +0000

Having a cool Github README adds a unique taste to your profile, it’s like a quick resume to present yourself, what you do, your skills...

How to do it ?

When you create a repository with your username and an add a README file GitHub shows the preview on your profile

now if you already know markdown languages you can start editing it by yourself.
If not, don’t worry I have across an amazing tool to do that for you.
ProfileMe.dev
Really fast and easy way to customize your profile. you just need to fill out the inputs and in the end, you copy the code. That's it!

I would like to share also this tool readme.so for readme-files in general. it's come with multiple templates if you want to make documentation for your projects.
For inspiration, I found this cool repository containing lists of GitHub profile readme
awesome-github-profile-readme.
If you want to dive more there is a free course for that
HOW TO CUSTOMISE YOUR GITHUB PROFILE.

Thank you for reading.

Contact form without backend using JavaScript 💡

Ahmed Zougari — Thu, 17 Mar 2022 22:33:40 +0000

If you are a frontend developer who is not interested in backend development or you didn't start learning it yet (like me) and you want to make contact form working for your portfolio or your product website, this article is for you.

Why contact form? There is a lot of reasons to use it on your website, Contact Forms Look Professional and make you reachable starting from the website instead of waiting for the visitor to contact you in social media that's may he is not active on, and that may probably cause to lose a possible customer.

It's not hard, there are a lot of websites that offer this service all have a free🆓 and premium💸 plan, how they work?
Well basically when you sign up and start a form they gonna give you an URL to put it inside the action attribute of your form tag

<form
  action="url"
  method="post"
>
 <!-- 
  Important to know ❗❗ 
  you should have:
   - inputs with the name attribute
   - button with type submit
 -->
</form>

but they have an annoying thing when the user submits the form they redirect him to another page.

You feel like you can't control your website, you can customize the redirect page if you're using a premium plan (you cant do it for free with JavaScript 👇) but is recommended to show an alert or label with green color to let the user know that form was submitted.

So how you do that?
This is one of the reasons that's pushed me to share this , after some research, I come up with this solution. Give the form just an id property and we gonna working on it with JavaScript.

⚠ don't forget to give your inputs name property

// we add event listener for click on send button
document.querySelector('button').addEventListener('click', (e) => {
  // stop the page from the reloading
  e.preventDefault();
  // selecting the form
  const contactForm = document.querySelector('#form');
  // the gold part 🔥
  let data = new FormData(contactForm);  
  fetch("url", { method: "POST", body: data });
  // inform the user that the form was submitted
  alert('Thank you, your form was submitted.');
  // clear the inputs
  contactForm.reset()
  // or if you want the redirect the user to another page (for free)
  // window.open('./thanks.html');
})

⚠ Don't forget to check inputs if valid before sending the email.

And this is a list of website that offer this service:

complicated to use :

I left this form below to let you test the process before you apply it on your website.

That's it, I hope you found this article helpful, Thanks for reading.

How to improve your code quality with ternary,AND,OR, nullish coalescing operators

Ahmed Zougari — Tue, 22 Feb 2022 10:23:13 +0000

If you are still using the or(||) and(&&) operators in just if statement you need to read this.

Ternary operator

If you don't know what is ternary operator, is a simplified conditional operator like if / else.
it take three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.

// With if else 
if(condition){
 expression1
}else{
 expression2
}

// With ternary operator
connditon ? expression1 : expression2 ;

Is really useful and make your code short and clean if you care about your code quality, here few tips on how you can improve your code quality with the ternary operator :

let x;
5 > 0 ? (x = 'positive') : (x = 'negative');  //👎
x = 5 > 0 ? 'positive' : 'negative';  //👍


function myFunction(){
 //👎
 if(5>0){
  return true
 }else{
  return false
 }

 //👍
 return 5 > 0 ? true : false;
}

when to avoid it 🚫

nested: of course, we can use two or more ternary operators inside each other but not recommended, you won't be able to read your own code😅, so don't forget our goal to make the code clean and understandable.
long expression: if you have a lot of lines of code to execute, either make the whole code in a function and call it or use the if/else statement.

AND operator(&&)

You may love using the ternary operator but what if you want to execute one expression if the condition is true "you can't do that!", here comes AND operator:

// with if statement
if(condition){
 expression
}

// with and operator
condition && expression;

How it works🤔, well the And operator always check the truthiness of the first statement, if falsy is skip whatever next came after, and if truety he pass to next.
don't forget to use it with a small expressions.

OR operator

On the contrary, the OR operator check the truthiness of the first statement if true he skipped the next one, so how we can use it?
For example, we expect an input value but we may get it or not, if we don't use backup our code will break.

function check(e){
 const value = e.key ; //👎

 const value = e.key || "" ; //👍
 // here we say if e.key is falsy, value will be an empty string 

 console.log(value)
}

Nullish coalescing operator

The problem with the OR operator is that returns the right value if the left value is falsy 0, "", false, null, undefined.
But if you want to return the right value when the left value is null or undefined better use nullish coalescing operator, you may not have heard about it before (I've also discovered it recently), he returns the right side if the left side is Null or undefined

// syntax 
const value = e.key ?? "";
// here we say if e.key is equal to null or undefined
// value will be an empty string

Thank you for reading

These tips above really help me to improve my code quality, I'm sure if you start using these tips the right way, they gonna take your code to next level.

How to make flip card with 5 lines CSS

Ahmed Zougari — Sat, 19 Feb 2022 10:07:18 +0000

Flip card is cool idea to show more information on hover effect, and you can do it with just 5 main lines.

HTML Code

This is how your HTML should be :

<div class="card">
  <div class="flip__container">
    <div class="front__face"><!-- front content --></div>
    <div class="back__face"><!-- back content --></div>
  </div>
</div>

CSS Code

This is the basic CSS code you need :

.flip__container{
  transform-style:preserve-3d; /* line 1 */
  transition: transform 1s ease-in-out; /* speed of fliping */
}

.front__face,
.back__face{
  position:absolute; /* line 2 */
  backface-visibility: hidden; /* line 3 */
}

.back__face{
  transform:rotateY(180deg); /* line 4 */
}

.card:hover .flip__container{
  transform:rotateY(180deg); /* line 5 */
}

transform-style:preserve-3d;
=> Indicates that the children of the element should be positioned in the 3D-space.
position:absolute;
=> Make front and back face on top of each others
backface-visibility: hidden;
=> The back face is hidden, effectively making the element invisible when turned away from the user.
transform:rotateY(180deg);
=> The rotateY() function is an inbuilt function which is used to rotate an element around the vertical axis.(we used it in back face to hide it and for the hover effect to show it)

Live Demo 🎥

If you find this example complex for you, check out this simple version on Sandbox.

Thanks for reading.

Connect with me

Twitter

GitHub

How to generate random color with JavaScript

Ahmed Zougari — Fri, 07 Jan 2022 16:12:56 +0000

Today we gonna learn how to generate a random color using JavaScript with a few lines :

1-Generate random integer between 0 and 15

first we need to know how to get a random number

let randomNumber = Math.random();
//return random number between 0 and 1 (0.46578483)

but we don’t want this result, we need random number integer between 0 and 15
To have it we have use you Math.floor()

let randomNumber = Math.floor(Math.random()*16);
//return random integer between 0 and 15

2-Why 0 and 15 ?

Well this is the length of an array that contains all alphanumeric of HEX code, and we want to select random index 6 times and join all in one string.
( In this example we will use the HEX code, 0 to 9 and a to f
Ex: #E06910 , #02198C, #BADA55)

const hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];

3-Get random HEX code

we need to loop 6 times and concatenate the result every time to the code string

let code = "";
for(let i=0; i<6; i++){
 code += hexArray[Math.floor(Math.random()*16)];
}
//don' forget the code start with "#"
code = `#${code}`;

4-Make your code inside function

now we need to write our code in function to use it perfectly

function generateColor(){
 const hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
 let code = "";
 for(let i=0; i<6; i++){
  code += hexArray[Math.floor(Math.random()*16)];
 }
 return `#${code}`
}

In this example I use it in the body background:

document.body.style.backgroundColor = generateColor();

live demo :

Thanks for reading

I hope you find that useful, if you want to practice more you can create your own function to generate random RGB or HSL color .