どんな現象？ 突然ですが、お持ちのChromeブラウザで、次のCodePen内をスクロールして「もっと見る」をクリックしてみて下さい（デスクトップ・モバイルは問いません）。 ぎゃーす！何故か「もっと見る」ボタンの上にコンテンツが割り込んだのでは無いでしょうか？ これだと追加されたコンテンツが見えないから困りますね…。 「スクロールアンカリング」機能とは Chromeでしか再現しないため、諸々調べてみて、どうやらChromeの機能「スクロールアンカリング」によることが分かりました。 Chromeがモバイルでの不快なページジャンプを追放―スクロール・アンカリングを追加 | TechCrunch Japan 「Chrome」で不快なページジャンプを抑止--「スクロールアンカリング」機能が追加 - ZDNet Japan 「スクロールアンカリング」機能とは、例えば広告の割り込みなど、JavaScr

エンジニアお茶会 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

先月、Node.jsバージョン14がリリースされたこともあり、改めて最新のJavaScriptの書き方を調べてみました。その中でも特に便利だと感じたJavaScriptの書き方や普段の開発でよく利用している記法をまとめています。 アロー関数式 アロー関数式は関数を定義するための構文です。function式よりもアロー関数式の方が記述が短いので読みやすくなります。また、function式で度々問題になるthisが固定されるので混乱を避けることができます。メソッドでない関数はアロー関数式で定義するのがよいと思います。 function式 function name(arg) { return 'foo'; } アロー関数式 const name = (arg) => { return 'foo'; }; async/await async/awaitは非同期処理の構文です。また、asyncは非

.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads

とあるWeb制作会社にて ワイ「社長、こないだ頼まれたショッピングサイトの件なんですけど」 ワイ「ご注文フォームのコーディング、完了しましたで！」 社長「おお、ありがとうな」 ワイ「ほな、飲みに行ってきますわ！」 社長「・・・いや待てや（まだ15時やし）」 社長「何やこのフォーム」 ワイ「何ですかいな」 ワイ「デザイン通り、完璧にコーディングできてますやん」 社長「いやバリデーションが全くされとらへんがな」 ワイ「グラデュエーション？」 ワイ「何を卒業するんでっか」 社長「バリデーションや」 社長「貴様をこの会社から卒業させたろか」 バリデーションとは 社長「バリデーションちゅうのは、不正な値やないかどうか確認することや」 社長「例えば数字を入力してほしいフォームに、文字列を入力して送信されても困るやろ？」 社長「そういうのをちゃんとチェックするのがフォームバリデーションや」 ワイ「あ、あ

古代のWebアプリケーションエンジニアなので、現代との差分を身に付けていくぞ！ 個人的なスキルセットの差分を埋めるためのものなので、誰にでもマッチするものではありません。 習うより慣れろの精神で、読んで終わりじゃなくて手を動かします。 コンテナ化 x done.icon The Twelve-Factor App （日本語訳） done.icon What is Amazon Elastic Container Service? - Amazon Elastic Container Service 機械翻訳がひどかったので英語版をGoogle翻訳で読むほうがマシそう メニュー1階層目だけ全部読んで、気になるところがあれば深堀りする ↑で物足りなかったらKubernetes完全ガイド 第2版 impress top gearシリーズ | 青山真也 | 工学 | Kindleストア | Ama

ジェネラティブアートという言葉をご存知でしょうか？　アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか？ 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して

How Race, Age and Gender Shape Attitudes Towards Mental Health

レスポンスを受け取った後、ブラウザで画面表示されるまでの流れです。 Download Perse Scripting Style Layout Paint Rasterize Composite Layers 図解 工程 ブラウザのレンダリングエンジンとJavaScriptエンジンが実行します。 Download サーバからリソースをダウンロードします。 Parse HTMLとCSSの構文解析を行い、それぞれのオブジェクトモデルを構築します。 オブジェクトモデルは以下の段階を経て作成されます。 バイト 文字 トークン ノード オブジェクトモデル レンダリングの結果、Webページを構成する要素がAPI(Application Programming Interface)として利用できるようになります。そしてAPIは、JavaScriptから利用することができます。 オブジェクトモデルはAPI

