Css

Inline css in modern apps

While modern framework communities are push forward in using inline css, innovated by one of the react developer react-css-in-js.

As Vjeux have presented in his deck the problems that they faced using css while they are working on react projects.
css problems

Since then internet was boomed about working on inline css, thats when the birth of most popular plugins:
Comparison of CSS in JS Libraries for React
One of the coolest feature that inline css offer is the ability to recompute your styles at runtime, and styles does not exists when not required.

where there is a solution, there will be a problem in computer science, using inline css you do not get full features of css, such as hover, pseudo styles, such as :active, :active + sibling etc… thought some plugins already solve this yet another problem using inline css is slower than external css, imaging you when you have 10000 rows in a table and each TD in contains each inline styles then loading of your html will be a problem.

1
2
3
<td style="border:2px solid #ccc; background:#ccc; ...."
....
...

then when you open up your console and now you realised you have hard time debugging it, lots of css on your DOM, and usually we search elements by class name… my conclusion is that I will definitely stay with SASS for a while with some nice name convention concept like SuitCss or BEM

using SVG on your web

SVG Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Because of its scalable native, especially with very high graphical screens(example: retinal screen for Mac) these days, we need solutions for images or graphics to be display on these screens.

Well these are many ways to resolve these, such as using large image 2x of your current size and scale down to smaller dimension on web, or for icons we use Font-icons. Since SVG was widely used on most modern browsers including IE9, and its pretty lightweight we should make use of it.

How we can use SVG on the web and why we will use it.

We are include/embed svg like what we can to images.

on HTML: we can include as an image or XML code, for example:

1
<img src=“mysvgfile.svg” alt=“svg file” /> // if you need to scale add width and height…

or you want to use XML, the good part using xml is you have control over some svg settings such as fill, colors and so on…

Well, one thing you need to make sure when you are using xml is that if your web page contains multiple same svg that I would suggest you embed them as image because the image file will only be downloaded 1 time, whereas xml will add more weights to html when it was downloaded from server.

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill=“red” d="M12 3C8.032 3 7 4.8 7 7.8c1.642-3 4.157-2.795 5-2.795V3zm0-2v6l3-3-3-3z"></path><path fill=“green” d="M14 7v4c0 1.113-.9 2-2.01 2H4.01C2.9 13 2 12.105 2 11V5c0-1.113.9-2 2.01-2H7.2c-.597.56-1.05 1.23-1.384 2H4v6h8V9l2-2zm-3-2h-.04l.04-.01V5z"></path></svg>

SVG can also be included from css side like what we did to images normally.

