7 ways to tell your css has gone mental

I work on big sites almost exclusively so my techniques are all about wrangling tens of thousands of lines of code into a few thousand. When deadlines loom or you work with a staff of various skill levels css begins to loose its organization.

So here are a few things to look for to know its time to reorganize your code.

When !important becomes a way of life. When the only way to get a piece of code to to work is to wrap !important to the end of every line, your css has gone mental.
When you scroll through the style definitions and see !important sprinkled liberally throughout the styles. Your code has definitely gone mental. Seriously if there are so many clashing definitions that only an !important can solve it you need to look into taking a BEM and SMACSS approach and flatten your definitions.
If you need to change a color and have to do a find and replace to get to them all your code has gone mental. It is time to preprocess your css. I prefer Sass just because it has super powers, but Less is almost as good. Preprocessors allow you to use variables so you can keep all your definitions in one place and reference it everywhere.
If additions to classes end up in a jumble at the end of a file it has gone mental. Choose a technique that makes it easy to find the classes that you need to change. Preprocessors allow you to break your styles into as many files you need to keep your css organized. Sass to the rescue again.
When style definitions are nested five levels deep you know your code has gone mental. Use BEM naming conventions and ideas to […]

By |March 15th, 2016|

Javascript Classes

Despite what you might believe JavaScript does not actually have classes. But you can emulate them using functions, variables, prototypes and closures.

There are many ways of making classes each has advantages and limitations so I will go over each of them in turn.

Let’s start at the beginning with the most basic element. The Variable.

 
var widget = “orange”;
A variable can hold many kinds of data and properties but the most important thing to remember about it is that it can hold anonymous objects.  And in javascript everything is an object. Even “orange” is an object with a set of properties and methods that I could use to manipulate it. But that is for another lesson. Just keep in mind that variables are able to point to elements with and without names.

The next most important element is the Function.

function widget(color) {
return color;
}

The function allows me to store a series of commands, variables and even further functions. The problem with this is that all of it is public. But there is a trick to solve that.

The first way to create a class is with a function.

function widget(color){
this.color = color;
this.price = 3.95;
this.name = “widget”;
this.whatIsThis = function(){
return ‘this is a ” + this.name;
}
}

This is obviously a function. But we can use it like a class to create multiple widgets by instantiating it.

var box – new widget(“blue”);
box.name = “box”;
console.log(widget.whatIsThis());
console.log(box.whatIsThis());

As you can see this doesn’t actually affect the widget. It is still the same. By instantiating it we can use it like a class to duplicate it into individual […]

By |February 13th, 2013|

MySQL Cheat Sheet

LOGIN
mysql -u root -p
CREATE USER
CREATE USER ‘newuser’@’localhost’ IDENTIFIED BY ‘password’;
CHANGE USER PASSWORD
SET PASSWORD FOR ‘bob’@’%.example.org’ = PASSWORD(‘cleartextPassword’);
 

Query
SELECT * FROM table
SELECT * FROM table1, table2, …
SELECT field1, field2, … FROM table1, table2, …
SELECT … FROM … WHERE condition
SELECT … FROM … WHERE condition GROUP BY field
SELECT … FROM … WHERE condition GROUP BY field HAVING condition2
SELECT … FROM … WHERE condition ORDER BY field1, field2
SELECT … FROM … WHERE condition ORDER BY field1, field2 DESC
SELECT … FROM … WHERE condition LIMIT 10
SELECT DISTINCT field1 FROM …
SELECT DISTINCT field1, field2 FROM …

SELECT … FROM t1 JOIN t2 ON t1.id1 = t2.id2 WHERE condition
SELECT … FROM t1 LEFT JOIN t2 ON t1.id1 = t2.id2 WHERE condition
SELECT … FROM t1 JOIN (t2 JOIN t3 ON …) ON …
SELECT … FROM t1 JOIN t2 USING(id) WHERE condition
 

Conditionals
field1 = value1
field1 <> value1
field1 LIKE ‘value _ %’
field1 IS NULL
field1 IS NOT NULL
field1 IN (value1, value2)
field1 NOT IN (value1, value2)
condition1 AND condition2
condition1 OR condition2
 

