Posts by Milecia

Many apps you’ll encounter have images that you drag and drop in different locations for a number of reasons. It may help users reorganize their photo libraries or it can simplify a process. That’s why we’re going to build a front-end app to handle this type of drag and drop…

We use Slack for all kinds of tasks, like talking to coworkers and interacting with different communities. There are a lot of bots we run into that send alerts or give you other functionality like making polls. The best part is that Slack has an API that we can play…

Svelte is another popular JavaScript framework for building front-end apps. It’s been around since 2016, similar to Angular, although it has a much smaller community and fewer packages available. Despite this, there are still thousands of developers that love building apps with Svelte compared to the other frameworks. That’s…

Having an avatar as a profile picture is pretty common these days. There are plenty of tools and artists that can create anything you want so you have unlimited options. You can get as particular as you want and maybe even come up with something no one has seen before.

With the Fourth of July right around the corner, this seems like a great time to practice building some custom animations with fireworks! Sometimes you’ll work on projects that need some advanced animations, like an e-commerce or gaming site, and it can take some time to get them to function…

Every front-end developer knows about at least one of the popular frameworks like React, Vue, Angular, and Next. They probably know about a few more as well. These frameworks are great for most applications, but there are a few cases you might not want to use them. You might need…

In recent years, QR codes have become more popular to give out information that used to be printed. Restaurant menus, concert tickets, and even documentation for getting through customs in certain countries have been moved to QR codes. They let us share that info quickly and in a sustainable manner.

There are a lot of different technologies that are in the browser that enable a lot of interesting functionality. One of these things is WebGL. You can make all kinds of advanced animations and models, some of which can be used in other applications. We’re going to go through a…

There will be short videos uploaded to Cloudinary on some educational topic and they’ll be rendered in random order on flashcards in the app, along with explainer text Initial setup The first thing you need is a Cloudinary account. You can make one for free here. This is where…

Working with virtual reality (VR) has typically involved building apps and worlds using tools like Unity and Unreal Engine and headsets. You don’t need to have all of these things if you know some basic HTML and JavaScript. You can build and test your own virtual world directly in the…

Art is one of the ways you can express yourself freely. As someone working in tech, it might be hard to find the time to take up painting or drawing when you’re trying to constantly stay on top of all the new tools coming out. Luckily for us, there are…

With almost everything being online, having the ability to add custom filters to your camera can be pretty useful. We’re going to build a React app that lets users adjust a filter for their webcam and then save the image to Cloudinary. We’ll be using p5.js to let us…

This will use Next.js to let users upload images of their items and do immediate updates as an admin. Initial setup There are a couple of things you need to have in place before we start working on the Next app. First, we’ll be using Cloudinary to host the product…

Many companies face the issue of how to maintain internal documentation that connects all of the departments or products. Notion or other SaaS tools are the common answer to try and address this problem, but they usually miss some of the things you might want to customize internally. That’s why…

Raising awareness of things going on in your community is a great way to make people feel more connected and involved in what’s going on around them. A community calendar where people can add events can help with that. We’re going to build a calendar that uses Flask on the…

When you’re building an online shopping platform, you want to make sure that everything loads quickly for your potential customers. One huge factor that slows down many e-commerce sites is loading images. When you have hundreds of product images loading on a page at the same time, it can create…

There are plenty of times we see something we don’t recognize out in the world. So, of course, we take a picture of it. Then we might show it to several people before Googling whatever we think it is in hopes of figuring out what we’re looking at. In this…

Sometimes you have a picture that seems to have the right vibe you want in your app or your environment. Maybe an image of an overwater bungalow has some colors you’d like to use in an interior design project or it gives the right feel to a landing page you’ve…

Sometimes we want to focus on specific parts of an image to figure out what’s going on. This might involve looking at different quadrants of an image to see what the special features are. That can be done with machine learning or user input. In this post, we’re going to…

Seeing videos on the web is expected at this point. It’s one of the methods we use to teach ourselves new things or entertain ourselves. With videos being used so commonly, it’s important for us to make good user interfaces for them. When your users are interacting with videos, you…

There might be a situation where you want to be able to store user profiles on an Ethereum blockchain so that you can make sure to track every update that’s made. This might be to ensure that NFTs are always associated with the proper creator. It could also be to…