1
2
3
4
5
6
.container {
  background:url(mysvgfile.svg) no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

Alternatively we can also include svg as xml from css:

1
2
3
4
5
6
.container {
 background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

Well this works well in most browsers, however Internet Explorer refuses to work with it, so we need to convert them into base64, you can read more about base64 on: http://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for

1
2
3
4
5
6
.container {
 background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAiPjwvY2lyY2xlPjwvc3ZnPg==")  no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

There are many svg to base64 convertor out there, one of it I use it a lot is: https://dopiaza.org/tools/datauri/index.php

Optimizing Svg files is rather easy, we mentioned svg is just XML file, so you can open it on Text editors such as sublime and so on, you will see lines of code, and as we all know to reduce file size for code is to keep them into one line, and this apply to SVG too, just convert them into one line and you save 40-70% of file size, or if you want to optimise them in bulk, you can use open source tools “svgo” from github https://github.com/svg/svgo, either in CLI or GUI: https://github.com/svg/svgo-gui

remove trail for css transition

While working on some css transition recently faced a small problem, the item that was animated create a trail (some white lines or cut images) where animated, that created a very experience for users, there isn’t real fix yet, however the temporary solution is to use hardware accelerated css property to improve the graphic rendering

Add this property to where you transition the css, hope this help you.

1
-webkit-transform: translate3d(0,0,0);

Using sourcemap for front-end development

most of the time when you are using compressor like SASS or Less, and you might find that is difficult to debug the css / javascript code, especially when you compressed the code into Compressed Version, Internet always have solution for this kind of problem, SourceMap which already supported by major browsers, Chrome and Firefox. here is a good source to read more about – <a hrefs=”https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit”>sourcemap</a>

to simplify, SourceMap allow us to live edit or debug compiled and compressed files like sass, coffeescript from the main source file. 

This is how you do on chrome, 

Open up your Developer Tools and click on settings, make sure that the option: Enable css “Enable CSS source maps” and “Auto-reload generated CSS” are both ticked.

Now you need to map your css to sass or scss file, 
Open the Source tab from developer toolbar and right click the css you want to map to the scss

Gulp Mamp development

I am doing quite a lot of wordpress stuff and since using Gulp, i found happiness in my development environment, here are the most common modules that I used.

  • tiny-lr
  • gulp-coffee
  • gulp-sass
  • gulp-uglify
  • gulp-jshint
  • gulp-util
  • gulp-livereload
  • gulp-imagemin

So what I want to do with my wordpress development is that every time I made some changes to SASS / CoffeeScript or even when I saved the image it will reload the page automatically.

Read More

Gulp js streaming build system

well if you are familiar with Grunt, this is another alternative task build tool Gulp, which is easier and flexible than Grunt

npm install -g gulp

If you are not familiar with Grunt or Gulp which both are tools that help you improve your workflow such as automated your script compiling, lint, minify it and output into another folder, every time you made an change. Its awesome tool that was built.

It just happened that I was reading some news and got into this Gulp thing and start exploring it, and found that its awesome and much easier to use than Grunt.

both are built in node, so you need to install the node module when you start an project,

at the root of your project folder, enter this in your terminal

npm install gulp —save

this will install, and now you can start creating a node script file, gulpfile.js

gulp use each plugin for each different task and thats a great concept, there are only 5 functions that you need know,

gulp.task // create a new task or action 

gulp.src // the source of this file start with same folder as gulpfile.js

gulp.run // run the task / action

gulp.watch // watch this folder or file if made some changes

gulp.dest // the destination of folder to output

Below is an example of how Gulp file work using gulp-sass plugin which will compile scss to css, if you are interested to read more, I suggest that you go directly to the gulp github repo. By the way when I install gulp using older version of Node.js I faced some problem watching the file, so you might want to update your node.js.

var sass = require(‘gulp-sass’);
var gulp = require(‘gulp’);
gulp.task(‘dosass’,function(){
gulp.src(‘sass/*.scss’).pipe(sass()).pipe(gulp.dest(‘./sass/css’));
})
gulp.task(‘default’, function() {
  gulp.run(‘dosass’);
  gulp.watch(‘sass/*.scss’, function(event){
    gulp.run(‘dosass’);
  })
})

Css filter

Recently I have been using the new CSS element called Filter alot, Its beautiful and easy to use, too bad not all browser are supporting it, infect what i know is for now is only -webkit- browser

Here are some properties that we could use:

  • blur
  • grayscale
  • drop-shadow
  • sepia
  • brightness
  • contrast
  • hue-rotate
  • invert
  • saturate
  • opacity

If you intend to try out now, just do -webkit-filter: blur(10px); // or other properties

By mixing with some of the properties you can get great effects like those Instagram right on your browser, only with CSS, thats really simple and awesome for me.

here is a link to the playground, check it out.

css filter playground

Twitter Bootstrap flat ui

For those who have not seen my twitter boostrap Flat UI version on gtihub, please check it out the demo here.
twitter-boostrap-flat-ui

Practice SASS now!

I have been using SASS (http://sass-lang.com/) since last week and found love with it.
so what is SASS exactly that people are talking about on the web, basically it allows you to write your css in variables, functions, nesting for better visual and save your time on complex css, then it compile the file into standard CSS.
As what their website said:

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

inorder to install this little brilliant tool open your terminal and key in

1
gem install sass

for those with permission error with gem/ruby might want to use

1
sudo gem install sass

There are a few key functions that i really like it alot which I will demonstrate here.

Read More

Print Css background in Chrome and Safari

One of the problem that i have with css is that it does not allow me to print background color or background image, luckily Chrome and safari have a solution for that.
Insert the code below to your css.

1
-webkit-print-color-adjust:exact;
Page 1 of 212