DEV Community: Mattias Velamsson

Ruby GUI with Glimmer

Mattias Velamsson — Fri, 30 Jun 2023 01:50:56 +0000

From the very first time I started getting into development and programming, I always felt like I wanted to create my very own GUI. Whether it was for something as simple as cheating in a flash game 🦹🏽‍♂️ or something more useful like setting a timer or calculating expenses, creating an app with an actual interface always interested me. Prior to this I had used PythonAutoGUI and others. However, a couple of weeks ago, I stumbled upon a Ruby library that makes creating a fully functional GUI super easy. Obvisouly, I had to try it out. So in this post, I'll walk through how I used this library to create a simple currency converter.

Code Walkthrough:
First, install installing and including the glimmer-dsl-libui gem, dotenv gem, and a few other standard libraries for handling URLs, HTTP requests, and JSON parsing. I'm using Dotenv and loading a local .env file in my project holding the API_KEY.



# Requirements
require 'glimmer-dsl-libui'
require 'dotenv'
require 'uri'
require 'net/http'
require 'json'

Dotenv.load
include Glimmer

The next step was to define the currencies and base values I want to work with.



# DATA
currencies = ['USD', 'EUR', 'SEK', 'JPY', 'KRW']
base_values = ['USD', 'EUR', 'SEK', 'JPY', 'KRW']
currencies = currencies.join('%2C%20')

Then I had to make sure to use the above values and create a method that fetches the values of these currencies from my selected API, and then use this data to create items for each currency that includes the symbol, rate and a place holder value of 0. These items are stored in an array, which is returned at the end.



def get_data(currency_array, base)
  data = []
  url = URI("https://api.apilayer.com/exchangerates_data/latest?symbols=#{currency_array}&base=USD")

  https = Net::HTTP.new(url.host, url.port)
  https.use_ssl = true

  request = Net::HTTP::Get.new(url)
  request['apikey'] = ENV['API_KEY']

  response = https.request(request)
  response_hash = JSON.parse(response.body)

  response_hash['rates'].each do |currency, rate|
    item = [currency, rate, 0]
    data.append(item)
  end
  data
end

Now to the main code block. Here we call the get_data method, passing in the currencies array and USD as arguments. This retrieves the updated exchange rate data for the specified currencies relative to USD.



# Fetches the exchange rate for each currency to USD.
updated_data = get_data(currencies, 'USD')

Next, the application window is created using the window method from the glimmer library. I've also named it and set the window dimensions.

Inside the window, we create a vertical box to hold the table and input field, basically like a "grid". The table is created using the table method and consists of three columns: "Currency," "Market Value," and "Converted Value."

Then using the cell_rows method, we pass in the updated_data_array.



window('Currency Converter', 1080, 800) {
  vertical_box {
    table {
      text_column('Currency')
      text_column('Market Value')
      text_column('Converted Value')

       cell_rows updated_data
    }
#...

On the bottom of the app, I added an input field using the search_entry method. This input field enter a value to convert.

The stretch false is pretty much just a bool telling the input field not to stretch vertically.



 # Input Field
    search_entry { |value|
      stretchy false
#...

To make the input field "responsive" to changes, I defined a on_changed block. In short the block takes the value in the input field, and copies the data array and replaces it with an updated one.



 # Action on input
      on_changed do
        new_value = value.text
        new_data ||= updated_data.dup
#...

We then iterate over each currency item in new_data and update the converted value based on the new input. The converted value is calculated and rounded to two decimals. The updated values are then stored back in the new_data array, which is rendered in the app.



# Iterates over each of the currencies added, and replaces the default "0" with the actual value.
        new_data.each do |currency|
          currency[2] = 0
          new_total = (currency[2]) + new_value.to_i * currency[1]
          currency[2] = new_total.round(2)
        end
      end
    }
  }
}.show

That's all there is to it really. It was fun trying a completely new library that I had no previous experience of, or heard about before and just figuring things out using the provided documentation.

You can find the full code here.

Fluttering With Me: My First App - Part 1

Mattias Velamsson — Thu, 02 Mar 2023 02:59:21 +0000

Hey!

Recently, I had a chat with a friend about mobile development and Flutter, and the more I learned about it, the more interested I became. I decided to try it for myself and document my journey of creating my first app through a blog post. (spoiler: I'm hooked...)

The app that I will be building is a notetaking app, and it will evolve visually and functionally with each update.

Setup ⚙️

Setting up Flutter was both similar and different from other technologies I have used before. Although the syntax was different, it followed the same routine.

Since I am using Firebase as a backend for this project, installation and setup instructions are included.

Setting up Flutter and Firebase

To set up Flutter and Firebase, I followed these instructions:

Flutter - Get Started - MacOS
Flutter/Firebase Setup

I used Flutter Doctor in between installations to ensure everything was okay before moving on.

Here are two errors I encountered during the Flutter setup and their solutions:

(Note: for the second error, I copied the jbr folder, renamed it to jre, and the error was resolved.)

Creating the project.

flutter create --org com.yourdomainname mynotes

Adding Firebase. In the newly created project folder, use the following command in the terminal:
```
flutter pub add firebase_core
```

Once everything is installed, the pubspec.yaml should include the following dependencies:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  firebase_core: ^2.6.1
  firebase_auth: ^4.2.8
  cloud_firestore: ^4.4.2
  firebase_analytics: ^10.1.3

I customized my project to support Android and iOS. However, for this project, I will only be working with Android as I do not have an Apple Developer Account.

Now that setup is complete, let's move on to the fun stuff!

Home

For the Home view, I will be working directly from main.dart, as this is where MaterialApp is by default, and where the app initializes.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  runApp(MaterialApp(
    title: 'Home',
    theme: ThemeData(
      primarySwatch: Colors.orange,
    ),
    home: const LoginView(),
    routes: {
      loginRoute: (context) => const LoginView(),
      registerRoute: (context) => const RegisterView(),
      notesRoute: (context) => const NotesView(),
      verifyEmailRoute: (context) => const VerifyEmailView()
    },
  ));
}

In our main() function, I initialized Firebase to be able to manage authentication later on. I made it async to make it wait for the response from Firebase.initializeApp() before moving on. In the MaterialApp, I modified the color slightly to Orange and set LoginView() to be the entry-point.

