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...
Video web Component I've always been interested in seeing how to build a component from scratch and I've always been interested in working with video so why not work on a web component that plays back video with the HTML video tag and associated technologies. We'll talk briefly about these technologies and then we'll jump into the code using Polymer 1.0. The idea The idea is to create a web component that will look something like this. markup We also need to acommodate older browsers that, most likely, will need a Flash-based plugin fallback or links to the source videos....
variables in CSS yay? I've raved about variables in SASS and have used them extensively to create themes and write less SCSS for the same result. Now that browsers other than Firefox support the feature, has it in development Chrome or is considering implementation Edge it's time to revisit this. Another reason to take a peek at variables again is Polymer. The new styling system makes extensive use of CSS variables throughout Polymer elements. If interested in the details, check the Polymer docshttps://www.polymer-project.org/1.0/docs/devguide/styling.html But not everything is rosy as far as variables are concerned. You may be in trouble if...
> Full Disclosure: I own a Thesis Developer License and used it for several years on my personal blog. I stopped using Thesis when they moved to 2.0 with a paradigm change that I didn't like. I still have the skin I developed and may consider doing development with Thesis again in the future. I also own a license for the Genesis Framework Background A few years ago Chris Pearsonhttp://www.pearsonified.com/ the creator of the Thesis Wordpress Themehttp://diythemes.com/ became embroiled in a very public dispute with Matt Mullenweghttp://ma.tt/ and Automattic.comhttp://automattic.com, the company Mullenweg created to support Wordpress.comhttps://wordpress.comand the open source Wordpress...
Athena: Revisiting a possible digital publishing flow From a technical stand point. Web Components and the Polymer Project in particular provide a way to compose larger applications from base components and to provide flexible and powerful APIs to make our applications look great and feel powerful. What attracted me to Polymer when I first started working with the technology in 2013 was that it's flexible but still enforces discipline and pushes good coding conventions into your project. It also hides details and complexity of doing things correctly I've written before about what an online reading experience may look like in...
There are two ways to use video on the web: - You can upload your content to a hosting server like Youtube or Vimeo and let them worry about compression and delivery - Compress and upload your video files to your server and assume the cost and the consequences We will work on the second idea, hosting our own video and dealing with storage, transmission and accessibility considerations. Creating and using HTML5 video While not essential to video compression, it is important to know how to create the tags HTML5 video uses to put video on the page The Videohttp://diveintohtml5.info/video.html...
