Create a WYSIWYG Editor With the contentEditable Attribute | Envato Tuts+
WYSIWYG editors are quite popular. You might also have used one at some point. There are a lot of libraries available to help you set up your own editor. Although they're quick to set up, there are also downsides of using these libraries. To begin with, they are bloated. Most of them have fancy features that you might not use. Moreover, customizing the appearance of those editors can be a headache
これは凄い！Web制作が捗るモーフィング系の最新スニペットまとめ
作成：2016/04/25 更新：2016/06/29 Web制作 > ある形から別の形に連続で変化をかけていくモーフィングのような、視覚的な変化を表現できるスニペットをまとめました。トレンドをおさえた最新スニペットを厳選してピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 背景色に合わせて、テキスト色をリバースさせる DOM要素の重なりを指定するCSS3のブレンドモードmix-blend-mode: differenceを使って、背景色と同時にテキストカラーを反転させていく方法。CSSだけでこれができるのは驚き。 進捗を示すプログレスバーなどで使うと、コントラストがはっきりするので見やすくなりそうです。 mix-blend-modeの「 difference」についてはCSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこな
フロントエンジニア向けTwitterに関する実装まとめ 2016 開幕版（ツイートボタンの設置方法・Web Intent・ツイッターウィジェット・Twitterカード etc...） - みかづきブログ その3
（のちにキャッチーでポップな気の利いた文章に差し替える） いつまで経ってもキャッチーでポップな気の利いた文章が思いつかなかったので、このまま公開します。Twitterに関する実装あれこれです。 実は 公式ドキュメント に詳しく載っているので気になる方はそちらも確認してみてください。ちなみに本記事には公式ドキュメントに載っていない生活の知恵的なテクニックも記載しております。 dev.twitter.com 目次 1. 公式ボタンの設置方法 1.1 ボタンの種類と入力項目 1.2 ページ内に公式ボタンを複数置きたい場合 1.3 ツイートの文字数を稼ぐためにURLの短縮を缶変えている場合 1.4 ユーザーを複数入力したい場合 1.5 推奨ユーザーを複数入力したい場合 1.6 ハッシュタグを複数入力したい場合 1.7 画像付きツイートを投稿させたい場合 1.8 動画付きツイートを投稿させたい場合
Our Justified Layout Goes Open Source | code.flickr.com
We introduced the justified layout on Flickr.com late in 2011. Our community of photographers loved it for its ability to efficiently display many photos at their native aspect ratio with visually pleasing, consistent whitespace, so we quickly added it to the rest of the website. It’s been through many iterations and optimizations. From back when we were primarily on the PHP stack to our lovely ne
ServiceWorker Cookbook
Introduction Igrice za decu od 3 do 103 godine. Nove online friv igrice, mobilne za telefon. The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites. Tip: Open your Developer Tools console to view fetch events and informative messages about what each recipe's service worker is doing! Attribution The Service Worker Cookbook was created
Web上に表示された画像をそのまま編集できるJSライブラリ「DarkroomJS」を使ってみた！ : うえぶはっく
画像編集系のJavaScriptライブラリはいくつか存在しますが、その中でも非常にシンプルで扱いやすく、直感的な操作が人気の「DarkroomJS」をご紹介しようと思います！ 任意の「imgタグ」を指定することで、専用の「画像編集ツールバー」が表示されるので、そのままWeb上で加工をすることが出来るようになります。 必要なファイルを揃えよう！ 「DarkroomJS」は、Canvas APIを効率よく扱える「fabric.js」をベースに開発されていることを踏まえて、事前に必要なファイルは以下の3つになります。 darkroom.css darkroom.js fabric.js これらのファイルは、GitHubからダウンロードして使うか、公式サイトのリンクを利用すると簡単です。 【darkroom.css】 http://mattketmo.github.io/darkroomjs/bu
UIセンスが壊滅的なエンジニアがそれっぽいwebアプリを作るために使った無料UIライブラリをまとめておく - Qiita
仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう！と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
CreateJS入門サイト - ICS MEDIA
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima
スマートフォンサイトを1080x1920pxのデザインサイズで作る
なんでもネイティブアプリのUIデザインが1080x1920pxだからと。 えーまじで、と。iPhone6+なら1242x2208pxでないの？と。 Webでそんな数字聞いた事ないんだけど今ってどうなの？と思ってググってみたんだけども iPhone/iPad解像度(画面サイズ)早見表 デザインアセットをiPhone6に対応するワークフロー iPhone6の時代のviewport設定について やっぱりWebだと1080なんてのはないなあと思い知らされた。 とはいえ時間もないし強引にやってみることにした。 デザインをみたら画像しかなかったので、1080x1920pxの等倍で画像切り出したりマークアップしたりして普通にサイト作った後に、CSSとJSで拡大縮小のおまじないかけて強制的に画面にフィットさせるという古典的手法を取った。 iPhoneを含めて大体の最新端末にはviewportを操作すれば何
Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ -
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
フロントエンジニアになってから５ヶ月間で欠かせなくなったツールを晒す - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 今年からフロントエンドエンジニアにシフトチェンジして5ヶ月がたち、これがないと仕事にならんわレベルのツールを整理がてらに晒していこうと思う。 スペック的にはJava歴が10年くらい。 割とツール好きで、できればキーボード（カーソルキー以外）だけですべての操作を完結したいと思っている。 そんなおっさんがお送りします。 5ヶ月間のお仕事内容 PC/タブレット向けのAngularJSを使ったフロントエンド開発 HTML/CSS(SASS)/Javascript PCはIE8~、Chrome。モバイル端末はiPad、Nexus7 職場での
jCanvas | jQuery meets the HTML5 canvas
Seriously, what is jCanvas? jCanvas is a JavaScript library, written using jQuery and for jQuery, that wraps around the HTML5 canvas API, adding new features and capabilities, many of which are customizable. Capabilities include layers, events, drag-and-drop, animation, and much more. The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 c
IE では利用できない機能、IE を切り捨てる事で得られるメリットの一覧 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このエントリでは、Web Developer が IE 対応を止めた場合に得られるメリットがどれ位あるのかを示します。 前提として IE 7, 8, 9, 10 のサポートは 2016-1-13 に終了し、IE 11 が残りました。 IE 11 は IE でしか動かないシステム(特定企業向けに書かれたシステムなど)を利用するためのブラウザとして2023年までサポートが継続するそうです。 ずるずるとサポートを強要するビジネス層、エンジニアとの対話の不在、揃わない各社の足並み、繰り返される10年前の記憶 ES6 が本格的に活用される段階(2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の実装や勉強に役立つ便利なチートシートのまとめ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Dirty Tricks From The Dark
Corners Of Front-End
Understanding JavaScript's requestAnimationFrame() method for smooth animations
https://qiita.com/ryot_a/items/80ccd48d22b390f25b21