To navigate between views, I added routes that can be easily called later. The routes are imported via lib/views/constants/routes.dart that I created.

const loginRoute = '/login/';
const registerRoute = '/register/';
const notesRoute = '/notes/';
const verifyEmailRoute = '/verifyEmail/';

Now, let's go through the code for HomePage.

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.done:
            final user = FirebaseAuth.instance.currentUser;
            if (user != null) {
              if (user.emailVerified) {
                return const NotesView();
              } else {
                return const VerifyEmailView();
              }
            } else {
              return const LoginView();
            }
          default:
            return const CircularProgressIndicator();
        }
      },
    );
  }
}

In here we do a bunch of things.

The HomePage is actually just checking the authentication state of the user. If the user is authenticated, the NotesView() is displayed, otherwise the LoginView() is displayed.

To check the user's authentication state, we're using FirebaseAuth.instance.authStateChanges() which returns a Stream<User?>. If the connection is done, we can get the current user with FirebaseAuth.instance.currentUser, if there is one. If not, we'll show the LoginView().

So to round up the logic:

There is a user => NotesView();
User is Authenticated and Verified => NotesView();
Any other situation => LoginView();

The CircularProgressIndicator() is just displayed while waiting for the connection to be done.

That's all for HomePage!

Registration

To be able to login, we first need to register - right? Let's implement this!

To implement the registration view, we create a new file called register_view.dart in the lib/views folder. This file contains a stateful widget class called RegisterView.

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:mynotes/utilities/show_error_dialog.dart';

import 'package:mynotes/views/constants/routes.dart';

class RegisterView extends StatefulWidget {
  const RegisterView({super.key});

  @override
  State<RegisterView> createState() => _RegisterViewState();
}

class _RegisterViewState extends State<RegisterView> {
  late final TextEditingController _email;
  late final TextEditingController _password;

  @override
  void initState() {
    _email = TextEditingController();
    _password = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _email.dispose();
    _password.dispose();
    super.dispose();
  }
 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Register!'),
      ),
      body: Column(
        children: [
          TextField(
              controller: _email,
              enableSuggestions: false,
              autocorrect: false,
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(hintText: 'Enter your email')),
          TextField(
            controller: _password,
            obscureText: true,
            enableSuggestions: false,
            autocorrect: false,
            decoration: const InputDecoration(hintText: 'Enter your password'),
          ),
          TextButton(
            onPressed: () async {
              final email = _email.text;
              final password = _password.text;
              try {
                final userCredential =
                    await FirebaseAuth.instance.createUserWithEmailAndPassword(
                  email: email,
                  password: password,
                );
                Navigator.of(context).pushNamed(verifyEmailRoute);
                final user = FirebaseAuth.instance.currentUser;
                await user?.sendEmailVerification();
              } on FirebaseAuthException catch (e) {
                showErrorDialog(context, e.code.toString());
              } catch (e) {
                showErrorDialog(context, e.toString());
              }
            },
            child: const Text('Register'),
          ),
          TextButton(
              onPressed: () {
                Navigator.of(context)
                    .pushNamedAndRemoveUntil(loginRoute, (route) => false);
              },
              child: const Text('Already registered? Login here.'))
        ],
      ),
    );
  }
}

TextEditingController
The widget has two TextEditingController objects named _email and _password. These controllers are used to keep what the user enters in the TextField widgets.

initState
This is called when the widget first gets created. It basically just initializes _email and _password with empty strings.

dispose
This one was a bit tricky to understand for me at first. But this basically disposes/removes the _email and _passwordcontrollers once our widgets are removed from the tree(view changes).

build and Scaffold
Here we're building the actual container/skeleton of for how the view should look. The Scaffold is basically the frame holding everything, and then we add other Widgets such as AppBar, TextField, TextButton etc.

TextField
We use these widgets to get the input from the user. These fields are then connected to each of controllers created earlier: _emailand _password

TextButton
The first TextButton widget is the registration button. When pressed, it attempts to create a new user account using the entered email and password.

Successful creation => verifyEmailView();
Unsuccessful creation => Displays an error popup with the error message.

Here's the entire process of how it looks in Firebase's Console as well.

That's all for Register, now lets check the LoginView!

Login

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'dart:developer' as devtools show log;

import 'package:mynotes/views/constants/routes.dart';

import '../utilities/show_error_dialog.dart';

class LoginView extends StatefulWidget {
  const LoginView({super.key});

  @override
  State<LoginView> createState() => _LoginViewState();
}

class _LoginViewState extends State<LoginView> {
  late final TextEditingController _email;
  late final TextEditingController _password;

  @override
  void initState() {
    _email = TextEditingController();
    _password = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    _email.dispose();
    _password.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('Login 🔑'),
      ),
      body: Container(
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    'https://static.vecteezy.com/system/resources/previews/009/376/704/original/abstract-dark-orange-blob-element-free-png.png'),
                fit: BoxFit.contain,
                alignment: Alignment(1, 1))),
        child: Column(
          children: [
            TextField(
              controller: _email,
              enableSuggestions: false,
              autocorrect: false,
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(
                hintText: 'Enter your email',
              ),
            ),
            TextField(
              controller: _password,
              obscureText: true,
              enableSuggestions: false,
              autocorrect: false,
              decoration: const InputDecoration(
                hintText: 'Enter your password',
              ),
            ),
            TextButton(
              onPressed: () async {
                final email = _email.text;
                final password = _password.text;
                try {
                  final userCredential =
                      await FirebaseAuth.instance.signInWithEmailAndPassword(
                    email: email,
                    password: password,
                  );
                  final user = FirebaseAuth.instance.currentUser;
                  if (user?.emailVerified ?? false) {
                    Navigator.of(context).pushNamedAndRemoveUntil(
                      notesRoute,
                      (route) => false,
                    );
                  } else {
                    Navigator.of(context).pushNamedAndRemoveUntil(
                        verifyEmailRoute, (route) => false);
                  }
                  devtools.log(userCredential.toString());
                } on FirebaseAuthException catch (e) {
                  await showErrorDialog(context, (e.code.toString()));
                } catch (e) {
                  await showErrorDialog(context, e.toString());
                }
              },
              child: const Text('Login'),
            ),
            TextButton(
                onPressed: () {
                  Navigator.of(context)
                      .pushNamedAndRemoveUntil(registerRoute, (route) => false);
                },
                child: const Text('Not registered? Click here!'))
          ],
        ),
      ),
    );
  }
}

