Web Development [Frontend] | Free code | Free Figma Templates | HI Web

@happywebdev

All about HTML - CSS - JS - React and Frontend.

Best solutions for improving your skills of web development. Free code, free figma templates and more.

For all inquiries, please contact @haterobots

Web Development [Frontend] | Free code | Free Figma Templates | HI Web (English)

Are you passionate about web development? Do you want to improve your skills in HTML, CSS, JavaScript, React, and more? Look no further! Join 'Web Development [Frontend] | Free code | Free Figma Templates | HI Web' channel on Telegram, also known as @happywebdev.

Frontend development isn't just a job; it's a way of life. This channel is dedicated to providing you with the best solutions for enhancing your web development skills. Whether you're a beginner looking to learn the basics or an experienced developer seeking new challenges, this channel has something for everyone.

One of the highlights of this channel is the free code and Figma templates that are available for all members. Stay updated with the latest trends and tools in web development, collaborate with like-minded individuals, and take your skills to the next level.

For any inquiries or assistance, feel free to contact @haterobots. Don't miss out on this valuable resource for all things related to frontend web development. Join 'Web Development [Frontend] | Free code | Free Figma Templates | HI Web' on Telegram today and start your journey towards becoming a top-notch frontend developer!

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

12 Feb, 04:00

🚸 Inline conditionals in CSS?

Last week, we had a CSS WG face-to-face meeting in A Coruña, Spain. There is one resolution from that meeting that I’m particularly excited about: the consensus to add an inline if() to CSS. While I was not the first to propose an inline conditional syntax, I did try and scope down the various nonterminating discussions into an MVP that can actually be implemented quickly, discussed ideas with implemenators, and eventually published a concrete proposal and pushed for group resolution. Quite poetically, the relevant discussion occurred on my birthday, so in a way, I got if() as the most unique birthday present ever. 😀

482

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

07 Feb, 05:00

Free Figma Template: Analytics service

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

1,580

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

06 Feb, 06:00

Free Figma Template: Services website

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

1,775

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

03 Feb, 05:00

🔬Micro Frontends

If you are a big history fan and love daydreaming about the most effective war strategies, chances are you’re also a big fan of the war of the third coalition.

Why am I starting a blog with this? Well, one thing we all picked up from that war is one of the things that made Napoleon Bonaparte the best general in history (In my opinion) — SPEED!

2,023

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

02 Feb, 06:00

🔐How to Set Up Two-Factor Authentication on WordPress Without Plugin

A step-by-step guide to add a 2-Factoe Authentication (2FA) system to your WordPress website.

2,057

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

01 Feb, 05:00

Free Figma Template: Shop.co

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

2,204

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

31 Jan, 05:00

Free Figma Template: YouMeal - food delivery

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

2,385

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

30 Jan, 05:00

🧑‍🏫 Run DeepSeek-R1 Locally for Free in Just 3 Minutes!

DeepSeek-R1 has been creating quite a buzz in the AI community. Developed by a Chinese AI company DeepSeek, this model is being compared to OpenAI's top models. The excitement around DeepSeek-R1 is not just because of its capabilities but also because it is open-sourced, allowing anyone to download and run it locally. In this blog, I'll guide you through setting up DeepSeek-R1 on your machine using Ollama.

2,469

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

29 Jan, 09:54

🚀 The Future of Frontend Engineering: Trends to Watch in 2025

As technology continues to evolve at an unprecedented pace, frontend engineering remains at the forefront of innovation. For leaders, staying ahead of trends is crucial to drive organizational success and ensure teams are equipped to deliver cutting-edge solutions. The year 2025 promises transformative trends that will redefine how developers build and users interact with web and mobile applications. Here are the top trends to watch in frontend engineering this year, with a focus on strategic insights for leadership

2,500

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

25 Jan, 02:00

Free Figma Template: Landing page for cosmetics sales

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

3,350

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

23 Jan, 01:00

Free Figma Template: Course

🧠 Difficulty: 🥕🥕

#Figma #Template

3,518

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

21 Jan, 01:00

🧑‍💻 React Context: What It Is and How to Use It

