Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 18 2013

02:02

Get Started With GitHub Pages (Plus Bonus Jekyll)

Anna Debenham guides us through the basics of using GitHub Pages with Jekyll to create simple, template-based collaborative websites. So hitch your huskies to your dogsled and set off at a racing start!

December 12 2013

05:22

The Responsive Hover Paradigm

Jenn Lukas twinkles like a guiding star in the deep Christmas night, casting her light on the interactivity issues raised by combined hover- and touch-enabled devices. With a little thought about designing for our content, we can add some seasonal sparkle.

Brought to you by Treehouse. Learn Web Design, Coding, Mobile App Development & More.

Sponsored post
soup-sponsored
05:36
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoejeschge

December 11 2013

03:32

Grunt for People Who Think Things Like Grunt are Weird and Hard

Chris Coyier grabs Grunt by the snow-white fur of its Santa suit and places it firmly (but gently) in your webdev grotto to dish out its Christmas gifts — and maybe even chuck you under the chin and sit you on its broad and comfy knee. Not at all creepy. No. Nope.

Brought to you by Shopify, the fully customizable ecommerce platform loved by designers around the world.

December 09 2013

07:02

Keeping Parts of Your Codebase Private on GitHub

Harry Roberts prepares for Christmas by squirrelling away experiments and drafts in private Git repositories, and here he neatly explains how he puts it in his pantry with his cupcakes. Once you’ve stuffed a stocking, most of all you’ve got to hide it from the kids.

December 07 2013

03:22

Animating Vectors with SVG

Brian Suda dashes out a quick technique for animating SVG line drawings using JavaScript. Way better than falling snowflakes and a Santa hat on your logo.

December 05 2013

02:52

JavaScript: Taking Off the Training Wheels

Tom Ashworth exhorts us to become more familiar with JavaScript so we can better understand and use new tools like Node and Grunt — it’s always the box the gift comes in that’s more useful and fun, right?

December 04 2013

05:22

Git for Grown-ups

Emma Jane Westby recommits us to version control by pushing a more mature approach to Git that merges relevant application with practical tips. Christmas might be for the children, but learning is for everyone, in[n]it?

December 03 2013

12:00

Coding Towards Accessibility

Charlie Perrins reminds us of a fundamental requirement of our work: accessibility; and that there’s more to accessible interfaces than screen readers. Want to unplug at Christmas? Start with your mouse and don’t look back.

December 02 2013

12:00

Make Your Browser Dance

Ruth John ushers the Christmas party disco online using the Web Audio API to festoon your browser with some twinkling scripted lights that pulse along with your favourite festive tunes. So don’t be a wallflower — Santa’s up all night to get lucky…

Brought to you by Shopify, the fully customizable ecommerce platform loved by designers around the world.

December 01 2013

12:00

URL Rewriting for the Fearful

Drew McLellan opens 24 ways’ ninth annual advent calendar with a primer on the sometimes arcane lore of rewriting URLs. But while Drew may ably match URL patterns using regular expressions, that shirt with the snowflake pattern clashes hideously with his holly and ivy tie…

June 03 2013

17:45

14 Online Code Editors For Web Designers And Developers

Looking for some online code editors, but could not find out up-to-date and most recent online editors? If yes, then this post is for you. Majority of the online code editors on the web are outdated, depreciated and are not for the modern web design. This is the reason why we have compiled this post.

Below, you will discover some useful and fresh online code editors that you would actually want to use. Without any further ado, we are presenting the complete list of 14 online code editors that you would actually consider using. Let us have a look at this collection.

Codeanywhere

Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).

CSSDesk

CSSDesk is a online HTML/CSS sandbox. Experiment with CSS, see the results live, and share your code with others.

jsdo.it

jsdo.it is a coding community for front-end engineers such as web designers, mark-up engineers, and JavaScript engineers. This is an online editor where you can try running your codes as you write. You can save your codes online as well as show them to the public as your work. Don’t worry even if you are not confident in your skill! Arrange shared codes and learn cutting-edge techniques.

BuildorPro

BuildorPro uses visual, code editing and debugging tools to provide an extremely agile method of creating and managing your site’s design & markup.

Squad

Squad is a web-based collaborative code editor. We make it simple to open, edit and share code in real time.

Codeita

Codeita is cloud-based software for prototyping and developing websites and web applications. It allows users to work together in a social environment, to create, edit and deploy web projects in a LAMP software bundle. Codeita makes it easy for developers to manage code, files and databases right from a browser-based dashboard.

Drawter

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

ShiftEdit

Free online IDE for web development with built-in FTP.

Maqetta

Maqetta is an open source project that provides WYSIWYG visual authoring of HTML5 user interfaces. The Maqetta application itself is authored in HTML, and therefore runs in the browser without requiring additional plugins or downloads.

Jsfiddle

Mootools shell, easy test you snippets before implementing.

Cloud IDE

Codenvy IDE, A multi-tenant, hosted development environment that enables social coding – the collaborative development of applications, gadgets and mashups that can be deployed to a PaaS.

Dabblet

An interactive CSS playground and code sharing tool. Dabblet saves to Github gists and offers many conveniences for CSS editing.

Thimble, by Mozilla

Thimble makes it ridiculously simple to create your own web pages. Write and edit HTML and CSS right in your browser. Instantly preview your work. Then host and share your finished pages with a single click. Easy, huh?

Cloud9

Your code anywhere, anytime… Write, run, and debug your code with our powerful and flexible cloud IDE. Collaborate on your workspaces publicly, or keep them private. The choice is yours!

July 23 2012

07:00

10 CSS Rules Every Web Designer Should Know

