面白Web API 100連発 - pastak-pub
エンジニアお茶会 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
JavaScriptでの絵文字の扱われ方を知っていますか？ - SMARTCAMP Engineer Blog
スマートキャンプの20卒エンジニアの高砂です！ 皆さんは、JavaScriptにおける絵文字の扱われ方が難しい事をご存知ですか？ 本記事では、その背景と適切な方法を解説していきます！ JavaScriptにおける絵文字の問題点 問題点の再現 問題点の背景 絵文字を適切に扱う方法 まとめ JavaScriptにおける絵文字の問題点 JavaScriptで文字数カウントを実装する際、素直に考えると下記のようなコードになるかと思います。 const text = 'おはよう😊' console.log(text.length) しかし、実は「絵文字が含まれている文字列は.lengthでは適切にカウントできない」という問題点があるのをご存知でしょうか？ 実際にご覧頂くのが早いと思うので、CodePen様をお借りして文字数カウントをしてくれるアプリを簡単に作ってみました。 以下に置いておきますので
TypeScript + React: Component patterns
This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s guide I use mainly modern-day React, so function components and – if necessary – hooks. I also focus exc
オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札 - ICS MEDIA
OffscreenCanvas（オフスクリーンキャンバス）はWeb Workers（ウェブワーカー）を使用してWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。本記事ではOffscreenCanvasについて機能と使い方を解説します。 ▲ OffscreenCanvasを使用したデモ。OffscreenCanvasを使用すると、Canvasへの描画負荷が高い場合でもスムーズなユーザー操作とCSSアニメーションの再生を実現できる JavaScriptでマルチスレッドに処理を実行できるWeb Workers OffscreenCanvasの説明の前に、まずはWeb Workersについて
エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA
Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @click="reset">リセット</button> </div> </template> <script> export default { props: { // 表示するカウント値 count: { type: Number, default: 3 } }, methods: { // カウントをリセットします reset() { this.count = 0 } } } </script> それでも時として、
Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate
Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。 サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。 Vue Formulate Vue Formulate -GitHub Vue Formulateの特徴 Vue Formulateのデモ Vue Formulateの使い方 Vue Formulateの特徴 Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
モダンなJSとCSSで作るライブラリ不要の全画面スクロール演出 - ICS MEDIA
スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？ かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ
10 Javascript Timeline Libraries | Web & Graphic Design | Bashooka
Best Telegram Casinos USA helps United States players quickly find licensed and reliable Telegram casinos. Our expert reviews highlight safe platforms, smooth gameplay, and exciting features. Enjoy your gaming experience with confidence and ease. Who We Are We are an independent affiliate platform dedicated to helping U.S. players discover the best Telegram casinos in 2025 and beyond. As longtime
Blotter.jsを使ってテキストに「ねじれ効果」を与える方法 - 日本最大級のHR・フリーランスメディア Workship MAGAZINE
デモページ ソースダウンロード 近年、テキストにねじれ効果を与えるWebデザインの人気が出てきており、多くの個性的なWebサイトがこの流行を取り入れています。 今回は2つのデモを例に、Blotter.jsライブラリを使ってテキストにねじれ効果を与える方法をご紹介します。 Blotterとはthree.jsとUnderscore.jsを使用したAPIで、アーティスティックなテキスト効果を生み出せるのが特徴です。本記事でご紹介するデモでは、ページをスクロールしたりマウスを動かしたりすることでテキストにねじれ効果が与えられます。 なお今回のデモは、Bounceのプロジェクトから着想を得ました。ページをスクロールすると装飾された文字が変形し、ユニークな視覚効果を演出します。 注意：今回紹介するコードはあくまで実験的なものです。最新のCSSプロパティを使用しているため、古いブラウザは対応していない可
THREE.MeshLineで、ヌルヌル動く線を作ろう！ - 日本最大級のHR・フリーランスメディア Workship MAGAZINE
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
RxJS を学ぼう #1 - これからはじめる人のための導入編 | Recruit Tech Blog
React の登場と共に web フロントエンド界隈でも注目を集めるようになったリアクティブ・プログラミング ( RP ) 。その中でひときわ存在感を放っている1)オレ調べ。 RxJS について学んでみようと思います。 ReactiveX そもそも RxJS って何？ RxJS は Reactive Extensions for JavaScript の略称です。Observables というアーキテクチャを用いたリアクティブ・プログラミング用のライブラリであり、非同期処理 ( クリックなどイベント駆動の処理も含まれます ) を簡潔かつ可読性高くコーディング出来ることを主な目的としています。 で？Reactive Extensions ( Rx ) って何？ 元々は Microsoft が C# 向けのライブラリとして設計・開発したものです。2009年に始動したプロジェクトから生まれたこの
Node.jsにおけるプロトタイプ汚染攻撃とは何か - ぼちぼち日記
1. はじめに 最近わけあってNodeのセキュリティ調査をしているのですが、今年の5月に開催された North Sec 2018 でセキュリティ研究者の Olivier Arteau 氏による 「Prototype pollution attacks in NodeJS applications」という面白い発表を見つけました。 この発表の論文や発表資料、デモ動画などもgithubで公開されていますし、ちょうどタイミングよくセッション動画も最近公開されました。 github.com Olivier Arteau -- Prototype pollution attacks in NodeJS applications この発表で解説されているのは、悪意のある攻撃者が、JavaScript言語固有のプロトタイプチェーンの挙動を利用して、Webサーバを攻撃する方法です。 発表者は、npmからダ
Nuxt.js on AWS Lambda with Serverless Framework - mya-ake com
この記事についてこの記事はVue.js #2 Advent Calendar 2017 - Qiitaの 12 日目の記事です。 この記事では Nuxt.js（v2.6.2）を AWS Lambda で動かす方法について書いています。 Nuxt.js に関する説明もありますが、全体的にサーバー構築寄りの内容になっています。 しかし、Node.js で AWS にデプロイまでできる Serverless Framework というツールを利用しており、サンプルコード の npm scripts を実行するだけで AWS 上に環境を作れるようにしています。（AWS への登録と Credential の生成は必要です） ご興味のある方はそちらも参照してみてください。 また、先に断っておくとこの記事では API Gateway をエンドポイントとします。 API Gateway をエンドポイントす
The perfect unit test - Jack Franklin
April 12, 2019The perfect unit testThere's a common theme I find with people who tell me that they don't find unit testing useful, and it's normally that they are writing bad tests. This is completely understandable, particularly if you're newer to unit testing. It's hard to write good tests and it takes practice to get there. All the things we're going to talk about today were learned the hard wa
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
繋がりを可視化する グラフ理論入門｜es
個人的に、一番面白いデータ構造であり探索アルゴリズムです。 ここで言うグラフは円グラフや、棒グラフのことではないです。プログラミングで扱うのは、図のように、点と線を繋げたものです。 ズバリ、人と人の繋がりを表現できます。 今回もJavascriptで実装します。 グラフ理論は、SNSだったり、レコメンドだったり、地図の経路だったり ルーティングだったり、点と点の繋がりを可視化します。繋がりを表現するデータ構造です。 巨大なインターネットもそうです。 そいう意味で、すごく身近なアルゴリズムですよ。 グラフの基本は次の２点で構成されています。 ・ノード：node(vertex) - 点（人、物、場所） ・エッジ：edge - 辺(繋がり、経路) 上の図を見ると一目瞭然ですね。ノードを人だとしたら、エッジが関係性です。まずは、これだけ理解できれば大丈夫です。 ちなみに、方向がない辺を無向グラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GPU.js - GPU accelerated Javascript
まもなくやってくる Vue.js 3
» Extremely cool javaScript (from c++ source) that simulates liquid in your browser | dwaves.de