Securing Facebook

Leave a reply

So over the last few weeks I’ve had a lot of friends on Facebook get their accounts hacked and had the attacker start spamming with links to photo albums that my “friend” is supposed to be telling me to go look at. First if you don’t already know, never click a link like this. If this friend really a found some photo that they wanted you to see why wouldn’t they just posted it on Facebook in the first place?

If you still think there is a chance your friend did post something off of Facebook and sending you a link to it look at the domain of the link they sent, if you don’t know or never heard of the domain name don’t click the link. Basically these links are giving a hacker a way into to take over your account so they can spam your friends with the same links to get their account information.

The moral here is this, unless this friend has some long history of posting thing they want you to look at off of Facebook why would they start doing it now? These links are phishing attempts to try and get users account information, so don’t be the fish.

To be clear, I’m not a computer security expert or anywhere close. I’ve been in the internet industry for the last 12 years have a pretty good understanding of how everything works. Plus I tend to dig around on websites and did this with Facebook and started adding these features that are available to everyone and never had a problem with anyone taking over my account. This includes someone who knew my password trying to get into my account because they thought it would be funny.

Account Settings 

Click the little arrow in the top right of the page and goto your Account Settings:

account_settings

Getting to Security Settings

On the left hand side of the page you’ll see a list of features. Click the Security tab.

security

Security Settings

This will give you an overview of your account’s current security settings. These are what helps you secure your account.

security_settings

Note – You really should turn on Secure Browsing it’s off on mine because of a project at work were our development environment server didn’t have a SSL cert and if this was turned on I couldn’t work on anything. 

 Login Notifications

Click Edit login Notifications and enable either Email or Text message/Push notifications or both.

login_notifications

What this feature does is notify you when your account is accessed from a computer you’ve never used before. Unfortunately you’ll only get this email after someone else as logged but you’ll know that it happen. Also when you login from a new computer you’ll get an email or text saying that it happened.

When you login to your account from a new computer you’re taken to a screen that asks you to identify the device that you are using and Facebook will remember it. So if you log in from say a home and work computer the first time you log in you’ll have to ID the device then it will be remembered.

Login Approvals

Here where we start to get more preventive about controlling who can get into your account. Hoping at this point your phone is somehow connected to your account. If not you’ll be stepped through how to do that. Check the “Require me to enter a security code” checkbox and verify that it’s texting to your mobile number.

login_approvals

Now this stops just about everyone in their tracks from trying to take over your account. Here is what happens, first you try to login to Facebook. Your email and password are accepted but if you are logging in from a new device you are taken to a screen where you have to enter a code that is texted to your phone. This means that if someone whats to take over your account they need both your password and phone.

Recognized Devices

This is a list of devices that have been logged it from. If you are just setting up these features you’ll have no devices shown here. However if you logged to your account on a computer you don’t control like a friend’s house or something you can remove that device here and block it from getting to your account because it will need to be logged in a verified again.

recognized_devices

One thing to note Facebook shows each different browser as a device. So if you have 3 browsers on your computer you’ll have 3 device listed here.

Active Sessions

active_sessions

This will show a list of all active sessions you have with Facebook. This is a little confusing because it calls an active session as any browser that has been verified. If somehow your account gets hacked you can remove all active sessions and just start back over. Also generally the number of active session should match the number of recognized devices.

Just adding those few feature should keep you account from getting hacked. And it only takes a couple of minutes to get everything set up. Yes, having to have your mobile phone with you when you first login to Facebook kinda sucks but really question you’re self if it’s worth logging into Facebook from that place. Why aren’t you just looking at Facebook on your phone?

It should go without saying that a strong password is your best-friend to but since Facebook has this added features available for you to use just add them for a little piece of mind.

CSS Pie and SASS

Leave a reply

So I came across a project where I had a need for CSS3 styles in IE8, why I’ve known about CSS PIE for some time I’ve never used it on a project. I tried a couple of times but it never made it past the development environment because it didn’t work.

Well I decided to give it another go to see what would happen and got it to work. Why didn’t it work? A very important little note that I found digging through the support forums. The reference to the PIE file must be relative to the HTML page and NOT the CSS file. Once that little bit was changed it after a couple of other adjustment PIE worked and not I have nicely formated CSS3 styles on IE8.

Since I knew I was going to have to use this a few more place on this project I figured it would be best if I could save as much time as I could. I’m writing the styles with SASS so I figured throwing the PIE reference in mixin would save me time and not having to worry that all my file references are correct.

@mixin css-pie { 
     behavior: url(css/pie/PIE.htc); // Make path relative to the HTML file(s) not the CSS File
}

Now as I write my SASS files when I come to a selector that needs to use CSS PIE it’s as simple as this:

.class {
     ...
     @include css-pie;
}

Been a very handy time saver.

Link

I’ve said this 1000 times, but it bears repeating. Do not make a logo in Adobe Photoshop. Period. When I began to study Graphics, I approached my teacher Mr. Adie and probably declared that I was a master at Photoshop. Know what he said to me? “Teenage Girls use Photoshop to cover up Acne! If you want to impress me, master Illustrator.” Now, I’m not saying that teenage girl can’t create a great logo. But, what I am saying is if you are a true designer, your logo will be created in a vector art program like Adobe Illustrator.

 

Photoshop is simply a photo editing tool. That’s what it was originally designed to do. It doesn’t create art that’s ready to print on the business card, a T-shirt or any other piece of company SWAG. So, the bottom line? Keep your Evelyn and Bas filter and bubble textures off of my logo.

I really don’t think it can be said any better then that. Learn to use the right tools for the job it will make your live easier. Seriously.

The Golden Ratio Typography

Leave a reply

I’ve done a lot of playing around as it comes to typography for the web, in fact I have a post coming about using SASS and the Compass framework to maintain constant typography on sites.

