デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
こんにちは。フロントエンドエンジニアになりたてのぼこです。 みなさん、Three.jsは好きですか？（唐突） 僕はWebサイトの中でも特に演出やグラフィック、インタラクションに凝ったものが好きなので、表現の幅を増やすためThree.jsと仲良くなれるよう奮闘しております。 話は少し変わりますが、最近はWebサイト制作でも、Next.js（React）やNuxt.js（Vue）を採用することが増えてきている印象です。 NextやNuxtでサイトを作る場合、従来の制作とは手法も考え方も大きく変わると思いますが、そこにThree.jsを導入する場合もやはり注意するポイントが増えます。 そこで、今回は React Three Fiber というライブラリについてお話ししたいと思います。この後詳しく書いていきますが、ReactコンポーネントのようにThree.jsが書けるライブラリで、驚くほど簡単に
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects. In January, Madison Kanna asked her Twitter followers: What are the languages/tech you’re excited to learn or learn more deeply this year? mine: typescript, next.js, react, graphql, solidity, node
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ ↑私が10年以上利用している会計ソフト！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
はじめに これはクラスコンポーネントのライフサイクルを理解した上で、それに対応するように関数コンポーネントのライフサイクルを理解しようという試みです。 厳密にはReactのライフサイクルはクラスコンポーネントと関数コンポーネントそれぞれで違う概念を持っているようで、それぞれのライフサイクルに紐付けて考えるという行為自体がナンセンスな可能性がありますが、理解の手助けになれば幸いです。 そのため、なるべくわかりやすくするために、厳密でない言い方をすることがあります。ご了承ください。 もし明らかにまずい言い回し、もしくは間違って認識しているものがある場合はコメントにて教えていただけると嬉しいです。 モチベーション 僕はReactの経験がクラスコンポーネントはちょっとだけ書いたことがあるくらいで、ほぼ関数コンポーネント×hooksから入ったようなもなのでいまいちライフサイクルが理解できていない。
Net Applicationsから2020年2月のデスクトップブラウザのシェアが発表された。2020年2月はChromeとEdgeがシェアを増やし、Firefox、Internet Explorer、Safariがシェアを減らした。シェアの上では2位以下を引き離して強い存在感を示しているChromeだが、過去1年間の推移は横ばい傾向を示しており、デスクトップ向けのWebブラウザとしてはほとんどシェアが変わらない状況になりつつある。 一方、順位は3位だが、Microsoft Edgeは過去1年間にわたり増加傾向にある。すでにChromiumをベースに開発された新しいバージョンのMicrosoft Edgeはリリースされており、今後Windows Update経由でより多くのユーザーに行き渡ることにもなっている。現在の傾向が続いた場合、FirefoxとMicrosoft Edgeの順位は逆転
私たちVue.js日本ユーザーグループが、昨年の台風19号の接近に伴い「Vue Fes Japan 2019」の開催中止を決断してから早5ヶ月が経とうとしています。 改めて、参加を予定されていた皆様、スポンサー各社様、スピーカーの皆様、関係各位に多大なご迷惑、ご心配をおかけしましたことをお詫び申し上げます。 この度、時間を要していた興行中止保険の手続きが完了し、スポンサー各社様への協賛金の返金を開始したことをご報告するとともに、その概要についてご説明いたします。 Vue Fes Japan 2019で加入していた興行中止保険は、カンファレンス当日に悪天候または交通機関のマヒが発生した場合、実施に際して支出する費用の一部を補償する契約内容です。よって支出額の満額が補償されるわけではありません。 また、一部支出では同保険の補償対象外とされた費用（海外スピーカー招待のための旅費、宿泊費など）や、
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く