Forem: Timo Ernst

JavaScript RPG Game Development | Episode 4: Music and Sound Effects

Timo Ernst — Thu, 10 Mar 2022 17:10:50 +0000

In this new episode we’ll add music and sound effects to our JRPG game.

If you’re new to this series, make sure to check out episode 1 first: https://youtu.be/W4SVdtY6wZs

Tutorial Video

How to embed YouTube videos into dev.to posts

Timo Ernst — Sat, 05 Feb 2022 23:47:15 +0000

First, go to the Youtube video you'd like to embed and have a look at the url, it should look something like this:

https://www.youtube.com/watch?v=<your-video-url>

Right after the v= part you should find your video id, so for example in the following case l4kFO6VQPfA would be our id:

https://www.youtube.com/watch?v=l4kFO6VQPfA&t=1s

Now, create a new post on dev.to and add the following liquid tag:

{% youtube <your-video-id> %}

So, in our example it would be:

{% youtube l4kFO6VQPfA %}

Important: Do not copy other parts of the url. For example in our case we did not copy &t=1s at the end of the url.

Hope this was helpful :-)

How to Enable Autoplay for SwiperJS React

Timo Ernst — Sat, 05 Feb 2022 23:38:48 +0000

I'm often asked how to activate the autoplay feature in Swiper React carousel galleries, so I made a quick 5 minute tutorial video about it:

Turn on autoplay for Swiper React video

Was this video helpful? If so, why not subscribe to my YouTube channel so you don't miss on the next tutorial video :-)

JavaScript RPG Game Development | Episode 3: NPCs and Dialogs

Timo Ernst — Sun, 30 Jan 2022 09:20:57 +0000

Moving on to episode 3 we add our first NPC the main character can talk to.

If you're new to this series, make sure to check out episode 1 first: https://youtu.be/W4SVdtY6wZs

Question for you: Have you started creating your own RPG yet? How's the progress? Let me know in the comments section! :-)

Tutorial Video

JavaScript RPG Game Development | Episode 2: Map- and Character Creation

Timo Ernst — Sat, 08 Jan 2022 23:39:58 +0000

In this 2nd episode of our series I finally manage to create a custom spritesheet for building the map and characters of our game. I struggled quite a lot as the documentation of rpg.js is not the best and some important information is lacking. So, if you're also running into problems getting your spritesheet into the game, try the video below :-)

This is the spritesheet I use: Tiny 16 Basic

Also, I have 2 questions for you:

What do you think about Rumi's proposal for the storyline in episode 1 comments section of the video?
What do you think we should name the game?

JavaScript RPG Game Development | Episode 1: Getting Started With rpg.js

Timo Ernst — Mon, 03 Jan 2022 11:42:03 +0000

In my childhood I loved playing games like Final Fantasy or Shining Force for Playstation and Sega Genesis which are so called JRPGs (Japanese Role Playing Games). By today’s standards they can easily be called retro as their graphics do not hold up when compared to current-gen consoles. However, I still believe that these games have a certain charm and character to them, so I wanted to try to code a JRPG myself.

Introducing rpg.js

So, after doing some research, I stumbled over this framework called rpg.js, which is a framework for – you guessed it – RPGs. Based on a first glance, I immediately noticed how mature it seems to be and it is actively maintained (last commit is just 14 days ago!). It’s based on TypeScript, Node and VueJs which is an amazing tech stack.

As I have pretty much zero experience with this framework, I thought, why not make this a community project? So, I kicked off this YouTube video series below in which you can join me doing first steps in creating the game. I’d love to have your input by providing ideas for the name, game mechanics and storyline. If you have anything to contribute, please don’t hesitate and put your thoughts into the comments section!

Create AppleTV UI Animation with AtroposJS | HTML CSS JavaScript Tutorial

Timo Ernst — Sun, 19 Dec 2021 18:10:07 +0000

In this AtroposJS video I will explain how to create a super cool 3D animation effect that you get when using your AppleTV while hovering over a movie poster image.

