Auralinna.blogTero Auralinna's blog about intriguing world of web development. Tweaking pixels since the '90s.Blog posts published in the year 2018
Setting up webpack 4 for a project
This blog post shows how to setup webpack 4 module bundler for development. This webpack tutorial contains many common examples you might need to configure when doing JS application development with the webpack.
How to create Material Design like form text fields with floating label and animated underline bar
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.
How to build a complete form with Vue.js
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.
How to transfer the Angular server-side state to the client-side
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.
All ngVikings 2018 conference presentation slides
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.
Crop and resize images with CSS
Sometimes you don't have an option to crop images on the server-side so you need to do the cropping in the browser instead. Here are a few examples of 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 the visible area of the image.
Scroll to the top on Angular route change
By default, Angular doesn't scroll to the top of the page when you're navigating to another page. Here is a quick tip on how to implement scrolling.
Navigation wizard example with equal width steps and flexible width of the last step
This blog post explains how to create a navigation wizard in which all steps have equal width except the last one. The width of the last step is depended on the text width.
I am an experienced web developer with an eye for solid UI/UX design. I have specialized in front-end development, responsive web design, design systems, modern web frameworks, and content management systems. I also have experience in mobile apps development and back-end coding with PHP, Node.js, and Java. So I have a full stackish background, but I'm enjoying most building robust and beautiful front-ends with performance, accessibility, and testability in mind.
© Tero Auralinna
Auralinna.fiSunset with Bubbles: Travel and Photography Blog