Showing posts with label misc. Show all posts
Showing posts with label misc. Show all posts

Tuesday, October 27, 2015

Chrome Devtools Tips & Tricks

Chrome Devtools Tips & Tricks

Lately I've spent more time than usual using the Chrome Developer Tools. Along the way I found a couple of nice features that I had previously missed (or at least hadn't needed enough to look for; e.g. blackboxing and asynchronous stacktraces). Because of this, I wanted to summarized a few of the features that I really like about devtools.

1) The little magnifier glass icon that shows you which CSS class/selector in what CSS file that ultimately decides the styling for a specific element and CSS property. For example, select "inspect" on any DOM element and then switch to the "Computed" sub-tab to the right. Find the CSS property you're interested in and clicking the magnifier icon takes you straight to the correct CSS class/selector in the right .css file (very useful when you start out working on a new large web app):

Chrome Devtools Tips & Tricks

2) To see what XHRs the web app sends while you're using it, check the "Log XMLHttpRequests" checkbox under "Settings" and keep an eye on the console tab. Before I knew about this, I would set up my browser to go through an HTTP intercept proxy like Burp suite but this more convenient if you just want an quick overview. Of course, with an intercept proxy you also get the opportunity to modify the XHRs before they reach the server, which is really nice for security testing. A lightweight alternative to that is to look under "Sources :: XHR Breakpoints" and activate the "Any XHR" breakpoint.

Chrome Devtools Tips & Tricks

3) Now, suppose that the web app you're working on is making some XHR at a regular interval (for example, keeping the current view up to date) and you would like to know where this timer is setup (i.e. where the call to setTimeout() or possibly setInterval() is made). To figure this out, you switch to the "Sources" tab, and check the "Async" checkbox. This will make all your stacktraces continue beyond setTimeout() and friends, even multiple levels deep. It does the same thing for requestAnimationFrame() and addEventListener() and a few others too. You'll find the checkbox here:

Chrome Devtools Tips & Tricks

4) To quickly find the code that runs when you click a particular button or link is clicked, activate an "Event listener breakpoint" for Mouse :: Click just before you click the particular button (another killer feature when starting out work on an existing large web app):

Chrome Devtools Tips & Tricks

5) When you use "Event listener breakpoint :: Mouse :: Click" you might end up in a third-party library like jQuery at first, and so you'd have to step a few times in the debugger to arrive at the "real" event handler. A great way to avoid this is to "blackbox" the third-party script. The debugger will never stop inside a blackboxed script, instead it continues to run until it reaches a line that isn't in a blackboxed file. You can blackbox a script by right clicking the filename of the third-party library in the callstack and the selecting "Blackbox Script" from the context menu:

Chrome Devtools Tips & Tricks

6) You can jump to a specific file, by name, using ctrl-p (just like in atom):

Chrome Devtools Tips & Tricks

7) You can jump to a function, by name (but only in the currently open file), using ctrl-shift-p:

Chrome Devtools Tips & Tricks

8) You can search through all files using ctrl-shift-f:

Chrome Devtools Tips & Tricks

9) You can edit using multiple simultaneous cursors by selecting some word and then pressing ctrl-d a few times to select more instances of that word (again, just like in atom). Very nice for renaming variables:

Chrome Devtools Tips & Tricks

10) When working on a website stored locally it's possible to edit files in devtools and save the changes directly to disk. To do this, switch to the Sources tab, right click on the Sources sub-tab and select "Add Folder to Workspace" and then finally select the local folder where your project is located. After that, right click the local copy of some file in your site and select "Map to Network Resource..." and then select the corresponding "network" file:

Chrome Devtools Tips & Tricks

Other handy tips include:

  • $0 in console is the element you selected in the elements view.
  • You can evaluate XPath expressions using $x("//p") (very useful if you're writing selenium testcases and CSS selectors doesn't get you all the way).