Similar to the RegisterView() we have controllers for our email_ and _password so I won't be going through these again.

The important thing on this page is how we handle the Login itself with the FirebaseAuth.

First, we assign the result of FirebaseAuth.instance.signInWithEmailAndPassword() to a object called UserCredential.

We then run some logic:

User is verified => notesView()
User not verified => verifyEmailView()

If there are any errors, it will show an error popup similar to the one on the RegisterView.

The last button directly navigates to the RegisterView().

That's about it for the Login. But how about Logging out?

NotesView & Logout

This one was a bit tricky to understand at first, as you generally want a logout option to be easily accessible. For now I decided to try adding actions in the AppBar on the notesView and use that for logging out.

enum MenuAction { logout }

class NotesView extends StatefulWidget {
  const NotesView({super.key});

  @override
  State<NotesView> createState() => _NotesViewState();
}

class _NotesViewState extends State<NotesView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Notes 📝'),
        actions: [
          PopupMenuButton<MenuAction>(
            onSelected: (value) async {
              switch (value) {
                case MenuAction.logout:
                  final shouldLogout = await showLogOutDialog(context);
                  if (shouldLogout) {
                    await FirebaseAuth.instance.signOut();
                    Navigator.of(context)
                        .pushNamedAndRemoveUntil(loginRoute, (_) => false);
                  }
              }
            },
            itemBuilder: (context) {
              return const [
                PopupMenuItem<MenuAction>(
                    value: MenuAction.logout, child: Text('Logout')),
                PopupMenuItem<MenuAction>(child: Text('Second Page'))
              ];
            },
          )
        ],
      ),
      body: const Text('Hello NotesView'),
    );
  }
}

Future<bool> showLogOutDialog(BuildContext context) {
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
          title: const Text('Sign Out Alert'),
          content: const Text('Are you sure you want to sign out?'),
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
                child: const Text('Cancel')),
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                child: const Text('Logout'))
          ]);
    },
  ).then((value) => value ?? false);
}

First we define an enum MenuAction which has the value logout. This is to define the options in our PopupMenu in the AppBar.

In the AppBar of NotesView we add the Actions widget that contains a PopupMenuButton. The PopupMenuButton is created with a list of PopupMenuItem widgets. In this case, there are two items, but only one with the value MenuAction.logout, which obviously is for logging out.

onSelected
As it's name, when the user selects an item in the menu. In this case when the user selects the MenuAction.logout we will show an message confirming that the user really want to log out.

If they confirm, we call FirebaseAuth.instance.sigOut() to log out the user and then push them over to the LoginView again.

showLogOutDialog
As mentioned earlier, this shows a popup that requests the user confirm that they want to logout. The function returns a Future<bool>. true if they confirm, or false if they cancel and want to stay logged in.

But why is the showLogOutDialog a "Future"?

The easiest way I can explain, and how I understand it is:

a value that will be available at some point in the future, but not necessarily immediately.

In our case, this would be when/if the user clicks Confirm/Cancel in the popout.

And as Futures are non-blocking, it also lets the app keep running in the background while Future is waiting for it's value. Basically a way to perform async operations and make the app responsive while loading data.

That's about it!

Last thing I will go through is the showErrorDialog() which I've been using throughout the app.

showErrorDialog

lib/utilities/show_error_dialog.dart

import 'package:flutter/material.dart';

Future<void> showErrorDialog(
  BuildContext context,
  String text,
) {
  return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('An error occured'),
        content: Text(text),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('Ok'),
          ),
        ],
      );
    },
  );
}

Just as the logout popup, this is also a Future object as it is waiting for the value of errors that might happen.

Overall, this function can be called whenever there is an error that needs to be displayed to the user in a pop-up dialog box.

And that's it for Part 1. Phew! That was quite a lot. It's been insanely fun building with Flutter so far, and I'm definitely going to dig a lot deeper into it and continue on this app. Hopefully Part 2 will be up next week 🤞

Here is the current final result.

Ruby Challenges P1

Mattias Velamsson — Thu, 16 Feb 2023 08:56:13 +0000

As I prepare for a new side project using Ruby, I thought it'd be a good idea to brush up on my logic skills. So, I decided to tackle some fun coding challenges to get back into the groove, and then make a post about it where I walk you through how I solved it.

To be honest, I'm not the strongest at math, and I consider myself more of a creative type. But, even though these challenges were relatively easy, I felt proud of myself for figuring out the solutions on my own and understanding the logic behind them.

It's been only a few months since I started, but I'm already amazed by the progress I've made. I'm really excited to see where I'll be in a year if I keep up this pace!

Either way, lets get started! ✌🏼

Challenge Structure:

Challenge Description.
My psuedo code I made before completing the challenge
My solution

Find The Numbers

Challenge: In a given array, find and count the numbers of integers with a value greater than 5.

# -- Psuedo Code -- #
# 1. Create an array with mixed numbers
# 2. Create an final_array that will hold all the numbers we "find" that are greater than 5.
# 3. Go through each of the numbers in the array, checking it's value and comparing it with 5.
# 4. If the check is positive ( greater than 5 ) then push that number to our final_array
# 5. Get the total numbers of final_array to show result
# 6. Print result

arr = [17,7,3,6,10,1]
final_arr = Array.new
arr.each {|number| number >= 5 ? new_arr << number : nil }
puts "this is how many numbers were bigger than 5: #{new_arr.count}"

Prime Number?

Challenge: Create an algorithm that finds prime numbers, you have to decide if the number in question can only be divided by itself and 1.

Going to be honest and say this confused me a lot. I didn't really understand the math/logic of a prime number at all at first

# -- Psuedo Code -- #
# 1. Create method that takes one argument
# 2. Check that the number is less or equal to 1, or if it's even. If it is, it's not a prime number.
# 3. Check if number is greater than 2, and loop through all numbers from 2 to the square root of number.
# 4. Check if it can be divided by the the integer without any remainder = not a prime number
# 5. If the loop completes without finding any of the previous things, then number is prime. Print "PRIME! ⭐️".

