next.jsedge functionsmiddleware
Next.js middleware is a good place to add logging to your Next.js application. Middleware is run as edge function so using a database from middleware can be tricky. In this article I show you how to save data from the middleware to a Redis database.
newsletterwhat-is-upnext.js
Next.js Incremental Static Regeneration enables you to add dynamic data to static pages. With Next.js ISR you can also use static generation on demand for the pages you want. This results in much faster builds because you don't have to build all of the pages of your Next.js application in build time.
newsletterwhat-is-upnext.jsheadless cmsvscode
This week, among other things, we talk about the underrated feature of Next.js and my new favourite VS Code theme.
newsletterwhat-is-upreact
When using React I often find myself browsing through the React documentation. That's why I was excited to find out that an updated and rewritten version of the React docs is in the works and we can already access the new docs!
newsletterwhat-is-upnext.js
This week I worked on the next video on my Next.js Crash Course. The course is available free on Youtube.
newsletterwhat-is-upnext.js
This week was full of Next.js for me. Next.js 12 was announced in Next.js conf 2021 and I published three Next.js videos on the Youtube channel.
newsletterwhat-is-upreact
For the past week I have been diving more into React state management. Especially I have learned more about Recoil and the Context API. I also published a new video on the Youtube channel listing some of my favourite Github repos for developers.
newsletterwhat-is-upnext.js
This week I finished the Next.js blog application I was working on and published the video teaching the whole process on how to create a blog with Next.js.
newsletterwhat-is-upjamstacknext.js
This week I wanted to share how to deploy Next.js application to production fast and easy. I also share how to setup the deploy in a way that triggers automatic deploy when ever there is new commits to your Main branch on Github.
newsletterwhat-is-upvscodenext.jsheadless cms
One of the things I did this week was adding headless CMS to act as a datasource for a Next.js blog application. It was easier than I thought.
newsletterwhat-is-upvscodeweb development
I use VS Code as my main code editor. Today I want to share with you some of the VS Code features that has made my life a lot easier and productive.
newsletterwhat is upweb development
I have been working as a software engineer over eight years now. This week I stopped to think about all the good things and benefits there is in being a software engineer.
newsletterwhat is upweb development
Github Copilot was announced couple of weeks ago. I got into the waiting list as soon as it was announced and just the other week I finally got in! Here is my thoughts on Github Copilot after using it for one week.
newsletterwhat is upweb development
This week I worked on setting up a new javascript project using monorepo structure. The project uses React & Typescript and code sharing between packages.
web develeopmentblogging
If you are a programmer without your own blog, you need to start one right away! Having a blog has a bunch of benefits. In this article I will list five reasons why you should have a blog as a programmer.
next.jsjamstackseoweb development
In this article I will show you how to add sitemap and robots.txt to your Next.js website to make your website more SEO friendly.
reactweb development
In this article I show you how to quickly and easily add cookie notice / cookie consent banner in React.
web developmentjamstack
I converted my old Wordpress website to Jamstack. In this post I go through the steps of that process.
web developmentblogging
As a developer, the first instinct is to build your own blog by yourself. This is not a good idea though and here is why.
jamstackweb development
Jamstack is a modern way to build websites & apps that delivers better performance. Sounds good but why, when and how should you use it? I will answer those questions in this post.
debuggingproductivity
Rubber duck debugging is actually one of the best debugging techniques out there. And it works on all languages and platforms.
webdevjamstack
CodePulse.blog is now TuomoKankaanpaa.com. I decided to update my blog and website and move it under a new domain.
javascriptproductivitytypescriptvs codeweb development
If you are using VS Code for writing Typescript / Javascript, you know that sometimes quick prototyping or testing is needed.
vs codeweb development
Have you ever thought to yourself "It would be awesome to have Instagram like stories in VS Code". Wonder no more, it is now a reality!
reactjavascriptweb developmentyoutube
In this React project you learn how to create a simple React application and how to use a REST API with React in your next React project.
web developmentgithubyoutube
GitHub profile README is here! This is an awesome feature and every developer needs to use it! Learn now how to add readme file to your own GitHub profile!
javascriptweb developmentyoutube
If you are using VS Code to write React or Javascript code, you must use this tool! It will save you massive amounts of time and effort.
productivity
If you do remote work e.g. working from home, these tips will help you to be more productive and efficient when working remotely.
productivityvscodeweb developmentyoutube
Here I share my top 10 keyboard shortcuts for Visual Studio Code that I use daily. These are something that every Visual Studio Code user should know.
javascriptweb developmentyoutube
If you use JavaScript and want to do modern web development, JavaScript arrow functions are something you need to understand inside out.
javascriptyoutube
Learn what JavaScript functions are, why and how to use them and also how you can use parameters to customise your functions.
web developmentyoutube
Best ways to learn web development is through YouTube videos. I have many years of experience in web development and I have a YouTube channel for you!
javascriptweb development
This is very common developer problem. But the funny thing is that developers don't even realise this being a problem and thus are not looking for solution!
gitvscodeweb development
If you are using Git as your version control and VS Code as your code editor, you will love this new VS Code feature! The feature is...
draft.jsjavascriptreact
I teach step by step how you can use React, Draft.js and Draft.js plugins to create text input component that has a mentions functionality.
reactcoursejavascriptweb development
If you know JavaScript but you are not yet familiar with React fundamentals, you are in the right place! This is a must watch for every web developer.
javascriptweb development
Facebook just introduced a new experimental javascript toolchain tool called Rome. It doesn’t use any third-party dependencies.
productivityweb developmentvscode
Here is my top picks for the best VS Code extensions in 2020. These are a must have for every web developer using VS Code.
javascriptreactweb development
CSS Modules are supported with create-react-app out of the box. There is however a catch to know in order to get your CSS Modules working in your project.
reactjavascriptweb development
What are React Fragments? How to use them and what are the advantages of using fragments? This article will answer these questions.
draft.jsjavascriptreactweb development
In this post we will take a look how to style Draft.js editor component. How to make the editor multiline, scrollable, add borders and background.
draft.jscoursejavascriptweb development
Do you want to add rich text to your React application? Draft.js is great way to do that but it can be difficult to get started. Not after this course! You learn all the basics of Draft.js on the course.
javascriptweb development
If you want to see the values of FormData object, console.log does not work. Instead you need to use a property provided by FormData to inspect the values.
javascriptreactweb development
How to create modal dialog with React? This tutorial will show you just that! You will also get a finished component you can use right away.
Looking for React beginner tips? You are in right place! These six things are something that every React developer should know about. Number one:...
draft.jsjavascriptreactweb development
Do you want to add Slack-like emojis, Facebook-like stickers or mentions to your React application? In that case you should...
draft.jsjavascriptreactweb development
It can be little unclear what you should do when you want to display your draft js content as HTML. In this post we will learn best way to do that...
draft.jsreactjavascriptweb development
There is little information on how to actually display Draft.js content. Here is simple and easy way to display saved Draft.js content!
eventsgraphql
GraphQL Finland which was held little over a week ago (Thursday & Friday 18-19.10.2018) in Helsinki at Paasitorni. I think the workshops and talks were...
javascriptweb development
How to update javascript dependencies in package.json? The easiest way to do it is...
javascriptreactweb development
How can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript? The answer is...
productivity
Here is 13 basic and easy keyboard shortcuts that will instantly increase your productivity.
draft.jsjavascriptreactrich text editing
Getting started with Draft.js can be a bit confusing. In this post we will cover how to get started by creating an Editor component capeable for RTE.
equipmentproductivity
Do you know the feeling when you are working on something that requires your full attention. Then something happens around you, phone ringing or people starting a conversation, and this breaks your concentration. That was common for me up until about 18 months ago. That's when I discovered noise cancelling headphones.
javascript
When debugging Javascript applications chances are you sometimes use console.log(). There is a better way tho...
flowtype checkingjavascriptweb development
When first time using flow, many people use it through terminal. This is fine but there is a better way to implement Flow to your workflow. In this post I will cover how to setup Flow extension for Visual Studio Code.
javascripttypescriptflowtype checking
This was my first time using Flow type checking in a javascript project. Here are some of my experiences of it.
web development
When it comes to quickly prototyping a feature or sharing a component online code editor called codesandbox.io is the tool for me! I have also found it great when...
javascriptreactweb development
Learn how to create a bar chart with React using react-vis.
eventsjavascriptreact
Short summary of React 2018.
draft.jsjavascriptreactweb development
In this article I teach you how to store Draft.js content.