I also recommend that you install two Chrome extensions:

  • JSONView will indent and syntax highlight JSON blobs for you (and even allow you to expand/collapse blocks). It also makes URLs inside JSON clickable which often makes it possible to explore a JSON-based API via the browser. For example, try navigating to http://omahaproxy.appspot.com/all.json before and after you install it (better formatting) and also https://api.github.com/ (clickable URLs make it easier to explore the API).
  • JS Error Notifier (non-"spyware" version) creates a popup each time a Javascript error is printed to the console. Unfortunately, the main version of this extension submits private “usage data” to a third-party service (see discussion in issue #28). But at any rate, this extension has helped me notice and fix several bugs.

All in all I really like devtools, the only annoying thing that I can think of is that you cannot customize keybindings:


Thursday, October 22, 2015

The Art of Debugging

The Art of Debugging

Before we start though...

How to skip to the end...
Don't.

Write.

Bugs.

Wednesday, March 18, 2015

Important factors of on-page optimization and SEO checklist

optimization and SEO

Content

  • Content should be original and unique
  • Content will reached with reference
  • You have a clear content strategy
  • You have to write the content with related keywords in it's body

Friday, February 27, 2015

How to Make Your WordPress Site Blazing Fast

WordPress Site

Today's web users have the need for speed. With internet and cellular connections getting faster and faster, users expect sites to feel snappy. As developers, we must make sure we're doing our best to serve those pages quickly. This article will focus on what you should be doing to make sure your WordPress sites are as fast as possible.

Make your Wordpress site blazing fast

There are essentially two main categories that performance can be broken down into: front-end and back-end. Back-end is anything related to the server and how data is populated on a page (PHP code in your theme is the "back-end"). The front-end consists of all your assets (CSS, JavaScript, images, etc.) and markup. Everything a web browser reads and interprets is the "front-end". This distinction is important because it's good to know what you're optimizing and, even more importantly, where you need to optimize the most.

To actually test site speed, use a combination of WebPagetest and Google PageSpeed Insights. WebPagetest gives you a good idea of the actual time (in seconds) that a site takes to load, explaining where bottlenecks may be. PageSpeed Insights is best for looking at how your front-end is site is rendered by the browser.

Front-end performance

The golden rule of performance, according to Fastly's Steve Souders is that 80-90% of a page's total load time consists of the front-end. The back-end's 10-20% is crucially important, but even if you're using the fastest host around, your site still won't live up to its full potential without optimizing the front-end and users perceive it to load quickly. Perception is an important part of front-end optimization. A user doesn't care how many seconds a site takes to load. A user cares about how quickly they can interact with a site without a delay. Not that you shouldn't be worried about the actual load time (you should), but by following these techniques, you can make sure that your site is in a usable state fast, before loading the rest of the page assets.

WordPress Site

CSS

Before delivering CSS to the browser, it’s important to compress it and remove unused selectors.

Once your stylesheet is ready to go, the easiest (and standard) way to load it is to reference it in the head. The browser will load and parse it before the rest of the DOM is loaded. However, there's a new technique where "critical" styles are inlined in the head and then the full stylesheet is loaded asynchronously using JavaScript. This technique can be used when trying to get a site to load (or perceive to load) in under a second, but it's a great tool to keep in your arsenal. Check out this great extensive article on using this technique.

WordPress Site

JavaScript

The golden rule(s) of optimizing JavaScript are simple: serve as few JavaScript files as possible and minify and concatenate. Third-party WordPress plugins can bloat your document with unminified blocking JavaScript files, so it's important to be mindful when choosing plugins. Ideally, you'd concatenate ALL JavaScript files into one and then minify it. When that's not possible, HTML attributes called async and defer can be used to load JavaScript files asynchronously or once the rest of the page is loaded.

The most common place to reference JavaScript is at the bottom, right before the closing tag. However, there are more advanced techniques to load JavaScript. The Filament Group has several tools you can use for this. The best approach is to load scripts dynamically by inlining a small function in the head that appends script tags without blocking the rest of the page. For more information, check out the loadJS script.

Images

Images are often the biggest files on a page, responsible for the largest load time delay. The good thing about images is that, unlike CSS and JavaScript, most browsers load them asynchronously. That helps with the perceived performance of a page. But it's still important that A) you're serving as few images as possible and B) those images are compressed as much as possible.

