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

  • Managing the CSS Box Model
    Managing the CSS Box Model
    CSS Box Model: The Key to Understanding Web Layout The most important thing about understanding CSS is: Everything is a box. More specifically, each element in the document generates a box. This box can be a block-level box or an inline-level box. The type of box determines how elements affect the page layout. The CSS box model is a concept used to describe the layout and size of HTML elements. Each element contains a box for its content, fill, border, and margins. These boxes are combined to determine the layout of the element's content and how adjacent elements appear side by side: Whether the element creates a box and which type of box is created will depend on the markup language. CSS evolved into a style for HTML documents
    CSS Tutorial 722 2025-02-17 10:49:11
  • Building a Microblog Using Node.js, Git and Markdown
    Building a Microblog Using Node.js, Git and Markdown
    Build a microblog based on Node.js, Git and Markdown This article explores how to build a microblog using Node.js, Git, and a few dependencies. This app is designed to serve static content from files submitted to the repository. You will learn how to build and test your application and gain insight into the process of delivering your solution. Ultimately, you'll have a minimalist, runnable blog application that you can build on. Key points: Node.js provides a balanced set of APIs that are ideal for building microblog platforms that do not require unnecessary complexity. Git is used to store blog posts as versioned text documents without using traditional databases. Markd
    JS Tutorial 538 2025-02-17 10:48:14
  • An Introduction to Chart.js 2.0
    An Introduction to Chart.js 2.0
    This article is part of our Modern JavaScript anthology. For a comprehensive guide to modern JavaScript, explore SitePoint Premium and download your copy. Peer reviewed by Tim Severien and Simon Codrington. Thanks to all SitePoint's peer reviewers!
    JS Tutorial 1021 2025-02-17 10:47:09
  • Introducing GraphicsJS, a Powerful Lightweight Graphics Library
    Introducing GraphicsJS, a Powerful Lightweight Graphics Library
    HTML5: The cornerstone of modern networks. Today, SVG and Canvas are often the technology of choice when creating interactive images—Flash has been forgotten, Silverlight has become a rare unicorn at the edge of the network, and few people remember third-party plugins. The pros and cons of each technique are well documented, but in short, SVG is better suited to creating and handling interactive elements. This is because SVG is an XML-based vector format that when an image is loaded into a page using tags, each element in it can be used in the SVG DOM. In this article, I want to introduce you to GraphicsJS, a new and powerful open source J based on SVG
    JS Tutorial 296 2025-02-17 10:42:15
  • Hands-on Functional Programming with Ramda.js
    Hands-on Functional Programming with Ramda.js
    This article was reviewed by Yaphi Berhanu, Vildan Softic, Jani Hartikainen and Dan Prince. Thanks to all SitePoint peer reviewers for getting SitePoint content to its best! One of the charms of JavaScript is its functional programming features. From the very beginning, functions were first-class citizens in the JavaScript world. This makes it possible to write elegant and expressive code that can be easily put together in many ways. However, having the ability to perform functional programming alone cannot automatically implement functional programming. Ramda.js is a very
    JS Tutorial 287 2025-02-17 10:40:10
  • Introducing Website Speed Test: An Image Analysis Tool
    Introducing Website Speed Test: An Image Analysis Tool
    Improve website speed and user experience: Optimize pictures with Website Speed ​​Test Images account for the majority of the weight of the web page, so the system's image optimization is crucial to conversion rates and user experience. The performance testing tool you choose will greatly affect the construction and maintenance of your website. WebPagetest is a popular open source tool designed to measure and analyze web page performance, which is why Cloudinary chose to work with them to launch Website Speed ​​Test. Website Speed ​​Test is a picture analysis tool that provides optimization suggestions far beyond simple compression checks. The tool utilizes Cloudinary's advanced algorithms to demonstrate
    CSS Tutorial 957 2025-02-17 10:35:11
  • jQuery's JSONP Explained with Examples
    jQuery's JSONP Explained with Examples
    Summary of key points JSONP (JSON with padding) allows cross-domain Ajax calls, circumventing homologous policies that restrict scripts from accessing data from different sources. This is done by having the server return JSON data containing the function call, which the browser can interpret. While JSONP is valuable for getting data from different sources and accessing content for various services, it also has some limitations. JSONP can only perform cross-domain GET requests and must be explicitly supported by the server. It also has potential security issues as it opens up possibilities for cross-site scripting (XSS) attacks. Other solutions for homologous policies include the use of proxy or the implementation of cross-origin resource sharing (CORS)
    JS Tutorial 195 2025-02-17 10:34:10
  • How to Pass Command Line Parameters to Gulp Tasks
    How to Pass Command Line Parameters to Gulp Tasks
    Core points The simplicity of Gulp.js is one of its most attractive features, allowing developers to write task functions in gulpfile.js and execute them from the command line. However, it does not support passing command line parameters to tasks for use. Although Gulp tasks usually do not require parameters, parameters can be useful in some cases. For example, passing FTP credentials as parameters can enhance security and prevent hard-coded sensitive information. The process.argv property in Node.js returns an array containing processes, scripts, and all command line parameters. This array can be parsed in gulpfile.js to create an object containing parameter values. Although Gul
    JS Tutorial 681 2025-02-17 10:32:10
  • JavaScript Functional Testing with Nightwatch.js
    JavaScript Functional Testing with Nightwatch.js
    Eric Elliott once wrote an article about JavaScript testing: JavaScript Testing: Unit Testing, Functional Testing, and Integration Testing, which explains different types of tests and when to use which test. This article will explore JavaScript functional testing in more depth and demonstrate using the Nightwatch.js library. Before we get started, let's review what functional testing is and why it is important. Simply put, functional testing is designed to ensure that the application works as expected from a user's perspective. What we are talking about here is not technical testing such as unit testing or integration testing. The goal here is to ensure that users can perform seamlessly
    JS Tutorial 434 2025-02-17 10:26:10
  • Getting Started with PouchDB Client-Side JavaScript Database
    Getting Started with PouchDB Client-Side JavaScript Database
    This article has been reviewed by Sebastian Seitz and Taulant Spahiu. Thanks to SitePoint's peer reviewers for their contributions! Modern client-side web applications demand sophisticated data handling capabilities. Browsers now offer robust JavaS
    JS Tutorial 978 2025-02-17 10:24:15
  • 5 jQuery Print Page Options
    5 jQuery Print Page Options
    The jQuery Print Plugin allows you to control and customize which parts of a website are printed, providing an alternative to browser default printing capabilities (usually printing the entire window). This article will explore several popular jQuery printing plugins and demonstrate how to build this feature yourself. Key points: The jQuery Print Plugin allows you to control and customize which parts of the website are printed, providing an alternative to the browser's default printing function (usually printing the entire window). The jQuery Print Preview plugin opens a new browser window to display specific parts of the website for printing. This plugin is very useful for printing data parts such as information cards or a row in a table. j
    JS Tutorial 206 2025-02-17 10:23:14
  • Creating Media Queries for Responsive Web Designs
    Creating Media Queries for Responsive Web Designs
    This article explores responsive web design using media queries, a crucial tool for adapting websites to various devices. It focuses on how media queries allow developers to detect device properties and apply different CSS styles based on those prop
    CSS Tutorial 372 2025-02-17 10:21:10
  • 15 Ways to Write Self-documenting JavaScript
    15 Ways to Write Self-documenting JavaScript
    Key points for writing self-documented JavaScript code This article will explore how to write self-documented and maintained self-documented JavaScript code through structured techniques, naming conventions, and syntax techniques. While self-documented code can reduce the need for comments, it does not completely replace good comments and comprehensive documentation. Core skills Structured technology: Move code into functions, replace conditional expressions with functions, and use pure functions to make the code clearer and easier to understand. Naming convention: Use meaningful names to name variables, functions, and classes to improve code readability. Syntax tips: Avoid using syntax tips, use named constants and make the code clearer. Extract code with caution: Avoid
    JS Tutorial 789 2025-02-17 10:16:09
  • jQuery Pagination Plugins
    jQuery Pagination Plugins
    This article reviews several jQuery pagination plugins, updated in February 2017 for accuracy. Displaying extensive results lists inefficiently is a common problem; pagination offers a superior solution. While server-side pagination fetches paged co
    JS Tutorial 765 2025-02-17 10:14:10
  • Animating the DOM with Anime.js
    Animating the DOM with Anime.js
    Anime.js: A Lightweight JavaScript Animation Library for Dynamic DOM Effects Looking for a fast and lightweight animation library for your web projects? Anime.js, created by Julian Garnier, is a strong contender, especially for dynamic DOM animati
    JS Tutorial 925 2025-02-17 10:13:10

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