Tag: code

TUTORIAL: Intro to gulp js: Installing gulp and creating a task

gulpGulp is a build system that takes files in, modifies them and then returns the modified files for use in your project. Gulp can be used to do things like concatenate and compress javascript files, compress images, compile sass back to css and much more.

Continue reading

CSS Preprocessors Are Awesome.

CSS preprocessors make CSS way better and anyone who writes a significant amount of styles should be using some kind of preprocessor. It’s understandable why some people are hesitant to switch to this workflow. It adds more complexity to the development process, you have to install extra stuff, maybe work from the terminal, and figure out how to automatically compile your code to regular CSS. It can be a lot of stuff to do, but while initially it may take more time and work to set up a project, it will pay off in the long run. The reason why CSS preprocessors exist is because CSS by itself can be pretty limited. Two very popular CSS preprocessors are Sass and Less, so I will focus on these two. With something like Sass or Less you get the ability to use variables, functions, mixings, you get nesting capabilities and more stuff that you just can’t do with css. Variables are one really useful thing you get with Sass and Less. You can define things like your site colors in one place, use the variables in your styles and if you ever need to change these colors you just go back and edit the variables. You would not have to go through your styles, copying and pasting new values or do a search and replace which can sometimes be unsafe.

Both Sass and Less also have these things called “mixins” which are these kind of reusable grouping of styles. Mixins can be useful to deal with something like CSS vendor prefixes, for example. To use the latest CSS tricks you sometimes have to repeat the style with a vendor prefix for each of the major browsers so you end up with a bunch of repeated stuff in your CSS, like so:

One thing you can do with a mixin is that you can wrap up all of those styles and call the mixin when you need it, and as many times as you need it. You can even pass parameters into a mixin and reuse it differently in different sections or pages.

Another cool thing about sass and less is the nesting capabilities. I’m a big fan of the nesting thing; here is an example of what I’m talking about:

And here is some Sass:

This nested structure helps you avoid repetition, organize your styles, and makes your CSS more closely resemble your HTML structure which I think is really neat. CSS just makes more sense to me written in this way. These are just some of the reasons why css preprocessors are awesome and why writers of css should be using them. You can get started with sass or less by checking out their documentation at http://sass-lang.com/ for sass and http://lesscss.org/ for less. So check them out, try them, they will make your css much better.

Made with Code – Sparking Tech Creativity in Girls


Made with Code, Google’s latest project, is a massive collaboration with a host of outside organizations geared towards getting girls interested in coding. It’s described by Google as “an initiative to champion creativity, girls, and code, all at once.”
Continue reading

How to Implement DoubleClick Floodlight Tags

If you work with HTML, you may have come across DoubleClick tags before. For those who don’t know, DoubleClick Floodlight is one method used by advertisers to track traffic on a web page, either through page views or clicks on a certain button. If you’ve tried to implement Floodlight tags before, you may know just how difficult they can be. This guide is to help aid the process of placing these tags correctly in your code!
Continue reading

© 2017 Oskoui+Oskoui Blog

Theme by Anders NorenUp ↑