Web-development

• You Might Not Need that Framework
• Catching Up on the WordPress 🚫 WP Engine Sitch
• Web Components Are Not the Future — They’re the Present
• Web components are okay
• The continuing tragedy of emoji on the web
• Tauri adoption guide: Overview, examples, and alternatives
• Your Accessibility Questions Answered by a Blind Person
• Five Ways to Lazy Load Images for Better Website Performance

• Case Studies
  • Josh Comeau: How I Built My Blog — 2024 “App Router” Edition
  • Ahmad Shadeed: Redesign Case Study
  • Habit Hustle: The Creative Process Behind a UI Animation

CSS

• How to create Shapes with Inner Curves using CSS Mask
• Feature detecting Scroll-Driven Animations with @supports: you want to check for animation-range too
• Open & Close Transitions with <details>
• Introducing TODS — a typographic and OpenType default stylesheet
• The problem with superscripts and subscripts
• Slide Through Unlimited Dimensions With CSS Scroll Timelines
• How to Make a “Scroll to Select” Form Control
• Color Mixing With Animation Composition
• Bad CSS-Dad Jokes (III)
• Developing modals using only CSS and the Popover API
• Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.

JavaScript

• A guide to destructuring in JavaScript
• null, but also not null
• What are Durable Functions? A visual JavaScript primer
• How to use the Reddit API for a JavaScript application

• React
  • A Complete Guide to Session Management in Next.js
  • How to Create a Reusable Modal Component in React
  • Practical guidance between vertical and horizontal micro-frontends
  • Component Composition is great btw
• Vue
  • Augmenting the client with Vue.js
  • Vue Mess Detector — A comprehensive code analysis and quality assessment tool
• Angular
  • Delivering Angular apps in online vs. offline modes
  • Angular Routing Essentials: All You Need to Know in One Post

https://frontender-ua.medium.com/frontend-weekly-digest-382-23-29-september-2024-0bbcff95cde9

https://blog.stackademic.com/frontend-masters-feature-sliced-design-fsd-pattern-81416088b006

Feature-Sliced Design (FSD) Pattern

Imagine a delicious pizza as your complex project. To understand how feature slicing works, let’s break it down slice by slice: easy to manage and delicious (to maintain)! 🍕

I will repeat what I said in my previous medium stories. This will be a long (because why not 😇) and maybe a little difficult to understand article. But once you read it and understand it perfectly, you will now be a 10x frontend developer. 😎 Let’s take your coffee. ☕️ If you don’t drink enough coffee, it will take you longer to become a 10x developer. 😅

Structure

FSD methodology is built on three abstraction levels: layers, slices, and segments.

Layers and Slices

Imagine your app as a delicious pizza. 🍕 (As a developer working at Domino’s, it is my natural right to use the pizza analogy. 😎)

1. Shared Layer (The Pantry):

• Ingredients for everyone: Holds reusable components, utilities, hooks, and services that multiple slices can access. (Think of it as the shared kitchen where everyone can grab common ingredients and tools.)
• Examples:
  - Common UI elements like buttons, forms, modals and navigation bars (think of them as pre-cut veggies and cheese)
  - Utility functions for data formatting or validation (like a sharp pizza cutter)
  - Global state management solutions like Redux, Zustand, Tanstack Query (the recipe book for consistency)

2. Processes Layer (The Kitchen Staff):

• The hardworking chefs: Handles background tasks and data fetching, keeping the pizza kitchen running smoothly. (Think of them as the pizza chefs who prepare the dough, sauce, and toppings, and coordinate the baking process.)
• Examples:
  - Fetching pizza orders from the online system
  - Sending notifications when pizzas are ready
  - Syncing data with the delivery drivers

3. Features Layer (The Pizza Slices):

• Independent and self-contained: Each slice encapsulates a specific feature, with its own UI, logic, and data, like individual pizza slices with their toppings.
• Examples:
  - “Order Pizza” slice: Handles pizza selection, customization, and checkout (pepperoni, mushrooms, extra cheese, sucuk -sausage- you name it!)
  - “Track Order” slice: Displays order status and estimated delivery time (like a pizza tracker)
  - “Review Pizza” slice: Allows customers to rate and comment on their experience (a feedback form for the chef)

4. App Layer (The Pizza Chef):

• The head chef: Oversees the entire pizza-making operation, deciding which slices to bake and how to present them to customers. (Think of it as the master chef who designs the menu, creates new recipes, and ensures each pizza is cooked to perfection.)

5. Pages Layer (The Pizza Display):

• Arranges the slices: Composes slices into meaningful page layouts, like arranging pizza slices on a platter or delivery carton box.
• Examples:
  - Homepage: Combines “Featured Pizzas” and “Order History” slices
  - My Account: Includes “Personal Information” and “Order Preferences” slices

6. Widgets Layer (The Spices):

• Optional flavor enhancers: Small, reusable UI components that can be sprinkled across slices or pages/screens, like adding extra seasoning to your pizza.
• Examples:
  - Search bar (for finding your favorite pizza quickly)
  - User notification panel (alerting you when your pizza is ready)
  - Modal dialogs (for special requests or confirmations)

5. Entities Layer (The Raw Ingredients):

• Building blocks of data: Represents core business entities, like the flour, yeast, and toppings in a pizza.
• Examples:
  - User entity (storing customer details)
  - Pizza entity (defining pizza types and ingredients)
  - Order entity (tracking order information)

