エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
ContentsHTMLCSSWeb APIsJavaScriptWeb AppsMediaPrivacySecurityWKWebViewSafari Web ExtensionsWeb InspectorFeedbackAnd More With over 70 additions to WebKit, Safari 15.4 is packed with new web technologies, updates, and fixes. We’ve assembled a huge release as part of our commitment to web developers, and the people who use the web. This is the first big WebKit release of 2022, and we’re just getting
Custom Scrollbars In CSS
Custom scrollbars are getting more popular nowadays, and I’m very keen to dig into them. There are different reasons why to customize a scrollbar. For example, the default scrollbar can make an app UI look inconsistent across multiple operating systems, and here we can get the benefit of having a unified style. I have always been interested in learning about how to customize a scrollbar in CSS but
The New CSS Reset
Skip to the content. The New CSS Reset This new CSS reset is using the new CSS features: The global CSS reset keywords, ‘unset’ and ‘revert’ keywords. The new property of ‘all’ which can reset all properties combined. The :where() pseudo-class to remove specificity. The :not() pseudo-class with multi arguments. What the-new-css-reset is resetting? This CSS reset is built from the understanding we
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
CSS in 2022
Things have been going hard for CSS in 2021. The CSS Working Group has cranked out a ton of work, polishing existing CSS features and specifying lots of new ones too — with experimental implementations already having landed in several browsers. Apart from supporting new features, browser vendors also focussed on fixing the top 5 browser compatibility painpoints (#compat2021) to make our dev-lives
Push Notifications, WebXR, and better PWA support coming to iOS iOS 15.4 beta has finally added icon support in the manifest, Web Push, AR, and VR experiments. by Maximiliano Firtman Twitter @firt About Newsletter Published 2 years ago (31 Jan 2022) About 8 min reading time #ios #webview #pwa #store Not every minor iOS version update includes changes in the Web platform. Still, iOS 15.4 will be an
JSer.info #529 - JavaScript performance beyond bundle size | Read the Tea Leavesという記事では、JavaScriptのパフォーマンス測定について書かれています。 最近では、Bundle SizeについてはBundlePhobiaやWebpack Bundle Analyzerなど分かりやすく測定するツールがありますが、それ以外のJavaScriptのパフォーマンスのメトリクスについて書かれています。 ランタイムのCPUコスト、電力消費量、メモリ使用量、ディスクの使用量などのBundle Size以外のメトリクスをどのように見るのかについてまとめられています。 CORS 完全手冊というCORSについての連載記事では、 CORSの概念、対応方法、よくある間違い、CORB/CORP/COEP/COOPなど最近のオリジ
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with. I’ve been taking for granted that most folks doing web stuff still remember those days, or at least t
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
Building a button component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible <button> components. In this post I want to share my thoughts on how to build a color-adaptive, responsive, and accessible <button> element. Try the demo and view the source Buttons are interacted with
prefers-color-scheme: Hello darkness, my old friend Stay organized with collections Save and categorize content based on your preferences. Overhyped or necessity? Learn everything about dark mode and how to support it to the benefit of your users! Introduction Dark mode before Dark Mode Green screen (Source) We have gone full circle with dark mode. In the dawn of personal computing, dark mode wasn
WebKit Features in Safari 17.4
Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1. Architectural improvements It’s always exciting to ship new features that you can use while b
An HTML Switch Control
We’re very excited to introduce a new HTML form control as part of Safari 17.4: a switch. Two switches as seen on iOS, with the second switch using a custom CSS accent-color. The HTML for this example looks roughly like this: <style> .special { accent-color: papayawhip } </style> <input type=checkbox switch checked> <input type=checkbox switch checked class=special> Switches are a popular control
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
Safari 14.1 for macOS Big Sur, iPadOS 14.5, and iOS 14.5 brings new WebKit features, APIs, performance improvements, and improved compatibility for web developers. Take a look. Flexbox Gap Support Safari 14.1 now supports the gap property inside Flexbox containers, along with row-gap and column-gap. Gaps in Flexbox make it possible for web developers to create space between Flex items without reso
Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 50 libraries out there, each of them offering a unique set of features. We tested 10 different libraries, which are listed here in no particular order: Styled JSX, styled-components, Emotion, Treat, TypeStyle, Fela, Stitches, JSS, Goober, and
New WebKit Features in Safari 14
With the release of Safari 14 for macOS Big Sur, iPadOS 14, iOS 14, and watchOS 7, WebKit brings significant improvements to performance and privacy along with a host of new features for web developers. Take a look at all of the improvements WebKit is adding with the release of Safari 14. Safari Web Extensions This release brings support for Safari Web Extensions. They are a type of extension prim
Safari 17.4 adds vertical writing mode support for form control elements across macOS, iOS, iPadOS, and visionOS. Setting written text vertically is commonly observed in East Asian languages. For example, Chinese, Japanese, and Korean (CJK) may be written vertically and read top-to-bottom, flowing in lines from right to left. Similarly, Traditional Mongolian is a vertical script that flows in line
Before we dive in, let me provide some background. In 2013, a bunch of people signed the extensible web manifesto, in favor of an Extensible Web Platform. The goal is pretty obvious: elaborate new kind of standards, that provides authors freedom and flexibility to build their own features. The aim is to define low-level APIs, an access to the core of the browsers, and so, involve authors into the
Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is Stripe. Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn't sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page. "We think that buil
JSer.info #490 - Babel 7.10.0がリリースされたました。 7.10.0 Released: Class Fields in preset-env, '#private in' checks and better React tree-shaking · Babel Release v7.10.0 · babel/babel ES2015の\u{...}形式のUnicode escapeをES5に変換する@babel/plugin-transform-unicode-escapesが追加されています。 このプラグインは@babel/preset-envにも追加されています。 また、現在Stage 4でES2020に入る予定のimport.metaのパースがデフォルトでサポートされました。 その他には、現在Stage 1のProposalであるPrivate Fiel
Building the main navigation for a website Stay organized with collections Save and categorize content based on your preferences. This tutorial describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good. There are many different ways of building the main navigation of a website,
HTML and CSS techniques to reduce your JavaScript
Anthony Ricaud (@anthony_ricaud) is a web engineer helping teams ship efficient products at a sustainable pace. With a broad understanding of web protocols and browsers, he likes to design simple but fast web architectures. Longer page load times Page is unusable until the JavaScript loads and if it does so without any errors Usability, reactivity and accessibility can be lacking without a team wi
Useful DevTools Tips and Tricks — Smashing Magazine
You might think you know all the tricks when it comes to browser DevTools, but did you know that there are dozens of panels and hundreds of features waiting to supercharge your debugging workflow? Whatever your debugging use case is, there’s probably a tool that’s right for the job. Let’s discover the most popular DevTools tips that can boost your productivity. When it comes to browser DevTools, w
WebKit Features in Safari 16.0
Today, we are excited to announce the release of Safari 16.0 for iOS 16, macOS Monterey and macOS Big Sur. This release contains quite a few new web technologies that web developers can use to make their sites and web apps even better. To update to Safari 16.0 on macOS Monterey and macOS Big Sur, go to System Preferences → Software Update → More info. To update to Safari 16.0 on iOS, install iOS 1
Let‘s take a quick stroll down memory-lane to revisit how vendor prefixing CSS properties came to be. I hope I don’t trigger PTSD for anyone! It‘s not clear who started prefixing, or when it began exactly. What is clear, is that by 2006, prefixed features were in Internet Explorer and Firefox. The raison d’être of prefixes was to specify browser-specific features. It was seen as a way to implement
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
JSer.info #652 - Node.jsのnode:vmモジュールはSandbox(信用できないコードの実行環境)としては利用できませんが、vm2はnode:vmをラップしてSandboxを提供するモジュールでした。 今回、vm2の仕組み的に修正できないSandboxに関する脆弱性が発見されたため、メンテナンスを終了することが宣言されています。脆弱性の詳細はまだ公開されていませんが、Sandboxを破ることができる脆弱性で、PoCは8月ごろに公開される予定です。 Discontinued · Issue #533 · patriksimek/vm2 vm2 Sandbox Escape vulnerability · CVE-2023-37466 · GitHub Advisory Database Sandbox機能が欲しい場合は、QuickJSをWebAssemblyにコンパイ
Less is moreDevice displays run at a certain number of frames per second. Browsers try to match this rate for a smooth user experience. To output a new frame to the display, the browser must first complete its ‘rendering cycle’ or ‘pixel pipeline’. The majority of devices run at 60 FPS. This allows for around a 16ms window to complete the rendering cycle, per frame. Increased FPS means even smalle
![Frontend Web Performance: The Essentials [0]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4ebca80380c1e7c1598570f23b6d7a83d581a33/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A963%2F1%2ABK3PHVbfaONNdaqvy0mEDQ.png)
WebKit Features in Safari 16.1
ContentsWeb Push for macOS VenturaAnimated AVIFPasskeysNew viewport sizes on iPadOSHover on iPadOS with Apple PencilScroll to Text FragmentScreen capture improvementsAnd MoreFixes and PolishFeedback Today, Safari 16 arrives for macOS Ventura and iPadOS 16. Numbered Safari 16.1, this release is also available for iOS 16, macOS Monterey, and macOS Big Sur. To update to Safari 16.1 on macOS Monterey
Safari Technology Preview Release 135 is now available for download for macOS Big Sur and macOS Monterey. If you already have Safari Technology Preview installed, you can update in the Software Update pane of System Preferences on macOS. This release covers WebKit revisions 284370-285101. Note: Tab Groups do not sync in this release. Web Inspector and Web Driver Fixed “testForLinkLabels” Accessibi
Jun 6, 2023 by Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brando
CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
WebKit Features in Safari 17.5
Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today. CSS There are several exciting new CSS features in Safari 17.5, including text-wrap: balance, the light-dark() color function, and @star
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
面白Web API 100連発 - pastak-pub
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io
jQuery 4.0.0 BETA! | Official jQuery Blog
New WebKit Features in Safari 15.4
Push Notifications, WebXR, and better PWA support coming to iOS－firt.dev
2021-03-02のJS: Bundle Size以外のJavaScriptパフォーマンス、CORS 完全手冊
Old CSS, new CSS / fuzzy notepad
Building a button component | Articles | web.dev
prefers-color-scheme: Hello darkness, my old friend | Articles | web.dev
A Guide To CSS Debugging — Smashing Magazine
A Complete Guide to CSS Cascade Layers | CSS-Tricks
New WebKit Features in Safari 14.1
A Thorough Analysis of CSS-in-JS | CSS-Tricks
Implementing Vertical Form Controls
CSS Houdini - Vincent De Oliveira
How Stripe Designs Beautiful Websites
2020-05-31のJS: Babel 7.10.0(Babel Polyfills)、Snowpack 2.0、Chrome 84β
Building the main navigation for a website | Articles | web.dev
Is Vendor Prefixing Dead? | CSS-Tricks
How browsers work | Articles | web.dev
2023-07-20のJS: vm2の開発終了、Storybook 7.1、Fresh 1.3
Frontend Web Performance: The Essentials [0]
Release Notes for Safari Technology Preview 135
News from WWDC23: WebKit Features in Safari 17 beta
clamp() - CSS: カスケーディングスタイルシート | MDN