All the talk I hear about front end web development has to deal with frameworks, the best way to optimize Javascript and CSS and the best way to minimize the number of HTTP requests. But that’s not the only thing that happens. The early web was text and text only. The the first draft of CSS was released in 1994https://www.w3.org/People/howcome/p/cascade.html and the first Javascript implementation didn’t come around until 1995https://www.w3.org/community/webed/wiki/AShortHistoryofJavaScript with the first beta release of Netscape Navigator 2.0. And it became a technological competition and it hasn’t really ended, just shifted from browsers and what technology they support to...
> Specification and API subject to change. Be aware that the specification is not finalized and it may change in incompatible ways. Do not use responsive images in production yet. If you do you do so at your own risk Once upon a time we were cool by just putting an image or more in our web content. Brownie points if we added a background image… bonus points if the colors in the image did not conflict with the colors of the text or the links :o But now we have to worry about how fast our content loads, whether...
> A grocery store in Melno Park, California sets up a special display to sell jam. At certain times, the display had six flavors to choose from. At other times, the display had 24 choices. Each person who came by the sample booth was given a $1 coupon to purchase. The displays were up for a total of 10 hours. Here are the results: > The display with 24 choices > \ Number of people who stopped by: 145 \ Number of people who bought from the display based on coupon redemption: 4 \ Percentage redemption: 4% > The display...
There are some amazing things we can do with just CSS in modern browsers and some not so modern ones too. I'm documenting some of my favorites for posterity and also because they have an unusually high level of support. CSS3 Selectors New additions to the selector family introduced in CSS3. Includes: foo^="bar", foo$="bar", foo="bar", :root, :nth-child, :nth-last-child, nth-of-type, nth-last-of-type, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, :target, :enabled, :disabled, :checked, :not, general sibling :root The :root pseudo-class represents an element that is the root of the document. In HTML 4, this is always the HTML element. This is also useful...
> This is an update of sorts for Flexboxes and the holy grailhttps://publishing-project.rivendellweb.net/flex-boxes-and-the-holy-grail/ with better code and better explanations > Note: All code examples in this section use autoprefixerhttps://css-tricks.com/autoprefixer/ to avoid writing vendor prefixes by hand and future proofing the code. Codepen allows you to automatically use autoprefixer in all your pens. I was surprised that Flexboxhttp://www.w3.org/TR/css3-flexbox/ is only at the candidate recommendation level as it's been around for a while. It is supported across all modern desktop and mobile browsers according to caniuse.comhttp://caniuse.com/search=flex and even older broser support means we need to use different prefixes and, ocassionally, a different...
New in the CSS horizon: Native CSS Grids Grids like 960.gshttp://960.gs/, the Grids in Bootstrap 3https://getbootstrap.com/examples/grid/ and Foundationhttp://foundation.zurb.com/ or solutions like SUSYhttp://susy.oddbird.net/ rely on floated elements I make the distinction between Bootstrap 3 and 4 because in 4 you can switch your layout to Flexbox. They work but they need exact CSS and measurements for the floats to work as intended the fact that frameworks hide the complexities of existing grid systems doesn't mean they are not there. The CSS Grid Level 1 specificationhttp://www.w3.org/TR/css-grid-1/ is fundamentally different. When implemented grids will be baked into the browser's CSS parser and will...
I've been looking at some CSS layout modules and aspects of the level 3 Fonts CSS Module and I have to admit that I'm happy, very happy. There are three areas where I'm going to concentrate this time around. - CSS Flexbox - CSS Grids - New functionality and their support level - Enhancement to font handling and new font features I'm hoping to write more of these articles on a regular basis to keep up to speed in developments around CSS and web technologies. I'm partocularly interested in Flexbox because it is used by Polymer as the primary way...
Unless I write an email in Gmail I do all my writing using Markdownhttps://daringfireball.net/projects/markdown/ a quick text-based writing system. I love Markdwon but have always been upset at the limitations placed in the original Markdown, the fact that there is no actual specification for Markdown and that Markdown's creator has been a douche when it comes to supporting the community effort of rectifying some of the shortcomings of the original Markdown tool leading to the CommonMarkhttp://commonmark.org/ effort. I currently use Ulysses for MacOS/iOS as my primary writing tool and then copy and paste to a Markdown enabled instance of Wordpress...
Although Chrome Dev Tools gives us an approximation of what a connection would be like in a given device it's not 100% accurate, it can't be since our Macbooks and Windows devices don't have to deal with the additional constraints that a mobile device has. Why should we test in an actual device? All cores in a laptop or desktop systems are symmetric as opposed to mobile devices where some of the cores are powerful and some of the cores the ones that happen to do all of the work are less powerful, use less power and generate less heat....
This is a moon idea in the spirit of Google's moon projects for a connected downtown. It uses Mountain View as an example not because it's Google's headquarters but because it's my home town and I'm most familiar with how it works. A typical day I've decided to drive today... it doesn't happen very often and I'm starting to miss the monster. The console at home is telling that the day is going to be nice, in the upper 70s and that I should prepare for a cooler night. The forecast says it'll be 50 by 10pm tonight. The car...
