KUTE.js | JavaScript Animation Engine
The magic behind Spicr, the result of hard work, the bridge between old and new, the dream and inspiration. Forward Looking The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development. Knowing the Past While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door
https://github.com/dollarshaveclub/shave
Shave is a zero dependency javascript plugin that truncates multi-line text to fit within an html element based on a set max-height. It then stores the diff of the original text string in a hidden <span> element following the visible text. This means the original text remains intact! maintains the original text after truncation does not require other libraries only requires a selector and a max he
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/06141560504fa4e927919dd41de3eab52a11d032/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkoharusugiura%2F20151222%2F20151222103513.png)
DOMContentLoaded周りの処理を詳しく調べてみました - Qiita
利用者が一定数いるIE6,7,8を除いて、現在利用されているほぼ全てのブラウザで標準仕様として扱えるようになっています。2006年ごろから登場したjQueryの$(document).readyは有名ですが、この存在もDOMContentLoadedが正式に取り入れられるきっかけの1つになっています。 2. jQueryのreadyとの違い HTML5で定義されているDOMContentLoadedとjQueryの$(document).readyは、DOMツリーの構築が完了したことを判定するという点で役割は一緒といえます。ただ、jQueryは古いバージョンのブラウザをサポートするためにDOMContentLoadedを使わないready判定の実装を行っていました。 1. jQuery Core 1.0のready判定（1.0から1.2.1まで） jQyer Core 1.0を見るとIE/
Flickity v2 · Touch, responsive, flickable carousels
Install Download CDN Package managers License Commercial license Open source license Getting started Initialize with jQuery Initialize with vanilla JavaScript Initialize with HTML Next Feature showcase wrapAround freeScroll groupCells autoPlay lazyLoad Parallax Images View all options Flickity in use People like Flickity Install Download CSS: flickity.min.css minified, or flickity.css un-minified
Waypoints
Waypoints is the easiest way to trigger a function when you scroll to an element. var waypoint = new Waypoint({ element: document.getElementById('waypoint'), handler: function(direction) { console.log('Scrolled to waypoint!') } }) Builds are available for multiple DOM libraries. jQuery 1.8+ Zepto 1.1+ No Framework IE 9+ npm install waypoints or bower install waypoints or GitHub Download Get Help
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
The Refactoring Tales - JavaScriptのリファクタリング本を読んだ
GitHub: jackfranklin/the-refactoring-tales 読んだ日付: 2015年1月11日 まだ4章の途中までしか書かれてないですが、ウェブ版は無料で読めてPDF版等は買えるようになるようです(6-7章ぐらい予定) The Refactoring Tales - JavaScript Playground またGitHubにソースが公開されています(ウェブページはまだ反映されてない感じのtypoの修正等がありました) 感想 1,2章はフロントのJavaScriptで、jQuery世界を例にjQueryでべったり書いてしまったものをどうやって分けていくかの話。 1章はとても読みやすくて完成度もあるので読んでみるといい気がします、2章のカヌーセルの話はもっと深くやっても良かったような気がします。 縦に並ぶ$を見かけるとつらい感じになりますが、まずは手が出しやすい場
文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚
Responsive Components Using Context Queries
Author: Ed Merritt Date: 22 August 2014 Category: Interface Design, Development, Mobile Reading Time: Media queries make a website respond to the viewport. But what if we could make site components respond to their container? I’ve been having a play with the idea of determining the context of a piece of content within a page rather than simply querying the media (device) itself. Media queries intr
WordPressでテーマからJavascriptやCSSを読み込む書き方まとめ
WordPressでテーマを作る場合、Javascriptや外部CSSを使うことも多いと思いますが、テーマのheader.phpに直接書くのではなく、functions.phpから一括で管理する方法です。 WordPressでは、キューに追加されたJavascriptやCSSを wp_head() や wp_footer() の位置で、自動的に適切な順番で出力してくれます。特にjQueryなどのライブラリやjQueryプラグインを使用する場合は、複数のjsファイルに依存関係が発生し、読み込む順番が決まってくる場合があります。こういう時でも、一括管理していればあとあとで変更が楽になります。こんな感じ。 /** * スクリプトとスタイルをキューに入れる */ function my_scripts() { // 管理画面では読み込まない if ( !is_admin() ) { // スタイル
Smart Fixed Navigation | CodyHouse
Smart Fixed Navigation A fixed navigation that allows your users to access the menu at any time while they are experiencing your website. It's smaller than a full-width fixed header, and replaces the back-to-top button with a smarter UX solution. Web pages with a lot of content require a quick way for the user to get back to the top, where the navigation is (most of the time). Hence the old back-t
Bento - Learn to code and be a self-taught expert developer
Bento will never post information on your behalf without your permission first. By signing in and using this site, you agree to our privacy terms. Learn to code for free We curated the best tutorials from around web and created a free full stack web development curriculum by top engineers. See our free learning tracks 100+ web development topics Stop searching for the right tutorial for a specific
Preloading images with jQuery
I'm looking for a quick and easy way to preload images with JavaScript. I'm using jQuery if that's important. I saw this here (http://nettuts.com...): function complexLoad(config, fileNames) { for (var x = 0; x < fileNames.length; x++) { $("<img>").attr({ id: fileNames[x], src: config.imgDir + fileNames[x] + config.imgFormat, title: "The " + fileNames[x] + " nebula" }).appendTo("#" + config.imgCon
Faster UI Animations With Velocity JS — Smashing Magazine
In this article Julian Shapiro will demonstrate that websites can benefit from the same level of interactive and performant motion design found on mobile apps. In the following examples, he’ll be using Velocity JS — a popular animation engine that drastically improves the speed of UI animation. In particular, Velocity.js’ UI pack, which allows you to quickly inject motion design into your pages. F
Incredibly Fast UI Animation Using Velocity.js — SitePoint
Performance affects everything. Increased performance — apparent or real — improves user experience. In turn, improved user experience boosts the bottom line. Several major studies have proven that increases in latency drastically decrease revenue. Bing reported that a 2,000ms increase in latency results in a whopping 2% decrease in revenue-per-user. Similarly, Google found that a 500ms delay caus
10 Tips for Writing JavaScript without jQuery
jQuery is a great library. It came to be around the time when IE6 was the number one browser. Back then, there were quirks and differences that were tedious to work around and jQuery was the perfect tool for writing cross browser code. Today, however, web browsers have advanced a great deal from those days. We can comfortably use all features provided by ES5, and we have at our disposal awesome HT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitBook – Knowledge management for technical teams
NavNav+
GitHub - dypsilon/frontend-dev-bookmarks: Manually curated collection of resources for frontend web developers.
