reMIX South, Web Design
August 6th, 2011 by Matt Haff
Speaker: John Agan
Sorry for all the bullet points, but at least it’s straight forward 
Negative Effects
- Sites end up with multiple scripts everywhere and no framework to keep it in sync
- Code becomes hard to follow and maintain
- jQuery becomes overused in place of well formed HTML and CSS
Best Practices
- Break up big functions
- Don’t nest multiple functions
- code is cleaner
- easier to follow and maintain
- allows for reuse of code / DRY (do not repeat yourself)
- debugging is made easier
- Stop writing HTML blocks in JavaScript strings
- It’s hard to work with
- multiple nested elements will make it worse
- unnecessary string concatenation
- Caching Your Selectors
- be aware of the performance hit when overusing selectors
- assign selectors to variables rather than reselecting – var selector = $(“element”)
- start with the known parent elements and use them as the context - $(selector, context)
- every time you write a selector, it will requery it
- Writing Better Performing Selectors $(selector, context)
- ID & Element Selectors are the fastest – $(“#ID, Element, form input”)
- Class Selectors are slower – $(“.ClassName”) doesn’t work in ie5- ie8
- Pseudo & Attribute Selectors are the slowest – $(“:visible, “checked, [attribute=value]“)
- Write Better HTML and CSS
- jQuery should provide the functionality, not the styling and layout.
- Use CSS classes for style, rather than jQuery helpers like .hide(), .css() and .hover()
- Think about your selectors when writing the mark-up
- Of course, there are always exceptions
Key Techniques
- Take Advantage of Data Attributes $(“element”).data()
- data-[anything] = “value”
- “class” is for style, not data
- jQuery 1.2.3+ supports .data()
- Compliant in HTML5 spec
- Valid on any element
- $.data(“#id”, “key”, “value”) is much faster
- Embrase Unobtrusive Javascript (UJS)
- don’t mix it in with your HTML elements ex. <input type=”button” onClick=”…” />
- Separation of functionality (the “behavior layer”) from a Web page’s structure/content and presentation
- Code maintenance and deployment is simplified
- Debugging can be easier
- Optimizing Event Delegation
- An efficient way to watch for an event of a large number of elements
- Works by binding to a point father up the DOM tree and watching for bubbling events
- Not all binding methods are equal in performance.
- .bind() – Listens for events on existing elements
- .live () – Listens for events on existing and future elements, but watches at the top of DOM tree
- .delegate() – Listens for events on existing and future elements, but won’t listen past context
- Utilize Custom Events
- Update multiple components asynchronously
- Enables your code to be event driven
- Allows for easy extensibility
- Stop Editing the DOM Directly
- Multiple .append() can become very slow
- Use .detach() to manipulate elements offline and then .append() when done
- Use createDocumentFragment() to build your HTML before pushing to the DOM
- Know Your Scope
- Avoid global variables
- Maintain scope with $.proxy()
- Use auto-executing anonymous functions when possible
- Use The Native API When Possible
- Sometimes it’s faster to just use JavaScript
- jQuery does it’s best, but it is still another layer and slightly more overhead
- Wrapping an element for just an attribute can be expensive.
- Think About The Big Picture
- Don’t code for just one element
- Use a framework to manage interactions and data
- Breakup JavaScript into multiple files
- Minify when deploying to production
Web Design
April 11th, 2011 by Matt Haff
We’ve made the switch to virtual servers, and here’s why. When we first started off hosting and designing websites we were using shared hosting with a few of our bigger clients and sites. We have a good working relationship with our host, Frozen Web Host, so we weren’t worried about being packed onto an overstuffed server.
When we began to put out about 10-20 websites a week we made the switch to GoDaddy for some of our shared hosting needs to keep costs to a minimum for our clients. This was one of our biggest mistakes, as after the switch, on several sites, we began noticing extremely poor performance. A number of our websites would be slow to load, or sometimes they wouldn’t load at all and would time out. GoDaddy wasn’t living up to its promises, so we fired them and found a better solution.
We knew that we needed to make a change but with the price we’re able to provide websites for to our clients, we couldn’t afford to pay thousands and thousands of dollars a year for a dedicated server. We started researching the idea of hosting in a cloud with virtual servers. Virtualization eliminates the restrictions of shared web hosting, and the expense and upkeep of dedicated servers. We recommend Linode for your virtual hosting needs.
Virtualization is better than shared web hosting
Shared web hosts, such as GoDaddy, are notorious for overselling their servers — packing as many sites as they can onto their machines. Shared hosting is restrictive – you’re at the mercy of the provider. With virtualization you have total control over your account to install custom software and run the versions of services you need.
Virtualization is better than dedicated servers
Dedicated servers are expensive to rent or purchase and maintain, and often you’re the one worrying about failed equipment. With virtualization, you share in the cost of the hardware with others.
With this hosting set up, heystac can focus on website optimization and development and not worry about hosting providers failing to carry through with their promises.
Web Design
April 7th, 2011 by Matt Haff
While working on a website project for a client at heystac it was decided that we wanted to have some kind of background slider. The slider would load a background image that would automatically stretch to fill the entire screen while staying proportionate. It would cycle through multiple images and would have a swipe effect.
After a lot of work with JQuery and some CSS we were able to put together something like this:
To see it in action go to heystac. After getting this to work successfully we thought it would be great to use on other projects, so we have made it available for use.
JQuery Background Slider
Web Design
March 1st, 2011 by Matt Haff
A couple years back I got to attend a session with Jina Bolton and jotted down some notes about how to create beautiful stylesheets. Ever since then I have used these tips & tricks for creating beautiful css markup. I want to share these with you.
- Write it clean, keep it clean
- Clarity is beautiful…use meaningful classes and ids
- Comments are your friend
- Company name, Author, version, date stamp, color codes
- Stylesheet Sections
- Notes of cross referencing
- Keep your sections together!
- Be organized
- breakup css into typography, reset, structure
- Readability vs. optimization
- Don’t do single line if there is more than one style
- Modules
- selectors
- nth-child
- change formatting of first paragraph
- backgrounds & borders
- multiple background images
- layer background images
- border images
- multi-column layout
- auto columns evenly divided
- grid positioning
- invisible rules of columns & rows
- change the floats