Key points to remember:

• Each layer has a clear responsibility and dependency direction.
• Slices can communicate with each other using well-defined contracts, like pizza slices sharing a common crust.
• The goal is to create modular, independent, and easily testable slices, making your “pizza” codebase more manageable and delicious!

Additional pizza analogy notes:

• The kitchen staff (processes) work behind the scenes, preparing ingredients and ensuring a smooth pizza-making process.
• The pizza chef (app) is the mastermind, orchestrating the creation of different pizzas (features) and deciding how to serve them up (pages).
• The raw ingredients (entities) are essential for any pizza, but they’re not always visible to the customer — they’re the foundation that makes everything else possible.

Segments (The Toppings):

• The ingredients within a slice: While a slice is a complete feature, it’s often made up of smaller parts, called segments. These are like the individual toppings that make up a pizza slice.
• Focused on specific tasks: Each segment has a clear responsibility within its slice, like handling a particular UI element, data operation, or piece of logic.
• Examples:
• Within the “Order Pizza” slice:
  - “Pizza Menu” segment: Displays available pizza options and prices.
  - “Topping Selector” segment: Allows customers to choose their desired toppings.
  - “Checkout Form” segment: Collects payment and delivery information.

With a more React way:

Each slice is split into one or more of the following segments:

• ui/: User Interface components and UI related logic
• model/: Business logic (store, actions, effects, reducers, etc.)
• lib/: Infrastructure logic (utils/helpers)
• config/: Local configuration (constants, enums, meta information)
• api/: Logic of API requests (api instances, requests, etc.)

Key points to remember:

• Slices are larger, self-contained features, while segments are smaller, focused parts within a slice.
• Each slice can have multiple segments, just like a pizza slice can have various toppings.
• The goal is to create well-organized, modular code that’s easy to understand, develop, and maintain — like making a pizza with beautifully arranged toppings, each adding its unique flavor to the whole pie!

How about exemplifying what we have read so far in code?

1. Folder Structure (The Pizza Kitchen Organization):

2. Order Pizza Slice (The Extravaganzza):

// features/order-pizza/slice.tsx
import React from 'react';

interface OrderPizzaSliceProps {
  // ... slice props
}

const OrderPizzaSlice: React.FC<OrderPizzaSliceProps> = ({ /* ...props */ }) => {
  // ... slice logic and state management

  return (
    <div>
      <PizzaMenu />
      <ToppingSelector />
      <CheckoutForm />
    </div>
  );
};

export default OrderPizzaSlice;

3. Pizza Menu Segment (The Dough Base):

// features/order-pizza/components/PizzaMenu.tsx
import React from 'react';

interface PizzaMenuProps {
  // ... pizza options
}

const PizzaMenu: React.FC<PizzaMenuProps> = ({ /* ...props */ }) => {
  // ... fetch pizza options and display them

  return (
    <ul>
      {/* List of pizza options */}
    </ul>
  );
};

export default PizzaMenu;

4. Homepage (The Pizza Display Counter):

Feature-Sliced Design (FSD) is like slicing that pizza into neat, individual pieces, each with its own toppings and flavor. Here’s the good and not-so-good of this approach:

// pages/HomePage.tsx
import React from 'react';
import OrderPizzaSlice from '../features/order-pizza/slice';

const HomePage: React.FC = () => {
  return (
    <div>
      <h1>Welcome to Domino's Pizza!</h1>
      <OrderPizzaSlice />
    </div>
  );
};

export default HomePage;

Key takeaways from the code:

• Clear folder structure: Each slice has its own folder, keeping its components and logic organized.
• Independent slices: Each slice can be developed and tested independently, like a self-contained pizza.
• Reusable components: Shared components (buttons, inputs, etc.) can be used across slices for consistency and efficiency.
• Composition within pages: Pages combine slices to create meaningful layouts, like arranging pizza slices on a platter.

Remember: This is a simplified example. Real-world FSD involves more complex state management, data fetching, and communication between slices. However, this example demonstrates the core principles of organizing React apps using FSD.

The good stuff (slices):🍕

• Easy to manage: Like separate pizza slices, each feature is self-contained, making code easier to understand, fix, and update. No more domino effect when changing one part!
• Scales like crazy: Need more features? Just add more slices! FSD lets your app grow gracefully, adapting to new needs like adding pepperoni to your veggie delight.
• Faster cooking (development): Different teams can work on separate slices at the same time, speeding up development like having multiple chefs making pizzas.
• Clear ownership: Each slice has a designated “pizzaiolo,” making developers responsible for its quality and performance, similar to how each chef takes pride in their creation.
• Testing made simple: Testing becomes like checking each slice for doneness, making it more focused and efficient.

The not-so-good stuff (crusts):👎🏻

• Trickier planning: Slices need to work together seamlessly, like ensuring the cheese doesn’t spill over when joining them. Careful planning and communication are key to avoiding a pizza mess.
• Learning curve: Newcomers might be initially confused by the distributed nature of the “pizza,” like figuring out where to find the pineapple chunks. Good documentation is essential to help them navigate.
• Extra effort for teamwork: Ensuring communication and smooth connections between slices takes time and attention, like coordinating the chefs to build the perfect pizza together.
• Potential redundancy: Sometimes, two slices might have similar ingredients, like having both mozzarella and ricotta. Careful planning and shared resources can help avoid unnecessary duplication.
• Limited tools: FSD is still relatively new, so finding tools specifically designed for it might be like searching for a pizza cutter shaped like a unicorn. It might require some extra effort at first.