def prime_number(number)
  if number <= 1 || number.even?
    puts 'NOT A PRIME NUMBER! ❌'
  elsif (2..Math.sqrt(number)).all? { |i| (number % i).nonzero? }
    puts 'PRIME! ⭐️'
  else
    puts 'NOT A PRIME NUMBER! ❌'
  end
end


prime_number(3)

Sum of Prime Numbers

Challenge: # Identify and calculate the sum of prime numbers in an array.

# -- Psuedo Code -- #
# 1. Create a method that takes an array of numbers
# 2. Create a variable containing the sum of found prime numbers
# 3. Iterate over the array, checking if the values are prime or not
# 4. If it's a prime number, add to sum
# 5. Print out total value of all the primes

def find_prime_number(arr)
  total = arr.reduce(0) do |sum, number|
    if number <= 1 || number.even?
    sum
    elsif (2..Math.sqrt(number)).all? {|i| (number % i ).nonzero? }
      sum + number
    else
      sum
    end
  end
  puts "Total total of primes in array => #{total}"
end

find_prime_number([3,0,3, 54, 43, 11, 123, 322])

Factorial Numbers?

Challenge: # The factorial of a number is the product of all the positive integers that are less than or equal to the number in question.
For example, for the number 6, the factorial would be 1 x 2 x 3 x 4 x 5 x 6 = 720.

# -- Psuedo Code -- #
# 1. Create method that takes one argument(number)
# 2. Create an array containing all the numbers from 1 to number.
# 3. Iterate over the array and add the value to a sum.
# 4. Print out sum

def factorial_numbers(number)
  arr = (1..number).to_a
  sum = arr.reduce(1) do |accmulator, value|
    accmulator * value
  end
  puts sum
end

factorial_numbers(6)

Find repeated digits

Challenge: # Your objective is to use Ruby to validate whether or not the number is made up of a series of the same digit in a row.

I must say I'm not EXACTLY sure what the expected result was here but, I managed to get a logic that outputs if it has a series of the same digit or not at least.

# -- Psuedo Code -- #
# 1. Make a method that takes a number
# 2. Split the number into an array
# 3. Check if the number is unique or not
# 4. Unless 0, disqualify.

def check_repeated_digits_option(number)
  arr = number.to_s.chars.map(&:to_i)
  puts arr.uniq.length != 1 ? "#{number} => Congrats! Digits are are all unique" : "#{number} => Disqualified. Contains duplicates."
end

Fibonacci challenge

Challenge: A Fibonacci Sequence is created by adding two numbers to create the next number in the sequence.
You then sum that number with the one preceding it to get the next number,, and so on.
For example, if you have the sequence 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, then the next number in the sequence is 55.

# -- Psuedo Code -- #
# 1. Create a method that takes a max value
# 2. Have a variable that holds the count(total)
# 3. Give two numbers to start with
# 4. Create a loop that runs until given max value
# 5. While the loop runs, take the last item in the array, and add the second to last item in the array to count.
# 6. Add the new number to the array
# 7. Print out result

def fibonnaci_count(max)
  count = 0
  arr = [0,1]
  while count <= max
    count = arr.last + arr[-2]
    arr << count
  end
  arr
end


sequence = fibonnaci_count(2000)
puts "The sequence is: #{sequence}"

Missing Number Game

Challenge: Create a program that takes a series of numbers and examines it to find the numbers missing to make it a perfect range.

For example, the series of numbers could be [2, 1, 5, 4, 6, 9, 7, 8, 10].

This array is missing the number 3. The goal of this problem is to write code that finds which numbers are missing, and print them out.

# -- Psuedo Code -- #
# 1. Create a method that takes an array of numbers.
# 2. Sort the array, to make it work in any order.
# 3. Get the smallest and biggest value to get a start and end point.
# 4. Create a new, perfect array with the range between those numbers
# 5. Use the new array and compare it to the old array
# 6. Create a new missing_numbers array that will be filled with the numbers not included in old_array when comparing.

def missing_number(array)
  array = array.sort
  first = array.min
  last = array.max
  perf_arr = (first..last).to_a
  missing_numbers = []
  if array == perf_arr
    puts 'No missing numbers'
  else
    perf_arr.each do |number|
      missing_numbers << number unless array.include?(number)
    end
    puts "These are the numbers missing: #{missing_numbers}"
  end
end

missing_number([1,3,4,5,9,15,8,10,7,6])

Conclusion

It was actually very fun going back to some good ol' logical thinking, as I had to troubleshoot and figure out what I was doing wrong along the way, and learn new techniques to get the same result.

Refactoring was also a big part of it during these tests, as my first versions were often too long and overly complicated for no reason, especially when Ruby is as smart as it is 🤩

My takeaway from all of this is that I'm making daily improvements, and it feels amazing. Although this might be like nothing to others, I'm very proud of my progress, especially in my weak areas such as this.

Live to learn, learn to live, then teach others.

Until next time! ✌🏼

Organize Your Downloads Folder with Ruby #2

Mattias Velamsson — Tue, 07 Feb 2023 09:22:10 +0000

So, after working with a side-project for about 6 hours today, pulling my hair because CSS makes absolutely no sense to me sometimes, I decided to improve on the Downloads Organizer I made in Ruby the other week.

This is part two / version two. You can view the first article here: Organize Your Downloads Folder with Ruby

So what I added was a way of checking the type of the files, and also organizing them into their own subfolders. To achieve this I used regex to the check the file-endings of the files.

After getting it to work, I had to refactor.. A LOT.. But here are the final results, a couple of functions doing bits and pieces I'll walk you through under the codeblock.

require 'find'
require 'fileutils'

downloads_folder = File.join(Dir.home, 'Downloads')
## Arrays used in the filtering logic.
yearly_folders = ["2019", "2020", "2021", "2022", "2023", "2024", "2025"]

def check_type(file)
  case file
  when /^.*\.(pdf|doc|docx|PAGES|txt)$/i
    'documents'
  when /^.*\.(gif|jpg|jpeg|png|svg|mp4|mov|mp3|mpeg4|heic)$/i
    'media'
  when /^.*\.(dmg|exe|jar)$/i
    'programs'
  when /^.*\.(zip|tar|rar)$/i
    'archives'
  else
    'other'
  end