Compression tools are necessary for squeezing out as much excess as possible on images. ImageOptim is a great free Mac compression app, along with OptiPNG and jpegtran for use with task runners like Grunt.

WordPress Site

Fonts

Web fonts are super common these days. Google Web Fonts make sites pop. It's easy to not realize the performance hit you take by just referencing them in the head. The performance hit is small, but every little bit counts! For best performance using web fonts, check out the the Web Font Loader, co-developed by Google and Typekit. It's an open source script that both manages the loading of your fonts from third parties like Google Web Fonts and allows them to load asynchronously (getting tired of that word yet?).

As to be expected, there's some configuration needed to get Web Font Loader integrated into your project, so check out the project on GitHub for setup info.

WordPress Site

Back-end performance

The front-end has all kinds of tricks for speed, but we're not so fortunate on the back-end. A server is either fast or it's not. It's critical that your site gets to the browser as quickly as possible, which can be accomplished by getting on a quality host. Managed hosts like Flywheel are the most realistic way to see true performance gains for WordPress sites.

Dedicated Wordpress Hosts

There are are a host of managed WordPress hosts (pun intended). What managed hosts typically provide is a dedicated VPS (virtual private server), a caching layer and other infrastructural bonuses that set them apart from your typical shared hosting. These all matter when it comes to loading your site fast, so the best and first step to a super fast WordPress site should be the host.

For example, let's take a look at Flywheel. Flywheel is a managed host, and their infrastructure is designed so your sites never touch another customer's. Compared to a host that crams as many sites as possible on the same server, having your site on a server by itself works magic for speed. It means that server's resources are just working for you, not for everyone else.

WordPress Site

Theme Logic

There are many things you can do while developing to make your back-end as performant as possible. Nasty loops that do tons of comparisons and use lots of memory slow down a site down. There are lots of articles on performant PHP, but just take care when writing theme logic!

Another important time saver during database queries is the Transients API. WordPress transients store cached data in the database temporarily, which means your logic only has to run once (whenever the first visitor loads the page). The results are then stored in the database. The Codex has good documentation on the usage of transients.

Caching

Caching assets is one of the best ways to improve performance. Once a user loads your site the first time, you can take advantage of browser capabilities to cache the contents of that site locally, so on the next visit the user already has them loaded. The most common WordPress caching tool is W3 Total Cache plugin. This plugin (or one similar) is needed on most shared hosts. However, WordPress specific hosts like Flywheel handle caching for you behind the scenes. With hosts like Flywheel, all of the caching is done on the server outside of WordPress, which means your sites are already tuned for max performance.

WordPress Site

GZIP

Gzip is a file format that's used to compress other files together, similar to just zipping files. Gzipping allows files to be sent over the web at a compressed size. Once a browser receives gzipped data, it unzips it to get the source data. Gzipping is super important for speed, as it sends your data over the wire in much smaller packages (50 - 70% smaller, in fact). Smaller file size equals faster load times!

You should always check to see if your host supports Gzipping. Managed WordPress hosts like Flywheel enable Gzip compression by default, so it's one less to to worry about!

WordPress Site

CDN

A content delivery network (or CDN) is a network of servers that serves up your website and its assets from different locations based on the user's location. For example, let's say you're not using a CDN and your site is hosted in San Francisco. When someone from, say, Spain visits your site, they have to retrieve all your assets from your server in San Francisco. The long distance between the two locations clearly takes longer than if someone from San Francisco loads your site that's hosted in San Francisco. A CDN serves your assets from the closest geographical data center. Users will hit the server closest to them, speeding up the physical time and distance required to load the page.

Some of the most popular CDNs include Amazon Web Services, CloudFlare and MaxCDN. If you want a super easy setup, check out Flywheel's MaxCDN add-on.

WordPress Site

Conclusion

Tuning a web site to maximum capacity can be challenging. There are a lot of moving parts. By working through both the front end and the back end, a site can be designed or overhauled for maximum speed. On the front end, saving as much time and space as possible means the con-tent you’re serving gets to the content faster. But if even if your front end is brilliantly designed, none of that will matter the servers you host the site on aren’t running at their peak performance. Managed WordPress hosts tune sites to peak performance and take out the frustrations behind web hosting. Hosts like Flywheel will not only make your site fly, but make your hosting experience worry-free.


