Hey, welcome!
I'm Andreas Wik, Front-End Web Developer.

Pretty URLs With .htaccess On Apache

August 7, 2019 by Andreas Wik

With a few lines in the .htaccess file you can easily turn ugly URLs into way nicer and more readable ones.


Check If Element Is Inside Of The Viewport With JavaScript

August 2, 2019 by Andreas Wik

Let’s have a look at how we can check if a certain element on the page is partially or fully inside of the viewport. This could be used for a lot of things, a classic use case would be lazy loading images. Another use case could be to trigger an animation when the element comes […]


Protect Folder On Apache With Username And Password Login Using .htaccess

July 31, 2019 by Andreas Wik

There is an easy way to password protect folders on your Apache server with username and password.


How To Check And Only Apply CSS If Feature Is Supported In The Browser

July 29, 2019 by Andreas Wik

Is there an easy way, directly in CSS, without involving JavaScript, to check what’s supported and not? Feature Queries, or @supports, lets you do exactly this.


Diagonal Borders With CSS And SVG

July 26, 2019 by Andreas Wik

With a little bit of CSS and SVG we can easily create diagonal borders.


Style Your console.log() Messages

July 24, 2019 by Andreas Wik

When you’re logging a lot of stuff in the console it can be really handy (and fun) to style your messages. Let’s have a look at how.


Zoom In And Show Larger Resolution Image When Hovering Thumbnail With JavaScript

July 22, 2019 by Andreas Wik

A lot of ecommerce websites have got this little feature where you can zoom in on the product image when hovering it. Basically you hover over a small/medium resolution image and a high resolution image appears so you can see details.


Generate Brighter And Darker Versions Of Color With JavaScript

July 15, 2019 by Andreas Wik

Easily generate brighter and darker versions of a color using the incredible JavaScript library TinyColor.


Background Image Zoom In On Hover

July 12, 2019 by Andreas Wik

You can see this effect being used quite a lot. When you hover a link to a blog post or article, the image is zoomed in on, or gradually enlarged.


Gradient Text With CSS

July 10, 2019 by Andreas Wik

Create beautiful gradient text with CSS.


Gradually Fill Link Background Color With CSS

July 8, 2019 by Andreas Wik

A hover animation effect for links that I really like is when it’s gradually filled with a background color.


Use Your Own Custom Broken Image Icon For Your Website

December 4, 2018 by Andreas Wik

Are you sick of the standard broken image icons the web browsers out there use? Luckily, there’s a really simple way to replace it with your own custom image. Or, you can just hide it completely.


Calculations In CSS With calc()

November 30, 2018 by Andreas Wik

calc() is a nifty little feature in CSS which lets you – oh yeah, you guessed it – calculate stuff. Great when working with values that need to be dynamic and that you otherwise would have to achieve with JavaScript.


Using Local Storage With JavaScript – The Database Built Into Your Browser

November 17, 2018 by Andreas Wik

Local Storage is a storage in your browser where you can easily save data in key value pairs. It’s a really handy alternative to cookies as you have a lot more storage to work with.


Variables In CSS Without Sass/SCSS

August 14, 2018 by Andreas Wik

You might think about SASS/SCSS when you hear “CSS variables”, but CSS does have variables available and the browser support is actually quite good.


Determine If A Color Is Bright Or Dark Using JavaScript

August 7, 2018 by Andreas Wik

Finding out whether a color is light or dark can be really handy when working with dynamic content. Let’s say you have a profile page and the user can set their own page background color. You could then set the color of the text on top depending on the background color’s brightness.


Full Screen Mode For Your Website

August 2, 2018 by Andreas Wik

Let’s say you’re building a game that will be played in the browser. You would want the players to have the ability to turn the website/game into full screen mode, right? Here’s a quick and easy way to do it.


Run JavaScript Code Snippets On Remote Websites With Chrome Dev Tools

July 28, 2018 by Andreas Wik

Did you know that you can run JavaScript snippets on any website you’d like in Chrome, just like you can edit the CSS or HTML on the page? You can, here’s how.


Measure Your JavaScript Code Execution Time

July 24, 2018 by Andreas Wik

There are times when you want and need an easy way to measure your JavaScript code’s performance. Let’s have a look at two different methods to get the execution time in milliseconds.


Manipulate Images Dynamically With CSS Filters