The decision:

FSD is like a great strategy for large and complex apps, but it’s not a one-size-fits-all recipe. Consider your project’s size, team, and development environment before diving in. Remember, even the most delicious pizza can be tricky to make if you don’t have the right skills and ingredients!

Best Flutter IDE for Front-End Development

https://medium.com/getpieces/best-flutter-ide-for-front-end-development-450bd449f543

Navigating the vast realm of app development, choosing the best Flutter IDE can be a game-changer. Integrated Development Environments (IDEs) are more than just tools; they are the backbone that streamlines the coding process, ensuring flawless execution and enhanced productivity.

Especially when it comes to Flutter, a leading framework in today’s digital ecosystem, having the best IDE for web development elevates the developer’s experience to new heights.

Understanding Flutter and Integrated Development Environments
Flutter, an open-source UI software development toolkit birthed by Google, has swiftly risen as a dominant force in mobile app development. With its unique ability to craft high-fidelity, natively compiled applications for multiple platforms from a single codebase, Flutter presents developers with unparalleled flexibility and efficiency. Its vibrant widget-centric approach, paired with the Dart language, promises robust and visually appealing applications, be it for mobile, web, or desktop.

Integrated Development Environments (IDEs) serve as the crucible where the magic of Flutter comes alive. These sophisticated platforms offer a consolidated workspace, combining essential tools like code editors, debuggers, and compilers. In the context of Flutter, the right IDE can simplify the coding process, provide real-time feedback, and automate repetitive tasks. By easing navigation, highlighting errors, and offering intelligent code completion suggestions, IDEs empower developers to harness the full potential of Flutter, ensuring smooth and efficient project outcomes.

Key Considerations When Choosing a Flutter IDE
Here are some key things that you need to consider before pitching for the best Flutter IDE:

1. Hardware and Software Compatibility:

Flutter IDE for Android: Ensure support for Android emulators and tools specific to the Android ecosystem.
Flutter IDE for Windows: Must be optimized for Windows with seamless integration of its features.
2. Performance and Speed of the IDE:

Opt for an IDE that is agile and responsive. The speed at which it can compile, run, and debug Flutter code is pivotal in enhancing development efficiency.

3. Availability of Support and Community Plugins/Extensions:

A robust library of plugins and extensions, backed by an active community, can be game-changing. These additions can introduce functionalities, streamline specific processes, or offer tools tailored to niche requirements.

4. Cost Factors and Licensing:

Sometimes, premium IDEs, despite an upfront cost, can offer unparalleled features, superior support, and regular updates. It’s also crucial to understand the licensing agreements. Some might be free for personal use but require payment for commercial projects.

Best Flutter IDEs For App Development
VS Code
Visual Studio, often dubbed the titan of IDEs, is Microsoft’s premier development environment, revered for its adaptability across various programming landscapes. For Flutter enthusiasts, it unfolds as a haven, integrating seamlessly with the framework and facilitating an optimized coding experience, ensuring rapid, efficient app development.

Features
Seamless integration with Git: No more hopping between platforms. Visual Studio embeds Git functionality within, streamlining version control and ensuring smooth code management.
Live Share: Elevate the collaborative experience with real-time coding sessions. Whether you’re mentoring a junior developer or debugging with a colleague across the globe, Live Share makes it effortless.
IntelliCode: Leveraging artificial intelligence, IntelliCode revolutionizes coding with predictive suggestions. It not only speeds up the development process but also reduces the chances of errors.
Extensive extensions marketplace: Personalize your Flutter web development experience. With a vast repository of extensions like the Pieces for Developers VS Code extension, you can add tools, themes, and languages tailored to your needs.
Integrated debugging tools: Dive deep into your code with precision. Visual Studio’s debugging suite is adept at swiftly identifying and rectifying anomalies, ensuring your Flutter apps run flawlessly.
Android Studio
Android Studio stands as the official IDE for Android development. Its stature is further elevated when it collaborates with Flutter, offering an ecosystem that is both intuitive and powerful. For developers diving into the Flutter world, Android Studio becomes a natural ally, bringing Google’s native Android expertise and fusing it with Flutter’s dynamic capabilities.

Features
Emulator with real-time preview: Say goodbye to guesswork. With its integrated emulator, developers can see changes in real time, ensuring the app looks and functions as intended.
Full suite of profiling tools: Dive deep into your app’s performance metrics. From memory usage to CPU cycles, Android Studio’s profilers provide insights to optimize and enhance app responsiveness.
Code completion and powerful debugging: Coding in Flutter becomes a breeze thanks to intelligent code suggestions and a robust debugger that quickly pinpoints and rectifies issues.
Flutter-specific widget inspector: Understand and modify your Flutter widgets effortlessly. This specialized inspector visualizes and debugs the widget tree, simplifying UI adjustments.
Fast build and deploy processes: Time is of the essence. Android Studio accelerates the build and deployment phases, ensuring swift transitions from coding to testing.
DartPad
Floating in the digital ether is DartPad, a minimalist yet potent online IDE tailored for the Flutter and Dart communities. It breaks down barriers by being accessible directly via a browser, making it an invaluable tool for quick coding experiments or when on the go. For those seeking a no-fuss, immediate Flutter coding environment, DartPad emerges as an impeccable choice.