Through experience as web designers we memorise all kinds of code syntax, hacks and snippets. With CSS in particular there is a number of rules and declarations that can really help transform your website designs and open up new possibilities when compared to older techniques. This post rounds up 10 declarations and tips that every web designer should have available in their CSS arsenal.

@media

@media screen and (max-width: 960px) {

}

The @media rule not only allows you to specify styling for your web page when printed. These days media queries are more associated with the creation of responsive or adaptive website designs. Create a media query using properties such as min-width to adjust your design according to the user’s viewport size.

background-size

body {
	background: url(image.jpg) no-repeat;
	background-size: 100%;
}

A cool and extremely useful CSS3 property that has now gained thorough browser support is background-size. At one point making a background scale to the size of its parent required some right messing around, but now just one line of code is all you need. Use this snippet to achieve the ever-popular full screen background image effect.

@font-face

@font-face {
	font-family: Blackout;
	src: url("assests/blackout.ttf") format("truetype");
}

One CSS3 property that has really helped transform the web over recent years is @font-face. We previously had all kinds of limitations regarding font licensing which held back this property, but now there’s bucket loads of fonts to choose from and a range of services that build upon the basic @font-face code. Use @font-face manually with freely available fonts, or via third party services such as Google Webfonts or Typekit.

margin: 0 auto;

#container {
	margin: 0 auto;
}

The clever margin: 0 auto; declaration is one of the first snippets you learn when getting to grips with CSS. It’s surprising that no specific declaration for centering a block element was ever added to the CSS spec, but instead we’ve all come to rely on the auto margin workaround. Add margin: 0 auto; to centre any block element within its parent.

overflow: hidden

.container {
	overflow: hidden;
}

There’s all kinds of float clearing solutions and hacks out there, but one pure and simple way to clear your floats is to simply use the overflow: hidden; declaration on the container of your floated elements. It doesn’t add a load of garbage to your stylesheet and it gets the job done in 90% of scenarios.

.clearfix

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

For those float clearing situations where overflow: hidden; doesn’t work, the best alternative is the clearfix technique. Remember you don’t have to use the clearfix class name, your could target this code to any of your HTML elements individually.

color: rgba();

.btn {
	color: rgba(0,0,0,0.5);
}

PNG images used to be required for creating any kind of transparency effects in web design, but thanks to another advance in CSS transparency can now be created with the help of the RGBa color mode. Using RGBa in place of a hex value allows you to select a colour using its red, green and blue channels as well as setting an alpha level, such as 0.5 for 50% opacity.

input[type="text"]

input[type="text"] {
	width: 200px;
}

The input[type="text"] selector and advanced selectors as a whole are great for taking your CSS skills from intermediate to expert. Attribute selectors in particular are extremely useful for styling elements without the need for additional classes. What about using attribute selectors to target the submit version of an input element or add an icon to external links?

transform: rotate(30deg);

.title {
	transform: rotate(30deg);
}

If I’m honest I’ve yet to find a use for CSS transform properties in a real design project, but the ability to manipulate HTML elements without Javascript is so cool it makes these properties worth remembering! Combine transform properties with CSS transitions to create some fun animation effects.

a {outline: none;}

a {outline: none;}

Nothing can spoil a design more than seeing a huge dotted outline spanning across the whole page when you click a link element. The a {outline: none;} declaration will remove this, but for accessibility don’t forget to also add :focus states to your links. If you don’t mind seeing the dotted border but wish it didn’t span the whole screen, just add a {overflow: auto; } to your stylesheet instead.

May 03 2012

14:00

So You want to Learn how to Code?

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

Everyone wants to be a programmer and design their own web based startups. 1WD is your one stop resource for web design, programming, inspiration and everything else that’s related. So, we thought why not compile a one stop article for those who are beginning to learn coding. Without further ado, let us all learn how to program.

There is quite a bit of information in this article that you may find useful, I highly recommend bookmarking it for later reference.

Why do people want to learn how to program?

This is an interesting development actually, similar to when blogging started becoming popular. There was a chunk of people who wanted to start a blog of their own because it looked like anyone could do it. Similarly, these days there seems to be a rush towards non-programmers wanting to learn how to program.

What Language should I Learn?

There are so many different programming languages that sometimes it’s hard to figure out where to start. This is what I think:

  • Start with C.
  • Learn python.
  • I am a Ruby expert and I can tell you that Ruby is probably the easiest to learn. Learn Ruby to learn programming.
  • Go for Java. The world runs on Java!

How should I learn to Program

Programming, like everything else, is easy once you know what you’re do. You just need to start programming to learn how your language of choice works. Once you’ve made some mistakes and had some success it will start to come easier to you.

  • Programming is an art and there is no ‘right way’ to learn it - C, C#, C++, Java, Ruby and all other programming languages are tools that will teach you programming. They are just tools. So now, ask yourself how do artists become artists? Well, they just start painting or drawing whatever they are passionate about. At the end of the day the journey makes them the artists. So, start trying and stop thinking.
  • Got it, Sir! But, I still need to start somewhere, right? WHERE? - There will be a list of resources at the end of this article that you can use to start learning programming.
  • How long will it take me to become a ‘real’ programmer? - This isn’t a question I can answer. If you really want to be an expert then be rest assured that it’ll take at least a decade! If you think you’re going to be the next Mark Zuckerberg remember that Zuk started programming as a child. It even took him a decade to create something like Facebook.
  • ENOUGH! Which programming language? Tell me, NOW! - Any, really. I mean it. Write each language you’re interested in on a piece of paper, put them in a hat and start with whatever language you pull out. Trust me when I say that the core of all programming languages is the same. The syntax changes and that can be grasped in a couple of weeks. The most important thing about learning a programming language is to CODE. Don’t just read books and watch video tutorials. CODE the stuff yourself. Don’t copy the program and execute it as explained in those tutorials. Type the codes yourself and then execute them. Make changes in and do your own thing. Make sure that you have started to feel and understand those programs.

