How to design good Django models?
Designing good Django models is very important when it comes to readability and to maintainability. In this post I'll share some good tips on how to implement some good techniques.
Read moreIntroduction to Vue.js Slots
With Slots you can make it possible to structure the content of a component in a semantic way, and the parent component can control the contents of them.
Read moreVue.js Filters
Filters are justed to apply formatting and transformations to values used in a template interpolation. You include filters in you components and you can use them on all dynamic data. The underlying data will not be change, just the way they are presented on the screen.
Read moreA short introduction to Vue.js computed properties
Vue.js computed properties helps you to make computations and changes to your data variables.
Read moreA short introduction to Vue.js watchers
When you're working with Vue.js you often need to run a function when a certain value changes. Vue.js watchers helps you with that.
Read moreIntroduction to Vue.js Props
Props are used to pass data from a component to another. In this post we will go through how you can pass strings, objects and other data types.
Read moreCommunicating between Vue.js components
When you're building a Vue.js app you often need to send information from a component to another, here is how you do that.
Read morePython lists
Python has something called lists which is a collection of objects.
Read morePython strings
A string can be anything from a letter, to a word or a whole sentence.
Read moreHow to generate a random string using JavaScript?
A random string can be used for a lot of different purposes like password, filename, etc. But how do you generate one?
Read moreRandom numbers | JavaScript essentials
Generating random number using JavaScript isn't hard, but you need to know how to do it.
Read moreCombining Django and Vue.js - Everything you need to know
Django and Vue.js are my two favorite frameworks for building the best websites. In this post I will tell you everything you need to know to use them together.
Read moreWhat is the difference between Throttle and Debounce | JavaScript
Sometimes you need to optimize your website by either using throttle or debounce, but what's the difference?
Read moreHow to use ForeignKeys in Django Modelform
It's normal to have ForeignKeys field in ModelForm. And if this is a hidden field, the save function will crash.
Read moreCreating a simple modelform - Django
In this guide, I will show you how to create a simple modelform using Django.
Read moreHow to validate an e-mail address - JavaScript
Every now and then, we want to check if an e-mail address is valid. Maybe you're building a user sign up or a newsletter registration form?
Read moreDjango shortcuts
Django has some shortcuts to help you speed up your development process even more. In this post we'll cover a few of them.
Read moreHow to select an element inside another element | JavaScript
Sometimes you want to select an element inside another HTML element, but how do you do it?
Read moreHow to move an object in a PixiJS application
Making an object move is something everyone needs to know how to do. This is one of the basic buildings blocks of game building.
Read moreHow to change the size of a PixiJS application
A PixiJS application has a default size. But what if you want to size to match the window or you just want a completely different size?
Read moreHow to change the background color of a PixiJS application?
The default background color of a PixiJS application is black and boring. Here is how you can set it to whatever you want.
Read moreHow to drag and drop | Pixi.JS
In this article I will show you how to use the mouse to move an object using Pixi.JS. Dragging and dropping an object is an essential part of many games and applications.
Read moreHow to handle mouse events with Pixi.JS
Using the mouse to interact with objects in a Pixi.js application is something you need to know how to do. In this guide, I'll show you show to react to mouse down, move and up.
Read moreHow to use Reduce | JavaScript
JavaScript Reduce is a Higher-Order function and in this post I'll show you how to use it.
Read moreHow to use Filter | JavaScript
JavaScript Filter is a Higher-Order function and in this post I'll show you how to use it.
Read moreHow to use Map | JavaScript
JavaScript Map is a Higher-Order function and in this post I'll show you how to use it.
Read moreHow to check if an element exists | JavaScript
You often want to check the value of an element or manipulate it some how. But if you do this without knowing if it exists or not, you might get an error.
Read moreHow to get random objects from a QuerySet | Django
Sometimes you want to select a list of random objects from a QuerySet. Using a built in function from Python, this is a really simple task.
Read more
How I got a job as a web developer without a degree
Many, many years ago my brother asked me "When are you going to learn programming?". I could barely read and write at the moment, so I had no idea what he meant.
Read moreHow does conditional rendering in Vue.js work?
In this video guide I'm demonstrating what conditional rendering in Vue.js works and how to use it. I'll explain the difference between "v-if" and "v-show" and when to use them.
Read moreHow to use Vue.js and Bulma together
You often want to implement a CSS framework into your Vue.js apps. In this video I'm going to show you how to install Bulma using npm, import it into the app and then how to customize Bulma's variables.
Read moreHow to authenticate users with Vue.js and Firebase?
In this video I'm going to show you how to set up a Vue.js project using the new Vue CLI. Then I'm going to show you how to create a firebase project and implement it in the app.
Read moreBuild a YouTube bookmarking site with Vue.js - part 10 - Changing categories
In the tenth part of the "Build a YouTube bookmarking site" course, we are going to go through how to make it possible to change the name of the categories.
Read moreIntroduction to Vue Props
In this video I show you the basics of Vue.js Props. I'm showing how to pass strings and objects, how to add default values and how to set values as required.
Read moreBuild a YouTube bookmarking site with Vue.js - part 9 - Deleting movies
In the ninth part of the "Build a YouTube bookmarking site" course it's time to make it possible to delete movies. We'll add a delete button to the card and then we just call a simple function from Firebase to delete it.
Read moreBuild a YouTube bookmarking site with Vue.js - part 8 - Tabs
In the eight part of the "Build a YouTube bookmarking site" course, we'll make it possible to navigate between the different categories we have added. Bulma provides the styling for our tabs/categories, but we need to use Vue to toggle which of the tabs/categories are showing.
Read moreBuild a YouTube bookmarking site with Vue.js - part 7 - Adding movies
In the seventh part of the "Build a YouTube bookmarking site" course, we are going to make it possible to add movies to our web app. We will be using a modal window from Bulma to show the add movie form.
Read moreHow to build a simple Twitter clone using Django and Vue.js
Building a social network isn't just a really cool project, but it's also a project that can teach you a lot of new cool things. In this video we will begin by installing the software we need, creating a new Django project and build a simple Twitter clone piece by piece. At the end of this video, you will have a working social network that we will deploy to a live server.
Read moreBuild a YouTube bookmarking site with Vue.js - part 6 - Adding categories
In the sixth part of the "Build a YouTube bookmarking site" course, we are going to make it possible to add categories to our web app. We'll be using a modal window to show the category form. When a category is added, it's automatically added to the list of tabs/categories.
Read moreBuild a YouTube bookmarking site with Vue.js - part 5 - The dashboard
In the fifth part of the "Build a YouTube bookmarking site" course, we are going to add the dashboard route and some information about the tabs. We'll also make it possible to log out of the web app and show the sign up / sign in buttons only when you're not authenticated.
Read moreBuild a YouTube bookmarking site with Vue.js - part 4 - Bulma
In the fourth part of the "Build a YouTube bookmarking site" course, we are going to go through how to install Bulma using Vue UI. We're going to set up some things like the navigation bar, and the authentication forms.
Read moreHow to create a superuser | Django
A superuser has access to everything in the Django admin interface and has the possibility to create other users as well. But how do you create one?
Read moreBuild a YouTube bookmarking site with Vue.js - part 3 - Firebase Authentication
In this part of the Build a YouTube bookmarking site with Vue.js course we are going to continue from the previous part where we set up Firebase.
Read moreBuild a YouTube bookmarking site with Vue.js - part 2 - Setting up Firebase
In the second part of the "Build a YouTube bookmarking site" course, we are going to go through how to install the Firebase dependency using Vue UI. We are going to create a project in the Firebase console, and last but not least, include Firebase in our Vue app.
Read moreBuild a YouTube bookmarking site with Vue.js - part 1 - Installing Vue.js
In this part of the "Build a YouTube bookmarking site" course, we are going to go through how to install the brand new Vue CLI 3, and how to set up a project. The project we're setting up is called VueTube, and here we can add YouTube movies sorted in to different categories we add.
Read moreBuild a YouTube bookmarking site with Vue.js - Introduction
"Build a YouTube bookmarking site" is a course where we'll build a site using Vue.js and Firebase. On this site we'll add authentication so users can sign up and login. When a user is authenticated he or she can add categories, and add movies into them.
Read moreGetting started with Vue.js - part 8 (Component communication)
In the last part of the getting started with Vue.js course I'm going to show you how to pass data from a child component to it's parent.
Read moreGetting started with Vue.js - part 7 (Forms)
In the seventh part of the getting started with Vue.js course we will go over how to implement forms in our Vue app. We are going to make it possible to change the title and the description.
Read moreGetting started with Vue.js - part 6 (Components)
In the sixth part of the getting started with Vue.js course we will learn how to create components and how they can be reused. We will convert some of the existing code into a component.
Read moreGetting started with Vue.js - part 5 (Computed properties)
In the fifth part of the getting started with Vue.js course we will cover what computed properties are and how to use them in your projects.
Read moreGetting started with Vue.js - part 4 (List rendering)
In the fourth part of the getting started with Vue.js course we will go through how we can render a list of objects. List rendering is very useful and you need it everyting you've got an array of data.
Read moreGetting started with Vue.js - part 3 (Binding attributes)
In the third part of the getting started with Vue.js course we will learn how to bind data from the data object to attributes inside the template.
Read moreGetting started with Vue.js - part 2 (Conditional rendering)
In the second part of the course we will go through how you render parts of the template based on values in your data object.
Read moreGetting started with Vue.js - part 1 (Setup and Vue Instance)
In part one of the course we will go through how you set up Vue and initializing a Vue instance.
Read moreWelcome to Code With Stein
I already have a YouTube channel where I regularly post tutorial videos. On this blog, I will post both videos and written tutorials.
Read more