"I love Auralinna.blog - Tero Auralinna's blog about web development"

2022-05-04 18:07:30

Toggle dark themeAuralinna.blogTero Auralinna's blog about intriguing world of web development. Tweaking pixels since the '90s.How to use GitHub issues for blog post comments (with examples for Next.js)12/8/2021I recently updated my blog to use GitHub issue tracking for the comments. The previously used Facebook Comments plugin didn't work so smoothly anymore, so it was time to evaluate alternatives. This blog post shows examples of how to integrate GitHub issues with Next.js.Next.jsReactGitHubAxiosGitHub APIsyntax highlightingTypeScriptGit commands reference12/4/2021This post is mainly a personal reference for Git CLI commands, which I use more or less frequently. This will be living documentation, that will be updated from time to time. I mainly work with the command line. For merge conflicts, diffs, and patch selections I prefer VS Code's UI.GitCLIHow to fetch your public photos from Instagram without the API10/24/2019This 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 tag found from the Instagram profile page. Script tag has the data, which we will parse by regular expression.AxiosInstagramAPIJavaScriptCodePen embeds with Contentful and Angular6/12/2019I 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.ContentfulCodePenAngularJavaScriptGlobal HTTP request and response handling with the Axios interceptor3/26/2019This 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.AxiosJavaScriptHTTPinterceptorSetting up webpack 4 for a project12/2/2018This 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.webpackJavaScriptweb developmentCSSBabelconfigurationHow to create Material Design like form text fields with floating label and animated underline bar11/10/2018This 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.Material Designformfloating labelanimationCSSJavaScriptHow to build a complete form with Vue.js5/2/2018Lately 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.Vue.jsvalidationJavaScripti18nAxiosformHow to transfer the Angular server-side state to the client-side4/4/2018By 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.AngularAngular Universalserver-side renderingcacheJavaScriptMy web developer career story3/28/2018I 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.web developmentcareerQuakeWorldweb 2.0programmingPHPAll ngVikings 2018 conference presentation slides3/5/2018I 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.AngularngVikingsconferenceCrop and resize images with CSS1/28/2018Sometimes 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.CSSimageSVGimage croppingScroll to the top on Angular route change1/16/2018By 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.AngularnavigationscrollNavigation wizard example with equal width steps and flexible width of the last step1/1/2018This 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.CSStabswizardSCSSnavigationCode syntax highlighting with Angular and Prism.js12/28/2017I implemented Prism.js based code syntax highlight feature for my blog. This blog post shows how to use Prism syntax highlighter with Angular.CSSAngularPrism.jsTypeScriptJavaScriptcodesyntax highlightingHow to make a CSS speech bubble with borders and drop shadow12/22/2017This blog post demonstrates how to create a CSS speech bubble with borders and drop shadow.CSSCSS shapesWrapping newlines via CSS11/30/2017This is a simple tip on 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.CSSHow to customize Bootstrap styles and variables when using ng-bootstrap11/28/2017Ng-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.AngularBootstrapng-bootstrapCSSAngular CLIBlog platform changes11/20/2017Blog 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.ContentfulAngularAngular UniversalNode.jsExpressSEOSpring BootNew blog8/20/2017My 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.Hello WorldLatest CodePens10/24/2020Fetch public photos from Instagram without the API7/6/2020Full-width element inside an element with fixed width12/6/2019Global HTTP request and response handling with the Axios interceptors7/10/2019Switch between the dark and light mode via CSS custom properties6/11/2019Javascript URL handling6/9/2019Material Design like form input text fields with CSS only3/23/2019Javascript event delegation example12/9/2018Responsive and animated D3.js bar chart with positive and negative values (TypeScript)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.Open the RSS feedGo to the CodePen profile (opens into a new window)Go to the LinkedIn profile (opens into a new window)Go to the Facebook profile (opens into a new window)© Tero AuralinnaAuralinna.fiSunset with Bubbles: Travel and Photography BlogThe icon "ellipsis" is provided by loading.io