Tuesday, February 17, 2015

The When, Why and How of Designing in Browser

Designing in Browser

If you're a designer in the tech industry, you've probably been exposed to or read articles about a hot topic in design today: designing in browser. The concept is as simple as it sounds. Rather than spending hours, days, weeks and months designing those pixel-perfect comps in Photoshop, a mainstay in a waterfall-oriented development process, designing in browser allows you to take whatever sketches and preliminary work you've conducted and enables you to jump right into the text editor and emerge with shippable code.

But how do you design in browser effectively?
How do you know when the project calls for it?

Let me walk you through when, why and how you might decide to design in browser vs. doing it a more traditional way. Which, for the sake of this article, will be designing in Photoshop.

To start, my version of "designing in browser" is less "designing" and more "hacking in browser to get what you want". To me, design is solving a problem for your users. The "in browser" is just another tool in your arsenal, the fastest way to ship clean code that has a considered design via a series of collaborative meetings and sketching.

When do you design in browser?

There are many articles in the tech community that sing the praises of designing in browser — it's future of web design, we should Kill Photoshop — to name a couple. I agree that while designing in browser can be your go-to when kicking off a design project, there will be times when factors — client needs, nature of deliverable, time constraints, for instance — don't allow you to work that way. Here are some potential scenarios where you wouldn't:

The client's needs aren't suited for designing in browser. You may tell yourself, "well, just don't work with them!". But we all know this can't always be the case. Maybe the client's priority at the time is to present a highly polished website to stand out from their competitors or to get more capital from their investors. Perhaps their feature backlog is ever-changing, or they have many fundamental issues with their vision. In this case, traditional wireframing, then comping, may be the most efficient way to prototype their needs for their users.

Many clients see visuals as results. Sometimes it's more effective to deliver 10–20 high fidelity comps in one week as opposed to 1–5 working, but uninspiring, pages.

The system and layouts of the website in question are too complex to visualize and code at the same time. We're human. Most of us have limited brain capacity to think in two spheres. Whereas some may tell you that coding and designing go hand in hand, it's really tough for me to envision a complex layout with many moving parts while writing divs for it at the same time. Studies show that we suck at multitasking, and designing in browser often feels that way. Granted, time and experience will definitely make you better at visualizing faster and writing cleaner code. So keep at it.

This sometimes happens. Like, whaaaaaa?


You're in the "refinement" stage of design. Let's say you're past the point of MVP with your project. You have a working website with a decent layout, and you're ready to add more features. If your users have expressed pain points over certain design decisions you made in browser, like maybe that call to action wasn't clear enough, or they don't know what to read first on the page, it could be an opportunity to jump back into Photoshop and revisit those pain points in a thoughtful, refined way.

To me, the biggest challenge of designing in browser can be summed up by Andy Budd:

As the best design tools are the ones that put the smallest barrier between the creator and their creation (the pencil is a good example of this) designing in the browser adds an unnecessary level of cruft to the process.

Andy Budd

To add onto that: You actually enjoy the process and craft of pushing those pixels around on the artboard. Many web designers come from formal graphic design backgrounds. Taking it slow and scrutinizing over every detail is in our blood.

The reasons why we design in browser vary greatly, and the approach we take highly depends on the task that is called upon us. That being said, when the situation does call for designing in browser, here's my take on it.

How do you begin designing in browser?

There are so many ways to begin a project. Let's say for this article, I use the way philosophie typically begins a project with the product owner(s) of a newly incorporated, newly funded startup: a kickoff. Many thought leaders in design, Dan Mall for one, detail ways to facilitate a successful kickoff, so I won't go into the details here.

During our kickoff, let's say we've determined a set of users and their pain points for our product, a brand statement defining the what, why and how, a hypothesis statement that we intend to solve with our first sprint, perhaps even rudimentary wireframes or a feature list. At this point, we've gained a vague understanding of who we're designing for and what the client wants to convey to them.