AtroposJS Tutorial Video

Parallax Beginner Tutorial: A Cool 3D Effect With HTML, CSS, JavaScript

Timo Ernst — Wed, 05 May 2021 18:21:33 +0000

I found this great Photoshop tutorial by Dev Ed which inspired me to create my own implementation of a parallax effect based on his video in order to create more depth to websites and hey – a bit of eye candy never hearts, right? :-) So, here is my implementation below.

As you can see in the gif above – every time the user scrolls down the bush in bottom left as well as the house in the bottom right move at a different speed compared to the background which creates the overall illusion of depth. If you want to learn how to achieve this effect have a look at my video tutorial down below :-)

Let me know how you like it and if you have any similar or even better cool looking eye candy effects which you like using on your websites. I’d love to see them!

Video Tutorial

In this video I will guide you through a step-by-step tutorial how to create the parallax effect above. We will use just HTML, CSS and JavaScript. No external libraries. No React, Angular or Vue. Plain and simple. If you prefer a less minimalistic solution you can also check out this video by Dev Ed in which he does the same thing but does heavy usage of external libraries. The benefit of his approach is more convenience while coding but at the same time you will have less control over the code, rely on external dependencies and probably won't learn as much :-)

If you have any questions or suggestions for improvements please let me know in the comments down below.

Links

Here you can find couple of links related to my video including the source code as well as a live demo. If you want feel free to follow me on Twitter. I’m very active there and post regularly on stuff related to web dev in general, React and Node.

Source code on GitHub: https://github.com/valnub/3d-depth-example
Live demo: http://www.timo-ernst.net/misc/3d-depth-effect
My Twitter: https://www.twitter.com/timo_ernst
My Blog: https://www.timo-ernst.net

How to Deploy a Framework7 App to AWS via CI/CD

Timo Ernst — Wed, 31 Mar 2021 16:40:54 +0000

In this tutorial I will explain the easiest way to create an automatic CI/CD pipeline in order to deploy a Framework7 app to AWS. The goal is to have your pipeline automatically build and deploy your project every time you commit a change to the main GitHub branch. In order for you to follow along I assume you already have a F7 app and it is hosted on a public GitHub repository. If you don’t have an application yet, use the F7 CLI to create one. Also, make sure you are signed up to AWS by creating an account there.

1 Create a new S3 Bucket on AWS

In AWS Management Console enter “S3” and select “Buckets”.

Then, fill out the form like this:

Give it a name
Choose a region
Deselect “Block all public access”
Enable “I acknowledge that the current settings might result in this bucket and the objects within becoming public”
Leave the rest as is

2 Set AWS S3 Bucket Policies

In your bucket list click on the one you just created. Click the “Permissions” tab and then scroll down to Bucket policy and click on “Edit”. Paste in the following code:

    {
        "Version": "2012-10-17",
        "Id": "Policy1589309574299",
        "Statement": [
            {
                "Sid": "Stmt1589309569196",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",
                "Resource": "REPLACE_WITH_BUCKET_ARN/*"
            }
        ]
    }

Disclaimer: This snippet I shamelessly copied from Anna Aitchison’s excellent article on dev.to.