Let’s dive into React Context — a powerful tool for managing state and passing data in your React applications. I’ll explain it in simple terms and provide examples to solidify your understanding.

3,372

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

20 Jan, 06:00

🔧 It's time to become a professional Frontend Developer!

Learn from the best with top-rated video courses on modern Frontend Development.

Not only will you gain the skills to build responsive websites, but you’ll also receive personalized ✅ SUPPORT FROM ME ✅ throughout the course. Get feedback, ask questions, and get the help you need to succeed.

📚 Start today and let’s build your future together!

3,427

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

18 Jan, 01:00

〽️ Bézier curves

Bézier curves have been a recurring theme in my frontend engineering career. I have used them extensively in my work - in animations and SVG paths of illustrations and icons. However, I only recently took an interest in understanding the underlying logic that governs their behaviour. This demystified curve-related path commands for me and gave me a deeper understanding of web animations. In this article, I’ll share my interesting findings on Bézier curves.

3,593

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

17 Jan, 01:00

🚸 How to Drag and Drop in React

A React tutorial by example about how to use drag and drop in React. Here you will learn how to create a DnD component in React step by step. First, you will implement it as vertical list, later as horizontal list, and in between with lots of customizations as examples. We will be using @hello-pangea/dnd for this React tutorial.

3,433

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

15 Jan, 01:00

Free Figma Template: Fashion

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

3,828

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

14 Jan, 01:00

✂️ Top 10 JavaScript SEO Tricks Every Developer Should Know

JavaScript SEO is crucial for ensuring your web application is discoverable by search engines while providing a rich user experience.

While JavaScript frameworks offer dynamic functionality, if search engines can’t properly interpret your JS content, you risk losing visibility and traffic. Search engines like Google can execute JavaScript to some extent — despite this, relying solely on their capabilities is risky.

3,681

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

10 Jan, 01:00

❤️‍🔥❤️‍🔥❤️‍🔥 GitHub Profile Generator

GitHub Profile Generator can quickly and easily create a beautifully designed profile. The tool is indispensable for developers, students, and job seekers.

4,033

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

09 Jan, 01:00

Free Figma Template: Newspaper

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

4,067

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

08 Jan, 01:00

✍️ Drag to Select

This past summer, I led a project at Makeswift to rework our file manager. Makeswift is a website builder and many of our users have hundreds of files. To manage hundreds of anything you need bulk operations, but bulk operations aren't helpful if selecting things is cumbersome, so drag selection was a key part of my vision for making Makeswift's file manager feel native.

3,807

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

06 Jan, 01:00

🚃 React Folder Structure in 5 Steps [2024]

Organizing large React applications into folders and files is a topic that often sparks strong opinions. I found it challenging to write about this, as there isn't a definitive "correct" approach. However, I frequently get asked how I structure my React projects, from small to large, and I'm happy to share my approach.

4,077

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

04 Jan, 01:00

📚 The Art of Micro Frontends: Build highly scalable, distributed web applications with multiple teams (2024)

By: Florian Rappl

#book #free_book

3,480

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

31 Dec, 01:00

🎄 Hey everyone, happy New Year in advance!

This year has been full of coding, bug hunting, fixes, and tons of growth in our favorite craft. 💻 Here’s to 2025 bringing you exciting projects, smooth deadlines, and endless inspiration for new achievements.

Wishing you clean code, responsive designs, and a perfect balance between work and life. May your documentation always make sense, and your deployments go flawlessly on the first try. 🚀

Thank you for sticking around this year. There’s so much more exciting content and surprises coming your way.

✨ Speaking of surprises... In 2025, I’m launching a platform with courses and premium Figma templates designed specifically for web developers! The courses will be hands-on, guiding you step by step to create your very own portfolio-ready pet project. Whether you’re just starting or looking to sharpen your skills, this platform will be your go-to for practical learning and professional growth.

Happy New Year! 🥂

4,525

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

28 Dec, 01:00

Free Figma Template: RIVO - multi page template

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

4,134

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

27 Dec, 01:00

🤠 GDevelop is a full-featured, no-code, open-source game development software. You can build 2D, 3D and multiplayer games for mobile (iOS, Android), desktop and the web. GDevelop is fast and easy to use: the game logic is built up using an intuitive and powerful event-based system and reusable behaviors.