I like to start off with moodboards. They help to paint the picture of the brand expression without wasting too much of my time and effort. For this, I tend to trawl Pinterest, Dribbble, whatever designer fodder I can find to curate visual options for the client.

Designing in Browser
Even if the visuals change over time, moodboards are easy to create and can act as a quick win to get the client in your favor.

From here, I pick a framework, the skeleton for which to quickly markup the layout and paste in the UI. For marketing or consumer-facing sites, I tend to prefer Foundation because the options are presented to you in the code. They're more rudimentary, in my opinion, and easier to override than Bootstrap. Bootstrap is a robust framework ideal for admin-facing applications. There's less work out of the gate with Bootstrap, but more options to painstakingly overwrite in the CSS.

Next, the style guide. Beginning with a style guide, or a series of "style tiles" is pretty important to keep your design elements organized and succinct within a design system. I won't go into the importance of style guides because the reasons have been well-explained by others, but I will say that a style guide is the easiest way to make sweeping design changes as they come down the pipeline. And that's one of the biggest reasons we design in browser in the first place. I'm accustomed to building style guide UI elements manually on an as-needed basis, but you can use KSS methodology, or even a gem like Hologram to help you automate the generation.

Designing in Browser

Finally, the composition. Something I try to keep in mind: don't lose sight of your design principles. Eye movement, hierarchy, contrast — it's easy to get lost in code. When I used to exclusively design in Photoshop, it enabled me to think more conceptually and granularly about the design: I could experiment more with new ways to call to action, a new layout, a compelling animation. Designing in browser fundamentally prevents you from thinking outside the box in that regard. The easiest way for me to do it is to go from lowest fidelity to highest. That means, plain text, then html markup, then add framework layout, then add selectors, then style selectors in CSS.

Designing in Browser
Plain text, then html markup, then add framework layout (Foundation in this case), then add selectors, then style selectors in CSS.

Using browser tools

So you've gone and created the first iteration of your site in browser, and it's time to review with the client. This is where the magic happens. Rather than the typical unending back-and-forth design loop, you can potentially take care of most to all design feedback in one meeting. Here's how I use the inspector in Chrome:

Designing in Browser

We decide to add a new content column in a section on the page. Open inspector, "edit HTML", copy and paste column. Boom, new column. Screenshot the change.

Designing in Browser

We need to increase the size of a radio button, tucked inside a form. Click magnifying glass, right click the button. The magnifying glass hones in on an element nested inside a parent. Make the changes in the styles. Screenshot.

Designing in Browser

We need to change the color of something, make something bigger, anything related to style. Edit styles, screenshot screenshot screenshot.

Designing in Browser

Note that I prefer taking screenshots over using Chrome tools to save the code. This is because using the inspector is not the way to generate the most beautiful, semantic code; it's just a cheat to experiment with a design decision or get approval from a client. Using screenshots, however, lets you preserve the change and figure out the best way to integrate that with your code base later.

Working in teams

Disclaimer: philosophie uses Pivotal Tracker as the project management tool of choice, and usually Ruby on Rails as our go-to stack.

Rather than a typical waterfall-oriented design process I described in the beginning of this story, designing in browser allows you to work in sprints with the rest of your team. The first sprint may consist of chiefly foundation or bootstrap styles. This is merely the MVP design. From there, the second sprint can slowly work on the branding, revisit typefaces, improving hierarchy, and other improvements you and your team have decided. You can even enter the refinement period here and use Photoshop, which I mentioned earlier.

As for how we integrate design stories into Pivotal Tracker, I've found that it's been effective to create user stories for front-end tasks, separate from back-end stories. This way, you can let design run ahead of development, or let the engineer create models and controllers first, leaving you to style the view. It's interchangeable.

For instance: while you as the front-end dev can create and style the static pages such as the homepage, a contact form, or text page, the back-end dev generates inputs and views for the login. Then, the front-ender can jump on the login pages and style them.

Designing in Browser
The same user story, but the view layer (front-end) is tagged and separated from the other part of the story

How has this worked in the "real world"?

