Tag: Web Development

Functions in SASS

Another cool feature in SASS is that we can create functions for our CSS. In the following code, I am creating a function to be able to dynamically create a linear gradient with custom opacity. Please check it out.

@function linear-gradient($pos, $gradients...) {
  $type: linear;
  $pos-type: type-of(nth($pos, 1));

  // if $pos doesn't exist, fix $gradient
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $gradients: zip($pos $gradients);
    $pos: false;

  $type-gradient: $type, $pos, $gradients;
  @return $type-gradient;

This is how you call the function

@include background(linear-gradient(top, orange, red));

Working with Variables in SASS

Working with SASS will give you many benefits that will make your life easyer. Using Variables is one of them. You can define all the values as variables and use them all over your site knowing that later, changing the value will be a breaze. Please take a look at my code example I did with SASS variables.
/* Dimensions */
$large: 22px;
$medium: 14px;
$small: 12px;
$micro: 10px;

//global button variables
$button-radius: 4px;

/* Form Dimensions */
$input-height: 40px;
$field-radius: 4px;

/* Site Dimensions */
$site-wide: 1205px;
$site-width: 920px;
$footer-height: 395px;

/* Colors */
$black: #242524;
//this is been used as an accent color.
// The blue is just a name I am turning it to grey now
$blue: #898989;
$white: #fff;
$off-white: #f4f4f4;
$dark-grey: #55565a;
$grey: #999;
$dark: #55565a;
$light-grey: #e1e1e1;
$soft-grey: rgba(241,241,241,1);
$light-blue: #198ccc;
$light-brown: #aca095;
// Mainly for button use

//google red for cart & checkout
$google-red: #e84e40;
$google-red-hover: #FF5445;

//google green
$google-green: #8bc34a;

//PayPal grey
$paypal-grey: #e4e4e4;
$paypal-grey-hover: #d5d5d5;

$red: #6c001c;
$red-hover: #450012;
$teal: #00ad9c;
$teal-hover: #008679;
$light-green: #8ca509;
$light-green-hover: #6a7e04;
$acne-blue: #0391ce;
$acne-blue-hover: #006591;
// e-shield
$orange: #ff7f00;
$orange-hover: #d76c02;
$silver: #695744;
$silver-hover: #44321f;
$green: #0d523b;
$green-hover: #062b1f;
//pore reform
$pink: #b5005c;
$pink-hover: #870045;
//age reform
$purple: #891f62;
$purple-hover: #6f154e;
$yellow: #dcc325;
$yellow-hover: #bfa732;
$blue-grey: #607D8B;
$blue-grey-hover: #3C5866;

//acne = acne blue
//age-reform = purple
//pore-reform = pink
//murad-man = green
//bodycare = silver
//e-shield = orange
//resurgence = light green
//redness-therapy = teal
//age-Proof-suncare = red
//youth-builder = yellow

/* Z-Index */
$level1: 1;
$level2: 2;
$level3: 3;
$level4: 4;
$level5: 5;

/* Speeds */
$quick: .1s;
$fast: .25s;
$slow: .45s;
$half-sec: .5s;
$mini-sec: .20s;

/* Fonts */
$bebas-light: "bebas neue light";
$bebas-book: "bebas neue book";
$bebas-bold: "bebas neue bold";

$item-height: 423px;

/* Community, Bio and Insider vars */
$big-font: 30px;
$medium-font: 18px;
$small-font: 14px;
$extra-small-font: 12px;

$little-hero-height : 420px;
$medium-hero-height: 650px;
$hero-height: 655px;

Practice javaScript Objects in an array

Here I wrote an object constructor called person, and then I created an empty array, then I am adding each family members to it one by one and the looping true them to print their name.  I hope this comes handy to you.


// My Person constructor
function Person(name,age){
this.name = name;
this.age = age;

// Now I can make an array of people
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

// loop through my new array

for(i=0; i<family.length; i++){

Setting Up VirtualHosts in XAMPP on Mac

Setup your hosts file first

If you don’t know how to edit your hosts file in mac, please visit my previous post here

Enable VirtualHosts

The first thing you’ll need to do is open the file/Applications/XAMPP/xamppfiles/etc/httpd.conf in your favourite text editor. Look for the following lines:

# Virtual hosts
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Uncomment the second line by removing the hash (#), so that Apache loads your custom VirtualHosts configuration file:

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Create your VirtualHosts

Open the file /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. Towards the bottom of the file you will see some example VirtualHosts, which you should comment out or delete.

At the bottom of the file, add ‘localhost’ as the default named VirtualHost:

<VirtualHost *:80>
   DocumentRoot /Users/???/Documents/workspace/trunk/htdocs
   ServerName test.myserver.local
  <Directory "/Users/???/Documents/workspace/trunk/htdocs">
     AllowOverride All

16-Most Useful Web Development Tools

Web development wouldn’t be so advanced in such a short time without the help of these cool and useful tools that are available today for free on open source platforms. Here are some of the tools that I have come across and approve.

  1. Firebug The most popular and powerful web development tool
    • Inspect HTML and modify style and layout in real-time
    • Use the most advanced JavaScript debugger available for any browser
    • Accurately analyze network usage and performance
    • Extend Firebug and add features to make Firebug even more powerful
    • Get the information you need to get it done with Firebug.


  2. Fire FTP

    FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers.http://fireftp.mozdev.org/

  3. File Zilla

    It’s a  free FTP solution. Both a client and a server are available. FileZilla is open source software distributed free of charge under the terms of the GNU General Public License.http://filezilla-project.org/ 

  4. Empty Cache Button

    Adds a button to your Firefox that enables you to quickly empty your browser cache and optionally reload your page with just one click.https://addons.mozilla.org/en-US/firefox/addon/empty-cache-button/

  5. Web Developer

    The Web Developer extension adds various web developer tools to a browser.https://addons.mozilla.org/en-US/firefox/addon/web-developer/

  6. XML Developer Toolbar The XML Developer’s Toolbar!!…https://addons.mozilla.org/en-US/firefox/addon/xml-developer-toolbar/
  7. Coda

    The ultimate one-window web development app for the Mac.We code web sites by hand. And one day, it hit us: our web workflow was wonky.http://panic.com/coda/

  8. WAMP

    WampServer is a Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.http://www.wampserver.com/en/

  9. CMS Systems

    A web content management system (WCMS) is a software system that provides website authoring, collaboration, and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease. A robust WCMS provides the foundation for collaboration, offering users the ability to manage documents and output for multiple author editing and participation.http://en.wikipedia.org/wiki/List_of_content_management_systems

  10. PHP My Admin

    phpMyAdmin is a free software tool written in PHP intended to handle the administration of MySQL over the World Wide Web. phpMyAdmin supports a wide range of operations with MySQL. The most frequently used operations are supported by the user interface (managing databases, tables, fields, relations, indexes, users, permissions, etc), while you still have the ability to directly execute any SQL statement.http://www.phpmyadmin.net/home_page/index.php 

  11. Ubuntu

    Fast, secure and stylishly simple, the Ubuntu operating system is used by 20 million people worldwide every day.http://www.ubuntu.com/

  12. WinMerge

    WinMerge is an Open Source differencing and merging tool for Windows. WinMerge can compare both folders and files, presenting differences in a visual text format that is easy to understand and handle.WinMerge is highly useful for determining what has changed between project versions, and then merging changes between versions. WinMerge can be used as an external differencing/merging tool or as a standalone application.http://winmerge.org/

  13. F Secure SSH

    SSH Communications Security, SSHSecure Shell, Data-in-Transit software for PC.http://www.ssh.com/

  14. Fiddler

    Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.http://fiddler2.com/fiddler2/

  15. Apache Tomcat

    Apache Tomcat is an open source software implementation of the Java Servlet and JavaServer Pages technologies. The Java Servlet and JavaServer Pages specifications are developed under the Java Community Process.Apache Tomcat is developed in an open and participatory environment and released under the Apache License version 2. Apache Tomcat is intended to be a collaboration of the best-of-breed developers from around the world. We invite you to participate in this open development project. To learn more about getting involved, click here.Apache Tomcat powers numerous large-scale, mission-critical web applications across a diverse range of industries and organizations. Some of these users and their stories are listed on the PoweredBy wiki page.Apache Tomcat, Tomcat, Apache, the Apache feather, and the Apache Tomcat project logo are trademarks of the Apache Software Foundation. http://tomcat.apache.org/

  16. Apache Wicket

    A Java web application framework that takes simplicity, separation of concerns and ease of development to a whole new level.http://wicket.apache.org/