<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
JavaScriptの関数名の全て - Qiita
JavaScriptに限った話ではありませんが、関数というのは名前を持っていたり持っていなかったりします。関数名は普通はプログラムの読みやすさくらいにしか影響しませんが、JavaScriptでは必ずしもそうではありません。 例えばReactで関数コンポーネントを使う場合は関数名がコンポーネント名となり、React用開発者ツールなどで見ることができデバッグに役立ちます。また、Gulp v4もエクスポートした関数名がタスク名となります。 関数名は、関数オブジェクトのnameプロパティで取得できます。 function foo() { console.log('foo!'); } console.log(foo.name); // "foo"
Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
jQueryのイベントハンドラ内でのpreventDefault()、stopPropagation()、stopImmediatePropagation()、return falseについて - Qiita
jQueryのイベントハンドラ内でのpreventDefault()、stopPropagation()、stopImmediatePropagation()、return falseについてJavaScriptjQuery
2018年、フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールを調査
フロントエンドのデベロッパーがプロジェクトで使用しているCSS, JavaScriptのツールについての調査結果を紹介します。 SassやLESS、BootstrapやFoundation、AutoprefixerやModernizr、BEMやCSS-in-JS、CSS GridやFlexbox、NPMやGulp、jQueryやReactやVue.js、WebpackやESLintなど、実際にどのように使用されているかが分かります。 5,000人を超える現役デベロッパーを対象に調査が行われ、まさに現場の現在の状況がよく分かります。 The Front-End Tooling Survey 2018 by Ashley Nolan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Q1. フロントエンドの経験年数 Q2. CSSの知
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
2日でできる! JavaScript トレーニング - mixi engineer blog
こんにちは。SNS mixi の JavaScripter、kuniwak です。 新しい仲間たちが入社する季節になりましたね。 さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています！ 2015年度の JavaScript 研修は、Web アプリケーションの部品（モジュール）をつくれるようにすることを目標とした、実践的な研修として計画されました。 JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaS
CSS & JavaScript】HLS(カラーコード)を活用して美しくアニメーションするグラデーションカラーを作ってみる
この他にも CSS3 からは HSL という形式の色指定が出来るようになりました。あまり普及していない印象を受けますが、これはこれで中々のポテンシャルを持った機能なので、ひとつ調べてみることにしました。 - CSS | MDN HSL - CSS3から導入された色指定方法 色相 ( Hue )、彩度 ( Saturation )、輝度 ( Luminance / Lightness )の3つの要素1)色の三属性といいます。からなる指定方法のことです。写真やイラストなどグラフィック分野に明るい人であればご存知かもしれませんね。Photoshop や Illustrator にもこの指定方法があります。CSS ではこのように記述します。 .demo { background: hsl(色相, 彩度, 輝度); } // アルファ値 (透明度) を含めた hsla というのもあります .demo
jQueryを使わずjavascriptだけで書き直した際の記法メモ - Qiita
パフォーマンスが重要な部分では、やっぱりjQueryは気になる。。。 検索するとなにやらVanilla jsというのが盛り上がっていた。 ってもこれただのjQuery使わず、javascript使おうぜって話なだけだけどwww という事で今のjQueryのメソッドをすべてjsで置き換えたらどうなんだ？と思い対応表をまとめました。 jQuery ⇔ vanilla(普通のjavascript) 参考： YOU MIGHT NOT NEED JQUERY Choosing Vanilla JavaScript live(on) event
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
JSライブラリ/フレームワークの良い、悪いメモ - 素人がプログラミングを勉強していたブログ
※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った
» 簡単にコンテンツの一元管理が出来るJSON形式ファイル その1 | Webnoborder
マルチデバイス対応を考える上で問題の１つとなる「コンテンツの管理方法」についての考え方は多種多様ですが、小規模サイトや予算が少ない場合、作業時間は少なく、サーバサイドの開発は0で効率よくコンテンツを管理したいですよね。 そんな時は、「JSOマルチデバイス対応を考える上で問題の１つとなる「コンテンツの管理方法」についての考え方は多種多様ですが、小規模サイトや予算が少ない場合、作業時間は少なく、サーバサイドの開発は0で効率よくコンテンツを管理したいですよね。 そんな時は、「JSON形式のファイルで管理」してみてはどうでしょうか？ 店舗情報を１つのJSONファイルで管理し、JavaScriptを使ってPCとスマートフォン別々のHTMLに店舗情報を表示ことも可能です。 今回は店舗情報をJSONファイルに保存してHTMLに一覧表示するまでの流れを紹介します。 JSON形式のファイルって何？ そもそ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
今時のテレクラ事情
当サイトでは20年前に世のおじ様達を席巻したテレクラについて熱く語ります。 テレクラの誕生の歴史から現在に至るまでの経緯や、今テレクラを利用する人の心情について詳しく記載しております。 テレクラとは、すなわちテレフォンクラブの略称です。1985年に生まれたサービスであり、出会い系サイトの前身といっても過言ではありません。 現在ではスマートフォンで相手女性とインターネットを介しコミュニケーションを取ることができますが、当時は携帯電話も無く、個室形式の店舗にまで行って利用しなくてはなりませんでした。 当時は突如現れた新アダルトサービスに法整備が追いつかなく、駅前のティッシュ配りなどで未成年がサービスを知り、援助交際という俗語が誕生するなど、凄い盛り上がりをみせました。 その後、1995年にこういった状況を野放しにはできないと法整備がされ、利用者に年齢確認を求めるなどされ利用者やテレクラ事業者も
クロージャ - JavaScript | MDN
function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側の関数で宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を使用
JavaScriptで記事の追記を折りたたみ
JavaScriptで記事を折りたたむ方法を紹介します。以前紹介したものよりJavaScriptが簡潔ですがcookieが使えないので用途によって使い分けたらいいと思います。こちらは記事が長くなった場合などに使用すれば便利かと。別ページに移動する必要もないのでスムーズに表示されます。Yahooニュースみたいな感じですね。
様々なブラウザ環境に対応する為のJavaScriptライブラリ「Modernizr」
配布元：Modernizr ライセンス：MIT & BSD licenses. ModernizrはTwitterなどの大手サイトでも採用されているブラウザの機能の実装状況を調査するためのJavaScriptライブラリです。 たとえばModernizrを読み込んだサイトではhtml要素が次のように書き換えられます。 <html lang="ja" class="no-js"> ↓ <html lang="ja" class="js flexbox flexbox-legacy rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
