はてなブックマーク

Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript July 29, 2024 I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief Overview When you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer

YouTube Embeds are Bananas Heavy and it’s Fixable July 1, 2024 TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube> Web Component is more like 100k, does share resources, and sacrifices no functionality. You can put a YouTube video on any website. They help you do it. Under the Share menu right on youtube.com there is an option to <>

Using the Popover API for HTML Tooltips May 6, 2024 We looked at the Popover API and how it’s made it’s way across all browsers already just last week. One of the things I should have done is looked at the accessibility considerations more closely. Thanks to Melanie Sumner there is a great explainer with demos. I tried to adhere to the points made in there the best I could while making a classic t

This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and

What You Need to Know about Modern CSS (2024 Edition) March 26, 2024 My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t have a great understanding of th

Patterns for Reactivity with Modern Vanilla JavaScript August 21, 2023 “Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We mu

Written by Cody Lindley Sponsored by Frontend Masters, advancing your skills with in-depth, modern front-end engineering courses Download: PDF | epub Overview: This is a guide that everyone can use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2019. It is s

Course DescriptionLearn a suite of design patterns to improve the code architecture of your web apps! You’ll get an overview of more traditional design patterns with JavaScript, such as the Singleton and Proxy patterns. Then see React patterns such as the Hooks and Higher Order Component patterns. Lastly, we’ll cover Performance patterns and Rendering Patterns. This course and others like it are a

In 2018 expect... Nothing will change or slow the usage or popularity of React for many years to come. GraphQL will replace a lot of REST API's this year. The web will continue to become more native-like with offline capabilities and seamless mobile experiences. HTML 5.3 is coming. Keep an eye on turbo, a blazing fast NPM client. Expect to learn and use CSS transforms 3d, CSS transitions, CSS flex

Course DescriptionDive into the core pillars of the JavaScript language with Kyle Simpson, author of the popular, You Don't Know JS, book series. You'll learn JavaScript's types, how to convert between them, and compare them with == and ===. You'll also learn lexical scope and closure. As well as the objects oriented system (this, prototypes and classes). This course and others like it are availab

Course DescriptionGet started quickly with the Vue.js JavaScript framework. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API! This course and others like it

Learn how to build real world applications with React! Much more than an intro, you’ll not only learn React, you’ll also learn how to work with a proven set of powerful tools in the React ecosystem to build scalable, real-world applications. Learn to piece together a proven set of tools, adding each tool as you need them, including React Router v4 for paging, Jest for testing, Redux for state mana

Course DescriptionBuild real-world applications with the modern APIs in React 18 and 19! Craft component UIs with JSX and make them come to life with hooks, effects, portals, and user-driven event handling. Explore the React ecosystem by leveraging TanStack Router, TanStack Query, and industry-standard tools like Vite, ESLint, and Prettier. Learn testing fundamentals as you write unit tests, mocks

In-Depth Frontend & Fullstack CoursesYour Path to Senior Developer and Beyond Gain Practical Tech Skills from Experts You Can TrustJavaScript, React, and TypeScript to Node.js and Backend (Go, Git, Docker, & More) Learn From the Best TeachersAt Frontend Masters, we pride ourselves on offering courses designed and taught by leading experts actively employing their skills at renowned companies such