Now, how do I pick a project?

Actually, you should have an answer to this question. You have learned programming and now you want to create your own web application. Then why think? Just pick anything and DIY (Do It Yourself). Sound good? Go ahead, create a chess program in your programming language or a calculator. Just code something!

Resources that teach you how to code and learn a language

Enough talking. Let us all get rolling now. Here are some of the best resources that you can use to learn programming:

  • W3Schools - This was my go-to website while I was in school. It has been an amazing experience learning programming from W3Schools. They start from the basics, stick to basics and even the complex explanations on the website are pretty easy to understand. In short, it’s a perfect place to start learning programming.
  • Try RubyGot 15 minutes? Go, give Ruby a chance in those 15 minutes. The on-the-fly editor helps you learn Ruby in no time. At least it will introduce you to Ruby very quickly.
  • Code SchoolThis is another one stop website for those who want to learn programming. They are loaded with video based tutorials and on-the-fly coding tools that help you understand programming even when you know nothing about it.
  • Try Bloc - Another great member and teacher in the Ruby community.
  • Codecademy - Another site that is loaded with amazing and helpful information. It has been appreciated by its users and I know that it is worth it. One of the rare, interactive ways to pickup JavaScript.
  • jQuery Air - This tool helps you learn jQuery in the browser itself. This tool will help you learn jQuery in the most practical way. Don’t miss it.
  • Hackety - Well, they won’t actually teach you how to hack, but they will teach you how to program.
  • TeamTreeHouse - Team Tree House has received praise from around the planet and the Internet community for the amazing work they have been doing. Try them if you are beginning to learn any new programming language.
  • PHP Know HowYou didn’t think I’d forget about PHP did you? PHP is the language that WordPress relies on to function.
  • Lifehacker’s Learn to Code - Lifehacker has compiled an amazing article that teaches you the basics of coding. This article is a great starting point for anyone that wants to learn more about programming.

What  language should I start learning?

Gosh! How many times will I have to tell you this. ANY! Just check out any of the resources listed in this article and start learning how to program. Let me know if you found the resources beneficial.

July 02 2011

22:16

Chop: A cool new way to share code snippets

“Paste code snippets. Add notes. Send to nerds” ‘– ‘nough said.

September 30 2010

23:38

9 Ways to Instantly Code Faster


Doesn’t the title say it all? There are a wide variety of tools and techniques which can drastically improve the speed at which we code. Particularly during time-sensitive settings, even a savings of a few seconds per iteration can add up substantially over the course of the month. I’ll show you ten of my favorite methods in this article.


1. Zen Coding

Combine the power and specificity of CSS selectors with HTML mark-up, and you get Zen Coding. Certainly, I wasn’t the only one whose jaw dropped the first time he saw:

div#container>div#contents>ul#nav>li*4

…convert to:

<div id="container">
	<div id="contents">
		<ul id="nav">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

In this last year, the Zen Coding project has gained considerable attention, and has been expanded to support a wide variety of code editors, including Espresso, Vim, Netbeans, TextMate, and Komodo Edit.

“Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.”


2. Split Windows

For many, a simple tab-based coding experience is more than adequate; however, others prefer a more integrated approach. Unfortunately, the ability to split windows is not widely available across code editors. Luckily, though, a handful of them do support it at varying levels of flexibility (the king being Vim).

Vim

The excellent Vim editor offers an unprecedented level of window combinations. Use :sp and :vsp to create new windows from within normal mode.

Other editors which implement a multi-window functionality include:

3. Embrace Social Coding

In the last two years particularly, the idea of social coding has gained considerable popularity – and why wouldn’t it? If it’s fun to share photos on Flickr, the same will of course be true for coding. With site likes Envato’s recently purchased Snipplr, Github, or Forrst, not only can you manage your own snippets for future use, but you can also take advantage of multiple brains by receiving community feedback on your coding techniques and choices.

Snipplr

Envato recently purchased the popular Snipplr.com

Another social networking site? Yes, that is true; but, I must admit: it’s fun. Plus, it’s educational!


4. Code Management Tools

Online networks like Github, Snipplr, and Forrst are fantastic, however, they can be time consuming to access, when you need to reuse a specific piece of code (assuming it’s not already part of a bundle). The solution is to install one of the various code management applications available around the web.

Personally, as a Mac user, I prefer the not-free Snippets app.

Snippets App

With this tool, when I’m working on code, I can simply press, on the Mac, Command + F12 to insert my desired code snippet into my project. Even better, it integrates an “Export to Snipplr/Snipt/Pastie” feature that’s extremely useful.

Share with Snipplr

While many editors offer an integrated snippets utility, I’d recommend embracing a third party tool instead. This way, your snippets aren’t limited to a single editor.

What Sorts of Snippets Should I Save?

Everything you can think of! As a rule of thumb, if you tend to type some block of code more than once, save it. Let’s do an obvious one together; when producing a new website, how often do you type out the three lines or so to create rounded corners in the modern browsers?

#box {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

This takes around ten seconds to type each time. What a waste! Instead, create a new snippet, and reduce your coding time by 90%.

Alternate Options


5. Choose a Proper Editor

The Holy Grail of efficient coding; your choice of code editor will have the largest affect on your coding speed. Unfortunately, there isn’t a definitive answer. Your decision will largely be dependent upon:

  • Which languages you code in
  • Your OS
  • The type of UI you prefer
  • Comfort with the command line (or lack of)

