current location:Home > Technical Articles > Web Front-end

  • MEAN Stack: Build an App with Angular and the Angular CLI
    MEAN Stack: Build an App with Angular and the Angular CLI
    This tutorial guides you through user authentication in a MEAN stack application. We'll use a common architecture: an Angular single-page app interacting with a Node.js, Express, and MongoDB-based REST API. Key Authentication Aspects: User registrat
    JS Tutorial 621 2025-02-10 15:14:16
  • Managing Dates and Times Using Moment.js
    Managing Dates and Times Using Moment.js
    JavaScript's date and time processing has always been complicated. The native date method is lengthy and the API is often inconsistent. So if you ask a date-related question on StackOverflow, you often hear a reply like this: "Use Moment.js". Key Points Moment.js simplifies the processing of dates and times in JavaScript, providing methods to parse, verify, operate and display dates and times. Although Moment.js is powerful, it is recommended to consider a lighter alternative such as date-fns in new projects, because Moment.js is larger and has variable objects. Mo
    JS Tutorial 656 2025-02-10 14:57:15
  • What Is SVG? Your Guide to SVG Files
    What Is SVG? Your Guide to SVG Files
    SVG: Advantages and applications of scalable vector graphics SVG (Scalable Vector Graphics) is a unique image file format that combines shapes, lines, curves, text and color information to build images. Unlike pixel-based formats such as JPG, PNG, and GIF, SVG files are more like a "recipe" for creating graphics, allowing them to zoom in without losing image quality or increasing file size. SVG files offer many advantages, including scalability and responsiveness, programmability and interactivity, accessibility and performance. They can be used for a variety of purposes, including illustrations, charts, logos, icons, animations, interactive charts, infographics, maps, special effects, and building interfaces and applications. You can use Figma and Adobe I
    CSS Tutorial 483 2025-02-10 14:56:13
  • CSS Optimization Tools for Boosting PWA Performance
    CSS Optimization Tools for Boosting PWA Performance
    Improve PWA Performance: A CSS Optimization Guide This article will explore how to significantly improve the performance of progressive web applications (PWA) through CSS optimization. We will learn how to remove unused CSS, inline critical path CSS, and compress the final code. These technologies are also suitable for ordinary websites and applications. Key points: CSS optimization can significantly improve PWA performance by removing unused CSS, inline critical path CSS, and code compression. Google's open source audit tool Lighthouse can help identify opportunities for CSS optimization. Tools such as PurifyCSS can remove unused CSS styles and reduce the size of CSS files. Critical CSS Extrac
    CSS Tutorial 555 2025-02-10 14:54:10
  • How to Make Your Site Faster with the Performance API
    How to Make Your Site Faster with the Performance API
    This tutorial demonstrates how to leverage the Performance API to capture detailed performance metrics from real users interacting with your web application. While browser DevTools offer performance insights, they don't accurately reflect the diverse
    JS Tutorial 566 2025-02-10 14:53:15
  • How to Migrate Your App from Express to Fastify
    How to Migrate Your App from Express to Fastify
    Express was once the most popular framework for developing web applications using Node.js. However, the framework has decreased active development in recent years, resulting in a lack of support for modern JavaScript features. At the same time, many new frameworks that adopt different approaches to Node.js application development emerge, and Fastify is one of them. This article will explore why Fastify is a compelling alternative to Node.js web application development. We will learn how to avoid rewriting existing Express applications from scratch and instead move to Fastify step by step. After studying this article, you will be able to confidently transfer existing ones
    JS Tutorial 715 2025-02-10 14:50:13
  • How TypeScript Makes You a Better JavaScript Developer
    How TypeScript Makes You a Better JavaScript Developer
    Key Benefits of TypeScript: Enhance developer confidence: TypeScript significantly enhances JavaScript developers' confidence by catching errors before code runs, simplifying code refactoring, reducing unit testing needs, and improving editor coding experience. Improve code readability and predictability: TypeScript's type system makes code easier to understand and predict its behavior, thus reducing the risk of errors and supporting "continuous refactoring". Reduce unit testing: TypeScript can catch type mismatch errors during development without writing certain unit tests (such as function signature tests), allowing developers to focus on more complex tasks. Powerful I
    JS Tutorial 857 2025-02-10 14:45:11
  • How to Create a Reddit Clone Using React and Firebase
    How to Create a Reddit Clone Using React and Firebase
    This tutorial guides you through building a Reddit clone using React and Firebase, and deploying it to Vercel. We'll leverage Firebase's real-time capabilities for immediate feedback on user interactions like voting. React's component architecture
    JS Tutorial 705 2025-02-10 14:43:11
  • How to Build a Developer Blog with Gatsby and MDX
    How to Build a Developer Blog with Gatsby and MDX
    You can easily publish your ideas to sites like Dev.to, Hashnode or Medium, but the ideal is to have full control over your own content. There’s an ever-growing list of tools for building your own website and controlling your own content. In this ext
    JS Tutorial 534 2025-02-10 14:41:11
  • setTimeout JavaScript Function: Guide with Examples
    setTimeout JavaScript Function: Guide with Examples
    JavaScript's setTimeout function detailed explanation: Implement delayed execution setTimeout is a native function in JavaScript that is used to call functions or execute code snippets after a specified delay (milliseconds). This is useful in many scenarios, such as displaying a pop-up window after the user browses the page for a while, or adding a brief delay before removing the element hover effect (preventing misoperation). Key points: JavaScript's setTimeout function allows the execution of functions or code snippets after a specified number of milliseconds, which is very useful for tasks such as displaying popups after a certain browsing time. setTimeout Acceptance letter
    JS Tutorial 819 2025-02-10 14:34:10
  • Build a Node.js CRUD App Using React and FeathersJS
    Build a Node.js CRUD App Using React and FeathersJS
    This tutorial demonstrates building a CRUD contact manager application using Node.js, React, FeathersJS, and MongoDB. It emphasizes a streamlined approach, minimizing boilerplate code and leveraging modern React features. The core concept is separa
    JS Tutorial 482 2025-02-10 14:31:09
  • JavaScript's New Private Class Fields, and How to Use Them
    JavaScript's New Private Class Fields, and How to Use Them
    ES6 introduces classes for JavaScript, but for complex applications they can be too simple. Class fields (also known as class properties) are designed to simplify constructors with private and static members. The proposal is currently in TC39 Phase 3: Candidate Stage and will likely be added to ES2019 (ES10). Node.js 12, Chrome 74, and Babel currently support private fields. Before we understand how class fields are implemented, it is useful to review the ES6 class. This article was updated in 2020. For more in-depth JavaScript knowledge, read our book "JavaScript: From Newbie to Ninja, Second Edition". Key Points ES6 for Ja
    JS Tutorial 796 2025-02-10 14:30:15
  • 6 Top JavaScript UI Frameworks & Libraries for 2020
    6 Top JavaScript UI Frameworks & Libraries for 2020
    Top JavaScript UI Frameworks for 2020: A Comprehensive Overview Building modern, high-performance web applications requires robust UI frameworks. This article explores leading contenders for 2020, highlighting their strengths and weaknesses to help
    JS Tutorial 999 2025-02-10 14:25:14
  • Canvas vs SVG: Choosing the Right Tool for the Job
    Canvas vs SVG: Choosing the Right Tool for the Job
    HTML5 Canvas vs. SVG: Which one to choose? HTML5 Canvas and SVG are both based on standard HTML5 technologies that can be used to create stunning graphics and visual effects. This article discusses a key question: Which technology is more suitable to choose in the project? In other words, in what cases are you more inclined to use HTML5 Canvas than SVG? First, let's briefly introduce HTML5 Canvas and SVG. Key Points HTML5 Canvas and SVG are both HTML5 technologies used to create graphical and visual experiences. Canvas relies on resolution and is used to dynamically render graphics, game graphics, artworks, or other visual images. SV
    CSS Tutorial 334 2025-02-10 14:24:10
  • How to Build Your First Discord Bot with Node.js
    How to Build Your First Discord Bot with Node.js
    Nowadays, bots are being used for automating various tasks. Since the release of Amazon’s Alexa devices, the hype surrounding automation bots has only started to grow. Besides Alexa, other communication tools like Discord and Telegram offer APIs to d
    JS Tutorial 717 2025-02-10 14:20:14

