コーディングガイドライン | ディーゼロ フロントエンドガイドライン
コーディングガイドライン 🚩 概要 このガイドラインは、株式会社ディーゼロで取り扱うウェブサイト制作のために作成されたものです。 ひとりで同時に十数本のプロジェクトに携わる制作において、担当の交代や引き継ぎなどがスムーズにできるように、ルールや方針の統一し、クオリティを担保して確実にウェブページを作成・更新・運用できることを目的としています。 コーディングに大切なこと クオリティ ビジュアルのクオリティアクセシビリティダウンロード・レンダリングスピードページパフォーマンスメンテナンス性 一貫性更新性拡張性影響範囲の把握バージョン管理制作スピード 制作環境の明瞭化テスト・チェックの自動化修正の自動化🔧 ガイドラインの更新 このガイドラインは日々更新されるウェブの技術やトレンドによって最適化されるべきです。 変更・追記・削除に関しては常に議論されることが期待されます。 集めた意見や
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
All You Need To Know About CSS-in-JS | HackerNoon
Too Long; Didn't ReadTL;DR:<em> </em><strong>Thinking in components — </strong>No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). design by Anna Dadej TL;DR: Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component
真のコンポーネント粒度を求めて - builderscon tokyo 2017
Abstract HTML／CSS／JavaScriptを組み合わせてモノを作るフロントエンドの開発において、運用の効率アップとコードの破綻を回避するため、画面を構成するUIを、それなりの大きさの塊の集合として考えてコードを構成するのが一般的です。 このUIの塊のことは、「モジュール」「コンポーネント」「ブロック」「エレメント」など、様々な呼ばれ方をします。 HTMLとCSSを書く際、このコンポーネント（と呼ぶことにします）をどのくらいの大きさのものとして扱うかは、なかなか難しい問題です。私を含め、フロントエンドに従事する者の多くがこの不確定なコンポーネントの粒度（大きさ）に頭を悩ませていることでしょう。 HTMLとCSS的にコンポーネントをどう考えるかは、CSS設計方法論（CSS methodology）としてまとめられたものがいくつもあります。しかしその多くは、コンポーネントの粒度につ
Frontend Weekly Tokyo
Latest postsVol.438Vol.438Kota Furusawa 20th December 2023 HTMLウェブコンポーネント、ソフトウェアに関する16の信念、ブラウザ再考、ほか計10リンク Vol.437Vol.437Kota Furusawa 13th December 2023 なぜフォームのデザインが重要なのか、ミニマリストとユーザビリティのトレードオフ、WebコンポーネントとJavaScriptフレームワーク、ほか計10リンク Vol.436Vol.436Kota Furusawa 6th December 2023 デザインシステムのエコシステム、HTML Web コンポーネント、CSS変数の命名、ほか計10リンク Vol.435Vol.435Kota Furusawa 29th November 2023 プログラミングにおける命名の重要性について、RIT
Houdini、それはCSSの進化を促すプロジェクト - The future starts today
この記事は CSS Advent Calendar 2016 の5日目の記事です。 W3C Houdini Task Forceで進められている「Houdini」と呼ばれるプロジェクトの話をします。 FlexBoxの例 突然ですが、FlexBoxの話をします。 モジュールの横並びには重宝しますよね。 今年になってだいぶ利用が進んだ印象がありますが、随分と前からFlexBoxの仕様は存在していました。 一番最初の草案に遡ってみると、なんと2009年。 7年前です。 2013年くらいからFlexBox良いぞという記事はちらほら出始め、おそらく皆認識はしていました。 が、ブラウザの対応状況などを考慮し実装できずにいたと思います。 仕様定義の議論から実際にここまで普及するまで7年間もかかっているわけです。 流れを整理してみると、以下のようになります。 提案、議論、仕様書作成あたりに時間がかかるのは
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
I am mitsuruog | 進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
Front-end-Developer-Interview-Questions/Translations/Japanese at master · h5bp/Front-end-Developer-Interview-Questions · GitHub
#フロントエンドデベロッパー面接時の質問事項 @バージョン 2.0.0 本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。 Rebecca MurpheyのBaseline For Front-End Developersもとても参考になるので面接前によく読むことをおすすめします。 注意: これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。 オリジナルのコントリビューター 質問の多くはPaul
一歩進んだHTML/CSS/JSを目指すために | 1000ch.net
2013/08/01 一歩進んだHTML/CSS/JSを目指すために 「なんとなく書きたくないけど、どう意識してコーディングしていけばいいのかわからない…。」 それを解消するためのツールがありますので、紹介します。 HTMLInspector philipwalton/html-inspector Introducing HTML Inspector こちらはHTMLを解析して悪いところを指摘してくれるツール。 たぶんガイドラインとかそれぞれあると思いますが、基本的にはコレに沿ってもいいかと。 スクリプトを差し込んで、実行すると、指摘事項がconsoleに出力されます。 githubのリポジトリからダウンロードするか、bowerで落としてくるか。 bower install html-inspector 次に、解析したいページに以下のコードを埋め込みます。 <script s
CSSとJavaScriptどちらでも実装できるけど、どのように使い分けるのがよいかの解説
CSSでもJavaScriptでもできるけどどちらを使おうか、CSSとJavaScriptどのように使い分ければいいのだろうか、二つのうまい関係を構築するテクニックを紹介します。 Building A Relationship Between CSS & JavaScript 下記は 各ポイントを意訳したものです。 はじめに スタイルの定義はCSSで：JavaScriptからCSSを遠ざける ユーザエクスペリエンスを犠牲にしないで使い分ける CSSとJavaScriptの使い分けの大切なポイント はじめに JavaScriptには数多くのライブラリ、jQuery, Prototype, Node.js, Backbone.js, Mustacheなどあり、非常に人気が高いです。これらは実際に非常に多く利用されており、時間をかければもっとよい方法があるかもしれないところでもそれらを使ってしま
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSS
CSSに死を！これはJSerの叫び！ #kbkz_tech
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
https://qiita.com/nyarla/items/10f0f3e3c2116417df59
YUI Library
DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
_level0 - KAYAC Front Engineer Blog