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

  • Getting started with Connect
    Getting started with Connect
    Key Takeaways Connect is an extensible HTTP server framework for Node.js that allows developers to write modular and reusable components using middleware plugins. These plugins either process and pass on requests, or handle the requests directly.
    JS Tutorial 216 2025-02-19 08:51:10
  • 9 JavaScript Libraries for Working with Local Storage
    9 JavaScript Libraries for Working with Local Storage
    The HTML5 local storage API (part of Web storage) has excellent browser support and is being applied in more and more applications. It has a simple API, but it also has some disadvantages similar to cookies. I've come across quite a few tools and libraries that use the localStorage API over the past year or so, so I've sorted them out into this post with some code examples and feature discussions. Important points The HTML5 local storage API is widely supported and is becoming more and more common in applications, but it also has some limitations similar to cookies. Various JavaScript libraries have been developed to improve and extend their capabilities. Lockr, store.j
    JS Tutorial 669 2025-02-19 08:47:10
  • Measuring JavaScript Functions' Performance
    Measuring JavaScript Functions' Performance
    Web application performance is always crucial, especially in web development, slow page loading speed will directly lead to user churn. As professional front-end developers, we must pay attention to performance optimization. Many traditional web performance optimization methods, such as reducing requests, using CDNs, and avoiding writing blocking renderings, are still valid today. However, as more and more web applications use JavaScript, validating code efficiency has become crucial. Suppose you have a function that is functional but suspects it is not efficient and plans to make improvements. How to prove this assumption? What are the best practices for testing JavaScript function performance? Generally, the best way is to use the built-in performance.now
    JS Tutorial 1021 2025-02-19 08:46:09
  • Backbone.js Basics: Bringing an App to Life with Events
    Backbone.js Basics: Bringing an App to Life with Events
    This article explores Backbone.js, a JavaScript framework employing an MV* architecture for building applications. It focuses on event handling, a crucial aspect of separating concerns between views and models. Key Concepts: MV* Architecture: Backb
    JS Tutorial 720 2025-02-19 08:44:11
  • Asynchronous APIs Using the Fetch API and ES6 Generators
    Asynchronous APIs Using the Fetch API and ES6 Generators
    Core points ECMAScript 6 (ES6) better supports asynchronous programming through Promise and Generator, and introduced the Fetch API, designed to replace XMLHttpRequest as the basis for communicating with remote resources. The Fetch API method returns ES6 Promise objects that can be used with Generator to form the basis of complex asynchronous operations, such as a series of operations, where each operation depends on the value returned by the previous operation. Generator can be used with the Fetch API to perform tasks such as long polling, where clients are constantly
    JS Tutorial 866 2025-02-19 08:43:09
  • An Editable Grid with jQuery, Bootstrap, and Shield UI Lite
    An Editable Grid with jQuery, Bootstrap, and Shield UI Lite
    In this short tip, I provide a few easy steps to set up an editable grid (or table) using Bootstrap and Shield UI Lite. Shield UI Lite is an open source jQuery library that includes, among other components, a jQuery grid. The grid supports editing o
    JS Tutorial 339 2025-02-19 08:37:15
  • Lose the jQuery Bloat ­
    Lose the jQuery Bloat ­
    Core points NodeList.js serves as an alternative to DOM operation for jQuery, offering similar functionality, but is smaller (4k after compression) and takes advantage of improvements to native browser APIs. Unlike jQuery, NodeList.js treats arrays of nodes as single nodes, enabling cleaner code and easier NodeList object operations. NodeList.js contains special methods for setting and getting properties, calling element-specific methods, and accessing nodes in NodeList, and owner attributes equivalent to jQuery's prevObject property.
    JS Tutorial 311 2025-02-19 08:27:10
  • The Command Line API for Fun and Profit
    The Command Line API for Fun and Profit
    Browser Developer Tool Command Line API: A powerful tool to improve development and debugging efficiency This article explores the powerful command line API in browser developer tools, which provides a range of aliases, convenient functions and shortcuts to significantly improve the development and debugging experience. Core points: The command line API allows developers to interact with web pages in the JavaScript console. The API is limited to JavaScript console access and cannot be used for page scripts, but it is convenient to experiment with code snippets directly in the browser window. The API provides a variety of functions for DOM exploration, object tracking, and console debugging, including $ ( document.querySelector alias), dir (lists all properties of the object)
    JS Tutorial 411 2025-02-19 08:25:08
  • HTML5 Forms: Dependable Tools in Our Toolbox
    HTML5 Forms: Dependable Tools in Our Toolbox
    The following is excerpted from the book "HTML5 & CSS3 for the Real World, 2nd Edition" co-authored by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This book is available in stores around the world, and you can also purchase the e-book version here. We've written most of the page code and you now know almost everything about the new HTML5 elements and their semantics. But before we start designing the website's look (we're doing it in Chapter 7), we'll quickly leave the homepage of HTML5 Herald to check out the registration page. This will illustrate HTML5 in the web table
    CSS Tutorial 652 2025-02-19 08:24:14
  • Debugging CSS for UI Responsiveness
    Debugging CSS for UI Responsiveness
    This article is excerpted from the book "The Master of CSS" written by Tiffany Brown. The book is available in major bookstores around the world, and you can also purchase the e-book version here. CSS certain properties and values ​​trigger reflow, which is expensive and may reduce the user interface's response speed—page rendering, animation fluency and scrolling performance will be affected, especially in low-level mobile phones and flat-screen TVs. On power consumption equipment. What is rearrangement? {.title} Rearrangement refers to any action that changes part or all of the layout of the page. For example, change the size of an element or update its left position. They cause the browser to recalculate the height, width, and position of other elements in the document. Repaint is similar to repainting, and they force the browser to repaint.
    CSS Tutorial 704 2025-02-18 13:13:14
  • Quick Tip: Build a Video Player Component in React
    Quick Tip: Build a Video Player Component in React
    Build a reusable React video playback component This article will walk you through the process of creating a React video component that loops through the list of videos from Vimeo, YouTube, and Dailymotion. This component is easy to expand to support other video providers. We will use react-hot-boilerplate as a development environment, which supports hot reloading, allowing you to view component build results immediately in your browser without refreshing the page after every code change. The video component has no state of its own, making it reusable and predictable, meaning that the same input will always produce the same output. This article will also discuss best practices for building components in React, including using p
    JS Tutorial 853 2025-02-18 13:10:11
  • How to Build a WI-FI Dashboard Using Node.js and Ractive.js
    How to Build a WI-FI Dashboard Using Node.js and Ractive.js
    Key Takeaways Utilize Node.js to build a server that extends existing functionalities to include Wi-Fi network information, making the dashboard more comprehensive. Implement Ractive.js for the client-side to manage real-time updates and interac
    JS Tutorial 581 2025-02-18 13:05:16
  • How to Build a Daily Affirmations SMS Service with Stripe & Syncano
    How to Build a Daily Affirmations SMS Service with Stripe & Syncano
    This article, sponsored by Syncano, demonstrates building a daily affirmations SMS service using their cloud platform. Syncano handles data storage, user accounts, automated code execution, and webhooks. The service integrates Twilio for SMS messag
    JS Tutorial 445 2025-02-18 13:03:17
  • Exploring Different CMS Solutions Built on Node.js
    Exploring Different CMS Solutions Built on Node.js
    Three Popular Node.js Content Management Systems (CMS) KeystoneJS, PencilBlue, and Apostrophe represent three leading Node.js-based Content Management Systems, each offering a distinct feature set. KeystoneJS excels in creating database-driven websi
    JS Tutorial 689 2025-02-18 13:01:59
  • An Introduction to Reasonably Pure Functional Programming
    An Introduction to Reasonably Pure Functional Programming
    Key Takeaways Pure functions are essential in functional programming as they return the same output for the same input without causing side effects, enhancing predictability and testability. Functional programming reduces program complexity by b
    JS Tutorial 798 2025-02-18 12:58:16

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