『RequireJS等はもう古い。WebPackとは？』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 アメーバ事業本部 クロスイノベーション室のグンタ（@gunta85）と申します。 今回はフロントエンド開発用の、 ありとあらゆる依存関係を簡単に解決してくれる、 WebPackというスグレモノをご紹介します。 導入経緯大きなアプリを開発するにあたり、依存関係を解決してくれるものを探していました。 その中で、RequireJSやBrowserify、Componentなども候補に挙がりましたが、 諸々の理由でWebPackを選びました。 特徴の違いについては「WebPack vs Browserify」等で検索してみると良いかと思います
Springy - A force directed graph layout algorithm in JavaScript.
Springy.js A force directed graph layout algorithm in JavaScript. What is Springy? Springy is a force directed graph layout algorithm. So what does this “force directed” stuff mean anyway? Excellent question! It means that springy uses some real world physics to try and figure out how to show a network graph in a way that looks good. Here's an example: Getting started Springy.js is designed to be
DynCSS - Simple dynamic CSS rules to give life to your sites.
... <script src='bower_components/dyn-css/dyncss.js' type='text/javascript' /> ... Less than 20K, uncompressed and unminified. Requires only jQuery. What is it? DynCSS parses your CSS for -dyn-(attribute) rules. These rules are Javascript expressions evaluated on browser's events like scroll and resize. The result is applied to the CSS attribute you have specified as suffix. For example, this will
seen.js
source map | unminified javascript | full coffeescript seen.js has no dependencies. Licensed under Apache 2.0 To see what is new in this version, read the release notes. Demos Hello, World! Materials gallery Noisy Wave Patch Noisy Sphere Same Scene, Canvas vs. SVG Same Scene, Multiple Angles SVG Masks and Effects Text Depth of Field Audio Equalizer N-Body Gravity Simulation Mocap-Driven Skeleton 2
Better Javascript Promises
This is a repost of an old article from 2014 that was lost in a blog migration but I think is still relevant. It shows how differently the javascript promise problem could have been solved. This was written before async await became a thing, and before the function coloring problem was given its name. This proposal would have solved the promise problem without the coloring, but alas, it wasn't lik
shine.js
var shine = new Shine(document.getElementById('my-shine-object')); window.addEventListener('mousemove', function(event) { shine.light.position.x = event.clientX; shine.light.position.y = event.clientY; shine.draw(); }, false); FeaturesDynamic light positionsCustomizable shadowsNo library dependencies, AMD compatibleUses text or box shadows based on contentWorks in browsers that support textShadow
Build web animations visually with Webflow Interactions
Create interactive web experiences that differentiate, delight, and convert.
vis.js
vis.js community edition * A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.
Advanced animation path » legomushroom
Check out this Pen! In this post series I’ll share with you some neat SVG techniques that will help you on your daily web dev route. This particular post is dedicated to defining advanced animation path. 1. Get something to work with Open you favorite vector editor and draw path that will define our motion route. Hit file->save as and save it as svg file then copy it’s contents to your html. I’ve
The guide to CSS animations for the web
Have you been asked by your client, boss or designer to create some nice animations on the next web project? They say: “I have seen this cool effect on the other site, can you do something similar?” or “I have this idea for an animation, can you do it?” and you go: “Sure I can.” or “Hm, I don’t know…” Tip of the day: Never say “No, I can’t do it.” That’s not what a modern front-end developers say.
Disable the JavaScript Console
There are a few giant companies out there, namely Facebook and Netflix, who have decided to effectively disable a user's ability to execute JavaScript console commands. The decision was initially made by Facebook to prevent users from executing a specific set of commands which would expose user information via the JavaScript console (the message was sent to all Facebook users via a massive SPAM m
Agile Css3 Engine
Generate pure css3 Agile uses javascript to generate pure CSS3. No canvas no webGL no svg. FOR Mobile devices In mobile devices Agile's performance is perfect ,It really can cross platform. Easy to use Agile’s API has high similar characteristic with actionscript3.0, you can learn it in 10 minites. cross platform In modern browsers Agile can generate high-quality, high-end visual effects. Especial
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Multi-Platform Live Coding with React, Firebase, and LiveReload - QuickCoin
GitHub - codemix/fast.js: Faster user-land reimplementations for several common builtin native JavaScript functions.
MDwiki - Markdown based wiki done 100% on the client via javascript
Webix JS UI Library & Framework - JavaScript UI Widgets for Fast Web App Development
JSCapture
http://www.pencilscoop.com/2014/03/svg-zoom-effects-with-internal-javascipt/
GitHub - aaditmshah/augment: The world's smallest and fastest classical JavaScript inheritance pattern.
