Skip to content
Search

Web development

lastmod 2025-03-17created 2014-01-1183 edits

Subfields of web programming

Web development refers to the work involved in developing websites for the Internet (World Wide Web) or an intranet (private network). Web development ranges from the simplest single static page of plain text to the most complex web-based Internet applications, electronic businesses, and social network services. When people say web development, it generally covers not only web programming but also broader work such as web design, web content development, client-side/server-side scripting, web server and network security configuration, and e-commerce development.

In larger organizations and businesses, a web development team can consist of hundreds of people (web developers). Smaller organizations may need a single permanent webmaster, or a graphic designer and an information systems technician. Web development can be seen as a collaborative effort across departments rather than the domain of a particular department.

Category

Concepts

Frontend

Scaffolding

  • Yeoman

Parser

  • jsdom - A pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.

Bundler

  • Webpack (Module bundler)
  • Browserify
  • RequireJS

Task Runner

Package Manager

Headless

Unit testing (Unit Tests)

Tests the smallest units: util functions, custom React hooks, or a single component

Test Launchers

To run tests, you need a tool that can run them, right? Test launchers run tests via the CLI or Node.js, and let you run tests on jsdom or in a browser

  • jest , mocha , karma , TestCafe , jasmine

Structure Providers

Provide global functions (describe(), test(), it()) so you can combine and order test cases readably when writing tests

  • jest , mocha , TestCafe , jasmine

Assertion Libraries

As described above, these are libraries that provide util functions for checking whether a test is getting the desired result. (expect())

  • jest, chai , TestCafe , jasmine

Mocks, Spies, Stubs

  • sinon, jest , jasmine

Component rendering libraries

Render components in React, provide selectors for finding the desired element in a rendered component, and let you fire various events (onChange, click, etc.) on elements (testing-library supports not only React but several frameworks)

  • enzyme, react-test-renderer, @testing-library, @vue/test-utils

Coverage Reporting

Reports how much of the total codebase the tests cover

  • istanbul + (mocha || jest || karma || jasmine)

Integration testing (Integration Tests)

Tests that check how multiple elements of an application behave when run together

End-to-end Tests (E2E)

Runs a simulation as if a user were using the web app (this tests the server, infrastructure, and web app all together)

Load Testing

End to End Testing (UI Testing)

CSS extension

Syntax lint

Transfiler

File Minimize

Multimedia

Toolkits

Frontend Toolkit
https://www.fetoolkit.io/
A collection of handy tools for frontend developers
  • SVG to TSX/JSX, CSS
  • SVG Optimizer
  • Image Optimizer
  • Format CSS, JS/TS, JSON
  • Colors Converter
  • CSS & SVG Symbols
  • Check npm Package Size
Code Beautify
JSON Beautifier, XML Viewer, JSON Converters, Hex Converters and More...
https://codebeautify.org/
Tiny Helpers
https://tiny-helpers.dev/
A collection of simple single-purpose tools for web developers
  • Rows To Columns
  • Base64 converter
  • Carbon - source code to image
  • CSS tools: cursors, grid generators, extractors, etc.
  • Favicon generator
  • Web font generator
  • JWT debugger
  • Meta tag editor
  • Regular expression editor
  • Image/SVG optimization
  • Unicode and special character search/converter
Offline Toolbox for Developers
DevUtil - A collection of developer tools for macOS
https://devutils.app/
https://github.com/DevUtilsApp/DevUtils-app
  • An offline app that gathers tools you often search for and use on the web
  • Automatically selects the right tool based on the clipboard contents
  • Global shortcut support
  • Unix Time conversion
  • URL Encode/Decode
  • JSON Formatter/Validator
  • JWT Debugger
  • Base64 Encode/Decode
  • Query String Parser
  • HTML Entity Encode/Decode
  • Backslash Escape/Unescape
CyberChef - The Cyber Swiss Army Knife
https://gchq.github.io/CyberChef/
https://github.com/gchq/CyberChef
The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis
Hoverify
https://tryhoverify.com/

Web programming languages

Web programming languages collectively refer to the programming languages used on the WWW. Some exclude markup languages from web programming languages because they are text languages, while others include them because there are programmable markup languages such as TeX.

  • Web programming languages include PHP, JSP, ASP, .NET, etc.
  • Markup languages include the SGML family and the TeX family.

List of web programming languages

Client-side rendering vs Server-sde rendering

Web Fundamentals

full-stack developer Curriculum

See SolutionStack:FullStackDeveloper:Curriculum.

Why your website should be under 14kB

The reasons are as follows:

  • The difference in loading speed between a 15kB page and a 16kB page is not that large, whereas the difference between 15kB and 14kB can be as much as 612ms under certain conditions
  • This is due to a congestion control strategy called TCP Slow start
  • Basically, when a browser and a server first communicate, the bandwidth is unknown
  • It sends 10 TCP packets first, then increases the count to 20, 40, 80
  • The maximum TCP packet size is 1500 bytes, of which 40 bytes are used for headers, so the remaining 1460 bytes * 10 = about 14.25 kB can be used
  • With satellite internet, a single round trip takes as long as 612ms
  • So for faster page loading, it is recommended to deliver critical resources in the first 14 kB of data exchanged
  • HTML data is served compressed, so taking that into account it can be considered about 50 kB

