Lately, we have seen a lot of people struggling with CSS, from beginners to seasoned developers. Some of them don’t like the way it works, and wonder if replacing CSS with a different language would be better—CSS processors emerged from this thinking. Some use CSS frameworks in the hopes that they will have to write less code (we have seen in a previous article why this is usually not the case). S

Subtitle: Why everybody who talks about the importance of semantics is both right and wrong at the same time. I’ve often heard people talk about semantic CSS. That is, the names we come up for IDs and class names should be meaningful. When people say “semantic”, I think they do so in a way that assumes that we all know what it means. Yet, the way it’s normally applied is never quite clear. Maybe w

The box-shadow property is a CSS3 property that allows us to create shadow effects on almost any element, similar to the drop shadows we can create in design software. These shadow effects allow us to create the illusion of depth in an otherwise flat, 2-dimensional-looking page. The Syntax # The box-shadow property accepts a value made up of up to 5 different parts. box-shadow: offset-x offset-y b

molily Navigation Foreword Some years ago, web developer Nicole Sullivan gave an influential talk named Our (CSS) Best Practices Are Killing Us. Sullivan was one of the first who set up rules for predictable, maintainable, large-scale CSS. In her talk from 2011, Sullivan argues that CSS practices considered the best back then are actually holding us back. With OOCSS, she started a movement that ev

If you write CSS for a living, it is important to understand how to write valid CSS property values correctly. Once you understand how different values can be combined or multiplied, the CSS property value syntax becomes much easier to comprehend. The following syntax can be hard to understand if you don’t know the various symbols and how they work. However, it is worth taking the time to learn. I

There were plenty of talks about building for the web at this year’s Google I/O event. That makes a nice change from previous years when the web barely got a look in and you’d be forgiven for thinking that Google I/O was an event for Android app developers. This year’s event showed just how big Google is, and how it doesn’t have one party line when it comes to the web and native. At the same time

This article is part of a series on our new Design Language System. Karri recently answered questions about this topic in a Designer News “Ask Me Anything” interview. Click here to read the transcript. Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forw

CSS Tooling: we're getting there Preprocessors: use them! Take notes Keep an open mind Relax: code in a thermal bath

React及びその周辺技術、事例から見るReact最新情報！──HTML5とか勉強会イベントレポート 佐川 夫美雄（Ashiras, inc.） 5月31日、イベント＆コミュニティスペース dots.にて「第65回HTML5とか勉強会──React最新情報」が開催されました。React及びその周辺技術、事例からReactの最新情報をキャッチアップします。 React現状確認 ＠koba04氏は「React現状確認」というタイトルで、現在、Reactの取り巻く状況を様々まとめて語りました。 皆さんご存知の通り、React.jsはFacebookが開発しているJavaScriptライブラリです。まず、Reactはどのようなアプリで利用されているかということからお話します。具体的な例として、まず挙げられるのがFacebookです。ここではバリバリに利用されていますし、Instagramでは、アプ

I often use a few CSS alternatives to common JavaScript interactions when I’m developing the front-end of a website (especially a prototype). There are some projects where downloading a plugin or creating a new file for a few lines of code seems like overkill. Here are some components I use created by using only CSS: Tooltips Tooltips are great for showing helpful information that isn’t necessary

ネイティブアプリとアクセシビリティの関係 Web が専門ではありますが、アクセシビリティを通した品質向上を考え始めると、Web だけでは社内のプロダクトの半分あるいはそれ以下程度のカバレッジしかありません。 そこで今回はネイティブアプリ、特に Android のガイドラインについて目を通したメモ。 プラットフォームのガイドライン ネイティブアプリの筆頭たる iOS と Android においては、WCAG 2.0 ほどは詳細化されてこそいないものの、各プラットフォームでガイドラインが提供されています。 Implementing Accessibility | Android Developers Accessibility for Developers - Apple Developer とはいえ、この2つ見比べてみると iOS のドキュメントはそれほど充実していないような印象です。どうも

こんにちは、2016年度にデザイナー職で新卒入社しました@Ln_northです。新卒研修も終わり、現在はOJTのもとで生放送チームにジョインしています。 さて、Googleのロゴが変わっていくらか経ちますが、このロゴはSVGを使うと少ないデータ量で表現できるというニュースが話題になりました。 この記事を見た際に、厳密には視覚調整が入るはずなので、正確に幾何的図形とは一致しないだろうという感想も抱きました。しかし、SVGで文字を生成するということには非常に興味を持ちました。今までにも、文字のアウトラインを使ったアニメーションや表現はありましたが、文字自体を生成するというものは見たことがなく、そしてSVGはJavaScriptで操作することができるため、書体の印象が動的なフォントを作ることができると考えたからです。 どういうことかというと、例えば であるとか、 といったことができるかもしれない

以前、「GoogleAnalyticsで複数ドメインをまとめて計測する」方法を記事にさせていただきましたが、 その後、GoogleAnalyticsはユニバーサルアナリティクスへ、設定はGoogleタグマネージャで、など 管理方法や解析タグも変化してきております。 今回は、そういった変化をふまえて「Googleタグマネージャでのクロスドメイントラッキング」を実装してみたいと思います。 ※トラッキングコードはユニバーサルアナリティクスで設定していきます。 以前の記事は下記よりご参照ください。 »Google Analyticsで複数ドメインをまとめて計測する方法 »GoogleタグマネージャでGoogle AnalyticsやAdWordsのタグを一元管理する 手順1.Googleタグマネージャにクロスドメイン用のタグを作成 ※まずはユニバーサルアナリティクスに移行出来ているかGoogleA

Open SourceGit 2.9 has been releasedThe open source Git project has just released Git 2.9.0, with a variety of features and bug fixes. Here's our look at some of the most interesting new features: Faster… The open source Git project has just released Git 2.9.0, with a variety of features and bug fixes. Here’s our look at some of the most interesting new features: Faster and more flexible submodule