The world of fantasy sci-fi has always been one of awe. Maybe it’s the idea of a new land on a foreign planet, or the spaceships and beautiful weaponry, or it could even be that this is the utopia everyone is looking for, waiting for. No matter what your fascination with the realm of science fiction is, we share your love and to prove that, here is an amazing Sci-fi-themed Wallpaper Wednesday.

Bask in the majestic skylines of these faraway cities in planets alien than that of our own. Better yet, put one on your desktop so you can hide away from the worries of the day in your own beautiful world of science fiction.

Read Also: 36 Epic Looking Sci-Fi Artworks

Monument. Available in the following size(s): 1024×768, 1280×960, 1440×900, 1600×1000, 1600×1200, 1680×1050, 1920×1200.

Future Horizon. Available in various sizes.

Hills City. Available in 1280×960.

Abandon City. Available in 1200×676.

Sci-Fi City. Available in 1600×826.

Sci-Fi Metropolis. Available in 2560×1440.

Gates To Elysium. Available in 1680×1050.

The Gates. Available in 1680×1050.

Spaceship. Available in 1920×1200.

Hidden City. Available in 1920×1080.

Village Attack. Available in 4500×3000.

Friendly Sun WV. Available in 1152×864.

Back To The Great City. Available in 1920×1108.

Concept Irontown. Available in 1200×675.

ELYSIA. Available in 1650×1050.

Eman WP. Available in 1600×1200.

Sunset. Available in 2301×984.

The Cascade Depature. Available in 1600×933.

View Over Coreign. Available in 1280×960.

It’s May. Happy Labour’s Day. And it’s time for another round of fresh resources for my fellow designers and developers.

This month’s compilation include some fun plugins and tools, like one for constructing responsive website with GUI, one for creating disposable avatars, and one that allow you to write CSS in British English. And if you like Bootstrap, check out the Bookstrap Expo for new ideas and inspiration.

For more fresh resources (according to month):

• October 2012
• November 2012
• December 2012
• January 2013
• February 2013
• March 2013
• April 2013

SuperheroJS

There are countless of documentations, articles, and tutorials about JavaScript on the Internet. Finding one that is the best fit for your skill level could be really time consuming. Don’t worry, SuperHeroJS is here. It’s a collection of JavaScript resources, from articles, JS troublehoot, best practices, and videos — for beginners and for seasoned developers.

Adobe Edge Reflow

If you find coding responsive website through a code editor annoying, I think Adobe Edge Reflow could help you out. Adobe Edge Reflow might be similar to other Web editors, but it is also packed with several special components to build responsive websites in a new way, by using GUI.

Bootstrap Expo

Web designers rely on inspiration to keep working. And the “inspiration” can be found anywhere including other’s people website. If you build a website on top of Bootstrap, then Bootstrap Expo is one of the sites to visit. The list is curated by Bootstrap’s author, and lists only the best implementations of the framework.

My Styles

We technically are able to change webpage styles without affecting the actual stylesheet through a developer tool like Firebug. But, once we refresh the webpage, the styles reverts to the original. In the case when you want to make your changes permanent on that webpage, you can install this extension, called My Styles, in your Chrome.

Sassaparilla

Sassaparilla, to me it sounds like pasta, but it is actually reusable style rules for building (responsive) websites, built on top of Sass and Compass functions. That said, if you have been using Sass or Compass, I think you would be familiar with it fairly quickly. With a focus on typography, Sassaparilla includes a set of style rules that make your website paragraphs, font size, line height, as well as spacing and kerning in the right size.

WP Fill

When building a WordPress theme, we have to ensure that the elements within our posts and pages are displayed correctly. For this reason, we need some dummy text to fill in the post. If you prefer, you can write it on your own. Or you can use WP Fill to generate the whole content or only the particular elements that you only need.

LESS Hat

LESS Hat is collection of resuable LESS mixins. LESS Hat takes the library further by including a set of Mixins that are not included in similar resources. It includes some cutting-edge CSS3 features into the libraries such as Keyframes, Animation, Backface Visibility, and Background Origin so that we can write (the syntax) less.

In practice, we need vendor prefix for some experimental CSS features. Using LESS hat you can specify whether it should include or exclude particular prefix by using this variable.

 @w3c: true; // Unprefixed W3C syntax @webkit: true; // Chrome 7+, Safari 5+, iOS5, Android @moz: true; // Firefox 4+ @opera: true; // Opera 10.5+ @ms: true; // IE 10+ @oldWebkit: true; // iOS4, Safari 4, Chrome < 6. 

UI Faces

Nowadays, it is common practice to display a user picture or avatar on our sites and apps. UI Faces is a handy tool to generate avatar pictures in your design mockup. You can set the border radius of the avatar, and the size. Then, download the ones that you need.

Responsive Nav

Responsive Nav is a lightweight JavaScript library that turns your web navigation into a toggle navigation in a small viewport size, a popular practice today. This plugin works independently, and does not require a third-party JS library like jQuery.

FESS.me

FESS or Fat Expanded Style Sheet is a tool to expand your CSS shorthand property into an individual property. So, border property will be translated into border-left, border-right, border-top, and border-bottom. This is a nifty tool if you, somehow, charge your client in per line of code. The more code lines, the more you will get paid.

Spiffing CSS

CSS language is built using US English vocabularies. Spiffing CSS is an entertaining tool to turn the way you write CSS, as it allows you to write your CSS in British English.

For example:

 p { text-align: centre; text-transform: capitalise; } .class { colour: grey; background-photograph: url('img/photograph.jpg') !please; transparency: .5; } 

Here’s a fun infographic designed in the style of an the old arcade game, Space Invaders, called Website Invaders. Heart Internet has put together an infographic that pits the security features we put into our PC with what we do with our data online. We revisit the importance of anti-virus software which we religiously install into our computers, but never really think about when it comes to website applications. And perhaps it’s time we start.

Check out the most lethal of viruses that has ever spelled the death of personal computers worldwide, the top five most common website passwords that Internet users use, some interesting (and disturbing) facts on phishing as well as a few tips on how to handle backups.

For more infographics on hongkiat.com, click here.