Uncategorized, zurb-foundation
If you love Sublime Text and you love ZURB Foundation then if you are like me, you are going to really love the Sublime Text Snippets for ZURB Foundation.
I have been using ZURB Foundation for quite some time and I can tell you one of the major time wasters is going back and forth to the docs to copy and paste the more complex structures. Sure, you can memorize exactly how the topbar and accordion work, but I am pretty lazy. I am only memorizing things that I use a lot, meaning at least 40 – 50 times per day.
Thats why I am glad that I came across the ZURB Foundation snippets. They are a huge time saver, because I know what components I want, I just need quick access to that boilerplate. And, whats great is that they all come up in the Command Pallet. I just hit Command+Shift+P and type zurb, then I have a list of all the components that I can add. Huge time saver and I don't even have to memorize the zf-whatever syntax if I don't want to.
I am not sure if these are official or not because they are not in the package manager yet, but I came across them in the official ZURB GitHub. So, if you know how to install Sublime Text plugins manually, jump over to the repo and go crazy. For those that want a short demo with step-by-step instructions on how to get started, check out the screencast above.
So are you a daily ZURB Foundation user? Do you love Sublime Text? Have you used or plan on using these snippets in your workflow? If so I would love to hear from you in the comments.
Uncategorized, zurb-foundation
Learn how to use Sass and Scss with ZURB Foundation 5. In this video I show you how easy it is to get started, how the different Scss files work and how to experiment with changes.
Video description from YouTube:
In this screencast I will show you how to get started with Sass using ZURB Foundation 5. In this video you will learn what the different scss files are and what they are used for. You will learn how to modify your _settings.scss file to radically change the look and feel of ZURB Foundation 5 and I will even cover some of my best practices. I am using the new libsass in this video but you can use compass as well. Let me know if you have any questions in the comments.
So what did you think of this video? Do you use app.scss and _settings.scss in your ZURB Foundation Workflow? Do you have any ideas for future screencasts? If so, I would love to hear from you in the comments.
zurb-foundation
An awesome infographic, a keynote by Luke Wroblewski, AtoZ CSS, a F5 Nav Template and some awesome ideas on how to approach reactive apps on mobile.
Responsive Web Design Statistics
<a href="http://www.nerdgraph.com/responsive-web-design-statistics/" title="Responsive Web Design Statistics" rel="nofollow"><img width="620" height="1105" src="/images/blog/2014/in-form-26/infrographic-responsive-mobile.jpg" class="attachment-endless-feature-image wp-post-image" alt="infrographic-responsive-mobile-design-statistics-2013" /></a>
Echoing some of the things that Luke W is talking about is this fantastic infographic courtesy of nerdgraph.
If you are looking for evidence to convince your stakeholders of the importance of mobile and responsive design, this is a great place to start.
It’s a Write/Read (Mobile) Web
- 39:26(http://vimeo.com/97305189#t=39m26s) He talks about stakeholder buyin on Mobile First Design
- 47:00(http://vimeo.com/97305189#t=45m54s) Super surprise tip, out of nowhere!
Be sure to check out this amazing keynote at the NDC Conference by Luke Wroblewski (@lukew(http://www.twitter.com/lukew)), the author of Mobile First(/blog/mobile-first-by-luke-wroblewski).
He suggests that sites and apps don't work unless people contribute to them which is why writing is more important that reading. He breaks down a bunch of things he has learned about design for this new write first mobile web by failing.
Learn from his mistakes by watching not by doing.
AtoZ CSS
This is a fantastic set of screencasts that goes way beyond just the basics in CSS. It is produced by Guy Routledge (@guyroutledge(http://www.twitter.com/guyroutledge)) who is a front-end developer who has recently found his passion for teaching.
For him, CSS is one of the things that got him hooked into web development. This is a fantastic series and I highly recommend checking it out.
Here is a short list of the topics he plans to cover. As of today, he is on :enabled:
auto box‑model color display :enabled float general sibling :hover ID justify @keyframes line‑height @media :nth‑child opacity Pseudo Elements quotes :required @supports text unicode‑range vertical‑align widows translateX rotateY z‑index
ZURB Foundation Navigation templates for Sketch
Sketch by Bohemian Coders is a fantastic vector program that is built for the web. I pretty much use this for all of my projects. Why use this over Adobe Illustrator?
Two key reasons: 1) it is pixel perfect in an effortless way and 2) it renders and has the same types of effects as css. In fact, it will even render out some of the css for you.
If you already have it or you are sold on using it, check out this free template for creating navigation for your ZURB Foundation 5 mocks.
Design for Realtime
If you have been working with real time reactive sites or apps, maybe using Meteor, Angular, Ember or another single page (state) javascript library this is for you.
Dominic Nguyen (@domyen(http://www.twitter.com/domyen)) from Percolate Studio(http://blog.percolatestudio.com) takes you through a bunch of great animated pattern to consider for reactive mobile apps.
What's really great about this post is he not only describes his reasoning behind such animated states, but gives a side-by-side animation showing the before and after.
So what do you think? Do you agree with Luke Wroblewski's keynote? Do you completely disagree? What about Dominic's reactive mobile patterns? Are they adding something to the experience or are they just slick animations? What about the other resources? I would love to hear what you think in the comments below.
zurb-foundation
I am excited to announce my first Screencast featured on Code School + TV: Sublime Text 3.
It is basically my latest Sublime Text 3 workflow alongside Emmet and how to very quickly work with web frameworks like ZURB Foundation.
If you have a Code School account (subscription required) be sure to check it out. And if you check it out, be sure to leave me a comment. I would love to hear what you think or if you have any questions.
<p class="text-center"><a class="button large secondary" href="https://www.codeschool.com/screencasts/sublime-text-3">Check out the Sublime Text 3 episode at Code School »</a></p>
If you are not familiar with Code School, they are a really fantastic online training resource that I have also used myself. Two things that have always stood out for me about Code School: 1) They have current relevant technologies and projects and 2) they make it fun.
<%= partial(:tweetthis, :locals => :quote => "Check out the Sublime Text 3 screencast on @codeschool by James Stone") %>
Why just watch a screencast on rails when you can watch Rails for Zombies. Sure it can get a little cheasy at times, but hidden in that is a great mnemonic technicque for remembering diffrerent api’s quicker.
I am pretty honored to be joining the ranks of these awesome folks who are also over on CodeTV:
Here are a few of my favorite epidodes if you are trying to figure what to watch next:
I am right now working on two additional screencasts for Code School. I can’t say exactly what they are about, but I am really excited about the topics.
Be sure to stay tuned.
Have you ever used Code School? Are you thinking about joining up? What do you think about the Code School style? Let me know in the comments.
zurb-foundation
On launch performance is critical. But, over time, all sites tend to get bloated, even this one. The question is, what do you do when it happens?
It can be quite difficult sometimes to get buy in on pushing the performance of the site. Sure there are great statistics that show that faster load times increase conversions and SEO rankings but often people don’t want to invest the time into tuning their site or app for performance.
As a developer I am always interested to see what is going on under the hood. When a see a new site I often open up Chrome Dev Tools to see how it was built. Often my next step is to check out the performance using one of my favorite tools, tools.pingdom.com. The reality here is I am often comparing to my own site and seeing how I stack up.
So what happens when your once screaming fast site starts to get slower and slower. Well, in my case, I am hosting with BitBalloon. BitBalloon is an amazingly fast CDN based hosting solution for statically generated sites such as this one. I use Middleman to build my blog in a private GitHub repo and can push my changes up with a simple git push origin master.
With my hosting being top shelf that really only leaves myself to blame. Lets take a look at what was happening historically.
Historical Load Time
!Pingdom Tools Report of Historical Page Load Time(../../images/blog/2014/performance/jamesstone-page-load-time.jpg)
Lower is better. Notice that the site was now taking nearly 3 times as long to load.
Historical Page Size vs. Number of Connections
!Pingdom Tools Report of Historical Page Size vs. Number of Connections(../../images/blog/2014/performance/jamesstone-page-size-requests.jpg)
Lower is better in both cases. You will see there seems to be a direct correlation between the number of connections and the size of the site. The site historically has gotten larger in size and has increased the number of connections.
So after looking at these I had a pretty good idea what was causing a majority of the slowdown on the home page. I had added two widgets: a YouTube embed and a widget from Clarity.fm. In the future I am going to be a lot more cautious about adding such things to my site.
Turns out, the YouTube embed uses a ton of resources and in my use case, not autoplaying, it isn't necessary to do so. So I had the idea to just load the poster image of the YouTube video and then change it out for an iframe embed on the fly via jQuery.
Like many of my ideas, someone else had it before me.
I am a big proponent of not reinventing the wheel so I came across LazyYT by Tyler Pearson(https://github.com/tylerpearson/lazyYT). It is pretty simple to use.
<div class="lazyYT" data-youtube-id="DiF23zFvRIY" data-ratio="16:9" data-parameters="&rel=0">loading…</div>
Since I am using ZURB Foundation and want the video to resize and maintain its aspect ration, I just wrap it with the .flex-video class.
<div class="flex-video widescreen">
<div class="lazyYT" data-youtube-id="DiF23zFvRIY">loading…</div>
</div>
So that took care of about half of my problem on the home page. The next issue to address was the Clarity.fm widget. I started including this after seeing it in the footer of the CopyHackers site. (definitely worth checking out)
With this, I was torn if I wanted to load it at all. First of all, it was really loading a lot of js and css for not much gain. It was just my image, some information and a basic link (with a tracking code of course) back to Clarity.
Taking a closer look, I didn't feel that it worked well with my current design and often didn't look that great when reflowed on to a mobile screen.
So I decided to replace it with just a simple button. I kept tracking link the same, just in case it has some sort of effect on the Clarity statistics.
The Results
So how much of a difference could these two changes make. I pretty dramatic one from my experience. As you can see on the before and after these had a pretty large impact on the site.
I slashed more than half of the connections on the page. This has a huge impact on the load time since you often only get a couple of connections per domain maximum.
The second largest impact was about a 40% reduction in the size of the page. This blew my mind since I am loading quite a few images on the page and I didn't expect such a dramatic result.
So working in conjunction these have reduced the load time to 675ms or just over a half second. I am not quite back to my 500ms benchmark, but this is a huge improvement.
Before
!(../../images/blog/2014/performance/jamesstone-current-overview.jpg)
After
!(../../images/blog/2014/performance/jamesstone-staging-overview.jpg)
That is a pretty dramatic difference.
So have you built an app or a site where the performance has deteriorated slowly over time? What did you do to fix it? Did you see a pretty dramatic improvement? If so, I would love to hear from you in the comments.
zurb-foundation
First off let me start by saying that I am an independent developer and voice on ZURB Foundation and I don’t have any official affiliation with ZURB and I am not compensated in any way to share my experience.
FULL DISCLAIMER: I am a huge fan of ZURB, ZURB Foundation and have been for some time, so there might be a little bit of bias there. 🙂
A lot of people ask me via email and twitter about my experience becoming ZURB Certified and if I found it useful.
I will attempt to answer both of those questions as well as provide a little bit more background for those who are not super familiar with the program.
There are a bunch of advantages that are basically laid out on the Program Webpage(http://foundation.zurb.com/business/certification.html) but I wanted to talk about how it has worked for me and why I find it valuable.
The Benefits
I am an independent developer and designer and my business surrounds consulting and integration of ZURB Foundation across a variety of tech-stacks and CMSes (not sure on the plural of CMS). Being able to put this on my website and communication materials shows a level of excellence that not everyone is able to show. Usually this is done very quickly, as in the bullets on my services page(/services) but it offers a lot of credibility.
First, it is a rigorous certification program. There is an extensive testing process (which I will get into later) that really proves that you know your stuff.
Second, it is an official certification from ZURB not some independent 3rd party. They are the corporate sponsors and the original authors of ZURB Foundation and there is no one more qualified on the planet to make this distinction.
Third, people understand certifications. If you tell someone that your are certified in ZURB Foundation, they understand that you met some sort of requirement of knowledge in order to achieve such a certification.
Fourth, for the people that I work with, everyone knows and loves ZURB. To have an association and to be officially recognized by ZURB has had a positive impact on how people have seen my work.
So, if you are like me and you use ZURB Foundation as a primary driver in your business, you really can’t go wrong.
But what if you are not exactly in my situation, how well would that play out. I think it depends on what you want to do.
First off, there is no other official certification for another responsive front-end framework.
Often when I am polling through the different job listings, I often see at least on front-end framework listed. Even though it may list another framework, I still believe that becoming ZURB Foundation certified is something that will help differentiate you from your peers.
This is because a lot of what you learn in the process for the certification is transferable.
Meaning, the techniques used can be use in other *ahem* frameworks and there are just slightly different nuances and syntax that you need to learn. If I were hiring for one of those other frameworks, I would certainly take notice.
I think regardless of your career path, it will help you to build your credibility in your field, most likely front-end development or web design.
My Preparation
I didn’t take any official classes from ZURB although I have heard good things. I have been involved with ZURB Foundation since ZURB Foundation 3 and been active on sites such as Stack Overflow, The ZURB Foundation Forum and YouTube helping other people learn the framework and helping to solve problems. I am a huge advocate of the framework and of helping other people to learn as part of your own learning process.
So what I did in preparation of the certification was just do the things I was normally doing. This included writing a book, posting videos on YouTube and creating a ton of sites using ZURB Foundation. I can’t say what I did in particular, but I can tell you that I am always picking through the source code, especially of the sass/scss files because I am interested in how it is put together.
So, if you are looking at materials and classes to help you prepare I think you should really push things as far as you can to give yourself the best chance of passing the exam on the first try.
To be honest, I was pretty nervous about passing the exam, even though I often feel pretty confident about my skill level. This included some last minute cramming, reading of documentation and looking at advanced features of ZURB Foundation the few nights leading up to the exam.
Exam Day
So 10am rolled around and I was pretty excited about the exam. I didn’t know exactly what was going to happen or how it was going to work. I was like a hitting-refresh-on-gmail-maniac.
Then I got an email and a link to a google doc. I was given 2 hours and it was a mix of multiple choice, essay and code problems to solve. I am not going to say how much of each or what those questions are, but I will tell you, it was challenging to finish the exam in the time given.
It is open book, meaning you can use the web, foundation docs and your favorite editors
- It is time limited to 2 hours
- It will really test the extent of your ZURB Foundation knowledge. Be sure to study advanced topics well.
- You will need to be able to code a variety of sites on the fly and they are very difficult. Especially given the time crunch.
I felt pretty worn out by the end of it and just like many other difficult timed test I took–I’m looking at you GRE—it is quite the marathon affair.
I did all of my usual tricks:
- I split the time of the questions so I could gauge my time. 2.4 minutes per question. Some were going to take much longer.
- I answered the easy questions first as fast as possible
- I double-checked answers
- I made sure I answered every question
Did it help? Well I passed, so it is hard to say. It is a difficult test and like I said, I am pretty advanced with ZURB Foundation so it was no easy test. I jokingly thought it might be at one point, but I was quickly corrected once I saw some the questions.
Post Exam
So after the exam they chat with you and if there is any clarification needed they get it from you right on the spot.
The next day I was scheduled with a short call with Rafi. What was nice about this is they went through my answers and solutions and where there was room for improvement they let me know. It was super insightful, much like sitting down with the collective conscious of the Core ZURB Dev Team and getting a small code review.
Questions
So if you have any questions about the certification process or how that is working for me personally, let me know in the comments.
UPDATE: If you prefer to watch videos, skip to 10m30s in my Foundation vs. Bootstrap video to hear more about ZURB Foundation Certification.