As an example, someone who predominantly creates HTML themes for a site like ThemeForest would be unwise to use a full IDE like Aptana. It’s simply unnecessary and too slow. However, the same is not true for a server-side developer.

Questions to Ask Before Deciding on an Editor

  • How important is speed? Should the editor open nearly instantly?
  • Do I require integrated debugging tools?
  • Does this editor offer some form of bundle functionality?
  • How easy to memorize are the keyboard shortcuts?
  • Are my favorite extensions and plugins (like Zen Coding) available for this code editor?
  • Do I require integrated Git logging?
  • Am I okay with a GUI interface?
  • Do I prefer speed over visuals…or Vim over Coda?

When I asked myself these questions, I determined that speed and performance were paramount. As such, I currently use Vim, which is significantly daunting at first, but provides an unprecedented level of flexibility and speed, due to the fact that even traversing your page requires a language, of sorts. However, for larger projects, which require debugging, I use Netbeans.


6. Use Bundles

Bundles: learn them…use them. Editors, like TextMate — and, subsequently E Text Editor — popularized bundles; however, they’re widely available from editor to editor.

What’s So Great About Them?

How many times have you found yourself typing the same generic piece of mark-up or code, whether that might be a new function, or the structure of a new jQuery plugin. How much time are you wasting each time you repeat this process? This is where bundles come into play.

For example, by downloading the TextMate CodeIgniter bundle, we can take advantage of a wide array of methods and snippets. Remember – less typing is always a good thing!

CodeIgniter Bundle

With this bundle installed, we only need to type the designated shortcut, and then press tab (in most editors). This will then expand the shortcut into the requested code. What separates a bundle from a snippet is that you can specify multiple tab stops to further expedite your coding speed.

Vim Users: if you miss/envy the TextMate bundle feature, check out the SnipMate plugin.


7. Use LESS.js

Tools like LESS.js and Sass can drastically increase your coding speed. In terms of which one to choose: they’re both excellent. LESS.js is particularly impressive, though, because it runs 100% on the (wait for it…) browser’s JavaScript engine.

How Does it Work?

These tools allow for all of the features that you wish CSS had — such as variables and functions.

/*
Variables!
*/
@primary_color: green;

/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

#container {
/* References the variable we created above. */
	background: @primary_color;

/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
	.rounded(20px); 

/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
	a {
		color: red;
	}
}

Pro Tip: To make your browser update every time you save a file (very handy feature), use the watch method. Place the following at the bottom of your project. Of course, this assume that you’ve already setup LESS.js.

less.env = 'development';
less.watch();

LESS Compiler

Many might argue that it’s unsafe to use a JavaScript-based solution. But that’s okay; there are a handful of compilers available around the web. The best solution I was able to find is called LESS.app.

LESS APP

After you download it (free), you simply drag your project folder into the app, which instructs it to watch all .LESS files. At this point, you can continue working on your project, per usual. Every time you save, the compiler will run, which generates/updates an automatically created style.css file. When you’re finished developing your app, you only need to change your stylesheet references from style.less to style.css, accordingly. Easy! Now there’s no reason not to take advantage of LESS — unless you’re using a different solution, like Sass.

Generates CSS FIle

8. Prototype Early with Firebug

You know the drill: write a bit of JavaScript, switch and refresh your browser, receive an error, return to the editor…and rinse and repeat. Though we all do it, sometimes, there are far more efficient alternatives, such as protoyping early with tools like Firebug. By working directly in the browser, you cut out the middle man, so to speak.

The uber-talented Dave Ward recommended this tip, and has even created a screencast demonstrating this method.


9. Don’t Reinvent the Wheel

When first getting started in this field, I always took issue with comments like “Don’t reinvent the wheel.” It’s not about reinvention; it’s about understanding how the wheel functions. However, once you know the inner workings of the wheel, this argument certainly is true: Don’t Repeat Yourself.

Coding each new project from scratch is incredibly time consuming.

If you want to complete new projects as quickly as possible (and who doesn’t), save yourself some time, and take advantage of the various levels of abstractions that are available around the web. A handful of my favorites include:

  • HTML5 Boilerplate – Whether you choose to use this template in its entirety, or in bits and pieces, it doesn’t matter. Just use it! And while you’re at it, split the sections of code into snippets for reuse! Watch the official guide to Boilerplate on Nettuts+
  • CodeIgniter (PHP Framework) – For higher level PHP applications, the CodeIgniter framework is a fantastic choice. Even better, the community support is second to none. If you happen to be a visual learner, our CodeIgniter from Scratch series is, also, second to none. :)
  • 960 (CSS Framework) – If you require grid-like structures, both the 960 and Blueprint CSS frameworks are fantastic choices. They easily turn hours of work into a two minute process; and, if you’re worried about file bloat, you needn’t. That’s a ridiculous argument. Let us teach you how to use 960!
  • jQuery (JavaScript Library) – Does this one really require explanation at this point? Save yourself the headaches, and use it (that is, unless you’ve developed your own awesome library).

Conclusion

I’ll show you mine if you show me yours. Which tools and resources do you use to code faster?

September 21 2010

00:21

12 Top Cheat Sheets On The Web

The List of Helpful Cheat Sheets below contains a Cheat Sheet for CSS 3, CSS 2, Facebook Notes, Google Search, HTML 5, HTML, JavaScript, Java Syntax, jQuery 1.4.2, Photoshop Keyboard Shortcuts, PHP, and WordPress.

View and Vote


June 10 2010

21:00

25 Handy Tools To Paste And Share Your Code Snippets

Pastebins are web applications that allow users to upload snippets of text, usually samples of source code, for public viewing. They are used very often in IRC channels, social networking sites, blogs etc. Users can paste source codes in a pastebin and share the URL for others to view.