On a recent client project, we determined that designing in browser was the best way to keep within budget but still deliver a fresh, clean look. I quickly mocked up layouts and pages in using Bootstrap as my framework and Sublime Text as my text editor, making low-hanging-fruit improvements where relevant. I also worked in tandem with developers as I mentioned in the previous section, taking on front-end stories and bugs while they worked on the back-end.

Midway through the process, the client wanted to explore new home page directions. Not wanting to limit myself on design, I decided that Photoshop was the best way to execute several well-composed iterations of the home page. It was relatively painless to go through a couple of rounds of feedback on just one page.

With these new styles composed in Photoshop, and with my UI elements in place, I merely had to change the styles in one place, and the whole site conformed to the new homepage design.

Concluding thoughts

There is no end-all-be-all to designing for the web. Just because you mostly design in browser doesn't mean you should give up Photoshop.

For me, the most valuable aspect of designing in browser is to curtail the pain that comes with traditional design process and to work with your team in the leanest way possible without having to sacrifice of your own design principles.

Tuesday, February 17, 2015

Frequently Used Functions in Magento Development

Magento Development
Magento is a very powerful and thus slightly difficult to tame CMS. It is built on the mighty Zend framework, and it often becomes a difficult task to create or edit Magento templates. Here in this article, I'll try to compile a brief list of useful Magento template development functions, which are used frequently during theme development. We have to cover a lot in this article, so without further ado, I'll start explaining the functions.

Wednesday, July 16, 2014

Optimising for 60fps everywhere

Optimising for 60fps everywhere

With the latest update to GoSquared we set ourselves the target of achieving a smooth 60 frames per second for all the core UI and animation, across all devices.

Friday, May 09, 2014

Six Common Problems With The UX Process and Six Solutions!

Six Common Problems With The UX Process

How robust is your user experience design process? We all have our favored methods and techniques, but the general process is similar: Conduct research, prototype, then present to stakeholders and users.

Thursday, May 01, 2014

Chrome DevTools Features You May Have Missed

Chrome DevTools

In 2013, I posted a few tutorials on DevTools: Markup and Style, Networking and the Console and JavaScript and Performance, covering the basic features of the various DevTools panels. Since then, a lot has changed, so let's take a look.

Wednesday, March 05, 2014

Uploading Files with AJAX

Uploading Files with AJAX

The introduction of AJAX marked a huge leap forward in the history of the web. The ability to communicate with a web server without reloading the page has revolutionised how web applications are built. The primary technology that enables AJAX (XMLHttpRequests) has evolved significantly since the initial conception of dynamic websites.

Sunday, March 02, 2014

Designing for Performance

Designing for Performance

Web performance is user experience.

Monday, February 24, 2014

Outdated UX patterns and alternatives

Meet North, design and development standards to align and guide your project. It's a comprehensive guide contributed to the open source community to encourage, "a mobile-first, in-browser, system based approach to design and development".

Saturday, February 08, 2014

15 Best Responsive Web Design Testing Tools

Over the past few years we've seen an explosion of web-enabled devices with varying resolutions, capabilities, form factors, pixel densities, interaction methods and many more. As the use of different devices continues to rise all across the world, so does the need for us to deliver a tailored experience for those devices on the web. But how do you test your website responsiveness?

Friday, January 31, 2014

15 Powerful Social Media Tips

Social media is ever-changing and ever-growing. Of course, this is true of the internet in general, but even more so when talking about social media. Facebook, Google+, Twitter and countless others are constantly evolving and changing based on their users' reading, browsing and posting habits. Of course, this is good news. It does mean that social media will continue to be relevant in the years to come.

15 Powerful Social Media Tips

Monday, January 27, 2014

5 UX Tips for Designing More Usable Registration Forms

The web is crowded with UI solutions that we've inherited from the past, but are still applied because "everybody else does". It is time to reconsider all of them, but especially registration forms. When designing registration forms, keep in mind that they are for the user and the smoother the registration process, the more delighted your customers will be.

Here are some tips to make the most of registration forms.

Friday, January 10, 2014

Where the best designers go to find photos and graphics

find photos and graphics

I'll let you in on a little secret: beautiful websites aren't made, they're found. Smart designers know where to find that perfect photo, subtle pattern or that unique icon.

