2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Animated clip-path slider Concept 画面を縦半分に二分割した画像スライダーで、画像にマウスホバ
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
Vanilla Javascript Parallax Library — Rellax
or if you're old school like us, download and insert rellax.min.js file in your project folder.
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo
Delighters
Delighters.JS Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42 https://github.com/Q42/delighters Features Declarative Flexible Light footprint Framework-agnostic Supports desktop, mobile & tablets Degrades gracefully to your default styling Usage 1. Include the script <script type="text/javascript" src="delighters.js"> 2. Add delighter attributes <div class
TypeScript で少し快適に JavaScript を書こう - オイオイオイ書くわアイツ
概要 はじめに TypeSript の基礎の基礎 D3js でみる型検査のありがたさ JavaScript による実装 ソースコードの問題点 TypeScript による型検査 おわりに 概要 TypeScript はね、よいよ。 はじめに JavaScript を書きたくない人間は多い。 なぜかといえばしんどいからである。 だけれども大人はお仕事をしているので、JavaScript で動く何らかを開発しないといけないことがある。 そんな世界の悲惨を受けて、JavaScript のしんどさ（以下 Shindosa of JavaScript, SJS）を軽減するために生まれたのが TypeScript である。 TypeScript は AltJS と呼ばれる、JavaScript の実行環境で動く JavaScript ではない言語の一種である。 TypeScript には次の2つの特徴
今からでも遅くないECMAScript 2015(ES6)完全入門
ECMAScript 2015（ES2015）で追加された以前より洗練された構文を、今回と次回に分けて紹介する。
コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita
このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。 コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？ 非同期処理って面倒ですよね。JavaScriptではいわゆる コールバック地獄 というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
GPSアプリ作成上の注意点について
こんにちは、サンプルアプリ開発者の山田健一です。 GPSアプリはMonacaと相性がよいものの1つです。 なぜならケーブル要らずのデバッグができるからです。 「GPSアプリをデバッガーで起動して、外を歩きながら取得したGPSデータを、PCに表示させたログで確認する」という使い方が可能です。 GPS機能を利用するにはいくつかの注意点があります。 場所によっては位置を測定できないことがある 位置が測定できたとしても誤差が大きいことがある 以上の点に注意してください。 具体的には、 geolocation.getCurrentPosition メソッドは使用せず、geolocation.watchPosition メソッドを使用するようにしてください。 watchPosition メソッドを使用すると位置情報が変わるたびに指定した callback 関数が呼ばれます。 具体的なコード例は次のよう
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
JavaScript ベスト・オブ・ザ・イヤー 2016
JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。 2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。 過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。 2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
Progress Nav
This page demonstrates an idea for how progress can be visualized inside of a standard page nav. Scroll the page and note how the marker animates to highlight all of the sections that are currently on screen. The rest of the content below is taken from slides.com/developers. Take a look at that to see how the progress nav looks on a real page. Created by Hakim El Hattab | hakim.se | @hakimel Slide
VRにbot,OS,形態素解析にディープラーニングまで！JavaScriptの限界を超えた鉄人達の変態的所業まとめ | Ledge.ai
javascript。今やwebの表現になくてはならない存在で、デジマなフィールドで働く僕らにもかなり身近な存在ですが、今回は『JSでそこまでやれんの？！』『いやそれはおかしい！』と言わざるを得ない事例をあえてチョイスしてご紹介。 何が何でもjavascriptでやるんだ！やれるはずなんだ！うるせー黙ってろ！！とでも叫ばんばかりの熱いパトスをぜひ感じてください。 深層学習がブラウザオンリーで！まさかのJS駆動ディープラーニングエンジン『ConvNetJS』ConvNetJS：Source Ledgeでも以前各種のライブラリを紹介してきましたが、そのどれもがクラウドサーバ上で稼働しているもの。 なので、当然のように利用にあたっては通信が必要でした（ものすごく当たり前ですが） が、このConvNetJSはなんとjsベース。つまりクライアントPCの中で稼働してしまうとのこと。 もはや意味が分かり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - JavaScript 3D library
Emergence.js
PWABuilder
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