You can find a vast number of pastebins on the World Wide Web. Most of them have a common set of features. But some of them have added features that are better than the others. We bring you some of the best pastebin tools so that you can select the one that best suits your needs.

1. CodeTidy – This pastebin allows you to paste any snippets of text to a URL and easily share it with your friends. It also enables you to encrypt the code with a password so as to keep your code private. In addition to this, it also provides archiving and syntax highlighting.

CodeTidy

2. Ideone – Ideone is not just a patebin but also an online compiler and debugging tool. It allows you to compile and run the code online. It supports more than 40 programming languages. It also provides easy sharing features, archiving & syntax highlighting. However, it does not support password encryption.

Ideone

3. Pastebin.com – Pastebin.com enables you to host your texts and codes on dedicated servers for easy sharing. In addition to this, it enables you to determine the expiration date of the code, provides syntax highlighting & archiving and automatically assigns sub-domains. This pastebin too does not support password encryption.

Pastebin.com

4. Mystic Paste – Mystic Paste is an open source pastebin that enables easy sharing of your codes. It allows you to post your code on twitter and also comment on other pastes. It also provides multiple plugins and 3rd party tools.

Mystic Paste

5. TinyPaste – TinyPaste enables you to easily host your text & codes and also earn money from your pastes. It pays you for every unique user that visits your paste. It enables password encryption, syntax highlighting, archiving and also sub-domains. It also enables you to compile the code. TinyPaste provides an API and certain 3rd party tools.

TinyPaste

6. Paste HTML – Paste HTML enables you to paste HTML code, Plain text as well as Markdown. It can be used as an anonymous web host to host HTML pages. This pastebin is specially designed for HTML codes.

Paste HTML

7. codepad – codepad is an online compiler that enables you to run your code as well as share it with your friends. It provides syntax highlighting and also enables you to keep your code private. However, it does not support password encryption. It currently supports 13 major programming languages.

codepad

8. MathBin – MathBin enables you to quickly post mathematical equations. It uses simple LaTeX formatting to render your equation as images. This tool comes in handy for quickly posting mathematics and physics problems for others to view.

MathBin

9. Snipplr – Snipplr is a public source code repository that enables you to store and share your code snippets. It allows syntax highlighting as well as archiving. You must register with Snipplr to start pasting your code snippets.

Snipplr

10. Code Upload – Code Upload is a free and open source pastebin to share your code with others. Some of it’s features include syntax highlighting, archiving and password protection.

11. PASTE – PASTE enables you to paste your source codes and general debugging text. It allows you to specify the expiration time for the code and also set password for your pastes.

Paste

12. Gist – GitHub – Gist is a simple way to share snippets and pastes with others. Among its various features are syntax highlighting, archiving, private pastes etc. All Gists (pastes) are automatically versioned, forkable and usable as a git repository.

Gist - GitHub

13. Codetrunk – Codetrunk is an open source snippet sharing tool. Codetrunk enables syntax highlighting, commenting, revising and archiving. It automatically creates sub-domains for each pastes (trunks).

Codetrunk

14. PasteSite – PasteSite enables you to submit snippets of code which can then be viewed from the website with syntax highlighting. PasteSite enables you to keep your pastes private and also protect it with a password. It also enables you to sign up so as to keep track and also delete your pastes.

PasteSite

15. pzt.me – pzt.me is a multi-purpose pastebin for sharing snippets of text, images, videos and URL’s over miscellaneous sharing and micro blogging media. It enables you to embed videos from popular video streaming sites like YouTube, DailyMotion,Vimeo etc. It can also be used as a URL shortener.

16. Snipt.org – Snipt provides you an easy way to share your source code on micro blogging sites like twitter. Some of it’s features include syntax highlighting, archiving and private snipts. Snipt Box enables you to retrieve your snipts by simply using your twitter username.

Snipt

17. Clippy – Clippy is a free NoPaste service that provides you with various features such as password protection, syntax highlighting, antispam filters and sub-domains. It currently supports more than 50 programming languages.

18. bin.z80.us – This is an extremely basic implementation of a pastebin. It is very simple and easy-to-use. The interface contains only a text box and a paste button.

bin.z80.us

19. dpaste – dpaste is a tool for quickly sharing pieces of code with multiple people. It was originally created by Django programmers to use on the #django IRC channel. It provides syntax highlighting and archiving. However, it supports only a few programming languages.

dpaste

20. Slexy – Slexy is a powerful and slick pastebin designed with the user in mind. It allows you to add tabs within pastes, save preferences and paste via CLI/terminal (using PastebinIt). It also enables you to set the paste expiration, highlight the code syntax and make your pastes private.

Slexy

21. Paste-It – Paste-It is a simple and easy-to-use pastebin. Some of it’s features are private pastes, paste expiration time and syntax highlighting. It also provides Firefox and Chrome plugins for easy pasting.

Paste-It

22. PasteBin.BJETDesign.com – This is another simple and easy-to-use pastebin. It is similar to bin.z80.us. It has a simple interface. However, this pastebin provides an additional feature of syntax highlighting compared to bin.80.us.

PasteBin.BjetDesign.com

23. YourPaste – YourPaste enables you to paste texts, quotes and programming codes. It enables you to highlight the code syntax, make private posts and also set the expiration time.

24. pastebin.ca – pastebin.ca is an open source pastebin tool. It enables you to paste and share your code easily. Some of it’s features include code syntax highlighting, archiving, password protection and sub-domains. It also enables you to set the expiration time and comment on pastes.

25. Pastie – Pastie is another pastebin with the most common pastebin features like syntax highlighting, archiving and private posts. It supports most of the major programming languages.

