README.ja.md#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0for%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8BYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2016年版 フロントエンド開発フォーマット
実務でよく使うhtml,css,jsの小技をつらつらと紹介します。 ※2/11のスクーの授業中で使った資料です。 https://schoo.jp/class/1776 【オシャレCSS編】 1. transformを使って要素を変形させるワザ 2. transitionを使い、CSSだけで簡単なアニメーションを行うワザ 3. keyframesを使ってCSSだけで複雑なアニメーションを行うワザ 4. 矢印アイコンをcssだけで表現するワザ 5. アイコンをアニメーションさせるワザ 6. CSSプロパティ”filter”で画像を加工するワザ 【地味だけど使えるワザ編】 7. 今どきの、要素を上下中央寄せにするワザ 8.「flexbox」で要素を自由自在に整列させるワザ 9. Windowsでwebfontをちょっとマシに見せるワザ 10. ア
画像を分割もしくは合体させてパフォーマンスは本当に変化するのか? - Webパフォーマンスについて
これは、HTML5 Advent Calendar 2014の7日目のエントリーとして書いております。 2008年4月1日に初版が発行された、オライリー・ジャパンの「ハイパフォーマンスWebサイト」を未だに参考にされている方は多いと思います。 ウェブページ内で、背景やボタン、ナビゲーションバー、リンクなどで多数の画像を使う場合は、CSSスプライトを使うのがエレガントな解決策です。そうすることで、マークアップが整理され、扱うべき画像の数も減り、レスポンスも高速になります。 ― 「ハイパフォーマンスWebサイト 高速サイトを実現する14のルール」 Steve Souders著 その部分を参照されてか、時折、「CSSスプライトを使うことで、HTTPリクエスト数が削減されて、高速化に繋がる」と書かれている方をお見受けします。 しかし、それは本当なのでしょうか? そこで、今回、本当に効果があるのかど
OSCON 2014: How Instagram.com Works; Pete Huntの要点まとめ - console.lealog();
なんか最近こんな記事ばっかですが、まぁええよね！ｗ 今回はこちら。 OSCON 2014: How Instagram.com Works; Pete Hunt - YouTube Instagramがどうやって作られてるか、です。 Pete Huntさんは、FacebookでInstagramのエンジニアやってて、いま噂のReact.jsにも携わってるお方。 How Instagram.com Works Webでやる理由 このアプリ全盛期にあえてWebでサービスを提供しているその理由は、 パフォーマンスがいいからではなく、 ぐぐらびりてぃのためでもなく、 アプリでもモバイルでもPCでも、ユーザーの利用環境を問わず提供できるから どうつくるか Webページをユーザーに届ける方法はいくつかって、 従来型のサーバーサイドで全部レンダリングして返す ページ内をいくつかのパーツ(Pageletっ
とあるソシャゲのHTML/CSS設計話
【Frontendアドベントカレンダー19日目】 Xboxに釣られて転職してから２年半…あっという間だった…。 関与したもの： スマホ版ピグ（リニューアルして面影無し） ピグファンタジア（11月末クローズ） 新規ゲーム ←今ここ 今は新規ゲームでコーディングの人としてjoinしてます。 新しいサービスを立ち上げる時に必要なHTMLとCSSの土台作りを全部やるということが、 「HTML/CSS設計」という言葉で装飾されることを知ったのは割と最近です。 マークアップだけで一人据えるのは珍しいと思うので、今やってることなど含めてつらつら書きます。 ここが変だよソシャゲ開発 依頼を受けてサイトを作る場合は次のようなフローだと思います： クライアントと打ち合わせ 仕様が決まる デザイン決まる 値切られる 価格が……決ま…る コーディング クライアントチェック 突然の無理難題に戦慄走る テスト・修正
GruntをつかってLessファイルをWatchしてコンパイルする(Lessをコマンドラインからコンパイルする2日目) - Blog.おにぎりたまごうぃんなー
昨日のつづき Lessをコマンドラインからコンパイルする方法を調べ始めて、基本的なコンパイルはlesscでできたけど、ファイルを監視する機能がないことがわかった。 ファイル更新したらコンパイルしてほしい！！！ Lessファイルをwatchするには色々あるけれど less-watch less を自動コンパイルしたい - 人生いきあたりばったりで生きてます@はてな せっかくの機会なので、名前だけ聞いていたGruntを使ってみようと思った。 Sass+Compass特集でたまたま今月買ったWEB+DB PRESSにid:naoyaさんのGrunt記事もあったし！ WEB+DB PRESS Vol.77 作者: 中川勝樹,山内沙瑛,舟崎健治,吉荒祐一,今井雄太,八木橋徹平,安川健太,近藤宇智朗,奥野幹也,天野祐介,賈成カイ,伊藤直也,住川裕岳,北川貴久,菅原一志,後藤秀宣,久森達郎,登尾徳誠,渡
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは本末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者
100 Tiny CSS Tools & Apps for Web Designers – Speckyboy
Each of these free web-based tools and apps have been built by web designers for web designers. They all offer a time-saving solution to some of those monotonous or even complex CSS tasks you may need to perform from time to time. Without needing to install anything, all you have to do is bookmark, and save them for that day when required. From assessing your website’s accessibility to generating
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー
昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に
Pixate - naoyaのはてなダイアリー
数日前に Pixate という iOS 向けミドルウェアがリリースされました。なんとiOSアプリの見た目を css で書けるという、全ウェブ開発者感涙のライブラリ。こりゃすげえ。ただし無料というわけにはいかず、18,000円くらいでこざいます。 2月9日 追記 トライアル版と、個人利用のための無料版が出たようです。 RubyMotion の teacupのように css チックな DSL で書ける、というものはありましたが Pixate はその辺とは次元が違ってて、普通に css ファイルに css を書くことができる。 button.blue { position: 60, 100; size: 200, 40; border-radius: 7px; font-family: 'Courier New'; font-size: 18pt; font-weight: bold; bord
Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめ:phpspot開発日誌
Smashing Magazine Blog Archive Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby… Ajax,Apache,CSS,CVS,HTML,JS,Perl,PHP等のチートシートまとめが紹介されてます。 チートシートって印刷して貼っておくとほんとに便利でお世話になってます。 Ajax関連 What’s Ajax? Cheat Sheet - PDF Prototype Dissected - Cheat Sheet PNG scriptaculous Combination Effects - Cheat Sheet - PDF Apache関連 Apache Cheat Sheet Apache 1.3 Quick Reference Card - free quick reference cards - PDF htacc
WEB開発者のためのWEB開発ツール:phpspot開発日誌
Brennan’s Blog Blog Archive Web Development Tools for the Power Developer Over the past few years the available tools for web development have become quite powerful. As Firefox became more popular the number of useful extensions grew quickly. WEB開発者のためのWEB開発ツール、ということで色々紹介されてます。 バリデータ(Validator) - フォーマットが正しいかチェックするツール HTML/XHTML Validator - W3C CSS Validator - W3C Feed Validator (RSS and Atom) Jav
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - codylindley/frontend-tools: Landscaping With Front-end Tools