Features
Web-based with no installation required: Website accessibility is its middle name. DartPad requires no downloads or setups, offering a hassle-free, instant coding platform anytime, anywhere.
Live preview feature: Witness your Flutter magic in real time. As you code, DartPad dynamically displays the results, aiding in immediate feedback and iterations.
Supports Dart and Flutter libraries: Despite its lightweight nature, DartPad doesn’t skimp on essentials. It offers comprehensive support for Dart and Flutter libraries, ensuring a rich coding experience.
Shareable code snippets: Collaboration is critical. Whether you want to share a piece of brilliance or seek feedback, DartPad’s shareable snippets make it effortless.
Simple and intuitive interface: DartPad prides itself on its clean design. With an uncluttered interface, developers can focus purely on coding, free from distractions.
IntelliJ IDEA
In the grand tapestry of development environments, IntelliJ IDEA by JetBrains stands out as a multifaceted gem. Its prowess extends seamlessly to Flutter development, offering intuitive features and advanced capabilities. For those who prioritize depth in their coding assistance without compromising on efficiency, IntelliJ IDEA proves to be an indispensable ally in the Flutter domain.

Features
Deep code understanding: Venture beyond the surface. IntelliJ IDEA delves into the semantics of your code, offering insights and suggestions that align with best practices and design patterns.
Smart code completion: Efficiency at your fingertips. As you type, the Intellij IDE proactively offers code suggestions, streamlining the coding process and minimizing potential errors.
Powerful code refactoring tools: Embrace change without fear. With robust refactoring capabilities, adapting and enhancing your Flutter codebase becomes a structured and error-free process.
Built-in tools for profiling: Gauge the pulse of your application. IntelliJ IDEA’s profiling tools shed light on performance metrics, enabling optimizations and fine-tuning.
Version control integration: Manage your code evolution with grace. Integrated version control ensures smooth transitions between code versions, collaborative coding, and well-maintained coding history.
Flutlab
In the dynamic arena of online IDEs, Flutlab emerges as a beacon for cloud-based Flutter development. Harnessing the power and flexibility of cloud technology, it reshapes the conventional boundaries of coding, offering a streamlined and accessible platform. For a Flutter developer seeking a seamless Flutter IDE online without the constraints of hardware or location, Flutlab unfolds as an impressive choice.

Features
Real-time collaboration: Teamwork made simple. Flutlab facilitates synchronized coding sessions, allowing multiple developers to collaborate on projects, ensuring seamless teamwork and immediate feedback.
Cloud-based simulator: Say goodbye to hefty local emulators. Test Flutter web applications directly within the browser using Flutlab’s efficient cloud simulator, saving time and system resources.
Integration with popular repositories: Seamlessly connect with platforms like GitHub or Bitbucket. This integration ensures fluid code pulls, pushes, and version management.
Direct APK download: Transition from development to testing in a snap. With Flutlab, developers can directly download the APK, facilitating swift app testing and deployment.
Code analysis and debugging: Navigate the maze of code with precision. Flutlab’s tools offer insightful code analysis and a potent debugger, ensuring your Flutter apps are robust and error-free.
XCode
Diving into Apple’s ecosystem, XCode stands tall as the definitive development environment for those keen on reaching the iOS audience through Flutter. Seamlessly merging the robustness of Apple’s software architecture with Flutter’s adaptability, it crafts an unparalleled development experience.

Features
Advanced debugging and profiling tools: With XCode, troubleshooting is elevated to an art form. Its suite of tools provides deep insights, ensuring your Flutter apps run optimally on iOS devices.
Interface Builder: Envision and create dynamic Flutter UI with ease. The XCode Interface Builder offers a visual canvas, making UI/UX design intuitive and efficient.
On-device testing support: Witness your creations in their natural habitat. Test directly on iOS devices to ensure performance and responsiveness.
Asset management: Organize and manage multimedia with finesse. XCode’s asset catalog aids in streamlined resource utilization.
Swift and C integration: While Flutter reigns supreme, the XCode IDE allows seamless integration with Swift and C, broadening developmental horizons.
FlutterFlow
Making its mark in the Flutter landscape is FlutterFlow, a revolutionary visual development platform. Eliminating traditional barriers, it provides a canvas where even non-coders can bring Flutter applications to life.

Features
Drag-and-drop UI builder: Designing made simple. Sculpt interfaces without diving into code, making development swift and accessible.
Firebase integration: Connect with Firebase effortlessly, enhancing functionalities like authentication, databases, and more.
Real-time previews: Iterate with confidence. See changes as you make them, ensuring design perfection.
Robust component library: A treasure trove of widgets and elements catering to diverse design needs.
Collaboration and versioning features: Team up and maintain code history with precision, streamlining project management.
Emacs Dart Mode
For purists who find solace in Emacs, the Dart Mode extension brings Flutter to their fingertips. Merging the efficiency of Emacs with Flutter’s dynamism it offers a refined coding experience.

Features
Syntax highlighting: Navigate code effortlessly with distinct color codes for better readability.
Code formatting: Maintain a pristine codebase with automatic formatting, ensuring consistency.
Integration with Dart SDK: Access Dart’s full potential seamlessly within the Emacs environment.
Quick documentation access: Answers are just a keystroke away. Dive into Dart and Flutter documentation on the fly.
Keyboard-centric commands: Embrace the power of keyboard shortcuts, enhancing coding speed and efficiency.
RevenueCat
While not a conventional IDE, RevenueCat is a vital tool for developers integrating in-app purchases and subscriptions in their Flutter apps. Simplifying the maze of monetization, it’s a catalyst for revenue generation.