Tool Recommendations

jQuery enterprise message form contact code

jQuery enterprise message form contact code is a simple and practical enterprise message form and contact us introduction page code.
form button
2024-02-29

HTML5 MP3 music box playback effects

HTML5 MP3 music box playback special effect is an mp3 music player based on HTML5 css3 to create cute music box emoticons and click the switch button.

HTML5 cool particle animation navigation menu special effects

HTML5 cool particle animation navigation menu special effect is a special effect that changes color when the navigation menu is hovered by the mouse.
Menu navigation
2024-02-29

jQuery visual form drag and drop editing code

jQuery visual form drag and drop editing code is a visual form based on jQuery and bootstrap framework.
form button
2024-02-29

Organic fruit and vegetable supplier web template Bootstrap5

An organic fruit and vegetable supplier web template-Bootstrap5
Bootstrap template
2023-02-03

Bootstrap3 multifunctional data information background management responsive web page template-Novus

Bootstrap3 multifunctional data information background management responsive web page template-Novus
backend template
2023-02-02

Real estate resource service platform web page template Bootstrap5

Real estate resource service platform web page template Bootstrap5
Bootstrap template
2023-02-02

Simple resume information web template Bootstrap4

Simple resume information web template Bootstrap4
Bootstrap template
2023-02-02

Cute summer elements vector material (EPS PNG)

This is a cute summer element vector material, including the sun, sun hat, coconut tree, bikini, airplane, watermelon, ice cream, ice cream, cold drink, swimming ring, flip-flops, pineapple, conch, shell, starfish, crab, Lemons, sunscreen, sunglasses, etc., the materials are provided in EPS and PNG formats, including JPG previews.
PNG material
2024-05-09

Four red 2023 graduation badges vector material (AI EPS PNG)

This is a red 2023 graduation badge vector material, four in total, available in AI, EPS and PNG formats, including JPG preview.
PNG material
2024-02-29

Singing bird and cart filled with flowers design spring banner vector material (AI EPS)

This is a spring banner vector material designed with singing birds and a cart full of flowers. It is available in AI and EPS formats, including JPG preview.
banner picture
2024-02-29

Golden graduation cap vector material (EPS PNG)

This is a golden graduation cap vector material, available in EPS and PNG formats, including JPG preview.
PNG material
2024-02-27

Home Decor Cleaning and Repair Service Company Website Template

Home Decoration Cleaning and Maintenance Service Company Website Template is a website template download suitable for promotional websites that provide home decoration, cleaning, maintenance and other service organizations. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-05-09

Fresh color personal resume guide page template

Fresh color matching personal job application resume guide page template is a personal job search resume work display guide page web template download suitable for fresh color matching style. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-29

Designer Creative Job Resume Web Template

Designer Creative Job Resume Web Template is a downloadable web template for personal job resume display suitable for various designer positions. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-28

Modern engineering construction company website template

The modern engineering and construction company website template is a downloadable website template suitable for promotion of the engineering and construction service industry. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-28