三年間運用しているサービスにFLOCSSを導入してCSSの健全化を目指す | Recruit Tech Blog
こんにちは、キッズリー開発グループ サーバサイドエンジニアの @t_uyama です。 本記事では、ローンチから三年間運用されているwebサービスにFLOCSSを導入して既存のCSSをリファクタリングしたという事例をご紹介します。また、各人で解釈が分かれがちなFLOCSSのレイヤ分けの一例と、FLOCSS導入後のCSSの開発体制についても併せてご紹介します。 FLOCSSとは？ CSSを書く際のファイル構成や命名規則などを取り決めたルールの1つです。CSSの命名規則というとBEM、OOCSS ( Object Oriented CSS )、といったものが有名なところして挙げられますが、FLOCSSはこれらの良いところを組み合わせたものとなります。Foundation Layout Objectと役割ごとにレイヤ（層）が分かれているのが特徴です。これにより、CSSコードの再利用・拡張がしやす
Annotated Build Processes | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. When you’re putting together a build process for a site, it’s so dang useful to look at other people’s processes. I ran across Andrew Welch’s “An Annotated webpack 4 Config for Frontend Web Development” the other day and was glad he blogged it. If I was kicking off a new site where I wanted a webpa
An Introduction and Guide to the CSS Object Model (CSSOM) | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. If you’ve been writing JavaScript for some time now, it’s almost certain you’ve written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements
Bridging the Gap Between CSS and JavaScript: CSS-in-JS | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. In this article, we’re going to dig into the concept of CSS-in-JS. If you’re already acquainted with this concept, you might still enjoy a stroll through the philosophy of that approach, and you might be even more interested in the next article. Web development is very interdisciplinary. We’re used
Switching to Parcel from webpack - LogRocket Blog
Over the past year, you’ve likely heard rumblings about a new build tool called Parcel. For those of you unaware, Parcel describes itself as “a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration”. Now build tools have come and gone and ones such as webpack and Browserify are still k
CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog
CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出された。 ある程度の期間を経ていくつかの着目すべきアプローチが見えてきた。これから僕はどのようにセレクタと関わっていくべきかという視点で記してみたい。 擬似スコープ 通常CSSのセレクタにはスコープはないが、HTMLやCSSにハッシュ値を付与して特定のコンテキストを擬似的に閉じてしまおうというアイデア。実装としては、Vue.jsの単一ファイルコンポーネント、Angularのコンポーネントスタイル、styled-jsxなど。関連するウェブ標準技術としてShadow DOMがある。 例え
Advanced web security topics – George's Techblog
This first one comes from An XSS on Facebook via PNGs & Wonky Content Types [1] which gets the browser to execute HTML code embedded in an image. This attack uploads an image that contains HTML strings as a user-contributed content and serves it with an HTML MIME type from the same domain as the compromised website. This exploit circumvents many server-side code injection checks since nobody check
Tech Notes: TypeScript at Google
I've been working on TypeScript for over two years now(!) so I thought I'd write a post or two to reflect. I should open with the standard disclaimer: I am just a random engineer at a company with tens of thousands of them, and that others surely disagree with the opinions expressed here. Google embraced web applications early. Can you believe it's been 14 years since Gmail was released? JavaScrip
Using Feature Detection to Write CSS with Cross-Browser Support | CSS-Tricks
Using Feature Detection to Write CSS with Cross-Browser Support In early 2017, I presented a couple of workshops on the topic of CSS feature detection, titled CSS Feature Detection in 2017. A friend of mine, Justin Slack from New Media Labs, recently sent me a link to the phenomenal Feature Query Manager extension (available for both Chrome and Firefox), by Nigerian developer Ire Aderinokun. This
Webpagetestから始める継続的パフォーマンス改善
autoscale: true Webpagetestから始める継続的 パフォーマンス改善 ページロードタイム編 :hourglass: 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info Create: textlint, Almin アジェンダ パフォーマンス改善は指標を決めて行わないと迷子になる パフォーマンス改善を行うには継続的な計測を行う 今回はページロードについて、ランタイムは範囲外 パフォーマンス改善のアプローチ 継続的なパフォーマンス計測とリグレッションの検知 ^ 目的はパフォーマンス改善には計測が必要という事実を知ること ^ パフォーマンス計測は継続的に行う必要がある ^ パフォーマンス改善は何を目的、指標にして改善するかを決めないと迷子になる ^ 目的をもって継続的にパフォーマンス改善を行い
ほぼCSSだけで、LPでよくある上下左右からフェードインするやつを実装する - Qiita
背景 LP実装のフロントエンドを担当 Ruby on RailsのView内にてフロントエンド組み込み前提 デザインカンプにアニーメーション、インタラクションの仕様は無かったが、昨今全く動かないLPの方が少ないのではと思った デザイナーにインタラクション考えてもらうのも確認フロー大変だし、Railsにプラグイン組み込む検証リスクなど諸々あり、1回あきらめた 諦めてからが試合開始 変更に強いCSSアニメーション主軸にスクロールインタラクション作れればと思った ゴニョゴニョしたら意外と出来た 実装内容 CSSアニメーション実装 .anm_modデフォルト = 下から元来の位置に戻りつつフェードイン。速度ノーマル &.left, &.right 左右から元来の位置に戻りつつフェードイン &.delay, &.fast フェードイン速度遅め、早め 上記２点の設定で、フェードイン方向（３方向）とスピ
CSS and PWAs: Some Tips for Building Progressive Web Apps — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. In recent years we’ve seen a number of major shifts in the online experience, mostly coming from the proliferation of mobile devices. The evolution of the Web has taken us from single versions of a website, to
Vue CLI 3.0 is here!
Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue applications. Today we are thrilled to announce the release of Vue CLI 3.0 and all the exciting features that come with it. Rich Built-in FeaturesVue CLI 3 is a completely different beast from its previous version. The goal of the rewrite is two-fold: Reduce configuratio
Flexbox — The Animated Tutorial
Complete CSS flex tutorial on Hashnode. Ultimate CSS grid tutorial on Hashnode. Higher-order functions .map, .filter & .reduce on Hashnode. You can follow me on Twitter to get tutorials, JavaScript tips, etc. To get a good idea of how flex works try flex layout editor on this page. If a picture is worth a thousand words — how many more animation? Flex cannot be efficiently & fully explained by tex
Convert SCSS (Sass) to CSS-in-JS
CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale. CSS-in-JS avoids these problems entirely by generating unique class names when styl
Scalable and Modular Architecture for CSS: An SMACSS Intro | Toptal
CSS is notorious for getting messy quickly as a website scales. While frameworks like Bootstrap can help, SMACSS takes a different approach, as a set of solid organizational guidelines. In this article, Toptal Freelance Front-end Developer Slobodan Gajic gives us a run-down of the idea and benefits behind Jonathan Snook’s architectural wisdom. authors are vetted experts in their fields and write o
CSSはもう新種のJavaScript
インクルーシブ HTML＋CSS＆JavaScript（紹介記事）、コーディングWebアクセシビリティ（紹介記事）の著者ヘイドン・ピカリング氏の記事が興味深かったので、紹介します。 CSS: A New Kind Of JavaScript 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptでのスタイル CSS 最後に JavaScriptでのスタイル Web制作に携わっている人は、2つの補完的なテクノロジーに詳しいと思います。1つは文章とその構造のためのHTML、もう1つはインタラクションとスタイルするためのJavaScriptです。 JavaScriptでスタイル？と思ったかもしれません。そうです、あらゆるDOMにおけるノードをサポートしているJavaScriptのstyleプロパティのことです。
The CSS Paint API | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The CSS Paint API is extremely exciting, not only for what it is, but what it represents, which is the beginning of a very exciting time for CSS. Let’s go over what it is, why we have it and how to start using it. What is the CSS Paint API? The API is just one part of a whole suite of new specifica
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Optimization Tools for Boosting PWA Performance — SitePoint
Pattern Library First: An Approach For Managing CSS — Smashing Magazine