Pastie

December 15 2009

06:06

20+ Tools for Quick and Clean Code Development

Developing websites is much more than just a pretty face, and depending on what typed of features you’d like to implement on the site, there’s a lot of coding that goes into it. Many times designers turn to a WYSIWYG tool, however tools of that sort are more limited to advanced code. Being able to code a site using a variety of tools lets you simplify the coding process while you take a big bite out of saving time.

Below we’ve hand picked 20+ Tools for Quick & Clean Code Development that will help you code much faster and in an efficient manner.

AJAX

MiniAjax

MiniAjax is pretty much a large collection of downloadable AJAX scripts, for customization on your site. Most of these scripts are configurable, and guide you through the implementation.

Clean AJAX

Clean AJAX provides a high level interface to work with the AJAX technology. It’s created to solve problems found in AJAX applications. This tool will save you time and help you fix and tidy up your code.

Rialto

The Rich Internet Application Toolkit (Rialto) is an ajax-based cross browser library with lots of widgets. Rialto gives you quick and easy access to rich internet application development. As a developer, you’ll virtually need no understanding of DHTML, Ajax or DOM code.

ThinWire

ThinWire is mostly driven by an open source development framework that allows you to build applications for the web that have usable and interactive user interfaces. You’ll be able to complete projects at a fraction of the time, all while handling the view-layer of your Java EE (J2EE) applications.

AjaxDaddy

AjaxDaddy is a resource site filled with useful and time-saving AJAX scripts for your website. You can find anything from slide shows to customized feeds.

JavaScript

jQuery UI

With jQuery UI you’ll be able to design custom user interfaces for a number of web applications utilizing the jQuery library. This nifty tool lets you substantially cut-back on the amount of code you would need to write. You should also scroll to the demo page for some nice examples.

Venkman JavaScript Debugger

Venkman happens to be Mozilla’s JavaScript debugger, and it is a fully servicing debugging environment. It comes with numerous features and specialized options for the inspection of how well your script interacts and performs.

SproutCore

SproutCore is a framework that helps you build applications in JavaScript with little amounts of code. Best of all you won’t need any plugins, and they will work with any of the modern-browsers.

SimpleJS

SimpleJS is a lightweight JavaScript library that gives developers useful JavaScript functions when working with AJAX.

CSS

List-O-Matic

List-O-Matic lets you create CSS-styled navigation menus based on list items.

Blue Print CSS

Blueprint CSS, a framework that helps you save time by cutting down your CSS development time. You’ll be backed by a solid CSS foundation letting you build your project, organized grid, and more.

CSS Compressor

CSS Compressor allows you to easily compress your CSS code to increase loading speed and save on bandwidth. There are different levels of compression for you to choose from, this depends on the size of your code, and your desired load time.

Clean CSS

Clean CSS optimizes and formats your code and makes it much cleaner and more organized. Your CSS will be clutter-free.

CSS Color Chart

The CSS Color Chart page contains a neutral colors chart and a general-purpose color chart. The colors are compatible with CSS and HTML. You can copy in which ever format you desire, all you need to do is hit the toggle button and it will convert from Hex to RGB and back. This is ideal for designers that practice color-theory in depth, and use a lot of colors in their layouts.

HTML

BBEdit

BBEdit is an HTML and text editor for the Mac OS X. It was specifically designed for web designers and coders that want efficient editing, and text manipulation.

XHTML Markup Generator

Markup Generator is a simple and effective tool that takes the slicing out of having to slice your own work from the very beginning. You’ll be able to produce standard XHTML markup along with a CSS frame that’ll let you style your elements.

HTML CheatSheet

This is a pretty extensive and easy to read cheatsheet for HTML code.

HTML Entity Character Lookup

With this app you’ll quickly find an entity or tag based on how it looks. Save time by not having to visit another site to lookup a tag, or needing to remember its function.

PHP

CakePHP

CakePHP is a solid development framework for PHP that empowers you with a useful architecture for developing, and maintaining your apps.

XDebug

Xdebug is an extension for PHP that helps you debug scripts. Useful features include warnings, and error messages that are displayed after activation. If there’s a script that fails to prperly work, Xdebug will print an error message, along with function names, parameter values, source files, and line more.

SimpleTest

PHP_CodeSniffer is a PHP 5 script that vigorously detects conformance to a predefined PHP coding standard. It’s specially helpful on large projects, and for keeping uniform coding styles.

Pixy: PHP Security Scanner

Pixy is a Java program that performs automatic scans of PHP 4 source code, aimed to detect XSS and SQL injection vulnerabilities. Pixy takes a PHP program as input and creates a report that lists possible vulnerable points in the program, along with additional information for understanding the vulnerability.

About the Author

Joel ReyesJoel Reyes is a web designer and web developer with years of experience in the industry. He runs a development studio called Looney Designer. Connect with him via Twitter, and through his Blog.

December 09 2009

07:06

Top 15+ Best Practices for Writing Super Readable Code

Code readability is a universal subject in the world of computer programming. It’s one of the first things we learn as developers. Readable and maintainable code is something to be proud of in a finished product. We can share it with others, contribute to other projects, and reuse code from applications we wrote months or even years ago.

This article will detail the fifteen most important best practices when writing readable code.

1. Commenting & Documentation

IDE’s (Integrated Development Environment) have come a long way in the past few years. This made commenting your code more useful than ever. Following certain standards in your comments allow IDE’s and other tools to utilize them in different ways.

Take this example:

The comments I added at the function definition can be previewed whenever I use that function, even from other files.

Here is another example where I call a function from a third party library:

In these particular examples, the type of commenting (or documentation) used is based on PHPDoc and the IDE is Aptana.