Do not save yet! Instead, change the placeholder REPLACE_WITH_BUCKET_ARN under “Ressource”. You can find your ARN in the properties tab in your bucket info. Also do not remove the /* part at the end!

3 Enable AWS S3 Static Hosting

Go to the Properties tab
Scroll down all the way to “Static website hosting”
Click on edit
Click on enable
Under “Index document” put in index.html
Leave the rest as is
Hit “Save changes”

4 Enable HTTPS

It is a good practice to always force-enable SSL for our Framework7 app, so let’s do that using AWS CloudFront. This will also provide you a nice cloudfront.net url. To get started follow these steps:

Search for “CloudFront” in your AWS Console search bar and select it
Click on “Create Distribution”
Under Web, choose “Get Started”
In “Origin Domain Name” pick the bucket your just created
For Viewer Protocol Policy, choose Redirect HTTP to HTTPS. This will force SSL
Leave the rest as is and click on “Create Distribution” in the bottom right corner
Give it a few minutes to create the distribution

Once it’s done click on the newly created distribution. Scroll down to “Domain Name”. It will show something in the form of 123whatever.cloudfront.net where 123whatever is a random series of letters and numbers which is specific to your account, so this value will be different! Your website will be available via https://123whatever.cloudfront.net later when our CI/CD pipeline is done.

5 Create IAM User

In order for our Framework7 CI/CD pipeline to work with GitHub actions we need to provide an access key and an id. For this a new user on AWS must be created.

In your AWS Management Console enter “IAM” and then select it
On the left click on “users”
Click on “Add user”
Choose a name
Set Access type to “Programmatic access”
In the bottom right corner click “Next”
On the following page click “Attach existing policies directly”
Search for “S3”
Select “AmazonS3FullAccess”
Click “Next”
Skip “Add Tags” and click “Next”
Your result should look something like on the screenshot below
Click “Create user”

Important: On the next page copy both Access key and Secret Access key and store them on your computer in a secure way.

6 Add Secrets to GitHub

I assume that you have published your Framework7 app to a GitHub repository. If you haven’t done so, do it now.

In your repo go to “Settings”
Then choose “Secrets” on the left side
Click on “New Repository Secret”
As name enter AWS_ACCESS_KEY_ID
As value enter your access key you received in the previous step
Repeat with
- AWS_SECRET_ACCESS_KEY
- S3_BUCKET
- S3_BUCKET_REGION

Tip: To find the correct values for S3_BUCKET and S3_BUCKET_REGION go to your bucket list in AWS, select the bucket and open the “Properties” tab. You will find the values here. In my case S3_BUCKET_REGION is eu-central-1 and S3_BUCKET is arn:aws:s3:::deploy-test-2.

7 Setup CI/CD Pipeline on GitHub

Go back to your GitHub repo
Select “Actions” from the top bar
Click on Skip this and set up a workflow yourself
Paste in the following code:

  name: Framework7 AWS Deploy
  on: [push]
  jobs:
  run:
  runs-on: ubuntu-latest
  env:
  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
  steps: - uses: actions/checkout@v2

        - name: Install dependencies
          run: npm install

        - name: Build
          run: npm run build

        - name: Deploy
          uses: reggionick/s3-deploy@v3
          with:
            folder: www
            bucket: ${{ secrets.S3_BUCKET }}
            bucket-region: ${{ secrets.S3_BUCKET_REGION }}
            delete-removed: true
            no-cache: true
            private: true

Click on “Start Commit” (Green button)
Click on “Commit new file”
Go back to Actions tab
You should now see how:
- The build is created
- The app is pushed to AWS

8 View Your Framework7 App

Let GitHub Action do its job. This will take a couple minutes! It will show the status for each workflow in the table on that page. Once it’s done open your deployed Framework7 app like this: https://123whatever.cloudfront.net/index.html

Important: Replace 123whatever with the correct ID of your app. See step 4 in this tutorial what your personal url will be.

Congratulations!

We have now fully created a CI/CD pipeline with GitHub Actions and successfully deployed the Framework7 app. Every time you push to your main branch in GitHub a new build is automatically created and the update is deployed to AWS. Please let me know if this tutorial worked for you in the comments down below :)

You can find more Framework7 tutorials on my YouTube channel http://www.timoernst.tv

Faster Wordpress in 8 Steps

Timo Ernst — Wed, 21 Oct 2020 09:20:01 +0000

Just recently I was fed up with my Wordpress based blog. I was using a pre-canned theme and overall felt like the whole thing was sluggish and confusing in terms of usability and general visual appearance. As I was always jealous about dev.to's lightning fast loading speed I thought hey – why not turn this into a statically generated page using Gatsby? I mean, static is the new hype so why not use it?

Gatsby was not the answer

After tinkering with Gatsby for quite a while I got something to work. The most difficult part was to export all Wordpress posts into Markdown – which was difficult but doable. However, I wasn't very happy with the themes available for Gatsby Blog. I wanted something extremely minimalistic but aesthetically pleasing at the same time. So, when I briefly checked one of my Wordpress posts I noticed that the time to first byte actually wasn't that bad and I thought: Mhh... what if I could just tweak my Wordpress installation a bit and make it blazingly fast?

Challenge Accepted

So, here are the actions I took:

Found a WP theme which was visually close enough to what I wanted
Overwrote with custom CSS to get it cleaner
Removed all "Featured Images" from homepage
Installed WP Fastest Cache and enabled all settings
Registered my site at Cloudflare and have WP Fastest Cache push all static content to Cloudflare
Installed plugin Disable/Remove Google Fonts
Changed css font-family so it works without Google Fonts
Used WP plugin Smush to compress all images

The results

Super clean new design
Average time to first byte: 350ms
Average full load in: 450ms
100/100 PageSpeed Insight Points for desktop computers
98/100 PageSpeed Insight Points for mobile devices
Webpagetest.org results for speed:

Conclusion

Creating super-fast websites with Wordpress/PHP is absolutely possible. The most important trick here is static caching and CDN usage. Check the result at https://www.timo-ernst.net. I'm a very happy webdev panda now 🐼. Got more tips on how to improve loading speed? Let me know in the comments below :-)

Ps: Follow my web dev journey on Twitter if you want more stories like this one.

Question on SEO

If there are any SEO experts reading this – I removed all featured images from the homepage to improve performance and kept images only within posts. Would this negatively impact SEO?

Can You Code On iPhone?

Timo Ernst — Tue, 13 Oct 2020 19:47:06 +0000

Few days ago while watching the Apple iPhone 12 keynote I wondered – Could you use this thing as a device to do programming on? So I tried. In this Video I will try to build a React + Node/Express app entirely on my iPhone SE using my favourite iOS IDE PlayJs.

For more crazy dev videos follow me here:

Choosing Between Angular, React, Vue and Svelte – 4 Tips!

Timo Ernst — Sun, 11 Oct 2020 16:00:00 +0000

Choosing between modern web frameworks can be hard, especially if you’re not familiar with all of them. But don’t worry, I don’t either and you won’t have to as well. However, here are 4 tips on choosing the right tool for your next project.

1 Choosing based on Project Requirements

Look at the requirements of your project. Which technology framework fits the best? Is there already existing code written using a certain library? Then it wouldn’t make sense to choose a different one, right? Do you need server-side rendering and optimal SEO support? Choose something that supports it like NextJS or Nuxt. Need inline-styles for whatever reason? Go React. Need superfast rendering speed and code cleanliness? Try Svelte. Need an all-in one TypeScript solution without the need for 3rd party libs? Go Angular.

2 Team Skills

Look at your team. If you have 5 Angular developers and 1 who knows React. Does it make sense to kick off using Vue? Leverage the skills and knowledge you already have except if you’re actively looking to expand your team’s knowledge. In this case I recommend to pick which ever framework you know the least about.

3 Personal Preference

Don’t let your personal preference make the choice. Look, I’m a huge React/JSX fan but before I start a new project I ask myself: Objectively, is React the right choice here or should I use something else? Don’t pick a certain technology because that’s what you’ve been using for the past months and know the most about. Get out of your comfort zone!

4 Leaving the Comfort Zone

Let’s say you discussed with your team which library to use and you decided on the one you like the least and don’t have much experience with. GREAT! See it as a challenge to expand your skillset and learn more about a piece of technology you’re not familiar with. It’ll grow your skillset and give you better chances on the job market in the future. Now get out there and do some coding!

For more dev tips you can follow me here on social media: