current location:Home > Technical Articles > Web Front-end
- Direction:
- All web3.0 Backend Development Web Front-end Database Operation and Maintenance Development Tools PHP Framework Daily Programming WeChat Applet Common Problem Other Tech CMS Tutorial Java System Tutorial Computer Tutorials Hardware Tutorial Mobile Tutorial Software Tutorial Mobile Game Tutorial
- Classify:
-
- Preloading Images in Parallel with Promises
- Core points Use Promise to load pictures asynchronously, allowing different collections of images to be loaded at the same time, and executing code after the collection is loaded. This significantly improves website performance by reducing overall load time. This technique involves creating a shared preloader for all image "groups" (collections) that queues up the images to be loaded. The preloader then starts loading the pictures in parallel (rather than in sequence), avoiding having to wait for one group to complete before the next group is started. Each image URL is replaced with a Promise, which is parsed after the browser loads the image. You can then use the Promise.all() method to create a Promise for each group, which is in the array
- JS Tutorial 417 2025-02-19 11:01:13
-
- Introduction to Stage.js
- Stage.js is a lightweight, open source JavaScript library for cross-platform 2D HTML5 game development. It uses a DOM-like model to manipulate the canvas and manages the rendering cycle of the application itself. This tutorial will introduce the core features of Stage.js to help you get started easily. Key Points Stage.js is a lightweight, open source JavaScript library for cross-platform 2D HTML5 game development, which uses DOM-like models to handle canvas and independently manage the rendering cycle of your application. This library provides multiple features, including node positioning (determining how nodes are attached to their parent node), for interactive updates
- JS Tutorial 924 2025-02-19 11:00:15
-
- Displaying Images on a Dot Matrix LED Display with Node.js
- Key Takeaways The Freetronics DMD library is used to draw lines, shapes, and text onto a dot matrix LED display. This library can be downloaded from the Freetronics GitHub repository and copied into the /Arduino/libraries/ folder. The Arduino sk
- JS Tutorial 763 2025-02-19 10:59:09
-
- Introducing Four: It's WebGL, but Easier
- Four: A WebGL Framework for Simplified 3D Web Development This article introduces Four, a novel WebGL framework designed to streamline the creation of 3D web content. WebGL, while powerful, can be complex. Four addresses this by offering a layered a
- JS Tutorial 628 2025-02-19 10:57:14
-
- What's New in HTML 5.1
- HTML5.1: A new era of web development Explore the creative animation production of HTML5 and watch our screen recording tutorial “Create animations with HTML5 Canvas”. Core points HTML 5.1, as the latest version of HTML, introduces many new features and improvements, including creating context menus using menu and menuitems elements, creating collapsible content using details and summary elements, and three new form input types: month, week, and datetime -local. This version also includes the ability to implement responsive images without CSS, such as: the srcset image attribute is used to list multiple alternative image sources;
- CSS Tutorial 234 2025-02-19 10:51:14
-
- Mastering Your Inbox with the Gmail JavaScript API
- This article demonstrates building a basic Gmail inbox viewer using the Gmail REST API and JavaScript. We'll leverage jQuery and Bootstrap for efficiency. The complete code is available on our GitHub repository. Key Features: Gmail API integration
- JS Tutorial 337 2025-02-19 10:49:10
-
- How to Build VR on the Web Today
- Virtual reality is set to be worth up to $7 billion by 2020. The web is definitely not going to remain an exclusively 2D environment during this time. In fact, there are already a few simple ways to bring VR into the browser. It is also incredibly fu
- JS Tutorial 685 2025-02-19 10:47:09
-
- Building a User Avatar Component With Node.js & TransloadIt
- In the first part of this series, we looked at TransloadIt — a file-processing service which specialises in processing images, videos and audio. If you haven’t read it yet, I’d urge you to do so now as it covers a lot of background concepts which you
- JS Tutorial 325 2025-02-19 10:38:10
-
- ES6 for Now: Template Strings
- ES6 Template Literals: A Modern Approach to JavaScript Strings Key Highlights: ES6 (ECMAScript 2015) significantly enhances JavaScript, introducing features crucial for modern web development. Template literals, using backticks (`) as delimiters, r
- JS Tutorial 466 2025-02-19 10:37:08
-
- Using Fontello to Only Load Icon Fonts That You Need
- Fontello: Create Lightweight Custom Icon Fonts Fontello is a free, user-friendly service for crafting custom icon fonts from vector images. It streamlines web development by consolidating icons from various open-source projects (like Font Awesome, E
- CSS Tutorial 288 2025-02-19 10:36:11
-
- Reimagining Flight Simulator: Then and Now
- This article explores the evolution of flight simulation, focusing on the creation of realistic large-scale terrain in the web-based Flight Arcade. Key Developments in Flight Simulation: 1980's Genesis: The original Flight Simulator (1980) was groun
- JS Tutorial 291 2025-02-19 10:35:08
-
- How to Use Modernizr Responsibly
- Use Modernizr responsibly: A strategy to improve website performance Modernizr, a JavaScript library that detects whether a browser supports specific features. However, to avoid slowing down the website, be sure to use it with caution. This article explores how to use Modernizr responsibly, as well as other similar libraries such as jQuery. Why pay attention to how Modernizr loads? A key question: Are you willing to wait for seconds to access the web page? If the answer is no, so will your visitors. Long loading times will directly affect the user experience and lead to loss of visitors. Therefore, even if you pursue cool features, you must take into account the performance of the website. The key is how to load. many
- JS Tutorial 654 2025-02-19 10:30:10
-
- HTML5 & CSS3 for the Real World, Second Edition
- Key Takeaways HTML5 and CSS3 are designed to ensure backwards compatibility with older browsers, meaning changes to markup won’t cause layout issues or errors. Even if older browsers don’t fully support new features, they won’t break pages or caus
- CSS Tutorial 850 2025-02-19 10:27:09
-
- Understanding PhantomJS
- Core points PhantomJS is a headless WebKit browser with JavaScript API natively supports a variety of web standards including DOM processing, CSS selector, JSON, Canvas and SVG. It is essentially a web browser without a GUI, able to automate various processes using JavaScript. PhantomJS is a powerful tool for developers, providing features such as page automation, screenshots, testing and network monitoring. It allows interaction with web pages without opening a browser, captures web page screenshots, runs tests without a GUI, and can monitor network behavior and performance. Although PhantomJS is more complicated, it is more than just
- JS Tutorial 144 2025-02-19 10:26:09
-
- Building a JavaScript Autocomplete Widget with Awesomplete
- The autocomplete feature in the web application predicts the rest of a word or sentence as the user enters. Users usually press the Tab key to accept suggestions, or press the Down arrow key to accept one of multiple suggestions. This tutorial will explain how to create an autocomplete component in a website using the Awesomplete JavaScript library. Awesomplete was founded by Lea Verou, a well-known speaker, writer and specialist in the W3C CSS working group. Key Points Awesomplete is a lightweight, customizable JavaScript library developed by Lea Verou for autocomplete functionality in web applications. It doesn't
- JS Tutorial 634 2025-02-19 10:24:13