4,330

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

26 Dec, 01:00

❓❓❓What are you running this code for and why?

Write the answer in the comments 🔻

✅ Answer:

31
31

🔍 Explanation:

Creating the person1 object: The person1 object is created with properties name and age.
Assigning person2 = person1: This does not create a copy of the person1 object but instead creates a reference to the same object in memory. As a result, both person1 and person2 point to the same object.
Modifying the age property of person2: Changing person2.age also affects person1.age because both identifiers refer to the same object.
Outputting person1.age and person2.age: Both values will be 31 because the modification to person2.age also altered person1.age.

3,970

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

25 Dec, 01:00

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free.

3,694

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

24 Dec, 01:00

Free Figma Template: MYEL

🧠 Difficulty: 🥕🥕

#Figma #Template

4,201

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

19 Dec, 01:00

🤳 How to Validate Forms in React and React Native Using Yup and Formik

Validation is a key part of development, regardless of what programming language you’re writing. Developers should always be validating user input, API parameters, and retrieved values.

4,379

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

18 Dec, 01:00

⭐️CSS Tip!⭐️

To create an inverted :hover effect, you can use mix-blend-mode with custom :hover properties.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

The cool thing is that using mix-blend-mode acts as a color inverter, which works well with monochrome controls.

As for how to move this code to JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) {
  --active: 1;
}
button span {
  transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
  transition: transform 0.25s;
}

4,332

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

17 Dec, 01:00

Free Figma Template: Real estate

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

3,671

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

16 Dec, 01:00

🪡 Exploring Playful Context-Aware Animations for Fixed Elements

The other day, I was browsing a nicely designed “About” page, and, like many other sites, it had the familiar pattern of a fixed logo at the top while scrolling. This is quite common, but sometimes the logo ends up overlapping with the text, making things a bit hard to read. You might see this as a quirk of brutalist design, but it got me thinking: what if we hide the logo during those moments when it intersects with the text?

3,739

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

14 Dec, 01:00

⛅️ Meet the New Safe Assignment Operator (?=) in JavaScript

Modern JavaScript development often encounters tasks involving asynchronous operations and error handling. Typically, try-catch and async-await constructs are used for these purposes. However, they can bloat the code and make it harder to read. To address this issue, a new safe assignment operator ?= has been proposed, which significantly simplifies error handling and improves code readability. In this article, we’ll explore how this operator works, its features, and the benefits it offers developers.

3,940

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

13 Dec, 07:10

💠 Migrating from Webpack and react-scripts to Vite: The Path to Fast and Lightweight React

Hello everyone! For a long time, my projects were built using Webpack. While powerful, Webpack often felt like a challenge to configure. Recently, my colleagues have been raving about Vite — a lightweight and fast tool for building web applications. Curious to try it out, I encountered some interesting discoveries and challenges, which I’ll share in this article. I hope my experience will help you make a decision and simplify your migration process.

3,901

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

12 Dec, 01:00

🪴 Come to the light-dark() Side

You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.

3,935

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

10 Dec, 01:00

💥 New scroll badge in DevTools: Find scrollable elements faster

Debugging scroll-related issues just got easier with DevTools' new scroll badge! This post explains what scrollable elements are, why they can be difficult to find, and how this new feature helps you quickly locate them. We'll also take you behind the scenes to see how we developed the scroll badge.

3,680

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

09 Dec, 15:00

👽 How to control a React component with the URL

"Can we make this screen shareable via the URL?"

It's a common feature request. Surprisingly, it also leads to one of the most common causes of bugs in React applications.

3,388

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

07 Dec, 15:00

Free Figma Template: Crypto trading

🧠 Difficulty: 🥕🥕

#Figma #Template

3,563

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

06 Dec, 15:00

🦾 Five Ways to Lazy Load Images for Better Website Performance

Images have become one of the most used types of content in modern web applications. Although using background images improves the application’s look and feel, increasing image sizes can significantly impact application performance.

3,710

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

06 Dec, 01:00

Free Figma Template: VR Club

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

3,387

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

05 Dec, 15:00