July 21, 2018 by Andreas Wik

With CSS filters we can easily manipulate images, such as turning them black and white, make them blurry, adjust brightness, contrast and colors, and more.


International Email Address Validation With JavaScript

July 17, 2018 by Andreas Wik

Email validation can be quite tricky. While there are a lot of regular expressions out there that you can easily find by quickly Googling, many of them lack something crucial: they don’t let through international email addresses with unicode characters.


Extract GPS Location And Other EXIF Data From Photos Using JavaScript

July 15, 2018 by Andreas Wik

EXIF data contains info such as the device maker (e.g. Samsung), device model, date and time the photo was taken, GPS location data, and a lot of other stuff. Let’s take a look at how you can extract this data using JavaScript.


Preload Images And Other Assets With JavaScript

July 5, 2018 by Andreas Wik

If you’re building, say, a game, or maybe a beautiful website with a lot of heavy graphics, you might want to make sure everything is loaded before you present it. With Preload JS we can do exactly this. Let’s dive right in.


Make Your Form JavaScript Validation Errors Accessible For Screen Readers

June 30, 2018 by Andreas Wik

Accessibility is important, and here follows an easy way to make your JavaScript errors accessible for screen readers when, for example, validating forms.


Generate Random Images From Unsplash Without Using The API

June 24, 2018 by Andreas Wik

Unsplash is the place to go when you need royalty free photos and while they do have a great API for developers, they also give you the option to simply access random images via URL’s. Let’s take a look!


Collect Daily And Historical Stock Prices

June 21, 2018 by Andreas Wik

With the free AlphaVantage API you can easily collect daily and historical stock prices and other stock data.


Capture Touch Events With JavaScript

June 19, 2018 by Andreas Wik

Whatever brilliant little project it is you’re working on, this method below should have you covered capturing swipes and taps.


Grab the Dominant Color Of Image with jQuery

November 11, 2017 by Andreas Wik

For a profile page template I was designing recently I needed a way to pick a color that would work well together with the user’s profile photo. Now, this can obviously not be done manually as users will upload their profile photo themselves, so this color needs to be generated dynamically.


Create CSS iPhone Wrapper For Your Screenshots

November 11, 2017 by Andreas Wik

Need a way to present mobile device size screenshots of your app or website? Why not use a little HTML and CSS to create a simple but elegant iPhone wrapper around them.


Dynamic jQuery Click Events Not Working In Mobile Safari

November 11, 2017 by Andreas Wik

I just ran into a really weird problem, appearing only in the Mobile Safari browser. I was testing a website on my iPad, and my jQuery click events did not work. What I was doing was dynamically adding elements to the page.


Social Meta Tags Checklist

November 11, 2017 by Andreas Wik

Do you have the necessary social meta tags included on your site? Do you know how your content looks on different social platforms when somebody shares a URL to your website?


Turn Headline Into URL Friendly Slug With PHP

November 11, 2017 by Andreas Wik

This is a short one. This little code snippet will turn a text into a URL friendly slug, similar to what Wordpress does.


Make Sure Your Element Has The Highest Z-index

November 11, 2017 by Andreas Wik

Here is a simple way to get the highest z-index used on the page and assign a higher one to the element you need to ensure is “on top” of everything else.


Cut Off Text Nicely With text-overflow

November 11, 2017 by Andreas Wik

I was working on this page that had a list of company summaries, where each item should be a single line. Needless to say, some longer summaries won’t fit on one line.


Calculate How Long Ago With Timestamp And PHP

November 7, 2017 by Andreas Wik

You know how YouTube shows the date the video was published as “X hours ago”, “Y days ago” and “Z years ago” etc, rather than 2017-01-22 for example. This handy function time_ago takes a Unix timestamp and turns it into a how-long-ago string.


Are You Using the_date() In WordPress? Don’t!

November 5, 2017 by Andreas Wik

Are you using the function the_date() when listing your posts in Wordpress? Well, don’t! It’s about time to change that.


Fill Div With Vertically And Horizontally Centered Image Using CSS

September 17, 2017 by Andreas Wik

As web developers we work a lot with dynamic content, and this can be quite tricky from time to time. We can’t (shouldn’t) force people to crop images to exact sizes before uploading them on our sites. It’s important that we put effort into making our solutions as flexible as possible while still lookin’ good.