Features
Simplifies in-app billing: Navigate the intricacies of billing with ease, enhancing user experience and purchase success rates.
Tracks revenue and metrics: Gauge your success. Monitor key metrics to strategize and optimize monetization.
Supports multiple platforms: Not just limited to Flutter, RevenueCat’s broad platform support ensures consistent monetization strategies.
Robust API: It offers ease and flexibility thanks to its robust API integration. Integrate with comfort and flexibility, leveraging RevenueCat’s powerful API.
Atom
Atom, an avant-garde text editor birthed by GitHub, extends its arms to Flutter developers through community-driven extensions. Marrying simplicity with adaptability, it emerges as a formidable environment for Flutter projects.

Features
Git integration: With its roots in GitHub, Atom offers seamless Git operations, streamlining code management.
Autocompletion for Flutter: Speed up your coding. Atom suggests code snippets, enhancing your Flutter coding rhythm.
Embedded terminal: Access the terminal within the editor, streamlining tasks without switching windows.
Smooth UI with themes: Personalize your workspace. With a vast array of themes, craft an environment that resonates with your aesthetic.
The Main Benefits of IDEs & Text Editors for App Development
Streamlined development cycle.
Comprehensive code management.
Integrated testing and debugging.
Enhancing collaboration and productivity.
Customization and extension support.
Conclusion
Choosing the best IDE for Flutter is pivotal, acting as the linchpin between ideas and execution. A Flutter IDE directly influences productivity, ensuring app development is both efficient and yields superior quality outcomes. Want to learn about how Pieces built their app? Read Pieces’ Flutter case study.

[HTML] 24 Powerful HTML Attributes Every Senior Web Engineer Should Master!

https://javascript.plainenglish.io/24-powerful-html-attributes-every-senior-web-engineer-should-master-ad8a4df0776e

There are many HTML attributes, in addition to some basic attributes, there are many useful and particularly powerful attributes;

This article will introduce 24 powerful HTML attributes that can make your website more dynamic and interactive, and make users feel more comfortable and happy.

Let’s explore these 24 powerful HTML attributes together!

1. Accept

The Accept attribute is used to specify a list of MIME types that the browser can handle.

Tips:

A MIME type is a standard for identifying the type of document,

For example, text/html represents an HTML document, image/jpeg represents a JPEG image, and so on.

