VBlog

Category: Front End Development (page 2 of 2)

The Pramod Brothers on their blog shared a very in deep analysis and case study of the current state of chat applications and some ideas to improve them. Awesome job!

Working with Grunt and Compass

Using Compass as a Grunt task allows you to benefit from Compass built-in mixins and helpers, as well as keep basing your application configuration on Compass config.rb file.

1. Install Compass and Watch plugins

This is done by running these commands:

npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-watch --save-dev

Don’t ommit the --save-dev part since it will actually edit your package.json file to insert the dependencies.

2. Modify Gruntfile.js.

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // ...
        compass: {
            dist: {
                options: {}
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['compass']
            }
        }
    });

    // ...
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ['compass', '...']);
};

Leaving options empty tells Compass to use the settings contained in the config.rb file next to the Gruntfile.js. If you need to override some or all of the options, or to use a config.rb file located elsewhere, here’s the list of supported options.

 

We’re not designing pages anymore. We’re designing systems of components.
Brad Frost

In this 1 year old talk at Beyond Tellerand, Brad Frost introduces Atomic Design, a relatively new concept encouraging developers and UX designers to build component based systems instead of pages.

It’s a long video (nearly 1h), but I find it really inspiring, definitely worth the watch.

Building a Responsive and Scalable Typography

I recently watched Aquent’s Responsive Web Design course, and  one part especially catched my attention: Web Typography. This topic has always been confusing for me, and at the end of this course I finally have some ground rules for building a responsive and scalable typography for any website, which I’m sharing with you today.

1. Starting from a clean slate

The first thing to do, and I bet you already do it on your projects, is to reset your styles so you can start building a typography that will render the same on every browser and device.

Including normalize.css stylesheet in your page will do the trick, in association with this CSS code :

html {
    font-size: 100%;
    line-height: 1;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

Font-size: 100%
All browsers agreed that 100% = 16px
More info: http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Line-height: 1
Unitless value. 1 = 16px
More info: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/
About Unitless: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Text-ajust-size: 100%
Mobile browsers attempt to adjust text size to be nice to users. This code disables that auto scale feature.
More info : https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust

2. Converting Pixels to Ems

This part is tricky. I had to replay Aquent’s course 3 times to fully understand it. It’s actually quite trivial if you know how to tackle the issue. The important thing is to start with the paragraphs (<p>) typography, to extend it to other components like headings.

It all starts with this simple formula:

EM = Target font size in PX / Default line height (16px)

So for example, if my paragraph font-size is 17px, then I should use 17px / 16px = 1.063em. Same goes for the line-height.

font-size: 17px /* 17px / 16px = 1.063 */
font-height: 20px /* 20px / 16px = 1.25 */

Let’s now style our headings. Here are our rules:

Font Size:
H1 = 3 x Paragraph Size
H2 = 2 x Paragraph Size

Line-height:
Should stay the same as for paragraphs.

So if my paragraphs font-size is 1.063em (17px), then here goes the styles for my headings:

h1 {
    font-size: 3.189em; /* 1.063 x 3 */
    line-height: 1.25;
}
h2 {
    font-size: 2.126em; /* 1.063 x 2 */
    line-height: 1.25;
}

3. Typographic Scale & Vertical Rhythm

This method will allow us to determine the font-size of any component on our page and maintain some vertical rhythm (finding the ideal combination of font-size and line-height for all the text on a page).

All of it is based on magic numbers:

Scale = Paragraph font-size x Paragraph line-height

Scale: 1.063 x 1.25 = 1.3 (rounded)
3/4 Scale = 0.975
1/2 Scale = 0.65
1/4 Scale = 0.325

We can use these to determine spacing on our page.

For example, let’s say we need to add margin around our <blockquote> element. To determine this margin, we used to try 10px, then 20px, and chose the spacing that seemed to fit the best. Now, we can use our scale.

Always start with 1 scale (1.3em). If margin: 1.3em doesn’t seem enough, then add 1/2 scale to it, so 1.3 + 0.65 = 1.95em. It’s still up to us to use the correct spacing, but at least we guarantee vertical rhythm on our page.

The same methodology is relevant for any CSS property, from width and height to box-shadow.

Configure a Proxy Server on Github for Windows

If you’re like me and need to use Github for Windows behind a proxy, you’ve probably clicked every menu on the software without being able to find where the hell you can specify a proxy server. Well you’re not crazy, there is no menu for that. :)

To specify a proxy server, you need to edit the .gitconfig file that Github created during its installation. It should be in your user repertory (if you have Windows 7, just type .gitconfig in the start menu search feature and it will find it for you). Edit the file with your favorite editor, and add a new line, like this :

[http] proxy = 127.0.0.1

And voilà!

Newerposts

Copyright © 2019 VBlog

Theme by Anders NorenUp ↑