2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
Fluor.js
on("click", "button", addClass("wobble", "h1")) on("animationend", "h1", removeClass("wobble")) What is it?Fluor.js is a tiny JavaScript library that provides you with a high-level language to easily add interactions and effects to your websites. It is great for prototypes, UI and UX research and for all websites that do not require the cumbersome machinery of a full-fledged framework. It is inspi
Auth0 + GitHub Pagesでミニマムなログインサンプルを作る
こんにちは、のびすけです。Auth0のサンプルはダウンロードすると、結構多くのファイルが入っていて、内容を理解するのが難しい印象です。 今回はAuth0のサンプルとチュートリアルを試してみて、 必要最低限に削ぎ落としたサンプルを作ってみたので紹介します。 たったの3ファイルです。もっと削ぎ落としてindex.htmlだけにすることもできますが、あまり我流になると分かりにくいかもしれないのでなるべく公式のサンプル(auth0-samples/auth0-javascript-samples)の構成を変えないようにしています。 また、 サーバーサイドの実装は思い切って無しでGitHub Pagesを使って公開していきます。 静的サイト(Static Site)でのサンプルは思ったより例が無いですね。 完成コードだけを見たい人はこちらをご参照下さい。 動作イメージ 先に完成の動作イメージです。ア
ドット絵マリオをNuxt.jsで走らせてみた | <HelloWorld/>
ふと思い立って、HTMLのテーブルを塗りつぶしてドット絵を作ろうと思い、ドットといえばマリオってことで、デフォルトの立ち姿をテーブルを塗りつぶして作ってみた。 参考画像 しかし、思いの外簡単で1時間もかからずに表示できてしまい、物足りなさからせっかくだから動かしてみようと考え、最近勉強中のNuxt.jsで走らせてみることにしました。 マリオの動きといえば、ジャンプとダッシュなので、このドット絵をテーブルで作成。ついでにやられた時のドット絵とブロックも作ってみました。Nuxt.jsで表示する前のドットHTMLは以下コードです。 See the Pen Dot MARIO by fukami (@fffkm) on CodePen. Nuxt.jsで表示する際の実装は、ドット絵のテーブルのマス目の数は決まっているので、各ポーズのマスで色を指定しているclassを配列で持ち、ジャンプ、走るを状態
Cross-origin data in HTML5 canvas
I'm loading an image in js and draw it into a canvas. After drawing, i retrieve imageData from the canvas: var img = new Image(); img.onload = function() { canvas.drawImage(img, 0, 0); originalImageData = canvas.getImageData(0,0,width, height)); //chrome fails } img.src = 'picture.jpeg'; This works perfectly both in Safari and Firefox, but fails in Chrome with the following message: Unable to get
createJSでクロスドメインの画像ファイルを使った時のマウスイベントエラーへの対処 - 黒白猫の開発日記
createjsでは、クロスドメインの問題で悩まされるときがあります。 その中の一つに、 「JSファイルを実行しているのと別のドメイン（画像を置いてるサーバなど）から画像をロードしたBitmap/BitmapAnimationだとマウスイベントが拾えない」 という問題があります。 別ドメインの画像で作ったボタンなどをクリックするとChromeでは以下のJavascriptエラーが出ます。 Unable to get image data from canvas because the canvas has been tainted by cross-origin data. Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。 スタイルシートも使いません。 すべてをjQueryのコードだけで賄います。 というワケでjQueryの記述方法です。 「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。 $('head').append( '<style>body{display:none;}' ); $(window
CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron
ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バインド インタラクション 「data-micron-bind="true"」で、他の要素にも簡単にバインドできます。 コントロール インタラクション エフェクト、スピード、イージングなどは、data属性で簡単に変更できます。 Micron.jsのデモ ライブラリを実際に使用して、Micron.jsをボタンに適用してみました。 ボタンをクリックすると、基本となる12種類のアニメーションを楽しめます。
JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ | SPYWEB
スクロール対応のモーダルウィンドウを作ろうと思って何か良いライブラリやプラグインがあれば利用しようと思っていたのですが、いいなと思うものが無かったので自作することにしました。 <body> <ol class="timeline"> <li>...</li> <li>...</li> ... <li>...</li> </ol> <div class="overlay"> <div class="container"> <div class="inner"> <section class="modal"> ... <button class="button" type="button">閉じる</button> </section> </div> </div> </div> </body> </html> * { margin: 0; padding: 0; box-sizing: bor
実務で役に立ちまくり！フリーのCSSアニメーション ライブラリ5選！
昨今のサイト制作ではアニメーションがほぼ必須になってきています。 どんなWEBサイトでも必ずどこかに動きがありますよね。 ただアニメーションって動きが重くページ表示スピードに大きく関わってきます。 特に直近ではGoogleのスピードアップデートにより、SEO的にもページ表示速度は重要なものになりました。 そこで今回は動きも軽くコードを追加するだけでラクラク表現出来るCSSアニメーションがたくさん詰まった、オススメのCSSアニメーション ライブラリをご紹介いたします。 お気に入り必須です！！ Animate.css Animate.cssは人気のライブラリの1つ。インタフェースが非常に分かりやすいです。 また新しいものの追加も随時されておりオススメです。 サイトはこちら Bounce.js jsを使用していますが動きは軽く、他のサイトと比べてもアニメーションの動きが非常に滑らかです。 他には
Pretty Diff - The difference tool
☰Application Menu ⛶Toggle Fullscreen Pretty Diff - Austin Cheney Access the old Pretty Diff tool. Written 12 August 2023 I lived in Afghanistan for nearly 2 years for two separate US Army deployments. I write this just over 14 years after first stepping foot in Afghanistan. Travel Living and Waiting On the first Afghanistan deployment I was constantly traveling, and travel in Afghanistan was rough
圧縮されたJavascriptやcssを元に戻してくれるWebサービス | クロジカ
ホーム / ハック / 圧縮されたJavascriptやcssを元に戻してくれるWebサービス
slick.jsで左右の画像をチラ見せするスライダーの設定方法について
また、他にもslick.jsを使ったサンプルということで、楽天のイベントバナーを例にslick.jsとjavascriptを組み合わせてバナーの掲載期間を指定する方法を紹介したこともあります。 サンプルソース <link rel="stylesheet" type="text/css" href="slick.css"> <link rel="stylesheet" type="text/css" href="slick-theme.css"> <script type="text/javascript" src="jquery.min.js" ></script> <script type="text/javascript" src="slick.min.js"></script> <script> $("document").ready(function(){ $('.mypatter
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hello! | party.js
ワークスクールでスキルとシゴトを手に入れよう | Workschool（ワークスクール）
https://kudox.jp/java-script/createjs-easeljs-eventlistener
GitHub - katoy/sample-enchant: sample using enchant.js
Touch Game - phina.js | Runstant
コピペで簡単！サイト制作のアクセントになるパーティクル(粒子・分子)エフェクト・アニメーション14選！【CSS/JS】
Pretty Diff - The difference tool