Velocity New York: Ticket Giveaway
A few months back, O'Reilly gave me two free tickets to give away for Velocity Conference in Santa Clara. The chosen two reported back to me that the conference was incredible, as did a Mozilla colleague that quickly came back and implemented a bunch of speed updates for the Mozilla Marketplace. Well, you're all in luck -- O'Reilly has given me four (!) tickets to give away over the weeks leading up to the next Velocity Conference in New York from September 15-17.
You know the deal -- I can't just, you know, give you a ticket for a lame comment. In the interest of teaching something through this giveaway, I'd like you to post a link to an article you've read recently that taught you something brilliant for the front end. CSS, JavaScript, HTML5, WebGL, Canvas, whatever -- share a link to an article that others will learn from.
If you don't want to risk not winning and simply want to save some cash on the conference, click here and use promo code AFF20. Good luck!
As always, remember to provide a real email address in case you're the lucky winner.
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Duplicate the jQuery Homepage Tooltips]()
The jQuery homepage has a pretty suave tooltip-like effect as seen below:
The amount of jQuery required to duplicate this effect is next to nothing; in fact, there's more CSS than there is jQuery code! Let's explore how we can duplicate jQuery's tooltip effect.
The HTML
The overall...
![MooTools-Like Element Creation in jQuery]()
I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax.
Standard jQuery Element Creation
Looks exactly like writing out...
Casually, I readed this article about the myth that responsive web design is the silve bullet for web design. Very interesting.
http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
Hope you like it.
Showing off a tool to measure your frontend performance using grunt and phantomas.
http://4waisenkinder.de/blog/2013/12/22/how-to-measure-frontend-performance-with-phantomas-and-grunt/
I watched this Google I/O video and I was amazed at the declarative nature that services can be used in the future with Custom Elements. So much so that I’m using Polymer in an admin interface right now and will be shipping in an app here in the near future as well. Here is the video, https://www.youtube.com/watch?v=eORqFaf_QzM.
This is a pretty old article, but I needed a parallax effect, but I did not want to load an entire library, so, this helped me
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique–net-27641
This one is great because this is a conversation I keep having with the decision makers at my company.
The Principles of Adaptive Design by Brad Frost.
http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/
A great article on responsive design and prioritizing mobile load time in addition to making sure the page renders correctly.
http://www.smashingmagazine.com/2014/07/22/responsive-web-design-should-not-be-your-only-mobile-strategy/
I’ve been into AngularJS for a while now, I came across an article on year of moo on Angular animations. It’s a little older but a super awesome in-depth look at doing animations specifically with Angular. Kind of blew my mind with the possibilities.
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
And this one that just came out the other day is along the same lines, but more of a one-off guide to nested animations in Angular.
http://thewaterbear.com/nested-animations-in-angularjs-using-ui-router
I read this article from Luke Wroblewski recently explaining some of the downsides of dropdowns and found it to be pretty interesting and informative.
https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
Not exactly front-end but still very interesting http://www.stevesouders.com/blog/2014/06/08/http-archive-new-stuff/
Intro to reactive programming
gist.github.com/staltz/868e7e9bc2a7b8c1f754
I love CSS and the web, but I keep seeing articles about how the web is going to be doomed by native apps. This article gives hope to the web and suggests ways in which the web can compete in terms of functionality with native apps. From the CSS man himself: http://alistapart.com/blog/post/ten-css-one-liners-to-replace-native-apps
The best article you’ll see all day :)
Myth Busting: CSS Animations vs JavaScript
http://css-tricks.com/myth-busting-css-animations-vs-javascript/
https://hacks.mozilla.org/2014/08/using-mozjpeg-to-create-efficient-jpegs/
If Steve likes it, it’s a good article in terms of performance.
https://twitter.com/souders/status/497058800277274624
B
Talking about flux architecture since it is such a hot topic right now.
https://writehub.io/people/simen/pages/public/53916823685e820001000073
How to generate code coverage reports for your AngularJS tests:
http://blog.sergiocruz.me/angularjs-how-to-generate-code-coverage-for-yeoman-scaffolded-apps/
Great article to get started with SVG – http://sarasoueidan.com/blog/svg-coordinate-systems/
The future building blocks of UI in the browser:
http://webcomponents.org