Accessible Animations in React with "prefers-reduced-motion" • Josh W. Comeau
Accessible Animations in ReactThe “prefers-reduced-motion” Hook Filed underReactoninMay 4th, 2020.May 2020.Last updatedoninMarch 5th, 2025.Mar 2025. IntroductionLong-time readers of this site have probably picked up that I am a big fan of animations. When used properly, I believe they add a ton of value to the user experience. That said, it's important to be mindful of the fact that not everybody
Crank.js | Introducing Crank
By Brian Kim \u2013 Published April 15, 2020 After months of development, I’m happy to introduce Crank.js, a new framework for creating JSX-driven components with functions, promises and generators. And I know what you’re thinking: oh no, not another web framework. There are already so many of them out there and each carries a non-negligible cost in terms of learning it and building an ecosystem t
What’s new in react-query v1.0 - LogRocket Blog
react-query v1.0 was released on 26 February, which brought about a change in the react-query API and all-new dedicated devtools. In this post, I will be discussing the following changes on: Query keys and query functions useQuery Hook The new queries operation handler, queryCache react-query-devtools A comprehensive list of the updates (mostly minor changes) can be found on the changelog. Moving
Build your own React
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features. If you’ve read any of my previous “build your own React” posts, the difference is that this post is based on React 16.8, so we can now use hooks and drop all the code related to classes. You can find the history with the old blo
I created the exact same app in React and Vue. Here are the differences. [2019 Edition]
Having used Vue at work, I had a fairly solid understanding of it. I had, however, been curious to know what the grass was like on the other side of the fence — the grass in this scenario being React. Note: there is a new version of this article that can be found here: https://sunilsandhu.com/posts/i-created-the-exact-same-app-in-react-and-vue-2020-edition I’d read the React docs and watched a few
![I created the exact same app in React and Vue. Here are the differences. [2019 Edition]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a229f2668ed6825521466698ba6ff56beed1178d/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A1200%2F1%2AfiKg1ve_EvCP5FIImxXNGQ.png)
Handling API request race conditions in React
Many blog articles talk about loading api/async data in React apps, with componentDidMount, useEffect, Redux, Apollo… Yet, all those articles are generally optimistic, and never mention something important to consider: race conditions could happen, and your UI may end up in an inconsistent state. An image is worth a thousand words: You search for Macron, then change your mind and search for Trump,
Algebraic Effects for the Rest of Us — overreacted
Algebraic Effects for the Rest of UsJuly 21, 2019 Have you heard about algebraic effects? My first attempts to figure out what they are or why I should care about them were unsuccessful. I found a few pdfs but they only confused me more. (There’s something about academic pdfs that makes me sleepy.) But my colleague Sebastian kept referring to them as a mental model for some things we do inside of
Folding the DOM • Josh W. Comeau
Filed underReactoninMay 19th, 2019.May 2019.Last updatedoninSeptember 13th, 2024.Sep 2024. IntroductionIn my day-to-day life as a front-end developer, I generally treat CSS as a collection of 2D layers. Other than reordering them using z-index, I don't often move things in 3D space. And yet, for years now, browsers have bundled in a surprisingly capable 3D CSS engine! Someone even built an experim
Expo CLI and SDK web support beta – Exposition
Nicolas Gallagher built RNW while also using it to create the Twitter Lite PWA. Major League Soccer, Flipkart, Uber, The Times, and DataCamp have all since built mobile web and desktop apps around RNW. We also consulted our friends at Facebook to get a second opinion on web support. When it came to building web support into Expo tools, we naturally gravitated towards RNW. Setting up react-native-w
Guide — React-App Monorepo with Lerna
In this guide you will learn how to scaffold a Monorepo to manage multiple Create React Apps that share common components, with a Storybook. UPDATE: 2019/07/17Please use React Workspaces Playground, instead of this guide. React Workspaces Playground is a supported codebase where you can test drive everything in this guide with the latest version of React and Storybook. This guide demonstrates how
Why Do React Hooks Rely on Call Order? - Overreacted
Why Do React Hooks Rely on Call Order?December 13, 2018 At React Conf 2018, the React team presented the Hooks proposal. If you’d like to understand what Hooks are and what problems they solve, check out our talks introducing them and my follow-up article addressing common misconceptions. Chances are you won’t like Hooks at first: They’re like a music record that grows on you only after a few good
React for the Angular Dev – Austin – Medium
PrefaceAngular and React have dominated the landscape of JavaScript frameworks for some time now. Chances are you probably picked one that suited your needs best and probably stuck with it; after all humans don’t really like change. This article is for those who have been working in Angular and haven’t had a chance to venture into other frameworks and try them out. Before we get started, I want to
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
React Native at Airbnb – Airbnb Engineering & Data Science – Medium
UpdateThis article was published in 2018 and reflects the state of React Native at the end of 2017. When using these articles to make decisions about your business, please use discretion. Any technical points should be revalidated because the maturity and size of the ecosystem was significantly different back then. Any organizational points should also be considered within the context, size, and c
Drupal JavaScript Initiative: The Road to a Modern Administration UI | Lullabot
Resources Articles Drupal JavaScript Initiative: The Road to a Modern Administration UI It's now been over 10 years since Drupal started shipping jQuery as part of core, and although a lot of Drupal's JavaScript has evolved since then it's still based on the premise of progressive enhancement of server-side generated pages. Meanwhile, developing sites with JavaScript has made huge strides thanks t
Storybook vs Styleguidist
Update Oct 2019: Storybook Docs now allows you to write Markdown/MDX to generate styleguides directly from Storybook. Take a peek if you’re on the fence about which tool to choose. If you’re looking for UI component tools chances are you’ve stumbled across Storybook and Styleguidist. On the surface, both have similar features and are used by teams around the world. It can be tough to pick the righ
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog
Connection-Aware Components
react-ideal-image/introduction.md at master · stereobooster/react-ideal-image
