Advanced Snap.svg — SitePoint
We have seen, in an earlier post, how to get started with Snap.svg. In this post, we are going to take a closer look at the new features mentioned in the first article. Masking Let’s start by recalling how to create a drawing surface, a simple shape, and then load an image: var paper = Snap(800, 600), img = paper.image('bigImage.jpg', 10, 10, 300, 300), bigCircle = s.circle(150, 150, 100); The cir
DailyJS: Cross-Storage: Share Local Data Across Domains
The localStorage API has some limitations, which you may need to work around for larger applications. The new cross-storage (License: Apache 2.0, npm: cross-storage, Bower: cross-storage) library from Daniel St. Jules at Zendesk adds support for cross-domain localStorage with permissions. It even has an ES6 Promise API. It uses two components: hubs and clients. Hubs can set permissions based on on
CSS Triggers List - What Kind of Changes You Can Make
• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi
3 New JavaScript APIs You May Want to Follow — SitePoint
If you’re a frequent SitePoint reader and perhaps a follower of mine, you’re aware that I’ve written a lot of articles about HTML5 and JavaScript APIs. So far, I’ve published articles discussing APIs that you can start using today, even if with the use of a polyfill. Today I’ll break this habit by giving you a preview of some APIs that are still at a very early stage. To give you an idea of how cu
Pure CSS parallax scrolling websites | Keith Clark
This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website. Parallax is almost always handled with JavaScript and, more often than not, it’s not very performant with the worst offenders listening for the scroll event, modifying the DOM directly in the handler and triggering needless reflows and paints. All this happens
10 Essential Sublime Text Plugins for Full-Stack Developers — SitePoint
July 8, 201410 Essential Sublime Text Plugins for Full-Stack Developers When I started with web development a few years ago, Vim was my first choice of text editor. It was easy to work with and I could get the basics done without much hassle. Also, many developers like terminal based text editors because they get the same environment in both their local development machines and remote servers. In
How to Create Your Own HTML Elements With Web Components | Envato Tuts+
Web Components are currently and excitedly being talked about as an upcoming "tectonic shift for web development" with the promise of permanently reshaping the web design landscape. Big players are moving forward to bring web components into reality. Both Google and Mozilla are already gradually rolling out native browser support. What are web components you ask? In a nutshell, web components give
Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) | Codrops
Freebie: Flat Style Squared Preloaders (GIF, AEP, PNG) A set of really nice and modern animated GIF preloaders by PixelBuddha. The colorful set comes with seven unique square style activity indicators in three sizes and the Adobe After Effects file. Today we are really happy to share a set of creative activity indicators by PixelBuddha with you! You may have seen the first set of the Flat Preloade
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
さまざまなオフィスツールのベクターパック「Freebie: Comprehensive Office Environment & Tools Vector Pack」
CSS3アニメーションエフェクトを簡単に実装できる「iHover – CSS3 hover effects pack」＆「Magic Animations CSS3」｜BLACKFLAG
WindowsXPのサポートも終了し、この先はWebサイト制作において IE8を対象外にできる状況が増えることが想定され CSS3の各機能を今まで以上に活用できる機会が増えてくるかと思います。 そんな中、最近あちこちで話題になっていた 複雑なCSS3アニメーションエフェクトを簡単に実装することが扱うことが可能になる 「iHover – CSS3 hover effects pack」と「Magic Animations CSS3」の 各ツールがこの先とても参考にできそうだったのでメモ書きとして紹介してみます。 iHover – CSS3 hover effects pack この「iHover」はマウスオーバー時に 様々なパターンのCSS3アニメーションエフェクトを実装させる チュートリアル集になっています。 デモ画面には、円形アニメーションパターンと 四角系アニメーションパターンが用意さ
AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築 | DevelopersIO
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
新卒エンジニア向け：Macにインストールすべきアプリ達 ベーシック エンジニアブログ Basic::Engineer.deploy(blog)
Gist のページャーを使いやすくする Google Chrome 拡張つくりました - Qiita
Gist のページャーが Newer と Older しか無くてつらくなる可能性があったのでページャーを使いやすくする Google Chrome 拡張をつくりました。 Github Chrome ウェブストア 作ったうえで得られた知識 MutationObserver で DOM の変更を検知する Gist は最初にページを読み込むときは通常の GET リクエストなので、window.onload イベントが動くけども、Newer または Older をクリックして遷移すると、pushState を使っているのか window.onload イベントが動かない。そのため、Javascript で DOM が書き換えられたタイミングでも拡張機能が動くように、MutationObserver というものを使った。 Register as a new user and use Qiita mo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pipes: Rewire the web
http://dailyjs.com/2014/11/10/json-purple/
http://dailyjs.com/2014/08/07/p5js/
Dribbble - Knowledge base in motion by eduards balodis
http://page2rss.com/p/0b73a05e940d022f1b3ed62933fb2078_6991101_6991346