Here's where the best designers go to find photos, graphics, icons and more.

Stunning Photography

Photography is what separates a good website from a great website. There may be no better example of great photography than Apple's website. Apple loves to showcase products with huge, eye popping photography. It's a great example of how to use photos.

Here's where the best designers find photos:

  • New Old Stock Photos - Awesome vintage photos from public archives. Completely free of known copyright restrictions.
  • New Old Stock Photos
  • Super Famous - Lots of geological, biological and aerial photography from from Dutch interaction designer Folkert Gorter. Sound boring? It's not. These photos are one of a kind.
  • Unsplash - A free email newsletter stuffed with hi-resolution photos. Sent every ten days.
  • Little Visuals - Another free email newsletter. Sends weekly batches of 7 gorgeous photos.
  • Comp Fight - The fastest way to find Creative Commons images to use on your blog or website.
  • Pic Jumbo - Big, searchable database of totally free to use photos.

Sample photo from Pic Jumbo

Sharp Icons

The next time you're browsing Facebook, Google or Twitter, take note of how many icons you'll see. They're everywhere. That's because icons are an essential part of web design.

Here's where smart graphic designers go to find icons:

  • The Noun Project - The grand daddy. Enormous database of over 25,000 icons and growing daily. Each icon has a similar format so they always look professional and consistent.
  • Icons from The Noun Project
  • Icon Monstr - Free, simple icons discoverable through a search interface. Over 2,000 icons.
  • Icon Sweets - Love iOS7? This downloadable library has over 1,000 icons in the style of iOS7 (iOS7 is known for having outlined icons). Available for only $10.

Graphics & Logos

  • Creative Market - Amazing, handcrafted graphics from designers around the world. I always find top-rate stuff here.
  • Creative Market
  • 99 Designs - Crowdsource your logo: hold a contest and have 20 – 30 designers submit logo entries. Choose the one you like.
  • Scoop Shoot - Need photos from around town? ScoopShoot lets you hire people around town to take photos with their phones.
  • Subtle Patterns - Over 369, subtle (duh) patterns. They all work by being repeated, so they're perfect for websites.
  • Subtle Patterns
  • Colour Lovers - Have difficulty choosing which colours to use? Colour Lovers has literally millions of colour palettes created by users that are ready for you to use.

Two tools that will make you a design rockstar

  • Pixlr - Pixlr is like a free, online version of Photoshop.
  • Placeit - An incredible website. Just drag and drop screenshots and it will generate shots of your screenshot in realistic environments.

Placeit – Just upload a screenshot and Placeit will automatically place it in a new context

Bonus: Reader submitted resources

Savvy readers have mentioned additional tools that I hadn’t included. Here’s some that have stuck out to me:

  • Gimp – A bit of a learning curve, but a free tool for image editing (Thanks to Jesus Bejarano and Rekasays in the comments section).
  • Creative Commons images on Flickr – Thanks to 3stripe on Hacker News.

Thursday, January 09, 2014

5 Frontend Frameworks and Libraries You Should Know

5 Frontend Frameworks and Libraries You Should Know

Most of us have heard about awesome front-end frameworks like Bootstrap and Foundation and well as many libraries that help the rapid prototyping and/or development of a web site or a web app.

Monday, January 06, 2014

What is the DOM?

What is the DOM?

But the HTML you write is parsed by the browser and turned into the DOM.

Monday, January 06, 2014

5 .htaccess Snippets to Borrow from HTML5 Boilerplate

htaccess Snippets
HTML5 Boilerplate is an awesome website template when you want all best pieces in place for you when you start your project. A while back I covered 7 CSS Snippets to Borrow from HTML5 Boilerplate, so today I want to feature a few .htaccess settings which could speed up, secure and make your site very much more useful!

Tuesday, December 17, 2013

15 Tools to Help You Create Your Next Infographic

Tools to Help You Create Your Next Infographic

Five to six years ago, I believe almost everybody haven't heard about infographic. In the recent year, it's now surfacing the whole web. Internet marketers are now using it as a tool to deliver their message the best way. No matter how eloquent you are as a writer. Sometimes, a single image might speak better more than a thousand words.