Who wants to do tedious things when there are already made or automated for you? There are many useful resources, templates, and websites that can save a developer a lot of time when developing a website. I use these tools constantly during development to fill up some temporary content to test out spacing, or fill up a wordpress theme so that everything won’t be missed when coding the blockquotes, the heading tags, and so forth.
I gave out quite a few web resources that are almost pivotal to web development these days. They save so much time, and gives us a better hold and control on how we create websites in today’s world. Here are more tools and resources that will help your web development faster, efficient, and can I say more fun?
Like most developers, we all come to the point where we have to go through the mock-up templates or open up Photoshop to create some placeholder images so that we can see how the website design looks with some images. I don’t know how much time I had to load up a whole new program just to make a blank image that fits a certain size so that I can upload it and then implement it into the website. Well, that portion of time is now saved by this really creative site (great minimalist design as well). Placehold.it is a site where you can simply put dimensions at the end and voila, you have yourself a placeholder image to place on your site.
There are obviously similar sites to Placehold.it but I find this one the most aesthetically pleasing in addition to a very easy name to remember without having to bookmark it.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,
If you haven’t seen this, then it’s time to get with the times. Lorem Ipsum is simply dummy text that designers and developer use to also placehold some content to fill the page rather than putting a bland “Content Here” or “Coming Soon“. You’ll never know how real content looks until you start having lots of it. So instead of trying to write a few paragraphs, you can simply generate paragraphs of these “Lorem Ipsum” text with the following generators. One is plugin through Firefox and the other is a simple site that generates it.
The add-on for Mozilla Firefox is pretty simple to use. You click on the button and you generate how many paragraphs you want and copy/paste it to your website.
This site is also a pretty good site for generating text since it doesn’t only provide just “Lorem ipsum” but also other content filling ways in case you think the Latin language of Lorem Ipsum seems dull or intimidating.
So you’re creating a WordPress Theme but can’t be bothered with making pages, categories, tags, posts, and testing out the different tags like headings and blockquotes? Using WordPress dummy content can help with that. All you do is download the XML file and then go to your WordPress Admin and click on the Tools section and finally Import. You want to click on “WordPress” to import posts, comments, and attachments from another WordPress file. There’s also a plugin for this that you can use to do the same. Either way, your wordpress site will be filled with content so you can start styling and making sure you don’t miss a thing.
You’re at a point of development where you’re doing the same thing over and over–Declaring your doctype, resetting your CSS margins and padding, or creating a 2 column website, etc… It’s time for you to use a framework. Frameworks are basically premade files that has common and tedious coding already inputted. When you use a framework, you’ll be immediately jumping into styling your website or coding in extra functions. You have to be careful though because some frameworks may not be suited for you. In my experience, I’ve used plenty of frameworks, and 50% of the time, the framework was just too much for me at times. There’s nothing wrong with that, but sometimes there are things in a framework that most developers don’t really need.
The best way to combat this is to make your own. I’m currently making a wordpress framework for myself that’s simple to use but at the same time has the functions I need to make the rest of my sites. Although all frameworks may not be for everyone, there’s usually one or two that fits into your field, and if there isn’t, take a framework and perhaps modify it to make your own. (Of course, take into consideration the licenses involved if you decide to release it to the public).
Here are some of my favorite frameworks for various projects:
I’ve only used 2-3 frameworks for WordPress in my career and I have to say that all of them have been proven useful. Here’s my list of my favorites:
Thematic is my most favorite theme that has the most features and functions built into it. There’s a lot of magic going around in the back coding of the Thematic framework. There’s hooks and actions that you can use to add anything to your theme. In fact, this very site right here is built on thematic. Although it’s very simple, I had no problem using the framework to add everything on here from “Post thumbnails” to “Adding an extra footer widget“. By knowing a little php, you can do a lot of things, and with ease. It was also convenient that the framework also included Superfish dropdown menus as well.
Whiteboard is for coders that just needs a basic theme without all the extra stuff so that they can implement what they exactly want in the theme without spending a lot of time removing the fat off from heavily coded frameworks. Whiteboard was created by Brian Purkiss to provide a basic php framework because it was tedious to continuously make all the template files that was needed for WordPress over and over again. My current framework is actually made from Whiteboard framework since I wanted to build upon a simple framework so I could fully understand what’s in WordPress and what I can do to change it to what I want.
CSS frameworks have been very popular lately. They provide premade grids and classes that help layout the structure of the website and all you have to do is fiddle around with the sizes, images, and colors. Have I used a CSS Framework? To be honest, I haven’t used one because I’ve always become accustomed to just using my own or just type the CSS from scratch in addition, I found it more time consuming trying to learn a new framework for CSS when I’m already familiar with my coding. However, it doesn’t mean they aren’t useful or time saving. Check them out and see if they fit for you or not.
Here’s a link to a good blog post about frameworks: Top 12 CSS Frameworks and How to Understand Them
Now aside from actual frameworks for CSS there’s another type of CSS build that many developers use. It’s called a “CSS Reset“. A CSS Reset sheet is basically a file or can be code that basically resets all the styles of common HTML tags for all browsers. Every browser has a different default styling of simple tags like the paragraph tag or a DIV tag. The main differences are usually the margin and paddings that’s attached to them. In order to make sure that all browsers renders your website the same (or close to it), a CSS Reset is used to default everything “0″ and you can start giving numbers from there.
My most preferred CSS Reset is Eric Meyer’s CSS Reset. It’s simple, effective, and covers pretty much every tag for HTML.
There are lots of useful things out in the internet world that can help you save time with your development so you can get your jobs done quicker and save extra work. Why do extra work when you can automate it or find a resource that’s already premade? If there really isn’t nothing out there for you to use as a basis, then take a day off and create a framework or automated tool for yourself such as creating a photoshop action to crop all your big images or creating your own wordpress theme for faster development.
With these tools, I hope you can save yourself some time in which can be used to probably procrastinate more or simply rest and sleep for all those late nights you’ve stayed up to finish a project.
Have any time-saving tools that you like to use or made yourself? Give me a link in the comments below and I’ll check it out.
Categories »Resources Web Design
Tagged » css html Resources web design web programming