roll.js A tiny javascript library to track scrolling and stuff. Current step Current step progress Current position Total progress Steps Viewport height Roll height Padding between steps100px Jump to step 2 step 4
Roll.js Demos
roll.js A tiny javascript library to track scrolling and stuff. Current step Current step progress Current position Total progress Steps Viewport height Roll height Padding between steps100px Jump to step 2 step 4
Web制作者にもチャレンジできるIoT入門～Tesselの基礎～
2015年はIoT元年と言われるくらい、IoTやWoTという単語がバズワード化してきました。2014年頃からArduinoやRaspberryPi、Galileo、Edisonといったマイコンボードが急激に人気になってきましたね。Web開発者がハードウェア領域に進出しやすくなりました。ただ、センサーの利用など応用的なことをしようとすると、GPIOや電流などの知識をある程度は知っておく必要があります。 今回は、Webの知識だけでほぼ操作でき、初心者向けのTesselというマイコンボードを紹介します。具体的には、Tesselの開発環境整備から環境センサを扱うところまでを紹介したいと思います。Webエンジニア向けに説明を書きましたが、Webデザイナーやディレクターなど、非エンジニアの方でもチャレンジしていただけたら幸いです。 Web制作者向けマイコンボードTesselとは 参考リンク 次世代マイ
rainyday.js
About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse
Introducing Jelly Navigation Menu: When Canvas Meets PaperJS — Smashing Magazine
Web helps designers and developers find the best inspiration and resources for their projects. Even though there are different tutorials and tips available online, Oleg Solomka feels that HTML5 canvas techniques are missing the most. Good news: he had the chance to fulfill this wide gap. In this article, Oleg would like to share his experience and story of how he brought the “Jelly Navigation Menu
正規表現と文字列がマッチしているか簡単にチェックできるオンラインツール -RegExp playground
正規表現と文字列を入力し、それがマッチしているかどうか簡単にチェックできるオンラインツールを紹介します。 NGの画面 正規表現のチートシート ページ下部にあるチートシートから。 . 任意の文字にマッチする（改行を除く） {n} n回の繰り返し {n,} n回以上の繰り返し {n, m} n回以上m回以下の繰り返し ? {0,1}と同じ * {0,}と同じ + {1,}と同じ \w アルファベット、数字またはアンダーバー、[a-zA-Z0-9_]と同じ \d 数字、[0-9]と同じ \s 空白文字、[\t\r\n ]と同じ […] キャラクタをクラス化 [^...} キャラクタを否定クラス化 (…) パターンのグループ化 (?:…) パターンの非格納グループ化 (?=…) 先読み (?!…) 否定先読み ^ 行の先頭にマッチする $ 行の終端にマッチする \b 単語境界にマッチ \B 単語境
独学でフロントエンド・エンジニアを目指す人のための基礎カリキュラム - DESIGNMAP
本記事は2013年に書いた記事で内容がだいぶ古くなっております。 フロンドエンドは3年間で大きく状況がかわりました。下記の2016年に書いた改訂版の新しい記事をおすすめします。 「フロントエンドエンジニアとは／Webアプリケーションの歴史／フロントエンドの勉強が難しくみえる理由 － まったくのゼロからフロントエンドエンジニアを目指すための独学カリキュラム vol.1」 2011年に『まったくのゼロから、独学でWebデザイナーになる方法』、2012年に『19のステップで、まったくのゼロから、独学でWebデザイナーになる方法』を書いて、独学でWebデザイナーを目指す人向けの具体的な独学方法を書いた。今回は、Webデザイナーという大まかなくくりではなく、フロントエンドエンジニアにしぼって独学方法をまとめてゆきたい。 フロントエンド・エンジニアとは フロントエンドとはWebブラウザ側（クライアント
HTMLでカーニング！手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、机に置いたおもちゃの日焼けが気になるもりたです。 今回は、前からちょっと気になっていたウェブフォントをカーニングできるJS「HTMLで文字詰めするタイポグラフィー用JS」を試してみました。 http://fladdict.net/blog/2011/02/auto-kerning.html ※現在はアクセスできなくなっています。 ご存知のとおり、jsを使わなくてもletter-spacingを使ってcssだけで設定しようと思えばできるんですが、ひと文字ずつの設定となるとhtmlもcssもすっきりしなくなる上にめんどくさい！ こうパッとガッとスッと設定したい！ そんな希望を叶えてくれるのが「FLAutoKerning.js」です！ ポイント1：導入が楽です 手順は簡単、サイトからファイルをダウロードしてjqeryと一緒に読み込ませて<head>内に設定を書くだけ。 入れてみたデモ
Closure Compiler Service
Closure compiler service is deprecated, and will be removed. See issue #4199.
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
JavaScriptテクニックバイブル | 技術評論社
概要 昨今のWebアプリケーションでJavaScriptは必須な言語となっており、サーバサイドからフロントエンドまで広く使われ、HTML 5の普及もありWeb開発の中心となりつつあります。本書は、Web開発者向けに、読んですぐ利用できるテクニックや便利なライブラリを150のTips形式で紹介する「開発効率の改善に特化したリファレンス」です。 こんな方にオススメ JavaScriptの入門書を読み終わり、実践的なことを始めようと思っているエンジニア JavaScriptを普段業務で使っている1年目から2年目のエンジニア 普段なんとなくjQueryを使っているエンジニア 目次 Chapter01 開発を取り巻く環境を改善する 1-1 Web上で記述・実行・公開するサービスを知る 1-2 Vimで便利な開発環境を整える 1-3 Emacsで便利な開発環境を整える 1-4 WebStormで開発を
SeuratJS - A Raphaël plugin for creating beautiful pointillized animations.
A Raphaël plugin for creating beautiful pointillized animations. Download ZIP File Download TAR Ball View On GitHub View the Project on GitHub gsmith85/seuratjs Pointillize and Pixelize all on the Client Side SeuratJS is a JavaScript library that extends Raphaël and allows for the creation of vivid animations and pixelated artwork using minimal code. It does this by extacting color data from an im
CodePen - Front End Developer Playground & Code Editor in the Browser
123 CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. CodePen is a social development environment for front-end designers and developers. 👋 It’s the best place to build and deploy a website, show
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://bouncejs.com/
http://ja.d3js.node.ws/
deconcepter.jp
Monaca
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
deconcepter.jp
Chromeでjavascriptデバッグ！まず半歩♪
