Rendering on the Web | Articles | web.dev
Rendering on the Web Stay organized with collections Save and categorize content based on your preferences. One of the core decisions web developers must make is where to implement logic and rendering in their application. This can be difficult because there are so maby ways to build a website. Our understanding of this space is informed by our work in Chrome talking to large sites over the past f
JavaScript が読み込まれる前でもWeb Applicationを動かす - from scratch
今回は最近取り組んでいる、 JavaScript が読み込まれる前であっても「ちゃんと」 Web Application が動作するように作る話をします。 Server Side Rendering における注意点と対策 BFFを使ってServer Side Rendering をすることに数年前から取り組んでいます。 まずはSSRをやる上での注意点と対策について紹介します。 SSRをすることはSEOのためだと思われがちですが、個人的にはSEOのためにしているわけではなく、 First View を向上するため（特に First Meaningful Paint を向上するため）にやっています。 First View SEOとSSRに関しては Google が最近出したこの記事の SEO Considerations 節が詳しいです。ここでは説明しません。 SSRをしない、Client S
現代の JavaScript チュートリアル
私たちはこのオープンソースプロジェクトを世界中の人々に提供したいと考えています。このチュートリアルの内容をあなたが知っている言語に翻訳するのを手伝ってください。
SEO対策をサーバーサイドレンダリングせずにやっていく - Qiita
2019/05/08 追記 【大ニュース】 なんとGoogleBotのJSレンダリングエンジンがChrome74相当になって、ES6に対応するようです...！ ここで書かれた内容の多くはすでに古くなっているかもしれません...！ https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html もう時は2018年の後半となり、React・Vue・AngularといったモダンJavaScriptフレームワークは開発現場でよく見かける存在となりました。 一方で、依然としてこれらを利用して開発をする場合には「Googlebotがそれらをレンダリングできない可能性がある」という問題がついてまわります。 そのため、サーバーサイド側で前もってJavaScriptをレンダリングしておく、サーバーサイドレンダリングという技
FRESH! における Web プッシュ通知機能 〜実装編〜 | CyberAgent Developers Blog
はじめまして。FRESH! でフロントエンドの開発をしている池田 (こりら) です。 この記事では、Web Push の実装概要や FRESH! における Web プッシュ通知機能 〜機能設計編〜 をもとに、実際に FRESH! でどのように Web Push 通知機能を実装したのかを紹介します。 アジェンダ Web Push の実装概要 Web Notifications API Web Push API Firebase Cloud Messaging (FCM) Service Worker push イベント notificationclick イベント FRESH! における Web プッシュ通知の実装 FCM に関連する処理をユーティリティ化 通知に関する実装 チュートリアルの実装 チャンネルページ・登録情報の管理ページの実装 各ブラウザの個別対応 Chrome (59) Fi
意外とカンタン！流行のWebプッシュ通知はJavaScriptでサクッと実装できる
いろいろなサイトで見かけるようになった、Webからデスクトップへのプッシュ通知。専用のWebサービスもありますが、フロントエンドエンジニアならWeb Notification APIで手軽に実装できちゃうのです。 お気に入りのサイトやアプリからの通知は、もはやスマートフォンだけの話ではありません。ブラウザーから通知を直接受け取ることも普通になってきました。たとえばFacebookは新しい友達リクエストが届いたり、誰かのコメント内で言及されたりすると通知を送ります。人気メッセージアプリのSlackは会話の中で話題になった人に通知を送ります。 私はフロントエンド開発者として、大量の情報を扱わないWebサイトでもこのようなブラウザーの通知（notification）を活用できるか興味がありました。Webサイト訪問者の興味に合った通知を実現するには、どうすれば良いのでしょうか。 この記事では「Co
はてな教科書 JavaScript編
はてな教科書JavaScript編 講義の目的 JavaScriptについて、自分で調べて学習するための基礎知識を身につける リファレンスをひけば良い部分は覚えない 話の流れ JavaScriptの言語コア部分 構文とか WebとJSにまつわるあれこれ DOM 非同期プログラミング Ajax jQuery フロントエンド設計 Node.js 駆け足で進めるので、速すぎるなら遠慮せず言ってください！ LICENSE この作品は クリエイティブ・コモンズ表示 - 非営利 - 継承2.1日本ライセンス の下に提供されています。
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
2017年JavaScriptのテスト概論 | POSTD
本稿は、JavaScriptのテストについて最も重要な根拠、用語、ツール、アプローチなどの知識を身に着けることを目的とした簡略版ガイドブックです。本稿で検討する数々の側面に関する最新の秀逸な記事も紹介しつつ、私たちが経験的に得たことも多少付け加えたいと思います。 Facebookによるテスト用フレームワークであるJestのロゴをご覧ください。 見てお分かりのように、このフレームワークは「苦痛のない」JavaScriptのテストをスローガンに掲げています。しかし、 “次のように言う人” もいます。 苦痛のないテストなんてあり得ない。 実際、Facebookはこのスローガンを掲げるだけの素晴らしい理由があります。一般的にJSのデベロッパは Webサイトのテストにあまり満足していません 。JSのテストには制限があり、実装が難しく、低速である傾向があります。 一方、正しい戦略を立てて適切にツールを
JavaScriptのテストフレームワークはAVAが流行り気味らしいので調べてみた - Qiita
(´・ω・`) またテストの話してる こんにちはみなさん PHPのテストの話はこれでもかってくらいしてきましたが、ふとPHPを離れると、どれほどテストをしているというのか。 ちょっと前にJavaScriptにオートロードを入れるという俺得な実装をした際にmochaを使ったのですが、本当に基本的な使い方だけで、その深淵が難しそうで手を出せていませんでした。 ところが、@re-fortが言うに「今時のテストはAVAでするんだよ！」ってことらしいので、ちょいと使ってみようと思った次第です https://github.com/avajs/ava ロゴが宇宙っぽくてイカしていますが、mochaみたいなテストフレームワークの一種ですね。 Koajsのissueとかで、mochaからAVAにしようぜって話が出ていました。 starの数も9800あまりと上々の様子です。 売りとしては何よりも「早い！軽い
Building performant expand & collapse animations | Blog | Chrome for Developers
TL;DR Use scale transforms when animating clips. You can prevent the children from being stretched and skewed during the animation by counter-scaling them. Previously we’ve posted updates on how to create performant parallax effects and infinite scrollers. In this post, we’re going to look over what’s involved if you want performant clip animations. If you want to see a demo, check out the Sample
おみくじの確率を変える方法 - HTML勉強メモ
おみくじの確率を変える方法について 確率を変えるには 確率を変えたおみくじ まとめ おみくじの確率を変える方法について 前回作成したおみくじの記述を変えることで、おみくじで出るくじの確率を変えることができる。 前回の記事 htmlst.hatenablog.jp 確率を変えるには ・Math.floor(Math.random())で生成する乱数を大きくする。 ・if文内で確率を変える。 この部分を変えることで、出るおみくじの確率を変えることができる。 確率を変えたおみくじ ボタンを押すと「表示場所」におみくじの結果が表示される。 （「大吉」になる確率が高いおみくじの場合） <form><input type="button" value="おみくじ" onClick="random()"> <span id="omikuji">表示場所</span></form> <script typ
Writing JavaScript with Accessibility in Mind — SitePoint
Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your website or web app. This article was originally published on Medium. In my first post Writing HTML with accessibility in mind I explained why and how I got started with web accessibility. I also shared some tips on how you can improve your markup in order to make
JavaScriptから即時関数を排除する - Qiita
即時関数は関数式で関数を作ったら、即時に実行する関数のことです1。JavaScriptでは有名なテクニックの一つですが、他の言語ではほとんど見かけません。まず始めに、なぜ即時関数が必要だったのかを説明し、そこからいかにして即時関数を取り除くかを考えます。 JavaScriptに即時関数が必要な理由 ES52以前のJavaScriptには次のような問題がありました。 グローバルスコープか関数スコープの変数しかない。 モジュールベースではない。 厳格モードへの切り替えが単なる文字列に過ぎない。 これを踏まえて、即時関数を使わざるを得ないところを見ていきます。 1. スクリプト全体を即時関数で囲む どんなプログラミング言語であれ、一つのファイルに全てを書いていくことは現実的ではありません。いずれJavaScriptを複数のファイルに分割して書いていく必要があるでしょう。そのとき、グローバル汚染が
Home page | Yarn
Yarn is a package manager that doubles down as project manager. Whether you work on simple projects or industry monorepos, whether you're an open source developer or an enterprise user, Yarn has your back. This documentation covers Yarn 4+. For the previous documentation dedicated to 3.6 and below, please refer to v3.yarnpkg.com. WorkspacesFirst package manager built specifically around workspaces
JavaScriptの1msは4ms - Qiita
はじめに JavaScriptのタイマー処理(setTimeout(), setInterval())は1000分の1秒の精度(ms)で遅延時間を指定することができます。 setTimeout(function() { // 1ms後に実行してほしい alert('hello!'); }, 1); 見ての通り、上記のコードは第一引数に渡した関数が1ms後に実行されることを期待して書かれていますが、実際にこれを実行すると4ms以上の遅延が発生する可能性があります。 これは、JavaScriptエンジンの実装によって、4ms以下の設定値は4msに矯正するという処理が行われているためです。 ※追記）厳密には上記処理のみを実行した場合は4msへの矯正は行われないようです。4msへの矯正が行われる条件として当記事最下部に追記を行っておりますので併せてご参照下さい。 なぜ4msなのか 実はこの4msと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
3flab inc. | Illustrator Scripts
Sebastian Ly Serena
JavaScript練習問題集(ECMAScript2015,2016,2017,2018,2019,2020,other Library)
GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