👑 How to create Shapes with Inner Curves using CSS Mask

Naming those shapes is not that easy, same as creating them using CSS. Most of the time we reach for many elements/pseudo-elements and we try to stack them in a way to simulate the curvature. It’s a bit hacky, not flexible and it’s a lot of magic numbers everywhere! I will show you how to create those CSS shapes using one element and a flexible code that you can easily reuse.

3,298

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

05 Dec, 06:36

Free Figma Template: Auto service

🧠 Difficulty: 🥕🥕

#Figma #Template

3,068

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

04 Dec, 15:00

📯 Memory Management in JavaScript with WeakRef and FinalizationRegistry

Today, we’re diving into the topic of memory management in JavaScript—but not in the traditional sense of garbage collection. Instead, we'll explore the powerful capabilities of WeakRef and FinalizationRegistry. These tools give developers control over weak references and asynchronous object finalization, allowing for more refined and efficient memory handling.

3,180

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

25 Nov, 01:00

Free Figma Template: Services for pensioners

🧠 Difficulty: 🥕🥕

#Figma #Template

809

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

24 Nov, 01:00

🚎 8 Mistakes to Avoid When Using React Hooks

React Hooks offer powerful ways to manage state and lifecycle events in functional components, but improper usage can lead to issues in your React app.

1,175

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

23 Nov, 01:00

Free Figma Template: Tourism

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

1,473

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

22 Nov, 01:00

🐹 TypeScript Interview Questions

Nowadays most modern ReactJS and NodeJS apps are created using TypeScript. Angular was already having it in-built. So, you go for a Reactt, Node or Angular interview, TypeScript questions ill be asked.

1,614

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

21 Nov, 01:00

Free Figma Template: Sales Template

🧠 Difficulty: 🥕🥕

#Figma #Template

1,792

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

20 Nov, 01:00

✅ Javascript Reduce method Example.

▫️ Finding the longest word in a given string.

function longerWord(a, b) { 
if (a.length > b.length) {
    return a;
  } else {
    return b;
}
}

const sentence = 'Hey there what are you doing this Wednesday night';

const longest = sentence.split(' ').reduce(longerWord);

console.log(longest);

// Wednesday

1,869

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

19 Nov, 01:00

Free Figma Template: VPN Service

🧠 Difficulty: 🥕🥕

#Figma #Template

2,039

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

18 Nov, 01:00

🦷 The Ultimate Guide to Font Performance Optimization

Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.

Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.

On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity.

2,383

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

15 Nov, 01:00

📝 CSS display: contents

How can display: contents improve layout flexibility? This property makes elements "transparent" in the DOM, merging their children with the parent container without altering visual display. It helps eliminate unnecessary wrappers and simplifies styling, but be aware of accessibility issues with screen readers.

2,744

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

14 Nov, 01:00

🦝 CSS @property and the New Style

The @property at-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and its CSS Properties and Values API were initially introduced. I experimented sparingly over time, reading articles that danced around the concepts, but I had barely scratched the surface of what @property could offer. The ensuing demo explores what's possible in the next generation of CSS.

2,976

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

13 Nov, 01:00

🧶 WebSockets, gRPC, MQTT, and SSE — Which Real-Time Notification Method Is For You?

Today, we will cover four popular stateful mechanisms: WebSockets, gRPC, MQTT, and Server-Sent Events (SSE). Each of these is unique in how they facilitate server-to-client messages, with pros and cons to consider before implementing a solution.

2,815

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

12 Nov, 12:00

🪬 What Every Developer Should Know About HTTPS

Today, securing web applications and protecting user data is essential for every modern developer. HTTPS (HyperText Transfer Protocol Secure) has become the standard for safe data exchange on the internet, not only to keep information secure but also to build user trust. Let’s explore the key aspects of HTTPS, its role in data protection, and how to use it effectively in your projects.

2,780

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

12 Nov, 01:00

🦸 DrawKit — free illustrations, animations and mockups

A large library of free vector illustrations for free use. You can use them to design any projects: websites, presentations or even T-shirt prints.

The material is presented in thematic sets: food, mental health, online store and more. And most importantly, the pictures are updated every week. In order to download the files, you will need regular registration.

