Gulp boilerplate for web designers

Two weeks ago, I published a Grunt.js boilerplate with common tasks for web designers. This week I’m trying out the new kid on the block, gulp. Gulp is also a node-based task manager, but it works a bit different than Grunt. It works with streams and pipes, making it very fast and easy to understand. I strongly recommend to have a look at this eye-opening presentation on gulp to better understand how it works and why it’s here to stay.

My gulp boilerplate has more or less the same features with my Grunt boilerplate. To mention a few :

If you want to learn more about how gulp works, feel free to have a look at the repository. Also if you have any recommendations or comments feel free to pull, fork, start etc. ;-)

Grunt boilerplate for web designers

Hi all, I’m very happy to announce my first grunt project that will definitely help you if you are a web designer. What I tried to accomplish was to built a grunt task list that will provide much of the CodeKit functionality and convenience by running simple grunt tasks (commands). Some of the features the grunt tasks provide are listed below:

  • SMACSS (Scalable and Modular Architecture for CSS) ready infrastructure
  • Compile Sass files
  • Compass and Burbon support
  • JsLinter
  • CSS, JS and HTML minification
  • Image optimization
  • Live-reload

Have a look at the official repository and don’t hesitate to contact me for any suggestions/thoughts. More details on how to use it will be provided on an upcoming screencast (stay tuned). Also feel free to contribute, fork, star etc ;-)

My sublime text plugin list

Sublime text is my text editor of choice for many reasons. It’s super fast and responsive, it’s available to many OS (I use it in both Linux and Windows) and finally it has plugins (packages) for everything! Many colleagues ask me what packages I use, well below you can view the sublime text packages I’m using.

Developer Tools and Console tips

You can save a huge amount of hours simply by learning to use the development tools (all modern browsers have them). Below I’m demonstrating some nice tricks I’m sure they will help you. Keep in mind that the browser I use for development is Chrome (Chromium to be precise), so some tips might not work if you use the dev tools of another browser.

Select element(s) without jQuery

You can select any element by using the dollar sign selector ($('a') ) even if you don’t have jQuery available on the document! This convention is using the document.querySelector under the hood (for example document.querySelector('a')), so it returns only the first matched element.

If you want to select multiple elements you can use the double dollar sign selector ( $$(‘a’) ) which returns an array of matched elements. The specific convention is using the document.querySelectorAll (for example document.querySelectorAll('a')).

Keep in mind that you can use any valid selectors like #ids, .classes, etc., depending your browser’s CSS selectors capabilities.

Console.log objects

It’s a bit frustrating when you try to log an object, only to get the already useless output [object Object]. Well, try using a comma (,) instead of the plus sign (+). You can also log multiple items if you like…

Console.log the event listeners of an element

This function will save you tons of working hours! Just pass the element you want to check at the getEventListeners() function, and voila, the console logs all the events of the element.

Monitor every single event fired on an element

A very similar method that logs every single event triggered is the monitorEvents() function. It works just like the above function, simply pass the element you want to track and you are ready to go! If this function is driving you crazy (as I explained, it logs everything), you can limit the events you log by passing a string or an array of strings with the events you want to log. Don’t forget to run the unmonitorEvents() function to stop the logging otherwise the browser will continue logging your events!

Log arrays in beautiful tables using the console.table

If you want to log arrays in a more beautiful and useful way, then simply try the console.table() function.

Log all properties of an element

By passing an element to the dir() function you can log all the properties of that element (identical to the view that you would see in the DOM panel).

How to add iPhone/iPad startup images (splashscreens)

We’ve seen how you can add custom touch icons for iPhone/iPad use (if you need more information have a look at Mathias Bynens excellent article on this topic) but did you know that you can add custom start-up images (aka splash screens)? Well you can and it’s very easy, just prepare your images (for various resolutions, retina displays etc, that’s the tough part) and use the below markup to include them. A very easy way to polish your web app and impress your mobile/tablet visitors.

Ambrosia “speaks” French, Serbian and Romanian

I just wanted to dedicate this post to the generous translators of Ambrosia theme. The theme made it to version 1.1.5 and although I maintain it (making sure it works with every new WordPress version), some people are providing valuable support by contributing their translations. So far the theme is available in English, French (Nicolas Rouichi), Serbian (Andrijana Nikolic) and Romanian (Alexander Ovsov). So if you want your name to appear at the theme’s official page and repository, you know what you have to do ;-)

Get element’s tagname using DOM’s tagName property

A couple of weeks ago I posted how can you get an element’s tagname using jQuery’s .prop() method. A simpler alternative could be the below code :

See the Pen Get element’s tagname using DOM’s tagName property by John Tsevdos (@tsevdos) on CodePen

The .get() method (don’t confuse this method with the jQuery’s AJAX .get(), they are completely different) retrieves the DOM element and then we simply get it’s tagName property (and convert it to lowercase). We can even retrieve the DOM element from a jQuery array using the below syntax (without the .get() method) and have the exact same result.

See the Pen Get element’s tagname using DOM’s tagName property by John Tsevdos (@tsevdos) on CodePen

I believe that the above method is easier and faster than the previous one.

Moved all my code to CodPen

Once again (and hopefully for the last time) I moved all my code snippets to Codepen. I think it better suits my needs since most of my code examples are front-end related and Codepen has a tremendous advantage there, because it allows you to publish full HTML, CSS and JS solutions and see the final output instantly! The social features it provides are also impressive, you can fork a “pen”, play with it, republish it etc, and finally it looks really good (excellent choice of color palette) and it’s very customise-able.

You can view my profile and play with my pens, don’t forget to follow me ;-) My gist list will remain and I’ll continue posting there as well, but mostly server side code such as PHP scripts.

Complete UX tool lists

Lately I have become a heavy reader of various UX related books. Below I summarize lists of useful UX tools for every UX process. Some of them overlap categories (for example the prototyping tools usually provide wireframing tools as well, or some of the feedback tools provide ticketing system as well), although I tried as hard as I could to separate them. Enjoy…

Update : If you know a service that is not listed here, please leave me a comment to add it :-)

Wireframing

Prototyping

Web Analytics

Feedback tools

Session Recording

Click Tracking

Remote Usability Testing

Offline Usability Testing

A/B Testing

Conditional styles for IE10

As you probably know Internet Explorer 10 doesn’t support the good-old IE CSS conditional comments. This means that the below code won’t work in IE10!

<!-- Not working :-( -->
<!--[if IE 10]>
<link type="text/css" rel="stylesheet" media="all" href="/path/to/ie10.css" />
<![endif]-->Check out this Pen!

But don’t worry, you can still apply CSS styles only to IE10 by using the below syntax. Great tip, that I learned from Chris Coyer’s blog.

html[data-useragent*='MSIE 10.0'] body {
  background:#ccc; /* IE10-only */
}Check out this Pen!

ice-chilled, instant web tips