こんにちは、LINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしている板井（@itatchi3_）です。 LINEヤフーでは、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端技術の情報収集や現地の温度感の調査を行い、得た知見を会社に持ち帰ることで、全社的な技術力向上に努めています。 この制度を活用し、2024年5月13日と14日にアメリカ・サンフランシスコ州マウンテンビューで実施された「Google I/O 2024」に現地参加してきました。 現地のエンジニアと実際に触れ合った中で、その熱意の高さからも重要であると感じ、さらにLINEヤフーでも導入の検討が進められているフロントエンド技術について解説します。 Built-in AI 兎にも角にもAI一色の「Google I/O 2024」でした。AI関連の発表が
静的サイトジェネレータ「Astro 4.0」正式リリース。デバッグを容易にするDev Toolbarが登場、キャッシュ導入でビルド時間が80％短縮
静的サイトジェネレータ「Astro 4.0」正式リリース。デバッグを容易にするDev Toolbarが登場、キャッシュ導入でビルド時間が80％短縮 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.0」が正式にリリースされました。 今年（2023年）9月にAstro 3.0がリリースされたばかりで、速いペースでのバージョンアップが続いています。 Astro 4.0 is here! Introducing the Astro Dev Toolbar — your new companion for local development. Inspect, audit, and extend your dev environment in the browser. Plus: 80% faster builds, i18n routing
こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点についても触れてみたいと思います。 View Transitions APIとは View Transitions APIは一言で言うと、 異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組み だそうです。 ほう...？？🤔 百聞は一見にしかずということで、以下のサイトにView Transitions APIを使ったデモがわかりやすくまとまっており、イメージがつきやすいので触ってみてください！ View Transiti
Astro 4.0 | Astro
Introducing Astro 4.0! New APIs, faster builds, redesigned docs, and a unique new development tool for Astro that enhances your local dev environment in new and exciting ways. What is Astro? Astro is the web framework for building content-driven websites including blogs, marketing, and e-commerce. If you need a website that loads fast with great SEO, then Astro is for you. Release highlights inclu
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.5」が正式にリリースされました。 Astro 4.5 is here! Introducing the new Dev Audit UI — Catch real-world a11y & perf issues during development, right in your browser. Available today in the Astro Dev Toolbar! Plus: View Transition improvements, Multi-CDN, Shiki 1.0, and more.https://t.co/
WebKit Features in Safari 18.0
Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari. New in Safari 18 Distraction Control Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, n
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
Misconceptions about view transitions | Blog | Chrome for Developers
The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition
JSer.info #672 - Redux Toolkit v2.0.0に関連してRedux 5.0.0がリリースされました。 Release v5.0.0 · reduxjs/redux Redux 5.0.0では、TypeScriptへの書き換え、CJS/ESMのdual packageに変更、ES2020形式で出力するように変更。 また、createStoreを非推奨として、Redux Toolkitへの移行を推奨しています。 Release v2.0.0 · reduxjs/redux-toolkit 同時にリリースされたRedux Toolkit v2.0.0では、Redux v5/Reselect 5.0へのアップデート、createReducer/createSliceのextraReducersにおけるオブジェクト構文のサポートの削除などが行わています。 その他にも、mi
「Web開発における近年最も重要な進歩の1つ」 ー JavaScriptを使わないビュー遷移を実現するView Transition APIをAstroがサポート
6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、JavaScriptを使用せずに、ネイティブアプリライクなビュー遷移を実現するための新しいプラットフォームAPIについて詳しく紹介されている。 Zero-JavaScript View Transitions View Transitions APIは、ページ間のネイティブなブラウザ遷移を可能にするAPIのセットである。歴史的には、これが可能だったのはJavaScriptを多用するシングルページアプリケーション(SPA)だけだったが、最近の進歩により、ネイティブなページ遷移がウェブプラットフォームに導入されている。 AstroユーザーはAstro 2.9以来、ビュー遷移への早期アクセスが可能となっ
This post assumes some knowledge of view transitions. If you're looking for a from-scratch intro to the feature, see this article. When folks ask me for help with view transition animations that "don't quite look right", it's usually because the content changes aspect ratio. Here's how to handle it: Unintentional aspect ratio changes It's pretty common for these aspect ratio changes to be unintent
Cloudflareの大幅アップデートなど: Cybozu Frontend Weekly (2024-10-01号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/01のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 WebKit Features in Safari 18.0 Safari 18.0がリリースされました。一部機能を抜粋します。 新機能 Distraction Control ウェブブラウジング中の邪魔な要素を非表示にできる iPhone Mirroring and remote inspection MacからiPhoneをミラーリングし、リモートiOS上のWebサイトのテストやデバッグができる CSS View Tra
2023 / 2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。 以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2023 8回目のJavaScript ライジングスターにようこそ！ ここでは、2023年のJavaScriptエコシ
This is Part 1 of our series on “The Future of Astro” covering three major new features we have planned for Astro in 2024. This post introduces an update to the View Transitions API that Astro can now leverage for native, app-like page navigation without a single line of JavaScript required. The View Transitions API is a set of new platform APIs that unlock native browser transitions between pages
JSer.info #700 - Vitest 2.0.0がリリースされました。 Release v2.0.0 · vitest-dev/vitest 非推奨のオプションを削除、一部オプションのデフォルト値の変更などの破壊的な変更が含まれています。 マイグレーションガイドも合わせて公開されています。 Migration Guide | Guide | Vitest Browser Mode改善、expect.pollの追加、test.forの追加などが行われています。 Browser Modeについては、次のページに詳しい説明が公開されています。 Vitest Browser Mode · vitest-dev/vitest · Discussion #5828 Node.js v22.5.0がリリースされました Node.js — Node v22.5.0 (Current) コアモジュ
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” #Right now, we’re in the middle of a real renai-css-ance (the C is silent). It’s a great time to write CSS, but it can also feel overwhelm
JSer.info #696 - Storybook 8.1がリリースされました。 Storybook 8.1 Storyファイルを作成するUIの追加、Subpath importsを使ったモックの対応、Playwright Component Testの対応しています。 pacakge.jsonのimportsフィールドで特定のモジュールを条件分岐して読み分けるための仕組みであるSubpath importsについては、次の記事でも解説されています。 Type-safe module mocking in Storybook Mocking modules • Storybook docs その他には、React 19/Angular 18のサポートなども含まれています。 Turborepo 2.0がリリースされました。 Turborepo 2.0 Turborepoはmonorepo向
I won't be the first to say it, but I will say it nonetheless, 2023 was quite the year for JavaScript frameworks. Between new technologies we've been watching finally showing they can deliver, and older frameworks making a resurgence if you weren't paying attention you may have missed a pretty significant shift. I anticipate that 2024 will continue to see even larger changes across the board. This
What's new in DevTools, Chrome 129 | Blog | Chrome for Developers
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
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 の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック
Turbo 8 released
We’re excited to announce the release of Turbo v8, a major update to the Turbo front-end framework. This release introduces a suite of innovative features designed to enhance web development and user experiences across the board. Here are the key highlights of Turbo v8: Morphing for smooth page refreshes This new technique enables us to refresh pages selectively, replacing only the HTML elements t
ウェブブラウザ「Google Chrome」の最新安定版であるバージョン126がリリースされました。同一サイト内のページへ移動する際にアニメーションを行う仕組みや、ブラウザ上で動作するゲームからコントローラーを振動させる機能が追加されています。 New in Chrome 126 | Blog | Chrome for Developers https://developer.chrome.com/blog/new-in-chrome-126 New in Chrome 126: Cross-document view transitions, CloseWatcher API re-enabled and more - YouTube ◆ページ移動の際にビュートランジションAPIを利用したアニメーションが可能に 同一オリジン内の別ページへ移動する際に、ビュートランジションAPIを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google I/O 2024 注目のフロントエンド技術
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
News from WWDC24: WebKit in Safari 18 beta
2023-12-08のJS: Redux 5.0.0、Vitest 1.0.0、Astro 4.0
View transitions: Handling aspect ratio changes
【JavaScript】JavaScript ライジングスター 2023 - Qiita
Zero-JavaScript View Transitions | Astro
2024-07-18のJS: #700 - Vitest 2.0.0、Node.js 22.5.0(sqlite)、Private Browsing Mode
Old Dogs, new CSS Tricks
2024-06-13のJS: Storybook 8.1、Turborepo 2.0、Node v22.3.0(Snapshot Testing)
JavaScript Frameworks - Heading into 2024
@starting-style - CSS: カスケーディングスタイルシート | MDN
「Google Chrome 126」安定版リリース、ブラウザゲームでコントローラーの振動機能を利用可能に