end

def create_directory(directory, subfolder)
  final_directory = File.join(directory, subfolder)
  Dir.mkdir(final_directory) unless File.directory?(final_directory)
  final_directory
end

def move_file(file, directory)
  final_directory = create_directory(directory, check_type(file))
  FileUtils.mv(file, final_directory) unless file === directory
end

def organize_downloads(downloads_folder, yearly_folders)
  Dir.foreach(downloads_folder) do |file|
    next if file == '.' || file == '..' || yearly_folders.include?(file)

    path = File.join(downloads_folder, file)
    next unless File.exist?(path)

    last_edited = File.mtime(path)
    year = last_edited.strftime('%Y')
    new_directory = create_directory(downloads_folder, year)

    move_file(path, new_directory)
  end
end

organize_downloads(downloads_folder, yearly_folders)

So, when the app is started, running the organize_downloads method, the same old logic used for getting the files, and year modified as explained in part 1.

When it starts to differ is when assigning new_directory to the value of create_directory.

1 `create_directory`

In this method, we give it two attributes: directory and year, which is set in organize_downloads. It then creates a new variable, that eventually just returns a path to the location we want to put the file in.

From there we create a new folder with the new path, UNLESS the folder already exist.

And finally, we return the final_folder path.

Now, back to organize_downloads and what happens in move_file

2 `move_file`

Here, we give it two attributes: path, which basically is the pointer to the file itself, and new_directory which is the return that we got from the create_directory in step 1.

In here, we again create a final_directory, but this time to also include subfolders.

This one is pretty easy, it re-uses the create_directory method again, but to create the subfolder. But instead of having the downloads_folder and year, we instead give it the updated directory(directory) and the return of whatever check_type does (explained in step 3).

And after getting these values, we run the same FileUtils.mvto just move it to its new location.

3 `check_type`

The last piece of the puzzle to explain, and the easiest. A switch condition that checks if the letters/digits after "." at the end of the filename matches a specific set of filetypes set by me.

How I decided to structure mine was:

Media (images/videos)
Programs (apps, installers)
Documents (PDFs, docs)
Archives (rar-files etc)
Other (The rest)

I'm sure I've probably missed filetypes etc, but I just wanted to get it to work really.

It then returns a string for whatever match it gets, and then goes on with the logic back in move_file.

And that's it! Version 2.0 of my Ruby app organizing the downloads folder. Good times.

In the future I would like to look at:

Add more structure
Potentially make it even more dynamic and take inputs
GUI? 👀

Organize Your Downloads Folder with Ruby

Mattias Velamsson — Mon, 30 Jan 2023 08:48:35 +0000

Are you like me and have an ocean of files in your downloads folder? No matter how I try or promise myself I'll clean it up daily I never do. So, this morning I decided to throw a small app together with Ruby and do something about it!

What the app does:

Goes through all the files and directories in your Downloads folder and checks the last modified date, and then moves the file/directory into a subfolder in downloads according to the year it was last modified.

require 'find'
require 'fileutils'


downloads_folder = File.join(Dir.home, "Downloads")

## Array of years, used in the filtering logic.
yearly_folders = ["2019", "2020", "2021", "2022", "2023", "2024", "2025"]

Dir.foreach(downloads_folder) do |file|
## Filtering logic.
## Skip Subfolders and Foldersnames included in "yearly_folders" array.
  next if file == "." || file == ".." || yearly_folders.include?(file)

  ## Makes creates a string for the path of the file/directory
  path = File.join(downloads_folder, file)
  next unless File.exists?(path)

  ## Getting the modified date of the file/directory.
  last_edited = File.mtime(path)
  year = last_edited.strftime("%Y")
  new_directory = ("#{downloads_folder}/#{year}")

  ## If a folder with modified file's year does not exist - create it.
  unless File.directory?(new_directory)
    puts "Create Folder"
    Dir.mkdir(new_directory)
  end

  ## If the file/directory is NOT the same as the new_directory, move it to the new directory.
  if path != new_directory
    FileUtils.mv(path,new_directory)
  end
end

RESULT

Now, this works well enough for me right now. I've also added it to automatically run whenever I login to my account. 💪🏻

But in the future I'll be implementing:

Subfolders for months
Filter by filetype

CORS - As Simple As Possible

Mattias Velamsson — Thu, 26 Jan 2023 07:26:39 +0000

Today, I ran into a CORS error while working on a project so I decided to dig a bit deeper into what it is, and why it happened. Now, a lot of the articles I found are pretty complex, so I decided to give a go at describing it in a short, concise way how it works.

What?

A technology to specify which domains can access a servers resources.

Why?

Security.
You can read more about it here:

How?

A request gets sent to access something (in this example an image on my portfolio).

<img src="https://mattiasvelamsson.me/media/avatar.png" />

Server checks the request and it’s header.

➡ Request ✅
It will respond with a 200(OK!) and the image will display on your site.

➡ Request ❌
It will respond with a 5xx(DENIED!) and the image will appear broken, and you will have a status code in your console.

Errors?

The simple answer is usually one of two:

The type of request (method) you are sending is not allowed. GET / PATCH / POST / DELETE
Typos in your URL

I solemnly swear I have quadrouple-checked the two options above.

CORS is not enabled on the server (if you’re not the owner, tough luck. Journey ends here.)

It is enabled but still doesn’t work?

Open the console > Network > Your Request and double check that you can see “Access-Control-Allow-Origin header” in the list.

If not, you need to add middleware.
If it is but doesn’t work, check if it is a non-standard HTTP request (not GET, PUT, PATCH, DELETE) and you’ll need to add them.

I checked everything?

Sometimes errors thrown in your project are displayed as text, and when the server outputs them it actually throws in headers as well that in turn will trigger CORS policy. And even if the server error does not print as text but is handled via an HTTP code that is not 200, you will also get the CORS policy error.

Middleware

The keys you throw into your CORS policies, stating what is allowed and what is not. It allows you to customize it.

Preflight