By including the Accept attribute in the HTTP request header, the browser can tell the server which MIME types it can accept in response. Based on this information, the server can choose the most appropriate response type and return it to the browser. The value of the Accept attribute is a comma-separated list of MIME types, wildcards can be used to represent a class of MIME types, for example text/* represents all text types.

2. Autofocus

The Autofocus property is used to automatically set the focus to the specified element when the page loads.

Tips:

Autofocus attributes can be applied to various HTML elements such as text boxes, buttons, drop-down lists, and more.

In HTML5, the Autofocus attribute can omit the attribute value, indicating that the focus is set to the first element with the Autofocus attribute.

When the page is loaded, if there is an element with the Autofocus attribute, the browser will automatically focus the cursor on the element, so that the user can directly interact with the element without manually clicking or using the Tab key to switch focus.

3. Input mode

The Inputmode attribute is an attribute for specifying the type of content entered in the text box.

It can help the browser to better optimize the input experience, such as automatically popping up the appropriate virtual keyboard on mobile devices.

• text: The default value, which means input any text.
• none: indicates that no input is required.
• tel: Indicates to enter a telephone number.
• url: Indicates the input URL address.
• email: Indicates to enter an email address.
• numeric: Indicates the input number.
• decimal: Indicates inputting a number with a decimal point.
• search: Indicates to enter a search keyword.

The level of support for the Inputmode attribute may vary in different browsers.

Therefore, compatibility testing is required when using the Inputmode property.

4. Pattern

The Pattern attribute is a regular expression pattern used to specify the input content in the text box. It can help the browser to verify whether the content entered by the user conforms to the specified format requirements.

If the content entered by the user does not conform to the regular expression pattern specified by the Pattern attribute, the browser will display a default error message.

Tips:

• The value of the Pattern attribute must be a valid regular expression.
• The Pattern property can only be applied to elements that can enter text, such as text boxes, text fields, and password boxes.
• The Pattern attribute will not prevent users from entering illegal characters, but will verify that the input content meets the specified format requirements when submitting the form.
• The error message of the Pattern attribute can be customized using the title attribute.

The Pattern attribute is usually used together with the required attribute to ensure that the content entered by the user conforms to the specified format requirements and is not empty. For example, you can use the Pattern property to validate user input for zip codes, phone numbers, email addresses, and so on.

5. Required

The Required attribute is an attribute used to specify whether a form element is required.

If a form element has the Required attribute set, then when the form is submitted, if the value of the element is empty, the browser will prevent the form from being submitted and prompt the user to fill in the field.

Tips:

• The Required attribute can only be applied to form elements, not to other HTML elements.
• The Required attribute does not verify whether the content entered by the user meets the specified format requirements, only whether the element is empty.
• The Required attribute does not prevent users from submitting spaces or whitespace characters, so some other means of validating user input is required.
• The Required attribute can be used together with the Pattern attribute to verify that the user-entered content conforms to the specified format requirements.
• The Required attribute can be used in conjunction with the Autofocus attribute to ensure that when the user enters the form page, the focus is automatically on the required field.

The Required attribute is often used with the type attribute of form elements, such as text boxes, drop-down lists, radio boxes, check boxes, and so on.

6. Autocomplete

The Autocomplete attribute is an attribute used to specify whether the form element has auto-complete enabled.

Autocomplete helps users fill out forms faster and reduces the chance of typing errors.

Tips:

• on: The default value, which means that the auto-completion function is enabled.
• off: Indicates that the auto-completion function is disabled.
• name: Indicates that the name attribute of the form element is used as the keyword for automatic completion.
• email: Indicates to use the most recent email address entered by the user as the autocomplete keyword.
• username: Indicates that the user name recently entered by the user is used as the keyword for auto-completion.
• current-password: Indicates that the password recently entered by the user is used as the keyword for auto-complete.
• new-password: Indicates that the new password recently entered by the user is used as the keyword for auto-complete.
• tel: Indicates to use the last phone number entered by the user as the keyword for autocomplete.
• address-level1: Indicates that the country or region name recently entered by the user is used as the keyword for auto-completion.
• address-level2: Indicates that the province or state name recently entered by the user is used as the keyword for auto-completion.
• address-level3: Indicates that the city or region name recently entered by the user is used as the keyword for auto-completion.
• address-level4: Indicates that the most recent street name entered by the user is used as the keyword for auto-completion.
• country: Indicates that the country name recently entered by the user is used as the keyword for auto-complete.

The degree of support for the Autocomplete attribute may vary in different browsers. Therefore, compatibility testing is required when using the Autocomplete property.

7. Multiple

The Multiple attribute is an attribute used to specify whether a form element allows multiple selections.

The Multiple attribute is typically applied to form elements such as dropdown lists, file uploads, and checkboxes.

Tips:

• The Multiple attribute can only be applied to form elements such as drop-down lists, file uploads, and check boxes, and cannot be applied to form elements such as radio boxes and text boxes.
• The value of the Multiple property must be a Boolean value, true or false.
• The default value of the Multiple attribute is false, which means that multiple selections are not allowed.
• When the value of the Multiple attribute is true, the drop-down list will be displayed as a multi-selectable list box, the check box will be displayed as a multi-selectable check box list, and the file upload will allow the user to select multiple files.
• When using the Multiple attribute, it is necessary to process the multi-selected values ​​in the background program, for example, use an array to store the multi-selected values.

If a form element has the Multiple attribute set, the user can select multiple options, not just a single one.

8. Download

The Download attribute is an attribute for specifying a file name when a link downloads a file.

If a link is set with the Download attribute, then when the user clicks the link to download the file, the browser will save the file locally and use the file name specified by the Download attribute to name the file.

Tips:

• The value of the Download attribute can be any string, which represents the file name used when downloading the file.
• The Download attribute can only be applied to tags, not to other HTML elements.
• The Download attribute doesn’t change the actual name of the file, it just uses the specified filename when downloading.
• The value of the Download attribute can be dynamically generated, for example using JavaScript to generate the filename.
• When using the Download attribute, you need to ensure that the downloaded file is legal and does not violate the copyright and privacy of others.

The Download attribute is usually used in tags to download PDF, image, audio, video and other files.

9. Content editable

The Contenteditable attribute in HTML is an attribute used to specify whether an element is editable.

Tips:

• The value of the Contenteditable attribute can be true, false or inherit.
• The default value of the Contenteditable property is false, indicating that the element is not editable.
• When the value of the Contenteditable property is true, the element is editable.
• When the value of the Contenteditable attribute is inherit, the editability of the element is inherited from the parent element.
• The Contenteditable attribute does not change the default behavior of the element, eg tags can still jump to other pages.
• When using the Contenteditable attribute, you need to pay attention to security issues to avoid XSS attacks and malicious script injection.

If an element sets the Contenteditable attribute, then the user can enter text, insert pictures, modify styles, etc. in the element. The Contenteditable attribute is usually applied to, and other elements are used to implement functions such as rich text editors and editable tables.

10. Readonly

The Readonly attribute in HTML is an attribute used to specify whether a form element is read-only.

Tips:

• The value of the Readonly attribute must be a Boolean value, true or false.
• The default value of the Readonly attribute is false, indicating that the form element is editable.
• When the value of the Readonly attribute is true, the form element is read-only.
• The Readonly attribute does not prevent users from modifying the value of form elements via JavaScript.
• The Readonly attribute is different from the Disabled attribute, which disables the form element so that it cannot submit data.
• When using the Readonly attribute, it is necessary to process the read-only value in the background program, such as using a hidden field to store the read-only value.

If a form element has the Readonly attribute set, the user can see the value of the element, but cannot modify the value of the element. The Readonly attribute is usually applied to form elements such as text boxes, drop-down lists, and date pickers to display data or prevent users from modifying data.

11. Hidden

The Hidden attribute is an attribute used to specify whether an element is hidden.

Tips:

• The value of the Hidden property must be a Boolean value, either true or false.
• The default value of the Hidden property is false, indicating that the element is not hidden.
• When the value of the Hidden property is true, the element is hidden.
• The Hidden attribute is different from the display:none attribute of CSS. The display:none attribute will completely remove the element from the page, and the element cannot be accessed through JavaScript or other methods.
• When using the Hidden attribute, the hidden value needs to be processed in the background program, such as using a hidden field to store the hidden value.

If an element has the Hidden attribute set, the element will not be displayed on the page, but it still exists on the page and can be accessed through JavaScript, etc. The Hidden attribute is usually applied to elements such as form elements, buttons, images, etc., to pass data or control page behavior without affecting the page layout.

12. Spellcheck

The Spellcheck attribute in HTML is an attribute used to specify whether to enable spell checking for an element.

Tips:

• The value of the Spellcheck property must be a Boolean value, true or false.
• The default value of the Spellcheck attribute is false, indicating that the element does not enable spell checking.
• When the value of the Spellcheck attribute is true, the element enables spell checking.
• The extent of support for the Spellcheck attribute varies by browser, and different browsers may have different spellcheck algorithms and dictionaries.
• When using the Spellcheck attribute, you need to pay attention to security issues to avoid XSS attacks and malicious script injection.

If an element sets the Spellcheck attribute, then when the user enters text in the element, the browser will automatically check for spelling errors and display a red wavy line under the incorrect word. The Spellcheck attribute is usually applied to elements such as text boxes and text fields to improve the accuracy of user input.

13. Translate

The Translate attribute in HTML is an attribute used to specify whether an element should be translated.

Tips:

• The value of the Translate attribute must be a Boolean value, yes or no.
• The default value of the Translate property is yes, indicating that the element needs to be translated.
• When the value of the Translate attribute is no, the element does not require translation.
• The degree of support for the Translate property varies from browser to browser, and different browsers may have different translation algorithms and dictionaries.
• When using the Translate attribute, you need to pay attention to security issues to avoid XSS attacks and malicious script injection.

If an element has the Translate attribute set, the browser will decide whether to translate the content of the element according to the value of the attribute. The Translate attribute is usually used in multilingual versions of websites to control which elements need to be translated and which elements do not.

14. Loading

The attribute in HTML loadingis a new attribute that can be used to specify the browser's priority when loading resources.

This attribute can be applied to tags such as <img>, <iframe>, <script>, <link>and <audio>.

Tips:

• lazy: Indicates that the resource should be lazily loaded after the page loads. It's the default value.
• eager: Indicates that the resource should be loaded immediately on page load.
• auto: Indicates that the browser should decide when to load the resource by itself.

loadingAttributes are not supported by all browsers, so a compatibility check is required when using them.

15. Onerror

onerroris a JavaScript event handler that fires on JavaScript errors.

onerrorEvent handlers can be added windowto objects to catch JavaScript errors globally.

Tips:

• message:wrong information.
• source: The URL of the script where the error occurred.
• lineno: The line number where the error occurred.
• colno: The column number where the error occurred.
• error: An Error object containing detailed information about the error.

onerrorEvent handlers can only catch JavaScript errors that are not caught by other error handlers.

It is best to use try-catch statements in your code to catch and handle JavaScript errors.

16. Poster

posteris an attribute of the HTML5 <video>tag that specifies an image to display before the video loads and before it plays.

Tips:

posterAttributes only apply to <video>tags, not <audio>labels.

It is commonly used to provide a preview image or thumbnail of a video.

17. Controls

controlsIs an attribute of the neutral tag in HTML5 <video>, <audio>which is used to specify whether to display the controls of the media player.

If controlsthe property is set to controls, controls are displayed on the media player, such as a play/pause button, volume control, progress bar, etc.

<!DOCTYPE html>
<html>
<head>
<title>Controls Example</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`

controlsAttributes are only available in browsers that support HTML5. If the browser does not support HTML5, the control will not be displayed.

18. Autoplay

autoplayis an attribute of the neutral tag in HTML5 <video>that <audio>specifies whether the media should play automatically on page load.

If autoplaythe property is set to autoplay, the media will play automatically on page load.

<!DOCTYPE html>
<html>
<head>
<title>Autoplay Example</title>
</head>
<body>
<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`

Autoplay can negatively impact the user experience, so use autoplayattributes with caution. In some cases, browsers may block autoplay, such as on mobile devices, where the user must first interact with the page to allow autoplay.

19. Loop

loopis an attribute of the <video>neutral <audio>tag in HTML5 that specifies whether the media should loop after playback ends.

If loopthe property is set to loop, the media will loop after playback finishes.

<!DOCTYPE html>
<html>
<head>
<title>Loop Example</title>
</head>
<body>
<video width="320" height="240" loop>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>`

Looping can negatively impact the user experience, so use loopattributes with care.

20. Cite

citeis a global attribute in HTML that can be used to specify the source of the citation.

citeThe value of the attribute should be a URL pointing to the source of the reference.

Tips:

citeAttributes can be applied to tags such as <blockquote>, <q>, <del>, etc.<ins>

If the source of the referrer is not a URL, citethe value of the property can be set to a string describing the referrer.

<!DOCTYPE html>
<html>
<head>
<title>Cite Example</title>
</head>
<body>
<blockquote cite="https://www.example.com/quote">
This is a quote from an external source.
</blockquote>
<q cite="https://www.example.com/quote">
This is a short quote from an external source.
</q>
<del cite="https://www.example.com/deleted">
This text has been deleted from an external source.
</del>
<ins cite="https://www.example.com/inserted">
This text has been inserted from an external source.
</ins>
</body>
</html>

citeAttributes do not automatically create links, so if you need to create a link, you need to use <a>a tag and hrefset the attribute as citethe value of the attribute.

21. Datetime

datetimeIs an attribute of tags in HTML <time>, used to specify the date and time.

datetimeThe value of the attribute should be a valid date and time format, eg YYYY-MM-DDThh:mm:ss.

datetimeAttributes do not automatically format dates and times, so you need to use JavaScript or other tools to format dates and times.

22. Async

asyncis an attribute of the tag in HTML <script>that specifies whether the script should be loaded asynchronously.

If asyncthe property is set to async, the script will be loaded asynchronously and will not block parsing and rendering of the page.

Scripts loaded asynchronously may execute before the rest of the page loads, so use with caution. This can cause errors if the script depends on other parts of the page.

23. Defer

deferis an attribute of the tag in HTML <script>that specifies whether scripts should be lazy-loaded.

If deferthe property is set to defer, the script will delay loading until the page has been parsed before executing it.

<!DOCTYPE html>
<html>
<head>
<title>Defer Example</title>
<script defer src="script.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>

In the example above, we deferset the property to defer, which will cause the script to be lazy loaded. In this case the script will be executed after the page has been parsed and will not block the page from loading.

24. Draggable

Draggableis an attribute in HTML5 that allows users to move elements by dragging them. draggableWhen an element is set to , the user can drag the element with the mouse or by touching the screen. When dragging an element, a series of events will be triggered, such as dragstart, , dragand dragend, and these events can be used to implement the drag-and-drop function.

프론트엔드 추천 자료 모음

https://velog.io/@ansrjsdn/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%B6%94%EC%B2%9C-%EC%9E%90%EB%A3%8C-%EB%AA%A8%EC%9D%8C

사이트

MDN - 가장 유명한 MDN
모던 javascript 튜토리얼 - JS 튜토리얼로 정말 좋음.
타입스크립트 핸드북 - TS 공식문서 번역본
웹팩 핸드북 - 캡틴판교님의 웹팩 핸드북
fontawesome - 다양한 ICON을 가져올 수 있는 사이트
flatuicolors - 다양한 색들을 가져오기 편한 사이트
CSS Dinner - 다양한 css 선택자들을 게임을 통해 배울 수 있는 사이트
FLEXBOX FROGGY - css의 FLEXBOX를 게임을 통해 배울 수 있는 사이트
GRID GARDEN CSS의 grid를 게임을 통해 배울 수 있는 사이트

블로그

Velopert velog - velog를 만든 velopert님의 velog로 정말 좋은 글들이 많음.

제로초 블로그 - 다양한 JS 관련 지식들이 있음.

Jbee 블로그 - 다양한 프론트엔드 관련 지식들

TOAST UI - FE 관련 지식들과 여러 글들

캡틴판교 블로그 - JS 및 VUE 관련 글들이 많음.

Evan moon 블로그 - 다양한 프론트엔드 관련 글들

NAVER D2
우아한형제들 기술 블로그
라인 기술 블로그 - 프론트

깃허브

주니어 개발자 채용 정보 - 주니어 개발자들이 지원 할만한 다양한 채용 정보 모음.

고퀄리티 개발 모음 - 다양한 개발에 대한 지식들을 모아 둔 곳.

Technical Interview Guidelines for Beginners - 다양한 면접 관련 질문들을 모아둔 곳.

취준생이 반드시 알아야 할 프론트엔드 지식들 - 프론트엔드 개발자들을 위한 지식들. 면접에 많이 나옴

유튜브

노마드 코더 Nomad Coders - 우리의 니꼴라스 선생님. React를 배울 수 있고 프로그래밍의 전반적인 내용들을 배울 수 있음.

드림코딩 by 엘리 - 기초부터 자세하게 배울 수 있음. 일주일에 1강 정도 꾸준히 올라옴. 애청자입니다 ㅎㅎ

ZeroCho TV - 기초부터 React, ts까지 배울 수 있음. 무료 강좌들은 유튜브에 있고 유료 강좌들은 인프런에 있음. 유료 강좌는 유튜브에서 찍고 있을 때 들으면 무료입니다.

코드 스피츠 - js의 깊은 부분까지 가르쳐 주는 곳인거 같습니다. 아직 들어보진 않았음. 좋아 보여서 들을 예정.

김버그 Kimbug - 프론트엔드 개발자 일상이라던지, 공부 추천 같은 영상들 올라옴. 요즘은 프린이들 코드 리뷰 영상 올라와서 매우 공감 됨.

DarkCode - 외국 유튜버인데 html, css만 가지고 많은 화면들을 만듦. 따라 치면서 html, css 공부하기 좋음.

Minjun Kim - velopert님 유튜브. 요즘은 방송 안 하시지만 velog 만들 때의 영상을 볼 수 있음.

프론트엔드 개발 환경의 이해 - 김정환
Vue.js 개발 입문 - 캡틴판교
javascript로 함수형 프로그래밍 배우기
함수형 프로그래밍과 ES6+ - 유인동
NAVER TECH CONCERT 2019 - FRONT END

기타

벨로퍼트와 함께 하는 모던 자바스크립트
벨로퍼트와 함께 하는 모던 리액트
리액트를 다루는 기술(개정판)
실용주의 프런트엔드 개발
TypeScript Cookbook
DevFest WebTech CodeLab 2019