menu

CSS 4

2016 Top Light Weight Text Editors

As a programmer and blogger I have need for both heavy weight, full IDE software and the quick and easy text editors. We all need a fast way to edit text files without anything in our way but with a tad more features then notepad.

Notepad is fun but... it's not. Not fun at all. Period.

For me a good text editor needs to be fast in all ways. Fast to open. Fast to close. Fast to switch from file to file. Fast to make edits. Fast to search within. Everything about it has to make it faster for me than Notepad.

I've included my top 3 editors in this post. There are many more out there. Some may have more features, more plugin, more themes, etc.

Sublime Text

Sublime Text Screenshot

This one made it to the top of my list. A few years ago I thought I was settled for life with Notepad++ but one week after using Sublime Text changed all of that.

The one feature which got me hooked up was their multiple selection tool. With a quick Ctrl-D shortcut you can select multiple instance of your selection and then edit the whole thing all at once simultaniously.

But that's just one feature they have which speeds up editing.

Sublime text also has an extensive list of addons supporting almost anything you can think of.

The editor is slick and fast. It's also fully cross platform if you're like me working on both Windows and Mac (and very rarely but occationally on Linux).

It's free to try and evaluate. I encourage you to buy has their license is per-user rather than per-machine which is super fine if again you're like me developping on many machines and platforms.

Note that at this time Sublime Text 3 is still in beta but I've been using it for a while without any issues.

Download Sublime Text 3 or Download Sublime Text 2

Atom

Atom Screenshot

Atom is a relatively new editor built by the team at GitHub. Atom distinguishes itself by the level of customisation it gives you. Since it's built with HTML, Javascript, CSS and Node.js it can be personalized easily in many many ways.

Atom works across operating systems. You can use it on OS X, Windows, or Linux.

It offers many built-in themes which looks great and offers many community themes as well. I have to say it really feels and looks like a 2016 text editor.

The GitHub guys used their experience to develop a quick and useful editor for developers.

I'll definitely explore this slick editor more and more as it matures in the future.

It's also completely free, which makes it an easy choice.

Download Atom

Notepad++

Notepad++ Screenshot

Notepad++ is a free text editor. It's fast and effective at the same time. It has everything you'd expect from a light weight text editor. Syntax highlighting, code folding, auto-completion, tab interface and more.

Recent versions has introduced some limited multi-editing has I mention Sublime Text could do but not as user friendly and well integrated. See it in action here.

It also has a function list panel which can be useful as a quick reference.

Unfortunately, it looks and feels like an older software. It's not as slick as the other two editors but it does work great and offer nice features.

It's a good free solution for Windows users. (It's only available for Windows.)

Download Notepad++

Dec 7, 2015 | comment Comment

What is responsive web site design?

If you're looking into getting a website for your business or even personal hobbies there are a few things you want to make sure your designer will provide. I'll explain after but for now there's one thing you have to learn. This simple question...

Will my website be responsive?

And the answer has to be...

YES.

Any other answer is not a good answer.

Now what's responsive website design?

Responsive web design is the ability to have one website which is view-able everywhere, on any screen type: TV, laptop, smart phones, iPads, tablets, watches and whatever will be invented next year and the years after.

I'm not talking about a mobile version of your site. That's the outdated way of doing things. It requires maintaining two separate website which is costly and not very efficient.

Responsive web design is the ability for a web site to adapt itself to any screen sizes. For example take this website, reduce the width of the browser window and you'll see it re-adjust itself as it gets narrower or wider.

Why is this important?

Because the Internet is always evolving, more and more people only uses tablets and phones to go on the Internet. Plus we don't know what's going to be next. A responsive website is the way of making sure your website is prepared for any situations in the future.

What if my designer says he won't (or can't) design a responsive web site?

It's time to get a new designer. Period.

So remember...

The secret question...

Will my web site be responsive?

and the only possible answer...

YES.

I can't stress the importance of responsive web sites enough. If your existing website is not responsive, now would be a great time to re-invest in a new design. If you're planning to get a new website done, remember the secret question.

If you have any questions related to responsive web design feel free ask them in the comments below.

Sep 24, 2015 | comment Comment

CSS3 Tricks - How to Create Flashing Light Animated Menu

In today's CSS trick I'll show you how to create an animated side menu using only CSS. Tweek my example to fit your site.

First let's setup the foundation for our menu.

The HTML below won't change for the remainder of the tutorial. When I'm talking about progressive web design this is exactly what it is. Start with the information and style it to fit you page's design.

This is the worst your menu will ever look. Not great but still functional. Not very visible on my background but you should make sure to pick a color that comes out ok on your background.

The container can be anything you like. It could be your BODY tag. But make sure to have the style position: relative because we'll use absolute positioning for our menu.

Next we'll add the styles on our links to make them stand out a bit and position our menu on the right.

Now we have our base style for our menu.

I've added many styles for look purposes like text-shadow, a transparent background and some font styles. These can be customized to your liking.

Now we'll add the hover styles on the links.

Almost there.

See the fallback color? That's in case a browser doesn't support HSLA. To be honest with you, I'm not sure in what cases it works, I've look many places and this is how they propose we do it but it doesn't work in IE7. On my website I'm using IE hacks to add specific styles for IE, I'm not going to go into hacks in this post. Making sure the link color is easy to see on your page background is the best way to ensure your links are well visible in any browser.

Fun part ahead!!! Adding the flashing light animation!! Swoooosh...

For more information on CSS3 animation you can look at my previous post on Creating a Beautiful Animated Scenery.

Finished. All done. It wasn't all that bad don't you think?

As having the menu on the right is not conventional here's the code for the same menu on the left side.

I hope you enjoyed this one.

As usual, play with the styles to make it your own, or to fit you website better.

If there are any CSS3 aspects you'd like me to cover in future post add a comment below or if you implement this menu on you site let us see the result.

Sep 26, 2012 | comment Comment

CSS3 Tricks - Creating Beautiful Animated Sceneries Using Only CSS

Today's little CSS3 trick is a very cool one. It's uses? Well you'll need a web site with a lot of personality to use this but if you do, your visitors are going to be in for a nice treat!

We'll create a fully animated sky with clouds soaring with the wind and a dancing sun. Excited? I bet you are!

Aug 31, 2012 | comment Comment