With Preflight you can add extra options such as checking if the request you want to do is allowed and ok or not, before sending the request. Now, this can also be cached in Preflight Cache with a TTL(Time To Live). You can read more about it here: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

Alright. There’s obviously way more abut this, but this is a quick overview. Ciao!

The Power of Custom React Hooks: Building a Form with Validations

Mattias Velamsson — Thu, 19 Jan 2023 05:12:40 +0000

As I've been self studying React.js and recently learned about Custom Hooks, I decided it was time for a post about it!

In this example, I'll be showing step-by-step how to create some simple form validation, with error handling using Custom Hooks.

I will be working with three files. App.js, Form.js and input-hook.js

Setup

Project Structure:
📦src
┣ 📂components
┃ ┣ 📜Form.js
┣ 📂hooks
┃ ┣ 📜input-hook.js
┣ 📜App.js
┣ 📜index.css
┗ 📜index.js

`App.js`

Here we'll just render the form, nothing else.

import Form from "./components/Form";

function App() {
  return (
    <div className="app">
      <Form />
    </div>
  );
}


export default App;

`input-hook.js`

import React, { useState } from "react";

const useInput = (validateValue) => {
  const [inputValue, setInputValue] = useState("");
  const [inputTouched, setInputTouched] = useState(false);

  const isValid = validateValue(inputValue);
  const hasError = !isValid && inputTouched;

  const inputChangeHandler = (e) => {
    setInputValue(e.target.value);
  };

  const inputBlurHandler = (e) => {
    setInputTouched(true);
  };

  const reset = () => {
    setInputValue("");
    setInputTouched(false)
  };

  return {
    value: inputValue,
    isValid,
    hasError,
    inputChangeHandler,
    inputBlurHandler,
    reset,
  };
};

export default useInput;

First, we import useState, as we will need it in our custom hook.

The useInput custom component starts by using the useState hook to create three state variables: value, isInputValid, and hasError. We also included a argument validationFn, which is where we will pass the logic for how to validate the field, from our Form.js.

value

Keep track of what the user is typing isInputValid
Checks validity of whatever is typed hasError
A Boolean tracking both if the user started typing, and if what they typed is valid or not.

The first one inputChangeHandler is passed to the input's onChange prop. It updates the value state by checking the input's value.

The second one inputBlurHandler is passed to the input's onBlur prop. The handler checks if the user started typing or not.

The third one reset is the function we use to reset the form to it's initial state.

Finally, we return all the properties we need to use in our Form.js as an object.

`Form.js`

Form Structure

  return (
    <form onSubmit={submitHandler}>
      <div className="control-group">
        <div className={nameInputClasses}>
          <label htmlFor="name">First Name</label>
          <input
            value={nameInputValue}
            onBlur={nameBlurHandler}
            onChange={nameChangeHandler}
            type="text"
            id="name"
          />
          {nameHasError && <p className="error-text">Enter a name.</p>}
        </div>
        <div className={lastNameInputClasses}>
          <label htmlFor="lastname">Last Name</label>
          <input
            value={lastNameInputValue}
            onChange={lastNameChangeHandler}
            onBlur={lastNameBlurHandler}
            type="text"
            id="lastname"
          />
          {lastNameHasError && <p className="error-text">Enter a last name.</p>}
        </div>
      </div>
      <div className={emailInputClasses}>
        <label htmlFor="email">E-Mail Address</label>
        <input
          value={emailInputValue}
          onChange={emailChangeHandler}
          onBlur={emailBlurHandler}
          type="text"
          id="email"
        />
        {emailHasError && <p className="error-text">Enter a real email.</p>}
      </div>
      <button type="submit" disabled={!formIsValid}>
        Submit
      </button>
    </form>
  );
};

export default Form;

In this component, there will be a lot going on. I'm going to break it down piece by piece.

First, we import the necessary dependencies: useInput hook, React, and useEffect and useState.

import useInput from "../hooks/input-hook";
import React, { useEffect, useState } from "react";

We then use the useState hook to create a state variable formIsValid which we set to false initially. It is used to check if our form is ready to be submitted or not.

const [formIsValid, setFormIsValid] = useState(false);

Next we are using our useInput Custom Hook to create three new objects. One which checks name, lastName and lastly email.

In our useInput's argument, we pass a anonymous function. In this situation, we use that as an opportunity to check the input.

For the name fields, I make sure it's not empty, and for the email field I use RegEx to make sure it's a valid email format(it's not perfect, but works).

  const {
    value: nameInputValue,
    isInputValid: isNameValid,
    hasError: nameHasError,
    inputChangeHandler: nameChangeHandler,
    inputBlurHandler: nameBlurHandler,
    reset: nameReset,
  } = useInput((name) => name.trim() !== "");

  const {
    value: lastNameInputValue,
    isInputValid: isLastNameValid,
    hasError: lastNameHasError,
    inputChangeHandler: lastNameChangeHandler,
    inputBlurHandler: lastNameBlurHandler,
    reset: lastNameReset,
  } = useInput((lastName) => lastName.trim() !== "");

  const {
    value: emailInputValue,
    isInputValid: isEmailValid,
    hasError: emailHasError,
    inputChangeHandler: emailChangeHandler,
    inputBlurHandler: emailBlurHandler,
    reset: emailReset,
  } = useInput((email) =>
    email.trim().match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)
  );

Then, we use useEffect to check if the inputs have a value, and if so set the form validity to true.

  useEffect(() => {
    if (nameInputValue && lastNameInputValue && emailInputValue) {
      setFormIsValid(true);
    } else {
      setFormIsValid(false);
    }
  }, [nameInputValue, lastNameInputValue, emailInputValue]);

Next is the submitHandler which gets called when the form is submitted. Basically what it does is:

Prevents a refresh on submit
Check that the form is valid
If valid, submits and resets the input fields. Otherwise just return(do nothing).

  const submitHandler = (event) => {
    event.preventDefault();

    if (!formIsValid) {
      return;
    }

    nameReset();
    lastNameReset();
    emailReset();
  };

Now, the next step is optional, it's basically playing with CSS to add classes with colors depending on the forms validity.

  const nameInputClasses = nameHasError
    ? "form-control invalid"
    : "form-control";

  const lastNameInputClasses = lastNameHasError
    ? "form-control invalid"
    : "form-control";

  const emailInputClasses = emailHasError
    ? "form-control invalid"
    : "form-control";