One of the most basic things that can be done with typography is maintaining a good amount of leading or in the web design world line height between you’re lines of text for easy readability. I once had a professor tell me during a project that you can never have too much leading, thought he was referring to print designs when he make that comment.

On the web it is a bit of a different story, in print we know exactly how much size we are working with. With the web as designers we have to take into account that visitor will have to scroll and we don’t know the size of monitor any given visitor is going to view the site with. So the issue on the web when it comes to line height is the how much is the right amount.

With CSS preprocessors one of the great things you can do is use math within your files. So I started playing with variables within SASS to see if I could find something that based on the global font size variable I would set for any given website I could maintain some level of constancy across my designs, basically something that looks like this:

$fontsize: 16px;
$lineheight: $fontsize * 1.5;

body { 
     font-size: $fontsize;
     line-height: $lineheight;
}

As I was starting out I set to variables $fontsize and $lineheight and then used the $fontsize variable multiplied by 1.5 to figure out a line height for the site. Then set that in that body tag so that would be the base typography for the site.

Compiled the CSS looks like this:

body {
     font-size: 16px;
     line-height: 25.6px;
}

The thing I liked about this solution starting with was that if I need to change the base line font size for the website the line height would be generated from the new font size automatically. So if they font size needs to change from 16px to 14px the line height is changed as well.

Really 1.5 worked out pretty well, but I have always had an interest in numbers and number theories so I had come across a few different articles about the Golden Ratio and how it’s been used and seen in design. Now the Golden Ratio is 1.618 (rounded) which really isn’t that different the 1.5 I started with. So I played around with using 1.6 and 1.618 not shockingly there wasn’t much difference between them. So I figured if I’m going to use this I should just use the real ratio at 1.618.

So now this is my base variables for typography and the file looks like this:

$fontsize: 16px;
$lineheight: $fontsize * 1.618;

body { 
     font-size: $fontsize;
     line-height: $lineheight;
}

Now I have Golden Ratio Typography that is compiled to this:

body {
     font-size: 16px;
     line-height: 25.888px;
}
Link

Continuing my week of preprocessors Chris Coyier has a great little screen cast about how you can start using a preprocess like SASS in almost no time at all. Let him show you just how simple it really is to get started.

Developing Styles with SASS

1 Reply

You may or may not know that there is new way to write your CSS for websites, they are called preprocessors and give a ton of flexibility when it comes to CSS development. There are a few different ones available and all of them are similar to use, each has it’s only little style to it. The basic of what these preprocessors do it give a developer more power over styling and get you better and smarter ways to write and work with CSS.

The other thing they all have in common is they have to be compiled down into a CSS file before they can be used. Compiling may sound like it would be extra work but it’s really not. Generally you have two options, if you’re comfortable with Command Line syntax you can have Terminal (on Mac) watch the folder you are working in and automatically compile a CSS file as you make changes to you preprocessors files. The other way it’s to get CodeKit and just have it run in the background.

Anyway couple of months ago I found out about one of these formats called SASS and I found out about SASS through a SASS framework called Compass. I decided to start using it on a couple of simple projects to see how it was and if I like working with it.

About a week later I was using it for everything.

The biggest thing I loved about working with preprocessors is that I could set variables and then use them through all the files I was creating. The second reason was that I could move to a modular development model with everything.

Why are variables so great? I ask you how many times when you were writing a CSS document and had to use a specific color did you have to write out the HEX value or find it through Photoshop again were you needed it? I was doing both of those things, then along came SASS. Here for me is what makes the variables so great. I can now set a global variable $color = HEX code; and any time I want to use that color its as simple as coding color: $color;. Simple and it speeds up my development because I’m not looking for the HEX code. And the icing on the cake? If in the future that color has to change you only have to change it once in the variable and it’s changed everyone you’re referenced the $color variable in your SCSS files.

Now ALL CSS preprocessors have this so it’s not unique to SASS. The thing that made me stick with SASS was the Compass framework. Compass gives you a lot of what are called mixins and other functions. Mixins in the preprocessor world are functions that lets you write one line of code to create things that would take many lines.

The best example of this is think of the number of lines you have to write to create a gradient in CSS, with compass you can write a line that looks like this @include gradient(Start Color, End Color); then it’s compiled to all the lines you need to write to create that gradient across all browsers.

Compass’ other great feature? It has the Blueprint Grid baked into it.

That’s just a very basic overview of SASS and why I use it. I’m going to share some tips and tricks I’ve learned in my few months with SASS as I get the chance to show how much simpler it makes things in the CSS world.

Link

The biggest problem with Windows 8 is that it wasn’t born out of a need or demand. Its design failures, particularly with ‘Metro UI’ will likely be its downfall. Here’s why.

I think Windows 8 is either going something that wins everyone over in the first couple weeks or it’s going to be the beginning of the end for the OS.

iOS 6 Interface Updates

2 Replies

Good video showing just a few of the different options that Apple could take to add some new features to iOS 6. Seeing that as I’m posting this we are about two hours away from the Keynote at WWDC I hope that a couple of things like this land in iOS 6. The one feature from this I would love is the Mission Control feature by sliding up from the bottom. Even the dynamic badges idea has some merit but it is nothing that I see Apple implementing. Oh and the flipping App titles will never happen as then Apple would look like they are coping… gasp, Microsoft.

Link

The HTML5 Boilerplate is a really helpful thing when getting started with any new web project these days. The important then to remember is it’s not really a framework but a resource that has a great code structure built for developers to start with. These template help give you a bit of styling help to start now as well.

The Golden Gate Way

1 Reply

I love time lapse videos even more when they have great and one of a kind subject matter. This is one of the first ones I’ve seen with fireworks and the way it is done it just awesome.