Auralinna.blogTero Auralinna's blog about intriguing world of web development. Tweaking pixels since the '90s.

I'm a Full Stackish web developer with a strong passion for a beautiful and solid front end. I have mainly focused on front-end development, responsive web design, Content Management Systems, modern web frameworks, DevOps and back-end coding with PHP, Node.js and Java.

How to create Material Design like form text fields with floating label and animated underline bar

10.11.2018

This post shows how to implement Material Design like form text fields with a floating label and an expanding underline bar animation. The post includes examples of how to style text fields with and without Javascript. Read more.

How to build a complete form with Vue.js

02.05.2018

Lately I have experimented with Vue.js JavaScript Framework. In this post I will show how to build a functional form with Vue.js. Forms are essential part of almost every web application so I wanted to see how to build a basic form with the following specs. Read more.

How to transfer the Angular server-side state to the client-side

04.04.2018

By default, the Angular Universal app makes HTTP requests again when app is bootstrapped even app is already rendered on the server side. Though there is a really simple solution which can be implemented without any actual code changes. At first when I tried to find how to prevent requests I only found tutorials how to implement this at the component level. After googling a while I luckily found an easier way to implement this. Read more.

My web developer career story

28.03.2018

I have worked in the web industry since 2005 as a front-end and back-end developer. I created my first websites in the '90s. Here is a story how I got tangled in the web and how I ended up to work as a web developer. There have been three major occurrences which have paved the way for my career. Read more.

All ngVikings 2018 conference presentation slides

05.03.2018

I attended awesome ngVikings 2018 conference which was held in 1st and 2nd of March in Espoo, Finland. I gathered here all the presentation slides I could find. There is still few missing but I'll update the list if they become available. Read more.

Crop and resize images with CSS

28.01.2018

Sometimes you don't have an option to crop images on the server side so you need to do cropping in the browser instead. Here are few examples how to create cropped image thumbnails using CSS only. All the examples are responsive and work for most image aspect ratios. Cropped images are scaled and centered to maximize visible area of image. Read more.

Scroll to the top on Angular route change

16.01.2018

By default Angular doesn't scroll to the top of the page when you're navigating to another page. Here is a quick tip how to implement scrolling. Read more.

Navigation wizard example with equal width steps and flexible width of last step

01.01.2018

This blog post explains how to create a navigation wizard which all steps have equal width except a last one. Width of the last step is depended on text width. Read more.

Code syntax highlighting with Angular and Prism.js

28.12.2017

I implemented Prism.js based code syntax highlight feature for my blog. This blog post shows how to use Prism syntax highlighter with Angular. Read more.

How to make a CSS speech bubble with borders and drop shadow

22.12.2017

This blog post demonstrates how to create a CSS speech bubble with borders and drop shadow. Read more.

Wrapping newlines via CSS

30.11.2017

This is a simple tip how to wrap newlines without converting newlines to br tags. This is quite handy if you have text without formatting and the only need is to wrap text paragraphs. You don't have to think about HTML sanitization or conversion. Read more.

How to customize Bootstrap styles and variables when using ng-bootstrap

28.11.2017

Ng-bootstrap is a great project which integrates Bootstrap 4 components into Angular. The main benefit is that it’s not dependent on 3rd party Javascript libraries like jQuery or Bootstrap JS. Installation is easy, but instructions are missing important point how to make Bootstrap styles editable. Here are steps how to do it. Read more.

Blog platform changes

20.11.2017

Blog is now moved on top of new platform. Content is handled via Contentful and rendered by Angular. I also implemented Spring Boot based REST API for retrieving content from Contentful. Read more.

New blog

20.08.2017

My new web development blog is here! My blog posts most likely will be front end oriented but you might find something related to back end coding and general development topics as well. Purpose of this blog is to share something I have learnt and help others to find solutions. I'm also going to use this blog as my personal notebook. Currently I have few topics on my mind and I'll try to keep posting actively. Read more.

Latest CodePens

View all CodePens