Check the objects value and if it has any error, change class to form-control invalid.

And that's it!

Here's an example of the result:

Scraping with Ruby p.1

Mattias Velamsson — Tue, 17 Jan 2023 09:29:42 +0000

Hi,

This time I will be walking through how to scrape a website using Ruby. There are plenty of guides out there for this, and I used a lot of them to freshen up my memory and try new things.

Goal: To get a better understanding of scraping, getting the correct data and how to use Nokogiri + Watir together.

I will be splitting this up in parts as I go. Future parts will include fetching multiple pages, parsing to CSV and more.

Why use Nokogiri and Watir?

Nokogiri is a gem that makes it easy to parse and search HTML and XML documents.
Watir is a gem that allows us to interact with a website using HTTP requests.

Together, they are a good match and makes it very straight forward and easy.

Getting started

First, you'll need to install the Nokogiri and Watir gems. You can do this by running the following command in your terminal:

gem install nokogiri watir

Adding them to your project.

require 'nokogiri'
require 'watir'

response = Watir.get('https://www.example.com')
doc = Nokogiri::HTML(response.body)

In the above example, we use Watir to make a GET request to the website "https://www.example.com" and store the response in the "response" variable. We then use Nokogiri to parse the HTML from the response's body and store it in the "doc" variable.

Searching and Extracting Data

Now that we have the HTML from the website in the "doc" variable, we can use Nokogiri to search and extract information from it. Here's an example of how to search for all the h1 tags on the website:

h1_tags = doc.search('h1')

h1_tags.each do |h1|
  puts h1.text
end

Above, we use Nokogiri's search method to find all the h1 tags, and then iterate over each h1 tag and print its text. Easy peasy, right?

But the search method is only one among many methods you can use. Another one that is really convenient is the CSS selector.

content_p = doc.css('.content p')

puts content_p.text

This will search the HTML in doc for a paragraph with the class ".content", and then prints the text inside that paragraph.

And that's pretty much it! ✌🏼

Now, this is just the tip of the iceberg of what you can do with this.

In the next part, I will go more into things such:

Fetching all elements and adding logic
Passing data fetched to a file such as CSV
Error handling
Adding headers to your request
and more.

To-Do List Using JavaScript

Mattias Velamsson — Wed, 11 Jan 2023 03:33:42 +0000

Hey guys, in this post, I'm going to walk you through a small JavaScript program that allows you to create a simple to-do list.

This builds on Wesbos JS30's day 15 challenge.

The reason I'm making this "guide" is to have a deeper understanding on different ways this can be done, as I'm currently working on a React-version off this as well.

The key functions of this app will be:

Adding new tasks to the list
Toggle Done/Incomplete
Use LocalStorage to keep the data on page-reload.

First, let's take a quick look at the HTML code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>To-Do LocalStorage</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button class="wrapper">
      <h2>To-Do</h2>
      <p></p>
      <ul class="tasks">
        <li>Loading tasks...</li>
      </ul>
      <form class="add-tasks">
        <input type="text" name="task" placeholder="Task Name" required />
        <input type="submit" value="+ Add Task" />
      </form>
  </body>
</html>

Now, let's dive into the JavaScript code.

The first thing we do is select the form and the list elements on the website using document.querySelector(). We also use the localStorage.getTask() method to retrieve any existing tasks from Local Storage. If there are no tasks, the variable tasks will be an empty array.

      const addTasks = document.querySelector(".add-tasks");
      const list = document.querySelector(".tasks");
      let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

Add Task function

The next function is the addTask function, which is called when the user submits the form to add a new task to the list.

The function takes in the event that is generated when the form is submitted. As the form is a submit, event.prevenDefault(); will keep the page from refreshing. Then it gets the text entered in the form and creates a new object with that text, and sets the completion-status done to false.

function addTask(event) {
        event.preventDefault();
        const text = this.querySelector("[name=task]").value; 

        const newTask = {
          text,
          done: false,
        };

        tasks.push(newTask);
        populateList(tasks, list);
        localStorage.setItem("tasks", JSON.stringify(tasks));
        this.reset();
      }

Then it adds this new task to the existing list of tasks, calls the populateList function to update the list on the website, saves the updated list of tasks in the browser's local storage, and finally resets the form so you can add more tasks.

Populate List function

The next function is the populateList function, which updates the list displayed on the website.

It first clears any existing content in the list, then uses map to generate a new one with the updated tasks, and finally transforms the new list into an array of strings for each task. This array is then joined into a single string and then set as the innerHTML of the list.

function populateList(tasks = [], list) {
        list.innerHTML = tasks
          .map((task, i) => {
            return `
          <li>
            <input type="checkbox" data-index=${i} id="task${i}"
            ${task.done ? "checked" : ""}/>
            <label for="task${i}">${task.text}</label>
          </li>
          `;
          })
          .join(""); 
      }

Toggle Done function

The next function is the toggleDone function. This function is called when the user clicks on one of the checkboxes next to an task on the list. It checks if the element that was clicked on is an input element and if it isn't, it exits the function. It then retrieves the index of the clicked task from the dataset, and uses this to toggle the done property in the tasks list. Then, it saves the updated list of tasks in the browser's local storage and calls the populateList function to update the list on the website.

  function toggleDone(e) {
        if (!e.target.matches("input")) return; // skips if target is not an input.
        // event delegation - chatGPT
        const element = e.target;
        const index = element.dataset.index;
        tasks[index].done = !tasks[index].done;
        localStorage.setItem("tasks", JSON.stringify(tasks));
        populateList(tasks, list);
      }

Event Listener

The last part is event listeners.
addTasks.addEventListener("submit", addTask);
listens for the 'submit' event on the form.

list.addEventListener("click", toggleDone);listens for the 'click' event on the tasks list. When this event is fired, the toggleDone function is called.

populateList(tasks, list) will display the existing tasks on the website when the script first runs.

addTasks.addEventListener("submit", addTask);

list.addEventListener("click", toggleDone);
populateList(tasks, list);

And that's it! A working todo-list.

Hello World

Mattias Velamsson — Wed, 04 Jan 2023 05:14:38 +0000

