Randomize background of a webpage

Suppose that you have a landing page (or just a cool background) and you have some many versions of it, and all so beautiful, that you can’t decide which one to show. Some kind of weird solution is to show them all in a random manner.

If you wish to achieve something similar to this then all you need is a really short piece of HTML, JavaScript and CSS. All can be put to a single file.

Since I like a clean and easy solution, this one use pure-JavaScript. No jQuery stuff etc. included.

Read More “Randomize background of a webpage”

Full-screen vertically and horizontally centered text in CSS

This is as easily as adding one single div:

<div class="css-vh-center">
    Hello World <br />
    Hello World <br />
    Hello World <br />
</div>

and styling it properly:

.css-vh-center {
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

All the glory goes to this Stack Overflow answer.

Note that this is not using flex-box solution (see the above linked answer for details), so should work even in older pre-IE8 browsers.

Read More “Full-screen vertically and horizontally centered text in CSS”

A link to the same URL with a different port

Let’s say, that you need to make a <a href=""></a> link, that will point you to the very same URL (as page, in which have this link), but to a different port. Even though there are no reasons for not implementing support for links like <a href=":8080">jump</a>, as of writing this, such support is not implemented in any known browser. And thus, neither this link work nor pure-HTML solution is available.

You must hire Javascript to resolve this problem.

Read More “A link to the same URL with a different port”

Make a webpage looking like terminal or command-line

So, you’d like to make a webpage that looks like terminal or command-line, right?

With a little bit of HTML, CSS and Javascript, it is as easy as snapping a finger. Note, that I underlined “looks like”, because we’re going to do just a look & feel. This will not be a full-blown command line interpreter, where you can enter commands and get results. It will only be a simple, cool-looking… thing.

This article is a slight port of the code that can be found at fludotlove.com (done by Nathan Marshall).

Read More “Make a webpage looking like terminal or command-line”

List of all countries in the world, split by continent

Here is the list of 197 countries in the world, split by five continents, put as simple, not formatted list (for future use as data for some form or selection) and as HTML code.

Note, that this list contains only “full featured” countries, without any dependent territories, special municipalities, incorporated territories etc. So, you won’t find here many of the Oceania’s or Antarctic islands. Also very small, Caribbean-based dependent territories are not listed here.

Note also, that this list contains both North America’s and South’s America’s contries put together.

Read More “List of all countries in the world, split by continent”

Use your custom TTF font cross-browser

I had some troubles with Font Awesome library and found solution for them in this Stack Overflow answer.

It also contains links to on-line services for converting .ttf files (officially supported in CSS3 only) to .eot, .svg and optionally to .woff, to make your TTF font supported in a large variety of web browsers:

After conversion use CSS styles as in mentioned answer to get all things working together.

Add sounds and speach to your website or application

Most websites are developed without sounds and if there are any sounds inside then they’re most likely coming from some videos and they’re not single click-like or notification-like sounds, known very well from desktop applications. The same goes for many mobile application, as sounds are mostly found in mobile games.

But, if you do need something like click sound, tick sound or any notification-like short sound, then this article lists some most famous, yet free sites, from where you can get as many such sounds as you need.

No code here, sorry! Refer to other sources on how to embed sound within website or mobile application.

Read More “Add sounds and speach to your website or application”

Every HTML 5 tag can be used as reference

Remember, that every HTML 5 tag can have id and can be used as reference. Every one!

So, if you want to display some bolded value, then instead of writing:

<span>Cars: <span id="carsValue" style="font-weight: bold"></span></span>

you can use much simpler approach of:

<span>Cars: <strong id="carsValue"></strong></span>

Getting root path in Javascript files included in Yii application

A server-side root path in client-side Javascript code? Are you mad? Why would I need this? Well… For example, when referencing image files (placed on server, right?), that are using dynamic paths or for any other reasons can’t be added statically (for example using CSS).

Getting root path in Javascript files is a hard task itself. When do you need to combine this problem with Yii client-assets publishing mechanism, it can become even harder. However, I found nice, clean and simple solution, using HTML5’s data- attributes.

Read More “Getting root path in Javascript files included in Yii application”

Using Twitter Bootstrap’s popups like real menu items

Twitter Bootstrap framework is fabulous and thanks to many Yii extensions supporting it (Yii-Boostrap, Yii-Booster, Yiistrap, YiiWheels and more) using it in own application is like snapping with fingers.

One of the best features of Bootstrap is a very easy way of creating menus and adding popup menus to elements (like buttons). However, in default implementation popups are oriented toward working just like a fancy links — i.e. redirecting browser to destination URL. In this article, you’ll find how force them to work as real menu items — i.e. capturing their onclick event and doing something with content.

Read More “Using Twitter Bootstrap’s popups like real menu items”

HTML-to-Markdown on-line tool, that actually works

If you search the web for “convert HTML to Markdown online“, Google will return you a quite big bunch of useless links. Mostly pointing to websites that only claims that can do HTML-to-Markdown conversion (while actually doing opposite one) or that are doing conversion in a really poor quality (failing on simple HTML).

After digging through many of them, I finally found “html2text” — a simple, yet powerful Python script that just do the job. It was the only online tool, that I found, that actually was able to convert my simple (three unordered lists with some links inside) HTML text into pure Markdown.

Self-adapting images in responsive design

In my humble opinion, responsive design is a future. One layout, carefully designed, will look beautiful and by user-friendly, no matter, which device user will use to view it. Of course, you can craft responsive designed website by hand, but the easiest way is to use some framework. But what about non-framework elements, like for example images? How to style them, what size should they have, to be responsive and look exactly like other, framework elements, on any device?

There are at least few approaches to solve this problem, among which one or two are not that famous.

Read More “Self-adapting images in responsive design”

Over hundred cool icon sets for your website or application

Here you have three different pages, each holding links to 25+ beautiful icons sets:

There are 109 total icons sets presented on these three webpages. Most of them are free. Some of them are devastating beautiful, some have medium quality. But, put together, makes a strong icon sets compilation, in which nearly anyone should find something interesting for his or her current project.

Simple way for hiding your email address

They say that SPAM bots are really good these days and can figure out your e-mail out of many “traps”.

I wonder, if they can catch it out of something like this:

<a
    href="mailto:me.nononono@domain.nononono.com"
    onmousedown="this.href=this.href.replace('.nononono','')"
    onkeydown="this.onmousedown()">
contact me</a>

I prefer to think, they don’t and that they’ll crush their ugly spammy teeth on this! :]

An app-like full screen layout in CSS

Usually mobile applications have a header and a footer, both of a fixed height, and remaining body, that fills the rest and contains entire application content. No matter if main application content is long enough to produce vertical scrollbar or not, header and footer are always visible and always have fixed height.

A layout like this can be build in pure CSS and HTML. Thus it is useful for PhoneGap applications developers.

Read More “An app-like full screen layout in CSS”

Hot areas on your website

Today I have came across Piotr Konieczny’s presentation on Google SEO Hacking and I found page 60 out of it quite very interesting. It includes map of ho areas of your website, that is places, where your visitor’s eyes are placed at first and where they stays the longest period of time.

It is taken form Google and is made purely for SEO, but you can also use it to enhance design of your website, i.e. put the most important elements of your layout there, where they will be found fast and for sure.

Read More “Hot areas on your website”