サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
nicolasgallagher.com
Twitter Lite uses Redux for state management and relies on code-splitting. However, Redux’s default API is not designed for applications that are incrementally-loaded during a user session. This post describes how I added support for incrementally loading the Redux modules in Twitter Lite. It’s relatively straight-forward and proven in production over several years. Redux modulesRedux modules comp
I’m working on a project at Twitter that uses React and webpack. After a few conversations with @sokra last year, this is the setup I put in place for testing React components (authored using JSX and ES6) using Karma. DependenciesYou’ll need to install various packages. It looks like a lot of dependencies, but all the non-Karma packages will be necessary for general module bundling during developm
Did you know that you can build your own CSS preprocessor with Node.js libraries? They can be used alongside established preprocessors like Sass, and are useful for defining tasks beyond preprocessing. Libraries like Rework and PostCSS let you create and assemble an arbitrary collection of plugins that can inspect or manipulate CSS. At the time of writing, Twitter uses Rework to perform various ta
This is how I am deploying the build of my static website to staging and production domains. It requires basic use of the CLI, Git, and SSH. But once you’re set up, a single command will build and deploy. TL;DR: Push the static build to a remote, bare repository that has a detached working directory (on the same server). A post-receive hook checks out the files in the public directory. Prerequisit
I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation. Demo: Flexible CSS cover imagesKnown support: Chrome, Firefox, Safari, Opera, IE 9+ FeaturesThe way that the cover image scales, and changes aspect ratio
By Nicolas Gallagher Multiple Borders demo for Multiple Backgrounds and Borders with CSS 2.1. You'll have to view the CSS file because Firebug won't show pseudo-elements. Fit for purpose: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, Internet Explorer 8+.
By Nicolas Gallagher Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mau
Only one element to reproduce Silverback's parallax effect with more gorillas. <div id="silverback">[content]</div> Main: First in source Fluid faux columns without images. Source independent. The use of rgba background is only to show the area of each box. No problem putting links in the content. The markup for this section looks like this: <div id="faux"> <div class="main">[content]</div> <div c
A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. About semanticsSemantics is the study of the relationships between signs and symbols and what they represent. In linguistics, this is primarily the stud
A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques. [15 December 2012] This technique is no longer used in HTML5 Boilerplate. It’s been replaced by another, more reliable approach. Here’s the CSS behind the recent update to the image replacement helper class in HTML5
Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. Normalize.css project siteNormalize.css source on GitHubAt the time of writing, normalize.css is used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks,
Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help. As of Sass 3.2, there is another way of catering for IE, described by Jake Archibald. One aspect of a “mobile first” approach to development is that your styles are usually gradually built up from a simple b
The git-checkout command can be used to update specific files or directories in your working tree with those from another branch, without merging in the whole branch. This can be useful when working with several feature branches or using GitHub Pages to generate a static project site. The git-checkout manual page describes how the git checkout command is not just useful for switching between branc
CSS is a versatile style language that is most frequently used to control the look and formatting of an HTML document based on information in the document tree. But there are some common publishing effects – such as formatting the first line of a paragraph – that would not be possible if you were only able to style elements based on this information. Fortunately, CSS has pseudo-elements and pseudo
I (infrequently) write about software engineering and other things. We shall not cease from exploration And the end of all our exploring Will be to arrive where we started And know the place for the first time. T.S. Eliot – “Little Gidding”
Future CSS implementations should allow for some form of responsive images via CSS alone. This is an early idea for how that might be done. However, a significant drawback is that it would not prevent both “mobile optimised” and larger size images from being requested at larger screen resolutions. Note that the CSS presented here is not supported in any browsers at the time of writing. This method
The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfi
Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers. Demos: Example CSS background image hacks Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentat
This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript. Demo: Pure CSS social media icons Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. CSS social media iconsThe image below shows you the final appearance in modern browsers.
Using CSS pseudo-elements, box-shadows, and transforms to create drop-shadow effects without images from semantic HTML
Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya
Create a simple CSS folded-corner effect without images or extra markup. It works well in all modern browsers and is best suited to designs with simple colour backgrounds. Demo: Pure CSS folded-corner effect Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+ This post is going to expand on the technique used to create the folded-corner effect that is part of the demo page for Mult
An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraintSeveral months ago I was experimenting with the creation o
By Nicolas Gallagher Demo for Pure CSS GUI icons (experimental). Tested in: Firefox 3.5+, Chrome 5, and Opera 10.6.
An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off, with semi-transparent images, doesn’t hide text from screen-readers or search engines, and provides fallback for IE 6 and IE 7. Known support: Firefox 1.5+, Safari 3+, Chrome 3+, Opera 9+, IE 8+ What’s wrong with current methods?The two most widely used image replacemen
Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for e
By Nicolas Gallagher Demo page for Experimental: pure CSS social media icons. For a detailed explanation view the CSS file. All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.
Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Demo: Multiple Backgrounds with CSS 2.1Demo: Multiple Borders with CSS 2.1Support: Firefox
次のページ
このページを最初にブックマークしてみませんか?
『The ephemera of Nicolas Gallagher』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く