This is some gibberish.

JS Video Player

Mattias Velamsson — Wed, 04 Jan 2023 01:45:13 +0000

This is an exercise from the JS30-challange

So, for todays challenge we'll be making a video player in JavaScript.

For reference, this is the HTML skeleton that I'll be using when selecting my different elements.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Video Player</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="player">
      <video class="player__video viewer" src="video.mp4"></video>

      <div class="player__controls">
        <div class="progress">
          <div class="progress__filled"></div>
        </div>
        <button class="player__button play-toggle" title="Toggle Play">►</button>
        <input
          type="range"
          name="volume"
          class="player__slider"
          min="0"
          max="1"
          step="0.05"
          value="1"
        />
        <input
          type="range"
          name="playbackRate"
          class="player__slider"
          min="0.5"
          max="2"
          step="0.1"
          value="1"
        />
        <button data-skip="-15" class="player__button">« 15s</button>
        <button data-skip="15" class="player__button">15s »</button>
        <button class="player__button fullscreenToggle">[ ]</button>
      </div>
    </div>

    <script src="scripts.js"></script>
  </body>
</html>

Challenges & Goals

As this is my first time trying to build something like this, my main challenges and goal will be:

Understanding the different components needed
Targeting the correct elements
Understanding the logic needed for time, rate and progressbar.

For this specific player, the settings available will be:

Skipping forward/backwards
Toggling fullscreen
Setting playback rate
Changing volume
Tracking video progress

1. Getting the elements needed

First, I'll make variables for a bunch of elements I need.

const player = document.querySelector(".player");
const video = document.querySelector(".viewer");
const play = document.querySelector(".play-toggle");
const sliders = document.querySelectorAll(".player__slider");
const skipButtons = document.querySelectorAll("[data-skip]");
const progressBar = document.querySelector(".progress__filled");
const progress = document.querySelector(".progress");
const fullScreenToggle = document.querySelector(".fullscreenToggle");

2. Adding Play / Pause

Create the function.

function togglePlay() {
 // console.log("Play/Pause");
  const method = video.paused ? "play" : "pause";
  video[method]();
}

Play the video if it's paused, pause it if it's playing.

In this player, I want the user to be able to click anywhere on the video, as well as using the play/pause button. So I'll be making two event listeners for this.

video.addEventListener("click", togglePlay);
play.addEventListener("click", togglePlay);

And that should do it. Play/Pause should now be working.

3. Adding Volume / Playbackspeed

Create the function and logic.

function handleRangeUpdate() {
  video[this.name] = this.value;
}

"this" refers to the element/object this was called on. Take the video attribute and update it's value.

I have two sliders, both of which I selected with one query earlier. So, I'll iterate over them to get a listener on both.

sliders.forEach((slider) =>
  slider.addEventListener("change", handleRangeUpdate)
);

And now, changes on the slider will call the handleRangeUpdate function, and update the value accordingly.

4. Adding Skipping/Rewinding 15s

This one is pretty much the same as the last one, just with a bit of logic.

Creating the function

 function skip() {
  video.currentTime += parseFloat(this.dataset.skip);
 }

Takes the value of the buttons dataset.skip(see HTML)and adds it to the current time of the video.

Adding a listener

skipButtons.forEach((button) => button.addEventListener("click", skip));

Now, whichever button i click, depending on the value of the dataset.skip, it will either rewind or skip 10s on click.

5. Adding Fullscreen

This was pretty straight forward, as all the instructions could quickly be found in the MDN docs.

Creating the function

function handleFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
}

else if conditions to support other browsers.

Adding a listener

fullScreenToggle.addEventListener("click", handleFullscreen);

And that's it. There's no need to add any conditions for closing fullscreen, as this is already added in the browsers built in fullscreen video player.

6. Updating Progressbar

This one is a tiny bit different as it's an ongoing event as long as the video is playing.

Create the function

function handleProgress() {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.style.flexBasis = `${percent}%`;
}

We calculate the percent of the video, and set the flexBasis(CSS) value to the calculated percent.

Add a listener

video.addEventListener("timeupdate", handleProgress);

Listens for updates on the time of the video(automatically), and runs the function.

And that's it. Now the progressbar's css will update according to the video's time.

7. Set time manually in progressbar.

To achieve this, we'll use the positioning of the mouseclick comparative to the width of the Progress to get a value.

function time(e) {
  const setTime = (e.offsetX / progress.offsetWidth) * video.duration;
  video.currentTime = setTime;
}

Take the position where I clicked, divided by the width of the progressbar and multiply with duration to get a value.

And then the listener

progress.addEventListener("click", scrub);

Now, to take this functionality up a notch, I also added the option to drag the progressbar up/down - like you usually can do on videoplayers.

let mousedown = false;
progress.addEventListener("mousemove", (e) => mousedown && time(e));
progress.addEventListener("mousedown", () => (mousedown = true));
progress.addEventListener("mouseup", () => (mousedown = false));

Check if mousedown is true and then update the time according to the event(where your mouse is)

Results

Thoughts

I have to say it was way less complicated than I thought it would've been. The key points that I felt were either new or interesting were:

The various types of listeners you can use.
Using HTML5's media element.

Definitely a fun exercise and I'm excited to see what's next in the JS30 challenges.

New year, new opportunities.

Mattias Velamsson — Sun, 01 Jan 2023 03:52:25 +0000

Hello

Hi everyone and welcome.

A new year has just started and although I've a couple of new year resolutions, I've decided to also add blogging to the list!

Who am I?

My name is Mattias and I'm a junior developer living in Tokyo. I just graduated from Le Wagon in December 2022, but before that I spent 7 years working in technical support and as a Team Leader.

Even though that wasn't in the field of development, I've always been fascinated by it and loved the idea of building things on my own. When I was younger, I spent a lot of time on development forums and even created and hosted my own private servers for games like World of Warcraft (starting when I was just 13 years old). I've also messed around with modding games in the past.

I'm really excited to start this new year and dive into learning all sorts of new concepts and frameworks as I work towards becoming a skilled developer and who knows, maybe I can make my own mods from scratch in the future.

What will I use this blog for?

I'll be using this platform to track things I learn and projects I work on. Hope to see you around!