2,607

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

11 Nov, 09:24

🏢 CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.

Built on open formats, CesiumJS is designed for robust interoperability and scaling for massive datasets.

2,792

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

08 Nov, 10:00

Free Figma Template: Co-Working

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

3,532

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

08 Nov, 02:00

👨‍🎨 Magic UI for React

UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.

3,040

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

07 Nov, 10:00

📒 FREE Book

React.js Design Patterns: Learn how to build scalable React appswith ease (2023)

By: Anthony Onyekachukwu Okonta

#book

3,263

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

07 Nov, 02:00

🤖 AIHawk: Automate your job search with AI

AIHawk is a Python script that helps you automatically submit your resume to various job openings. The project supports integration with job search sites (LinkedIn) and uses AI to optimize the application process.

3,360

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

06 Nov, 10:00

Free Figma Template: Flowers store

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

2,480

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

06 Nov, 01:00

📒 What's new in ECMAScript 2024

▫️Improved work with unicode
▫️Atomics.waitAsync
▫️Extensible ArrayBuffer
▫️Promise.withResolvers

2,314

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

05 Nov, 10:00

📒 FREE Book

JavaScript All-in-One For Dummies (2023)

By: Chris Minnick

#book

2,574

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

05 Nov, 01:00

🚎 CSS Protips

A collection of tips to help take your CSS skills pro.

2,761

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

04 Nov, 10:00

Free Figma Template: Car rent

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

2,715

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

04 Nov, 01:00

🗣 45 Visual Studio Code Shortcuts for Boosting Your Productivity

Please note that these shortcuts are taken from VS Code’s documentation. If some shortcuts don’t work, it could be due to changes in shortcuts in your editor or file format or sometimes due to extensions installed...

2,503

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

01 Nov, 13:59

Free Figma Template: Travel agency

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

2,933

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

31 Oct, 16:00

🧳 How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite

Creating a Chrome extension can be a fun and rewarding project, especially when you combine powerful tools like React, TypeScript, TailwindCSS, and Vite. In this article, we'll walk you through the entire process step-by-step, ensuring you have a clear understanding of how to build your own Chrome extension in 2024. Whether you're a seasoned developer or just starting out, this guide will help you navigate the complexities of extension development with ease.

2,957

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

31 Oct, 07:45

👨‍💻 VS Code extension

Error Lens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.

1,628

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

30 Oct, 12:00

📚 Free book

Building Micro Frontends with React 18: Develop and deploy scalable applications using micro frontend strategies (2023)

By Vinci J Rufus

#book

1,797

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

30 Oct, 01:00

🚤 The Ultimate Guide to Font Performance Optimization

Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.

Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.

On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity...

1,833

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

29 Oct, 11:00

🐋 CSS Compatibility

CSS Compatibility is a VS Code extension that allows you to check on hover which CSS syntax, keywords, types, or functions are compatible or supported across browsers.

1,749

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

29 Oct, 01:00

Free Figma Template: Portfolio and a community of designers.

🧠 Difficulty: 🥕🥕

#Figma #Template

1,844

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

28 Oct, 01:00

Free Figma Template: Tech Landing Page Template

🧠 Difficulty: 🥕🥕

#Figma #Template

1,918

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

27 Oct, 11:00

Free Figma Template: Interior design

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

1,961

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

27 Oct, 01:00

✅ How does Array,map() work in JS?

The Array,map function: Creates a new array by calling the specified function on each element of the original array and collects the results into a new array.

It takes one mandatory argument — this is the callback function that will be applied to each element of the original array.

The callback can take up to three arguments:
• currentValue — the current element of the array being processed.
• index — the index of the current element in the array being processed.
• array — the array being iterated over.
• There is also an optional argument thisArg — the value used as this when calling the callback function

Code example:

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

1,989

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

26 Oct, 01:00

❓How does JSON.stringify() work in JS?

JSON.stringify function: Converts a JavaScript object or values to a JSON string (text formatted according to the current standard)

Arguments:

• Value - This is the main argument that specifies what to convert.

• Replacer (optional) - A function or array to filter properties.