Data Manipulation
INSERT INTO table1 (field1, field2, …) VALUES (value1, value2, …)
INSERT table1 SET field1=value_1, field2=value_2 …

DELETE FROM table1 / TRUNCATE table1
DELETE FROM table1 WHERE condition
— join:
DELETE FROM table1, table2 WHERE table1.id1 = table2.id2 AND condition

UPDATE table1 SET field1=new_value1 WHERE condition
— join:
UPDATE table1, table2 SET field1=new_value1, field2=new_value2, …
WHERE table1.id1 = table2.id2 AND condition
 

Browsing
SHOW DATABASES
SHOW TABLES
SHOW FIELDS FROM table / SHOW COLUMNS FROM table / DESCRIBE table / DESC table / EXPLAIN table
SHOW CREATE TABLE table
SHOW CREATE TRIGGER trigger
SHOW TRIGGERS LIKE ‘%update%’
SHOW PROCESSLIST
KILL process_number
SELECT table_name, table_rows FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = ‘**yourdbname**’;
$ mysqlshow
$ mysqlshow database
 

Create / delete / select / alter database
CREATE DATABASE
CREATE DATABASE mabase CHARACTER SET utf8
DROP DATABASE mabase
USE mabase

ALTER DATABASE mabase CHARACTER SET utf8
 

Create/delete/modify table
CREATE TABLE table (field1 type1, field2 […]

By |January 12th, 2013|

Create a facebook feed for your website

In order to get your facebook feed follow these steps.

first go to:

https://developers.facebook.com/apps

Click +Create New App
fill in an app name. ignore the rest. Click Continue.

fill in the security word to get to the next screen.

On this screen you will see a form for creating your app.

fill in App Domains with the URl of the site that will show the feed.
Click the Website with Facebook Login.
fill in the url including the http:// before the site.

Click Save Changes

Once this is done you will need to copy your APP_ID and APP_SECRET codes

Go to this link replacing APP_ID and APP_SECRET with the actual codes.

https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=APP_ID&client_secret=APP_SECRET

when you go there you will get a page looking like this:
access_token=46362638219919|Xmd7dfdfd8003kmsdksaoWWff0MX

your access code is everything after the equal sign. save this code.

next you will need the page name.

go to facebook and go to the page you want the feed for.

for instance to use the feed from this page:

www.facebook.com/jasonmcalpin

you will use the page name: jasonmcalpin

go to the following URL replacing PAGE_NAME with the actual page name. Add the access_token to the end after the equal sign.

https://graph.facebook.com/PAGE_NAME/feed?access_token=ACCESS_TOKEN

congratulations you now have the JSON feed for your page.

In the next post I will take you through styling it.

By |September 6th, 2012|

Fonts and the internet

There are now two kinds of fonts available for use. The first kind are the ones universal fonts installed on every system, desktop and mobile. The other are custom fonts that are generated and uploaded along with the site. The difference in the fonts is that universally available fonts are available immediately and don’t have to be downloaded. The trade off is that although universally available they are not perfect copies of each other despite the name. Custom fonts on the other hand are exactly the same on every system but the trade off is that every browser has a different format they want so you’ll need to offer up to 4 different formats to allow the widest range of viewers to see them. This can result in up to 200k or more of files that will be downloaded along with the page when viewed. This can also cause a lag in when they see the site and when the font changes. It is usually a good idea to avoid using to many fonts as they can cause a dramatic increase in download time for a webpage.

Below you will find resources and information on the best way to use these fonts and which to services provide the best bang for your bytes.

This first group are the core fonts found on most devices. These are the safest to use in most site designs.
Universally available fonts, for desktop and mobile:
Arial/Helvetica
Courier/Courier New
Georgia
Times/Times New Roman
Trebuchet MS
Verdana

Available for desktop:
Impact
Arial Black
Comic Sans MS

The custom fonts fall into two broad groups. @font-face fonts and javascript rendered fonts. The @font-face fonts require a file for each browser:
.EOT: Internet Explorer
.TTF/OTF: Safari and Opera
.WOFF: Firefox
.SVG: Mobile Safari

This can make supporting multiple browsers costly […]

By |March 29th, 2011|