Considering HTTP headers, TLS handshaking, and so on, this rule does not always hold, but it is still a useful guideline

UX design patterns for loading

Loading screens can improve the user experience by providing visibility into what the system is doing.

  • There are several things to consider to build an appropriate loading screen.
    • Check the loading system before designing.
    • Whether loading blocks user input, whether progress can be known, how much information is loaded, what the mobile experience is like, etc.
    • Whether it is passive loading (the system loads in advance) or active loading (loads in response to user actions), etc.
  • Variation by how much is shown at once
    • For complex components, it can be better to show them one by one.
    • For relatively simple components, it is better to display them all at once after loading completes.
    • With many components, lazy loading is needed.
      • Use approaches such as infinite scroll, a load more button, or paging.
  • Variation by frequency
    • If it changes constantly, minimize the UI that shows loading.
      • See Google Drive's UI for saving in real time.
    • If it changes occasionally, it is better to show it to the user immediately.
      • E.g., a popup saying the content you are viewing has been updated and you should refresh the screen.
  • Variation by duration
    • First consider whether progress can be clearly known or is uncertain.
    • Under 0.1 seconds
      • Just show the result immediately.
      • In some cases, showing a fake loading screen can be better.
      • When the task feels important to the user (saving, etc.), or when a delay is needed so the user can take action (the undo button when sending mail, etc.).
    • Between 0.1 and 1 second
      • This is a very common delay and goes unnoticed by users, so it is better not to add a loading screen.
    • Over 1 second
      • Once it passes 1 second, the user becomes aware of the wait, so it is better to add a suitable loading screen.
      • If the component being loaded is small, a loading spinner is a good choice. (file uploads, etc.)
      • If the screen changes, a skeleton loading screen is good.
      • If images are the core content, extracting the dominant color and blurring it works very well.
    • Between 2 and 10 seconds
      • A time indicator such as "This will take about 5 seconds" can be effective.
      • A progress bar is always a good choice.
      • If it consists of several steps, showing those steps is another option.
        • Even without clear steps, generic messages can be used. (connecting to server, etc.)
    • Taking over 10 seconds
      • If progress can be clearly known, it is good to show a percentage, remaining time, etc. (50% of a file upload, etc.)
        • However, stalling at 99% is very damaging, so if that can happen, use a different method.
      • If it takes even longer and progress cannot be clearly known, it is good to tell the user you will notify them by email or similar when the task completes, and let them stay in control.
      • It is also good to run the task entirely in the background without interrupting any of the user's actions. (Google Drive's upload progress, etc.)

Documentation

[Recommended] Learning Patterns - Patterns for web app design - (seems to contain incorrect information occasionally ... - needs checking)
Learning-patterns-by-lydia_hallie_and_addy_osmani-v1.1.pdf
Explanations of design patterns and web component patterns provided as a website and a free e-book (435p PDF)
  • Vanilla JavaScript & React
  • Practical examples using CodeSandbox
  • Patterns explained with animations
  • Patterns
    • Design Patterns : Singleton, Proxy, Provider, Prototype, Observer, Module, Mixin, Hooks, Factory, Compound, Command,..
    • Rendering Patterns : CSR, SSR, Static, Incremental Static Generation, Progressive Hydration, Streaming SSR, Islands Architecture,..
    • Performance Patterns : Static/Dynamic Import, Import on Visibility/Interaction, Route Based Splitting, Bundle Splitting, RPRL, Tree Shaking, Preloadk, Prefetch, List Virtualization,..

See also

Favorite site

MDN (Mozilla Developer Network)

Guide

  • Front-End Checklist
  • [Recommended] Naver D2 - Handling traffic on the Naver main page 3
  • Frontend Fundamentals
    • The Toss frontend chapter published a site introducing its criteria for good frontend code.
    • Explained based on TypeScript, which frontend developers mainly use
    • Presents best practices from four perspectives: readability, predictability, cohesion, and coupling
    • Provides examples using libraries commonly used in real-world frontend work
    • The four criteria
      • Readability is how easy code is to read. For code to be easy to change, you first need to be able to understand what it does.
      • Predictability is how well collaborating colleagues can predict the behavior of a function or component. Highly predictable code follows consistent rules, and you can tell what it does just from the name, parameters, and return value of a function or component.
      • Cohesion is whether code that needs to be changed is always changed together. In highly cohesive code, changing one part does not unintentionally cause errors elsewhere, because the structure ensures that parts that must change together always do.
      • Coupling is the scope of impact when code is changed. Code that is easy to modify has a small scope of impact when changed, so the extent of a change can be predicted.

Tutorials

Article

References

  1. Asfirstalways.tistory.com_-_Client-side_rendering_vs_Server-sde_rendering.pdf ↩

  2. Why_CSS_has_become_difficult_to_understand_through_CSS_history.pdf ↩

  3. Handling_traffic_on_the_Naver_main_page.pdf ↩

author Zer0 sitemap