JavaScriptとは JavaScriptを学びはじめる前に、まずJavaScriptとはどのようなプログラミング言語なのかを紹介します。 JavaScriptは主にウェブブラウザの中で動くプログラミング言語です。 ウェブサイトで操作をしたら表示が書き換わったり、ウェブサイトのサーバーと通信してデータを取得したりと現在のウェブサイトには欠かせないプログラミング言語です。 このようなJavaScriptを活用してアプリケーションのように操作できるウェブサイトをウェブアプリとも言います。 JavaScriptはウェブブラウザだけではなく、Node.jsというサーバー側のアプリケーションを作る仕組みでも利用されています。 また、デスクトップアプリやスマートフォンアプリ、IoT（Internet of Things）デバイスでもJavaScriptを使って動かせるものがあります。 このように、

Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.

こんにちは。WebGLのお勉強1週間目くらいの絵描き系エンジニア「ゆき」です。最近Qiita界隈でもタピオカが流行っているらしいので、今日は勉強中の技術をフルに活用してタピオカを作ってみました。 ここで試せます（スマホ未対応）： https://tapioca-pixi.firebaseapp.com この記事の内容と想定読者 この記事ではJavaScriptの描画エンジンの定番の一つであるPIXI.jsと、物理演算ライブラリのmatter.jsを使って、タピオカを可愛くふわふわさせる表現のアプローチとポイントを解説します。 物理エンジンと描画エンジンの連携方法 シェーダーによるオリジナルの表現 物理演算で表現したいものを作るためのチップスいくつか シェーダー(glsl)周りは結構独特なので別途もうちょっとちゃんとした解説記事を書く予定です。この記事はどちらかというと駆け足のネタ記事になっ

ウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersection Observer APIを使うとより効率的に実装できます。ブラウザーのサポートも拡充し、今後は標準となる技術でしょう。 ▼スクロールで目次の色が変わるエフェクト 本記事ではIntersection Observer APIの使い方と実践例を解説します。 特定の位置で発火する従来の手法 これまで、特定の位置で発火するイベントにはscrollイベントを使う必要がありました。以下のコードは、あらかじめページ上部からの距離を取得し、スクロール量が規定に達したところで発火させる手法です。 window.addEventListener("scroll", () => { const srollVal = window.pageYOffse

svgにjavascriptが埋め込んだ時の挙動がどう違うのか気になっていろいろ試したのでとりあえずまとめてみます。 特に言及していなければfirefoxで試しています。 scriptを混入させたsvgを書く 思いつくjavascriptをいれる方法をひと通り入れてみました。 明らかに動かなさそうなものやxssじゃないものもはいってますが挙動が気になったので入れてみました。 onclick="console.log()" 内部スクリプトでのelem.onclick = function(){console.log()} 外部スクリプトでのelem.onclick = function(){console.log()} style属性でのexpression: style="stroke-width:expression(console.log())" cssでのexpression: .x

スマートキャンプのエンジニア瀧川です！ クライアントサイド(JavaScript)で処理を定期実行したい場合は皆さん使いますよね！ そうsetInterval関数です。 ただ何も考えず使ってしまうと色々な問題が起こったり... そこで本記事ではsetInterval関数を使う際の困りごとを挙げて、それをまるっと解消するVue.jsプラグインを作る方法を紹介したいと思います！ (今回はVue.jsで実装しますが、特に依存しているわけはないので他のフレームワークをお使いの方も参考にしてください！) まずVue.jsプラグインの雛形を作る 困りごと1 困りごと: ブラウザ(タブ)を開きっぱなしにすると必要以上に実行されてしまう 解決法: Page Visibility APIを利用してアクティブなときにしか処理を実行しない 困りごと2 困りごと: ページ遷移してもsetIntervalが維持され

Node.js v12が4/23にリリースされました 🚀 Node.jsのCoreにも新しい機能が入りました。 また、APIの追加以外にもTLS1.3のサポートやhttp_parserがllhttpに代わったりしています。 詳しくは以下をご覧ください！ github.com JavaScriptエンジンであるV8もバージョンアップしています。 Node.js v10のV8のバージョンは6.8でしたが、Node.js v12では7.4に大幅アップデートしています。 V8のバージョンが上がることによりJavaScriptの使える機能や構文が増えます。 今回はMathias氏のツイートをもとにNode.js v12から使えるJavaScript(ECMAScript)の新機能について紹介したいと思います。 New JavaScript features in Node.js v12: ➡️ A

This domain may be for sale!