2. Consistent Indentation

I assume you already know that you should indent your code. However, it’s also worth noting that it is a good idea to keep your indentation style consistent.

There are more than one way of indenting code.

Style 1:

function foo() {
	if ($maybe) {
		do_it_now();
		again();
	} else {
		abort_mission();
	}
	finalize();
}

Style 2:

function foo()
{
	if ($maybe)
	{
		do_it_now();
		again();
	}
	else
	{
		abort_mission();
	}
	finalize();
}

Style 3:

function foo()
{	if ($maybe)
	{	do_it_now();
		again();
	}
	else
	{	abort_mission();
	}
	finalize();
}

I used to code in style #2 but recently switched to #1. But that is only a matter of preference. There is no “best” style that everyone should be following. Actually, the best style, is a consistent style. If you are part of a team or if you are contributing code to a project, you should follow the existing style that is being used in that project.

The indentation styles are not always completely distinct from each other. Sometimes they mix different rules. For example, in PEAR Coding Standards, the opening bracket “{” goes on the same line as control structures, but they go to the next line after function definitions.

PEAR Style:

function foo()
{                     // placed on the next line
    if ($maybe) {     // placed on the same line
        do_it_now();
        again();
    } else {
        abort_mission();
    }
    finalize();
}

Also note that they are using four spaces instead of tabs for indentations.

Here is a Wikipedia article with samples of different indent styles.

3. Avoid Obvious Comments

Commenting the code is great; however, it can be overdone or just be plain redundant. Take this example:

// get the country code
$country_code = get_country_code($_SERVER['REMOTE_ADDR']);

// if country code is US
if ($country_code == 'US') {

	// display the form input for state
	echo form_input_state();
}

When the text is that obvious, it’s really not productive to repeat it within comments.

If you really must comment on that code, you can just combine it to a single line instead:

// display state selection for US users
$country_code = get_country_code($_SERVER['REMOTE_ADDR']);
if ($country_code == 'US') {
	echo form_input_state();
}

4. Code Grouping

More often than not, certain tasks take a few lines of code. It is a good idea to keep these tasks within separate blocks of code, with some spaces between them.

Here is a simplified example:


// get list of forums
$forums = array();
$r = mysql_query("SELECT id, name, description FROM forums");
while ($d = mysql_fetch_assoc($r)) {
	$forums []= $d;
}

// load the templates
load_template('header');
load_template('forum_list',$forums);
load_template('footer');

Adding a line of comment at the beginning of each block of code also emphasizes the visual separation.

5. Consistent Naming Scheme

PHP itself is sometimes guilty of not following consistent naming schemes:

  • strpos() vs. str_split()
  • imagetypes() vs. image_type_to_extension()

First of all, the names should have word boundaries. There are two popular options:

  • camelCase: First letter of each word is capitalized, except the first word.
  • underscores: Underscores between words, like: mysql_real_escape_string().

Having different options creates a situation similar to the indent styles, as I mentioned earlier. If an existing project follows a certain convention, you should go with that. Also, some language platforms tend to use a certain naming scheme. For instance, in Java, most code will be using camelCase names, while in PHP, most code will use underscores.

These can be also mixed. Some people prefer to use underscores for procedural functions, and class names, but use camelCase for class method names:

class Foo_Bar {

	public function someDummyMethod() {

	}

}

function procedural_function_name() {

}

So again, there is no obvious “best” style, besides just being consistent.

6. DRY Principle

DRY stands for Don’t Repeat Yourself. Also known as DIE: Duplication is Evil.

The principle states:

“Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.”

The purpose for most applications (or computers in general) is to automate repetitive tasks. This principle should be maintained in all code, even web applications. The same piece of code should not be repeated over and over again.

For example, most web applications consist of many pages. It’s highly likely that these pages will contain common elements. Headers and footers are usually best candidates for this. It’s not a good idea to keep copy pasting these headers and footers into every page. Here is Jeffrey Way explaining how to create templates in CodeIgniter.

$this->load->view('includes/header');

$this->load->view($main_content);

$this->load->view('includes/footer');

7. Avoid Deep Nesting

Too many levels of nesting can make code harder to read and follow.

function do_stuff() {

// ...

	if (is_writable($folder)) {

		if ($fp = fopen($file_path,'w')) {

			if ($stuff = get_some_stuff()) {

				if (fwrite($fp,$stuff)) {

					// ...

				} else {
					return false;
				}
			} else {
				return false;
			}
		} else {
			return false;
		}
	} else {
		return false;
	}
}

For the sake of readability, it is usually possible to make changes to your code to reduce the level of nesting:

function do_stuff() {

// ...

	if (!is_writable($folder)) {
		return false;
	}

	if (!$fp = fopen($file_path,'w')) {
		return false;
	}

	if (!$stuff = get_some_stuff()) {
		return false;
	}

	if (fwrite($fp,$stuff)) {
		// ...
	} else {
		return false;
	}
}

8. Limit Line Length

Our eyes are more comfortable with reading tall and narrow columns of text. That’s the reason newspaper articles look like this:

It is a good practice to avoid writing very long lines of code.


// bad
$my_email->set_from('test@email.com')->add_to('programming@gmail.com')->set_subject('Methods Chained')->set_body('Some long message')->send();

// good
$my_email
	->set_from('test@email.com')
	->add_to('programming@gmail.com')
	->set_subject('Methods Chained')
	->set_body('Some long message')
	->send();

// bad
$query = "SELECT id, username, first_name, last_name, status FROM users LEFT JOIN user_posts USING(users.id, user_posts.user_id) WHERE post_id = '123'";

// good
$query = "SELECT id, username, first_name, last_name, status
	FROM users
	LEFT JOIN user_posts USING(users.id, user_posts.user_id)
	WHERE post_id = '123'";

If you follow the “Avoid Deep Nesting” suggestion, that will also help the line lengths to stay at a reasonable size.

Also, if anyone is going to read the code from a terminal window, such as VI users, it is a good idea to to limit the line length to around 80 characters.

9. File and Folder Organization

Technically, you could write an entire application code into a single file. But that could be a nightmare to read and maintain.

During my first programming projects, I knew about the idea of creating “include files”. However I was still not even remotely organized. I created an “inc” folder, with 2 files in it: db.php and functions.php. As the applications grew, the functions file also became huge and unmaintainable.

One of the best approaches is to either use a framework or imitate their folder structure. Here is what CodeIgniter looks like:

10. Consistent Temporary Names

Normally, the variables should be descriptive and contain one or more words. But, this doesn’t necessarily apply to temporary variables. They can be as short as a single character.

It is a good practice to use consistent names for your temporary variables that have the same kind of role. Here are a few examples that I tend use in my code:


// $i for loop counters
for ($i = 0; $i < 100; $i++) {

	// $j for the nested loop counters
	for ($j = 0; $j < 100; $j++) {

	}
}

// $ret for return variables
function foo() {
	$ret['bar'] = get_bar();
	$ret['stuff'] = get_stuff();

	return $ret;
}

// $k and $v in foreach
foreach ($some_array as $k => $v) {

}

// $q, $r and $d for mysql
$q = "SELECT * FROM table";
$r = mysql_query($q);
while ($d = mysql_fetch_assocr($r)) {

}

// $fp for file pointers
$fp = fopen('file.txt','w');

11. Capitalize SQL Special Words

Database interaction is a big part of most web applications. If you are writing raw SQL queries, it is a good idea to keep them readable as well.

Even though SQL special words and function names are case insensitive, it is common practice to capitalize them to distinguish them from your table and column names.

SELECT id, username FROM user;

UPDATE user SET last_login = NOW()
WHERE id = '123'

SELECT id, username FROM user u
LEFT JOIN user_address ua ON(u.id = ua.user_id)
WHERE ua.state = 'NY'
GROUP BY u.id
ORDER BY u.username
LIMIT 0,20

12. Separation of Code and Data

This is another principle that applies to almost all programming languages in all environments. In the case of web development, the “data” usually implies HTML output.

When PHP first came out many years ago, it was mainly seen as a template engine. It was common to have big HTML files with a few lines of PHP code in between. However, things have changed over the years and websites became more and more dynamic and functional. The code is now a huge part of web applications, and it is no longer a good practice to combine it with the HTML.

You can either apply the principle to your application by yourself, or you can use a third party tool (template engines, frameworks or CMS’s) and follow their conventions.

Popular PHP Frameworks:

Popular Template Engines:

Popular Content Management Systems

13. Alternate Syntax Inside Templates

You may choose not to use a fancy template engine, and just go with plain inline PHP in your template files. This does not necessarily violate the “Separation of Code and Data,” as long as the inline code is directly related to the output, and is readable. In this case you should consider using the alternate syntax for control structures.

Here is an example:

<div class="user_controls">
	<?php if ($user = Current_User::user()): ?>
		Hello, <em><?php echo $user->username; ?></em> <br/>
		<?php echo anchor('logout', 'Logout'); ?>
	<?php else: ?>
		<?php echo anchor('login','Login'); ?> |
		<?php echo anchor('signup', 'Register'); ?>
	<?php endif; ?>
</div>

<h1>My Message Board</h1>

<?php foreach($categories as $category): ?>

	<div class="category">

		<h2><?php echo $category->title; ?></h2>

		<?php foreach($category->Forums as $forum): ?>

			<div class="forum">

				<h3>
					<?php echo anchor('forums/'.$forum->id, $forum->title) ?>
					(<?php echo $forum->Threads->count(); ?> threads)
				</h3>

				<div class="description">
					<?php echo $forum->description; ?>
				</div>

			</div>

		<?php endforeach; ?>

	</div>

<?php endforeach; ?>

This lets you avoid lots of curly braces. Also, the code looks and feels similar to the way HTML is structured and indented.

14. Object Oriented vs. Procedural

Object oriented programming can help you create well structured code. But that does not mean you need to abandon procedural programming completely. Actually creating a mix of both styles can be good.

Objects should be used for representing data, usually residing in a database.

class User {

	public $username;
	public $first_name;
	public $last_name;
	public $email;

	public function __construct() {
		// ...
	}

	public function create() {
		// ...
	}

	public function save() {
		// ...
	}

	public function delete() {
		// ...
	}

}

Procedural functions may be used for specific tasks that can be performed independently.

function capitalize($string) {

	$ret = strtoupper($string[0]);
	$ret .= strtolower(substr($string,1));
	return $ret;

}

15. Read Open Source Code

Open Source projects are almost always built with collaboration between many developers. These projects need to maintain a good level of code readability so that the team can work together as efficiently as possible. Therefore, it is a good idea to sometimes browse through the source code of these projects to observe what these developers are doing.

16. Code Refactoring

Refactoring means to make changes to the code without changing any of its functionality. You can think of it like a “clean up,” for the sake of improving readability and quality.

This doesn’t include bug fixes or addition of any new functionality. You may refactor code that you have written the day before, while it’s still fresh in your head, so that it is more readable and reusable when you may potentially look at it two months from now. Therefore, usually the motto is: “refactor early, refactor often.”

You may apply any of the “best practices” of code readability during the refactoring process.

I hope you enjoyed this article! Any that I missed? Let me know via the comments.



Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...