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：
-
- An Introduction to jQuery's Deferred Objects
- JavaScript developers have long used callback functions to perform multiple tasks. A very common example is adding a callback through the addEventListener() function to perform various actions when events such as clicks or keys are triggered. The callback function is simple and easy to use and is suitable for simple scenarios. However, when web page complexity increases and many asynchronous operations need to be performed in parallel or sequentially, the callback function becomes difficult to manage. ECMAScript 2015 (also known as ECMAScript 6) introduces a native approach to dealing with such situations: Promise. If you don't know about Promise, you can read the article "Overview of JavaScript Promise
- JS Tutorial 452 2025-02-18 11:08:10
-
- Quick Tip: Persist Checkbox Checked State after Page Reload
- This tutorial demonstrates how to make checkboxes on a webpage remember their checked/unchecked state even after a page refresh or browser closure. This is achieved using the browser's localStorage API, enhancing user experience by preserving user p
- JS Tutorial 292 2025-02-18 11:07:08
-
- How to Build an SMS Appointment Reminder App with Twilio
- This article was peer reviewed by Marc Towler and Bruno Mota. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! In this tutorial we’re going to build an SMS reminder app with Node.js. We’re going to use the
- JS Tutorial 1011 2025-02-18 11:04:13
-
- An In-depth Look at CORS
- This article, peer-reviewed by Panayiotis "pvgr" Velisarakos (with thanks to all SitePoint peer reviewers!), explores Cross-Origin Resource Sharing (CORS), an HTML5 API enabling websites to access previously restricted external resources.
- JS Tutorial 576 2025-02-18 11:01:08
-
- Interactive JavaScript Charts Using Data from Google Sheets
- Key Takeaways Interactive JavaScript charts can be created using data from Google Sheets, offering dynamic updating whenever changes are made to the spreadsheet data. The process involves exporting data from Google Sheets as JSON, fetching this
- JS Tutorial 763 2025-02-18 10:57:13
-
- The Importance of Writing Code That Humans Can Read
- Key Points Clarity first: Readable code improves maintainability and collaboration, and writing easy-to-understand and modify code is crucial. Function and file management: Use functions to encapsulate reusable code and split large files into smaller, more manageable parts to simplify navigation and understanding. Naming Convention: Choose clear and descriptive names for functions and variables to improve readability and reduce the need for additional comments. Avoid over-optimization: While concise and optimized code is attractive, readability should be prioritized when performance impact is not significant, because modern JavaScript engines are very efficient in code optimization. Comment with caution: Use comments to explain "why" do this, rather than "do"
- JS Tutorial 508 2025-02-18 10:52:10
-
- JavaScript Arrays: How to Create and Manipulate
- Easy to understand JavaScript arrays: Detailed explanation of creation and operation Core points JavaScript arrays have a length attribute, can be operated, and have a numbered attribute with names ranging from 0 to 4294967294 (inclusive). JavaScript does not support associative arrays. JavaScript arrays are created in various ways, and it is recommended to use array literals to create new arrays. The array can be intensive (length equals the number of numbered attributes) or sparse (length greater than the number of numbered attributes). The length of the JavaScript array can be changed. If the new length is set less than the current length, any numbered attributes in the array that are positioned greater than the new length will be removed. Java
- JS Tutorial 596 2025-02-18 10:50:10
-
- How to Implement Smooth Scrolling in Vanilla JavaScript
- Core points Use Jump.js library to implement native JavaScript smooth scrolling, simplifying scrolling animation without external dependencies. Modify Jump.js original code to convert it from ES6 to ES5 to ensure wider compatibility with different browsers. Use the requestAnimationFrame method to perform smooth animation updates, optimize performance and provide a smoother user experience. Implement custom JavaScript to intercept the default in-page link behavior and replace sudden jumps with smooth scrolling animations. Integrate the CSS scroll-behavior attribute to support native smooth scrolling in browsers that recognize this feature, and provide Java if the browser does not support it
- JS Tutorial 538 2025-02-18 10:49:09
-
- Mastering $watch in AngularJS
- Core points The $watch function in AngularJS is a powerful tool for observing changes in variable values or expressions. When a change is detected, it triggers a callback function that is executed every time the monitored variable changes. $watch is compared using JavaScript's equality operator (===). If the new value is different from the old value, the callback function is triggered. However, it should be noted that by default $watch only checks for reference equality, which means that the callback function is triggered only when a new value is assigned to the monitored variable. AngularJS also provides $watchGroup and $watchCollection as convenient shortcuts, respectively
- JS Tutorial 789 2025-02-18 10:47:09
-
- Understanding Components in Ember 2
- Key Points The Ember component is the core of Ember applications, allowing developers to define custom, application-specific HTML tags and implement their behavior using JavaScript. In Ember 2.x, components replace views and controllers. The Ember component contains a Handlebars template file and a companion Ember class. These components can be used with other components, and can even be nested in parent components and have properties similar to native HTML elements. Dynamic data can be added to the Ember application through a model (the object representing the underlying data the application presents to the user). This allows the creation of interactive and dynamic components. Can use actions (send to component
- JS Tutorial 570 2025-02-18 10:43:11
-
- 10 jQuery Horizontal Scroll Demos & Plugins
- This post showcases 10 jQuery horizontal scroll demos and plugins, perfect for those who prefer horizontal navigation. We've updated all plugins and demos with the latest versions and added some new ones. ScrollMagic: A lightweight (6KB gzipped),
- JS Tutorial 334 2025-02-18 10:42:10
-
- A Closer Look at Angular's ngMessages Module
- Key Highlights: AngularJS's ngMessages module streamlines error message display in forms, leveraging templates and animation capabilities. Introduced in AngularJS 1.3, it remains a core directive, continually enhanced for improved functionality. Th
- JS Tutorial 1083 2025-02-18 10:41:09
-
- Creating a GraphQL Server with Node.js and MongoDB
- Key Takeaways Utilize Node.js and Express to establish a server and integrate MongoDB with Mongoose for data management, enhancing the server’s ability to handle queries and mutations efficiently. Implement GraphQL on the server using the expres
- JS Tutorial 983 2025-02-18 10:37:13
-
- Custom PDF Rendering in JavaScript with Mozilla's PDF.Js
- Peer reviewed by Jani Hartikainen, Florian Rappl, Jezen Thomas, and Jeff Smith. Thanks to SitePoint's peer reviewers for their contributions! Most modern browsers natively support PDF viewing, but this functionality is beyond a developer's direct co
- JS Tutorial 1002 2025-02-18 10:36:13
-
- Learn about CSS Architecture: Atomic CSS - SitePoint
- The following excerpts are from the book "The Master of CSS" written by Tiffany Brown. This book is available in major bookstores around the world, and you can also purchase the e-book version here. If BEM is the darling in the industry, then Atomic CSS is its rebellious trendsetter. Yahoo's Thierry Koblentz named and explained Atomic CSS in his 2013 article Challenging CSS Best Practices, which uses a compact library of class names. These class names are usually abbreviated and are out of touch with what they affect. In the Atomic CSS system, you can know what the class name does; however, there is no relationship between the class names—at least, the class name and content type used in the style sheet
- CSS Tutorial 446 2025-02-18 10:35:09
Recommended Articles
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.
Player special effects
2024-02-29
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
