When a webpage contains dynamic data, either from backend services or user-generated content, then a frontend framework can help you a lot. For that Vue is a great alternative.
Vue is really easy to get started with. All you need is to include a .js file in the head element and you are ready to start using Vue. You can also create more complex websites that require a build step, but we will get back to that.
In Vue, you…
I have been playing around with Vue 3, which is really cool. So let me share some of what I have learned. According to their roadmap, they have planned for a release at the end of Q2 (April, May, Juni) 2020. Now it is in Alpha, but it will probably be a Beta release soon.
Note that this article is time-sensitive. As code changes could happen, better best practices can emerge and better documentation will be available. But if you want a head start, this article can help you, written on 2020–04–08.
Sometimes you want your app to behave differently in local development and production. Maybe they should point to a different backend or use different API keys. Vue has very good documentation about it, Modes and Environment Variables. But I will try to keep it shorter, for the use I often need.
You can create differently
.env files at the root of your project.
Explaining React Hooks (yes there is more than one of them) like I’m… I don’t know which age, but I will try to be thorough with good examples. I’m writing this to better understand and learn myself as I have found them a little confusing. I’m not really a React developer, so if I get something wrong, let me know 👇
I hope this brings some clarity to React Hooks for you as well!
Hooks are now available with the release of React v16.8.0. Hooks don’t work inside class components, but are used in functional components. …
There exists a lot of great web development frameworks out there. I believe that every framework can be used to create the website you want. What you should choose only comes down to individual preference. Remember, there also is a possibility to use no framework as well.
Myself, I usually choose Vue. Here are my top reasons to choose Vue over the most used framework (library) React.
(Just to have it said, I have reasons to choose React over Vue as well, but I don’t value them as much as the points below)
With both Vue and React you don’t…
With Vue Router you might want to guard som paths and redirect users to a signup page if they are not authenticated. I will show you how this is done correctly with Firebase Authentication.
First, we must mark each route that we want to guard with a meta property called requiresAuth.
const routes = [
component: () => import('../views/SignIn.vue') },
component: () => import('../views/Profile.vue'),
In this example, the…
I love how easy it is to set up automatic hosting of a website with Netlify.
Sign in to Netlify and click the “New site from Git” button. Select your git repository, either GitHub, GitLab or Bitbucket, and give access to the wanted repository.
If you have build commands, such as
npm run build, you can enter those. Commands can be chained with &&.
Enter the path of the directory to publish. The directory containing the index.html file
Now hit Deploy site and you are done. New pushes to your git repository will automatically be published to your website. …
I love how easy it is to host a website with Firebase for free.
Create a project in the Firebase console by just a few clicks.
If you haven’t used firebase before, install the cli and login:
npm i -g firebase-tools
Then initiate your project:
Select “Hosting” with space then enter. Then select the project created in the Firebase console. Then enter the path to the folder your index.html file is located (i.e. public). If you have a single-page app and want all urls to point to index.html select yes.
Congratulations, you have now…
Developer at heart