After looking into the code of Foundation framework and the changes they made for the new F5 release, I truly understood the meaning of mobile first. I have dabbled in it for a long time but only after implementing some code myself, I understood how mobile first works. Its pretty cool.
Live blogging from #SassConf My notes on session by Ben
Github has 133 Sass files and uses plain HTML ERB + View Models, Coffeescript
Github’s mobile styleguide https://github.com/styleguide/mobile is available here. It is meant mainly for people who would love to access github (notifications and updates mainly)
No, they are not building a code editor for mobile, because it does not make sense. But an ipad native app might not be ab ad idea
Tips for performance that were implemented by github
Contain CSS animations to prevent entire page redrawing
Amount of markup is proportional to speed
Fewer DOM matches, faster the site loads
CSS Performance enhancer ul#nav is bad, because it matches more DOM elements than #nav alone
Chaining selectors are bad. Replace them with a single class – .octicon.private is slower .octicon-private is faster
Use fuzzy matching selectors is bad for performance
http://josh.github.io/css-explain/ – Rate the performance of your selectors
Don’t use CSS animations for mobile, it makes it slow
If possible, rewrite the whole markup and CSS for mobile specifically, if performance is a big deal for your website/app
You can find the deck here
Its a feature we have always wanted. I remember coming across a post in Google + by Addi Osmani. Comment section had a lot of different tools and bookmarklets which allow you to prettify CSS online. But not via chrome dev tools. This open ticket which has been in the chromium bug tracking system for a while was updated as fixed
I am extremely thrilled about this feature, which feels like it has been long due. My next dream feature is to have the ability to use emmet snippets into Chrome Dev tools!
I use a function to do mathy things.
margin: emCalc(10px) would return the em value for the px I use.
Mixins, to me, generally give out a set of CSS rules.
Functions return values that are used inside of a property.
@extend and @include are a great source of confusion. If you have the same item being repeated multiple times (say 50 or above), using @extend could bloat up the selector list on your CSS. Its great for shortening the output and the browsers understand it better.
Unless you’re debugging Sass, if you’re debugging CSS, you might find it extremely difficult to locate the particular rule declaration.
Because of this same reason, @extend does not work well for grid scss files.
Sometimes it makes more sense to use an @include when you want the output to be together.
Just came across a really cool tool for CSS. It sorts your selectors in a more functional manner
Amazing video on the future of web content by David Sleight, the founder of readability. After viewing this video, I had this burning desire to know how publishers took to readability. Isn’t it cutting into their ad revenue? Apparently, publishers are taking to the concept of readability and would like to move toward a future where content takes even more importance.
The web is still restricted by the traditional print media in a lot of ways.
I mailed the speaker about the ad revenues and he had to say this
“Internet ads have been failing right from the beginning.” Which is kind of true. In spite of all the additional data that we have, we are still thinking in terms of ads in the traditional sense.
I would love to write more on this in another more detailed post. I promise.
Looking to install this
This is my new avatar all over the internet
Had a weird SSL certificate issue in chrome today. Was working on NodeJS and installed a few packages to compile bootstrap. While running the makefile, I think it reset my date format. So instead of May 12th (05-12-2013) my system date got changed as december 5th (12-05-2013). I didn’t realize this as I am used to both notations.
Couldn’t push to git, access github or facebook. Kept getting a SSL certificate error. Usually these screens have a “Proceed anyway” button. This one didn’t have that either.
Googled for the error and found out that it had to be an issue with the system date and time. That’s when I noticed that it had been changed. Once I reset it to the correct date, everything worked fine. Weird stuff.