• Spaces (optional) - A number or string to format with indents.

1,956

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

25 Oct, 11:00

🍐 Interview Question

What is a closure in JavaScript and how does it work?

A closure is a combination of a function that retains access to variables from its outer scope, even after the outer function has finished executing.

1️⃣ Context Memorization:

When a function is created, it remembers all the variables in its scope. These variables are available to the function even after the outer function has finished executing.

2️⃣ Private Variables:

Closures allow you to create private variables that cannot be changed or seen outside the function. This makes your code safer and more organized.

3️⃣ Persistent Data:

Closures allow functions to retain state between calls. For example, counters or cached values.

4️⃣ Asynchronous Operations:

Closures are often used in asynchronous code to preserve access to variables from the outer context while performing asynchronous tasks, such as timers or queries.

2,058

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

25 Oct, 01:00

😳 In Your Face

VSCode extension that reacts to errors in code. And it is not just anyone who reacts to your errors, but the face of the main character of the legendary DOOM, from the times of DOS and Windows 95

Every time an error is detected in the code, the extension displays the corresponding "Ouch Face", which makes the debugging process more interactive and fun

1,914

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

24 Oct, 11:00

🥱 annyang!

A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.

annyang has no dependencies, weighs just 2 KB, and is free to use and modify under the MIT license.

2,180

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

24 Oct, 01:00

Free Figma Template: Selection of souvenirs

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

2,151

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

23 Oct, 01:00

☄️ Some little ways I’m using CSS :has() in the real world

A few quick examples from Andy Bell that make great use of the :has selector

2,102

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

22 Oct, 11:00

Free Figma Template: Car shop

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

2,146

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

22 Oct, 02:00

🪢 How to make complex Chrome extensions: a zero gravity guide

Tutorial on creating an extension using Image Saver as an example - an application for saving images.

2,042

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

21 Oct, 11:00

⛳️ Cleave.js has a simple purpose: to help you format input text content automatically.

The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.

However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.

2,065

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

21 Oct, 02:00

🧑‍💻 So you think you know box shadows?

Simple and advanced techniques for using box shadows, as well as situations in which you should avoid using shadows.

1,540

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

20 Oct, 11:00

Free Figma Template: Gaming platform
🧠 Difficulty: 🥕🥕🥕

#Figma #Template

1,669

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

20 Oct, 04:00

🍻 Opinions for Writing Good CSS

Andrew Walpole shares some tips on writing better CSS.

1,605

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

19 Oct, 11:00

🤯 Do you know this GitHub hack?

1️⃣ Open any GitHub repository
2️⃣ Replace .com with .dev
3️⃣ View the repository code in a VS Code instance!

And yes, you can just press the "." button on your keyboard.

1,818

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

19 Oct, 11:00

Free Figma Template: Virtual Reality

🧠 Difficulty: 🥕🥕

#Figma #Template

1,675

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

19 Oct, 04:00

🌽 Center Items in First Row with CSS Grid

Ryan Mulligan explains how to stack grid items so that an odd number of items appears horizontally centered in the first row instead of the last.

1,630

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

18 Oct, 10:00

🪂 Floating UI

A library for positioning and interacting with floating elements.

1,756

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

18 Oct, 02:00

🥷 Why Unknown Types Are Useful

How can the unknown type be useful in TypeScript? We explain with examples

1,854

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

17 Oct, 10:00

🥎 Transition to height: auto & display: none Using Pure CSS

CSS Transitions are the easiest way to add interactions on the web; all you need is an element in two different states with the transition property applied to its initial state, and the browser will smoothly animate the element between these two states.

1,932

Web Development [Frontend] | Free code | Free Figma Templates | HI Web

17 Oct, 02:00

🧛‍♂️ Common Causes of Memory Leaks in JavaScript

Identify and fix common JavaScript memory leaks (Node.js and Deno.js)
Memory leaks are a silent threat that gradually degrades performance, leads to crashes, and increases operational costs. Unlike obvious bugs, memory leaks are often subtle and difficult to spot until they start causing serious problems.

Increased memory usage drives up server costs and negatively impacts user experience. Understanding how memory leaks occur is the first step in addressing them.

1,986