with Redwood Intro Deciding what to eat every day is something that a lot of us struggle with. It’d be so much easier if there was a button you could push and it would choose one of your favorite meals for you. That’s why we’re going to make a meal…

You might have a blog or a site that specializes in giving users video and image content. You can make yourself a media library to manage all of your content and keep it relevant to your users. That way you can see the exact data you need and you can…

When you’re working on large projects, it can help to have reusable components to handle the same functionality across different views. This saves time on writing code, makes it easier to maintain apps with many views, and can even lead to components that are usable in different projects. There are…

As much of a buzz term as blockchain has become, it’s still a great technology. To take some of the magic out of it, blockchain is essentially a distributed database. A blockchain is made of blocks that contain data and those blocks are chained together across multiple machines, which make…

Sometimes you need to generate reports that show users certain metrics around what they do in an app. A report can include anything from images to specific user data and they can give your users meaningful ways to monitor their behavior. That’s why we’re going to make some custom user…

One of the big draws to blockchain is that you can execute large financial transactions in minutes instead of days or weeks. One day, you could be able to sell your house in 15 minutes and all of the ownership information will be stored securely on the blockchain. That’s why…

Showing users data in easy to understand formats is an important part of front-end development these days. You can add images, make updates with CSS, or use a number of different libraries. While these approaches are fine, there is another way to generate custom data-based graphics quickly with D3js.

Intro There are a lot of new JAMStack frameworks that are appearing on the scene. You have NextJS, Eleventy, React Static, and a bunch of others. One thing that’s missing from these frameworks is the ability to work with databases in your web app. That’s where RedwoodJS comes in. It’s…

Every image should have some descriptive alt text so that our content stays as accessible as we can make it. That’s why it’s a good idea to start with accessibility in mind every time you write code. So we’ll create a way to add automatically add this text to our…

There are a lot of useful tools built into the browser that we don’t take advantage of as much as we could. Working with WebRTC is one of those tools that doesn’t come up as often as it could. Do you have an app where a user can upload…

VR has grown over the past few years as the number of compatible devices increase. There are a ton of uses for it, both practical and for entertainment. If you know JavaScript, you can even start making your own VR apps right in the browser. In this tutorial, we’re going…

Sometimes you don’t need to make a serious app to practice your JavaScript skills. We’re going to play with a full-stack music app! It’ll be a virtual beat box that you can make music with and store it in a database. Setting up the app We’ll just jump in and…

With the growing adoption of the Internet of Things (IoT), it’s fun to build apps with IoT devices like Arduinos or Raspberry Pis. This tutorial shows you how to implement an interesting Arduino project, starting with using a photoresistor sensor to generate pictures in a JavaScript app. You’ll then upload…

One of the best exercises you can do is yoga because it helps you work on both strength and flexibility while you practice. You don’t have to be great at it to get the benefits, but having the correct posture for your poses at every level is important. Also, finding…

There’s a dashboard for just about every application you log in to these days. Most of them are built with modern frameworks like React or Angular and they have some kind of back-end to support them. Users depend on these dashboards to check their account info, make updates to their…

There are a lot of cool APIs out there that let you work with interesting datasets. If you are interested in space at all, then the NASA APIs might be something you want to check out. In this post, we’ll use one of the NASA APIs to create an asteroid…

Adding virtual things to the real world is something that’s made a huge leap in popularity, especially with QR codes. With augmented reality (AR), we can take images in the real world and display digit things on top of them, kind of like the Nintendo DS used to do with…

Many organizations want some ability to use a service to handle some of their functionality and customize the interface users are shown. This includes things like the names they see displayed, data they want to be shown, or some images they want to see. Giving them the ability to add…

Sometimes you just want to watch videos with the subtitles on. It might be because you want to mute the video and just read what’s happening. Or maybe you’re using subtitles to help teach yourself a different language. These are a few reasons why it’s important to know how to…

Having a shopping cart before you check out is something that good online stores have. It shows all of the items you want to be shipped to you and then you get to check out. It’s important to have this functionality implemented securely so that you aren’t putting users’ information…

Videos are one of the most popular forms of content online. They help people start new professions and they keep us endlessly entertained. That’s why you have to make sure any video-based apps you work on give users a good experience. Users like it when they can customize videos to…

When you have an e-commerce site or you want to add some visual customization for your users, creating a video slideshow with specific images can be a nice touch. If you have existing images and videos, all of them can be combined to make something special for your users and…