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

  • 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 832 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 315 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 290 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 393 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 641 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 686 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 836 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 574 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 424 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 671 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 783 2025-02-18 12:58:16
  • Deploy Your Own REST API in 30 Mins Using mLab and Heroku
    Deploy Your Own REST API in 30 Mins Using mLab and Heroku
    Deploy Your Own REST API in 30 Minutes: A Guide Using mLab and Heroku Key Highlights: This tutorial demonstrates building and deploying a RESTful API using the MEAN stack (MongoDB, Express.js, AngularJS, Node.js) on Heroku, with MongoDB hosted on mL
    JS Tutorial 738 2025-02-18 12:52:18
  • Creating Forms with the Webix Framework
    Creating Forms with the Webix Framework
    This article was peer reviewed by Simon Codrington and Mallory van Achterberg. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! As a web designer, the chances are that you have to create web forms on a fai
    JS Tutorial 497 2025-02-18 12:50:14
  • HTML5 Video and Audio: The Markup - SitePoint
    HTML5 Video and Audio: The Markup - SitePoint
    Detailed explanation of HTML5 video and audio tags: Building a responsive video player This article 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 major bookstores around the world, and you can also purchase the e-book version here. Core points HTML5's video and audio tags allow for embedded video and audio elements directly in HTML code, without the need for external plug-ins or players. HTML5 video and audio tags contain multiple attributes to control the behavior of these elements, such as autoplay
    CSS Tutorial 175 2025-02-18 12:49:11
  • Teaching Your Raspberry Pi to Speak with IBM Watson
    Teaching Your Raspberry Pi to Speak with IBM Watson
    This tutorial shows how to make your Raspberry Pi talk using IBM Watson's Text-to-Speech service and Node-RED. We'll build on a previous example (assumed prior setup of Raspberry Pi, Bluemix, and Node-RED). Artwork by SitePoint/PatCat, Logo rights:
    JS Tutorial 670 2025-02-18 12:45:11

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