This post contains a short demo about how you can fetch your Instagram photos without the usage of Instagram API, which requires a user to authenticate. This technique is based on the <script> tag found from the Instagram profile page. Script tag has the data, which we will parse by regular expression.
I use CodePens in my blog posts and recently I noticed that there is an issue which prevents displaying CodePen embeds correctly. I use Contentful to manage blog posts content. Contentful supports embedding content via Embedly. But for some reason, Embedly fails to show my CodePens in some cases. I couldn’t find the reason nor any way to load them. They just didn’t load. So I decided to stop hitting my head against the wall and make an implementation without Embedly.
This is a short example of how to catch all Axios HTTP requests, responses, and errors. Catching is implemented with the Axios feature called interceptors. It's possible to catch all requests before they are sent and modify them. Also, responses and errors can be caught globally. For example, interceptors are useful when you want to modify request headers before a request is sent or you are implementing some kind of global error handling system.
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.
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.
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.
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.
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.
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.
This blog post demonstrates how to create a CSS speech bubble with borders and drop shadow.
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.
July 9, 2019
Switch between the dark and light mode via CSS custom properties
June 12, 2019
June 9, 2019
Material Design like form input text fields with CSS only
March 27, 2019
Global HTTP request and response handling with the Axios interceptors
March 23, 2019
Navigation wizard example with equal width steps and flexible width of last step
March 23, 2019
December 9, 2018
Responsive and animated D3.js bar chart with positive and negative values (TypeScript)
November 11, 2018