DEV Community: Boris Joskic

Phaser - Why, what, how?

Boris Joskic — Thu, 21 Nov 2024 21:48:25 +0000

Why

Games got me into programming. As much as I loved playing them, I loved figuring out how they are even made. To this day, I know the basics.. To challenge myself, I thought it could be a good idea to finally figure out at least some part of it. Could using a language I already know and use on a daily basis make it easier?

I'll try to document my findings in series of blog posts..

What

I'm not really sure on what I'll try to build. Its most likely gonna be a multiplayer RPG, and yes, I know..thats a lot of work, at least I know what I'm getting myself into..

To make things as simple as possible, its just gonna be PVE multiplayer, where you can join worlds with other players or create your own private world..there's gonna be different paths you can take and upgrade skills within that path. So basically, as any other RPG game.

The changes that this will be a fully playable game, let's be honest, are low..but at least I'll spend some time figuring out things I'm interested in.

How

A sane person might go with Unreal, Unity or even Godot. But I'm going with Phaser.js as game engine. I'm gonna use a language I'm most familiar with with a framework and concepts I know nothing about. I guess with official docs and community examples I might get something right..

As it's gonna be a pixelated top down game(no 3d here for now..), I'm going with Tiled as my editor for the world.

https://www.mapeditor.org/

https://craftpix.net/freebies/free-pixel-citizens-for-top-down-tower-defense/
https://craftpix.net/freebies/free-fields-tileset-pixel-art-for-tower-defense/

To skip additional overhead that includes me creating all the art..I'm gonna download a free one.
No point in buying or creating custom tiles, characters, icons and animations when I'm just figuring out what how and where. I've decided to go with https://craftpix.net/freebies/free-fields-tileset-pixel-art-for-tower-defense/ . They have couple of free download, and couple of paid ones..the paid ones will be useful if I'm able to code at least something playable..

Of course, I'm going with Vite + Typescript.
After some tutorials on Tiled and Phaser, deleting some boilerplate code and writing a veeeery simple scene, I've got my tiles on the screen.

Next step would be adding a character, movement and some camera improvements..

Originally posted on https://joskonic.com/2024/11/21/phaser-why-what-how/

#2 - Leetcode - Kids with the greates number of candies solution

Boris Joskic — Tue, 07 Nov 2023 00:00:00 +0000

Original post: brsjsk.github.io
Github url
Leetcode url

There are n kids with candies. You are given an integer array candies, where each candies[i] represents the number of candies the ith kid has, and an integer extraCandies, denoting the number of extra candies that you have.

Return a boolean array result of length n, where result[i] is true if, after giving the ith kid all the extraCandies, they will have the greatest number of candies among all the kids, or false otherwise.

Note that multiple kids can have the greatest number of candies.

Example 1:

Input: candies = [2,3,5,1,3], extraCandies = 3
Output: [true,true,true,false,true]
Explanation: If you give all extraCandies to:
- Kid 1, they will have 2 + 3 = 5 candies, which is the greatest among the kids.
- Kid 2, they will have 3 + 3 = 6 candies, which is the greatest among the kids.
- Kid 3, they will have 5 + 3 = 8 candies, which is the greatest among the kids.
- Kid 4, they will have 1 + 3 = 4 candies, which is not the greatest among the kids.
- Kid 5, they will have 3 + 3 = 6 candies, which is the greatest among the kids.

Solution 1

/**
 * @param {number[]} candies
 * @param {number} extraCandies
 * @return {boolean[]}
 */
module.exports.kidsWithCandies = (candies, extraCandies) => {
    const largestNumber = Math.max(...candies);

    return candies.map(candie => candie + extraCandies >= largestNumber);
};

This is a very simple one-liner solution..but, it's slower to execute then a good old for loop.

Runtime: 136 ms, faster than 5.86% of JavaScript online submissions for Kids With the Greatest Number of Candies.
Memory Usage: 36.7 MB, less than 10.89% of JavaScript online submissions for Kids With the Greatest Number of Candies.

Solution 2

/**
 * @param {number[]} candies
 * @param {number} extraCandies
 * @return {boolean[]}
 */
module.exports.kidsWithCandies = (candies, extraCandies) => {
    const largestNumber = Math.max(...candies);
    let items = [];

    for (let i = 0; i < candies.length; i++) {
        items.push(candies[i] + extraCandies >= largestNumber)
    }

    return items;
};

Runtime: 76 ms, faster than 46.11% of JavaScript online submissions for Kids With the Greatest Number of Candies.
Memory Usage: 37.1 MB, less than 7.66% of JavaScript online submissions for Kids With the Greatest Number of Candies.

Difference

Difference in execution speed is quite noticable.

But difference in memory usage? Ehh, not so much noticable..

Leetcode - Kids with the greates number of candies solution

Boris Joskic — Tue, 11 Jul 2023 13:27:24 +0000

Original post: brsjsk.github.io
Github url
Leetcode url

Note that multiple kids can have the greatest number of candies.

Example 1:

Input: candies = [2,3,5,1,3], extraCandies = 3
Output: [true,true,true,false,true]
Explanation: If you give all extraCandies to:
- Kid 1, they will have 2 + 3 = 5 candies, which is the greatest among the kids.
- Kid 2, they will have 3 + 3 = 6 candies, which is the greatest among the kids.
- Kid 3, they will have 5 + 3 = 8 candies, which is the greatest among the kids.
- Kid 4, they will have 1 + 3 = 4 candies, which is not the greatest among the kids.
- Kid 5, they will have 3 + 3 = 6 candies, which is the greatest among the kids.

Solution 1

/**
 * @param {number[]} candies
 * @param {number} extraCandies
 * @return {boolean[]}
 */
module.exports.kidsWithCandies = (candies, extraCandies) => {
    const largestNumber = Math.max(...candies);

    return candies.map(candie => candie + extraCandies >= largestNumber);
};

This is a very simple one-liner solution..but, it's slower to execute then a good old for loop.

Runtime: 136 ms, faster than 5.86% of JavaScript online submissions for Kids With the Greatest Number of Candies.
Memory Usage: 36.7 MB, less than 10.89% of JavaScript online submissions for Kids With the Greatest Number of Candies.

Solution 2

/**
 * @param {number[]} candies
 * @param {number} extraCandies
 * @return {boolean[]}
 */
module.exports.kidsWithCandies = (candies, extraCandies) => {
    const largestNumber = Math.max(...candies);
    let items = [];

    for (let i = 0; i < candies.length; i++) {
        items.push(candies[i] + extraCandies >= largestNumber)
    }

    return items;
};

Runtime: 76 ms, faster than 46.11% of JavaScript online submissions for Kids With the Greatest Number of Candies.
Memory Usage: 37.1 MB, less than 7.66% of JavaScript online submissions for Kids With the Greatest Number of Candies.

Difference

Difference in execution speed is quite noticable.

But difference in memory usage? Ehh, not so much noticable..

Started working on a library for building web sites

Boris Joskic — Fri, 24 Apr 2020 12:13:20 +0000

While building my personal, very simple, web site I did not really want to use frameworks such as Angular or React as it would be a bit too much for a simple site..and did not really want to set up webpack from scratch..

So, what does a developer do when he does not want to use premade solutions which make his life easier? Creates his own library, of course!

I really liked the idea of it, plus it is nice practice for me to work on a library.

What it does now is that it converts SCSS to CSS, MD to HTML and displays blog posts list in index.html file.

It's barebones but its fun to work on this, my kind-of-first library..I was really excited when I found out what npm link does!

Here is a github repo url: https://github.com/BrsJsk/sfy
Docs: https://brsjsk.github.io/sfy/#/
Live example: https://keen-swanson-66c35f.netlify.app/
Comments are welcome!

Might not be the most original idea(we already have tons of libraries and frameworks), but I personally plan to use it and continue work on it.

Angular custom elements - introduction

Boris Joskic — Mon, 16 Mar 2020 15:26:51 +0000

In a land of framework wars, one thing that could help us are web components. Creating components and being able to use them in any javascript framework would be nice..in this series we will explore creating web components using Angular, publishing them and using them in plan javascript, React etc.

Lets start by creating a new application

ng new br-date

Add @angular/elements package

ng add @angular/elements

Generate new component (I created br-date but you can use whatever you want)

ng generate component br-date

We need to update entryComponents inside app.module.ts to include our newly created component and also define a custom element.

App module will look like this:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, Injector } from "@angular/core";

import { AppComponent } from "./app.component";
import { BrDateComponent } from "./components/br-date/br-date.component";

import { createCustomElement } from "@angular/elements";
@NgModule({
 declarations: [AppComponent, BrDateComponent],
 imports: [BrowserModule],
 providers: [],
 entryComponents: [BrDateComponent]
})
export class AppModule {
 constructor(private injector: Injector) {}

 ngDoBootstrap() {
   const element = createCustomElement(BrDateComponent, {
     injector: this.injector
   });

   customElements.define('br-date', element);
 }
}

Inside ngDoBootstrap function, we are creating a custom element using createCustomElement method from @angular/elements and defining br-date component.

We also need to update our angular.json. Inside projects->br-date->architect->build->scripts object we need to add:

{
   "input": "node_modules/document-register-element/build/document-register-element.js"
}

By default, angular will hash outputs inside dist directory, which is not really useful when building a web component we plan to publish.

Lets create custombuild.sh file with following content:
It will build application without hashing and concat source files inside index.js file.

#!/bin/sh
ng build br-date --prod --output-hashing=none && cat dist/br-date/runtime-es5.js dist/br-date/polyfills-es5.js dist/br-date/scripts.js dist/br-date/main-es5.js > dist/br-date/index.js

Now we can test this.
Fastest way, in my opinion to test this, is to create a example folder with index.html and index.js.

index.html will have following content

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <br-date></br-date>
   <script src="./index.js"></script>
</body>
</html>

and inside index.js we will just import our built component.

import '../dist/br-date/index';

We can run example app using Parcel or whatever you like.
Inside the example directory, run parcel index.html
You can get more info if you are interested at : https://parceljs.org/

When you open your app in browser, you should see something like this:

If you encounter some problems, you can leave a comment here.
Source code is hosted at: https://github.com/BrsJsk/br-date

Alternatives to Google Analytics

Boris Joskic — Sun, 26 May 2019 11:30:40 +0000

Let's say you have an open source app and you would like to use some analytics tool to see how much traffic you have, where do your visitors come from etc.

But you do not want to use Google Analytics.
You want something that respects user's privacy. You want something that developers wont complain about when they look at your code.

What tools would you use? What are alternatives to Google Analytics?

Improve Your Ionic App Performance

Boris Joskic — Thu, 07 Feb 2019 14:46:11 +0000

Ionic allows developers to build mobile applications using web technologies and allows access to native features such as file storage, camera, flashlight and many more. The first version was released in 2013 and built using Apache Cordova and AngularJS but recent versions, while still using Apache Cordova, are using Angular instead of AngularJS.

The most recent version of Ionic, version 4, includes performance improvements but in my opinion, it’s still having a tough time competing with the performance of native apps, or even React Native.

Make a production build

This might be an obvious one. While developing and testing, we usually build debug versions of the app. How many times have you build an apk and after installing you realized it’s a debug apk? I’ve done it... a couple of times.

The default build command will generate a debug apk which does not have optimized code.

ionic cordova build android --prod --release

command will do the trick. It will generate a production-ready apk with minified and optimized code.

Consider this first tip more like a reminder..

Add a Service Worker

Adding a Service Worker to an Ionic app has its benefits. One of them is that it can cache your static assets so your app can load faster. Not only can it cache your app’s static assets, but it can also cache some data from the API? That probably has some use.

Ionic has built-in support for service workers and adding it is pretty easy.

If you are interested, you can get more information in their documentation.

Native Page Transitions

By default, when switching to a different page, Ionic will use CSS animations to switch between views. This works fine mostly, but you may notice lags sometimes on devices with lower specs and also it’s not very customizable.

To solve this problem, you should switch to Native Page Transitions which uses native hardware device acceleration to animate transitions.

From my experience, performance is improved and the app feels much more native.

It’s supported on Android, iOS and Windows Mobile and you can start using it pretty quickly.

Regarding the customization, you can change the swipe direction, duration, delay in Android and iOS and more.

You can get more information in their documentation.

Use Virtual Scroll and Infinite Scroll

If you are working with a list, you are probably using the Ionic list component which is completely fine and will offer native UI depending on the platform.

However, if you have a large list you may notice some sluggishness. To get rid of that, you can start using Virtual Scroll and Infinite Scroll.

Infinite Scroll is just an Ionic component with the infinite scroll logic. It will call a certain action when user reaches the end of the list. It’s great for pagination as you can load a certain number of items, and when needed load more and append it to the original list. It also offers customization of the loading indicator where you can change the text and spinner.

Virtual scroll will take full list of the array, but only render items that are currently visible which can greatly improve performance. As the user scrolls, views are reused but are filled with different data depending of the row.

When should you use Virtual Scroll?

When you have a somewhat larger amount of data but do not need the Infinite scroll option(eg. all data is loaded in one API call), you can use it and it will greatly benefit you!

Conclusion

Great performance does not come by default in Hybrid apps no matter which starter kit you use. Before trying any performance optimization tricks, do not forget to optimize your own code, remove unused imports and CSS and optimize your images! Even the small stuff can make a difference.

Before you go…

If you enjoyed reading this post please share it. You should check out our other publications, you might like them too! We write from time to time about software development, tips and tricks, and how to become a better developer and business person in general. Join us on the journey of constant improvement!

Originally published at jsguru.io.

Lazy loading modules with Webpack

Boris Joskic — Tue, 08 Jan 2019 14:07:13 +0000

Webpack is a great tool and it's really great to know at least basics of it. If we are working with Angular CLI, or Create React App, we already have webpack setup there, but if we are working on a web application that's not using a Javascript Framework, we should probably user a bundler. Sure, we could go with no-setup-needed Parcel but if we want more control, go with Webpack. My personal web site is all Javascript, only one HTML file and no framework. I'me using webpack as a bundler and lazy loading to improve performance and I'm really happy with it!

To get started, run npm init -y and create the following structure:

src / 
--- notLazyLoaded.js
--- lazyLoaded.js
index.html
main.js
webpack.config.js

Run the following command to install webpack:

npm install webpack webpack-cli html-webpack-plugin webpack-dev-server --save-dev

We've installed webpack, webpack plugin for adding our index.html into the bundle and dev server.

Let's add some code to our webpack config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./main.js",
  output: {
    filename: "[name].[hash].bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
    port: 9000
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

Inside our package.json, add a script to bundle and run.

 "webpack": "webpack-dev-server --open"

Pretty basic but it will bundle our application and open our web application on port 9000.

Inside the HTML file, I've added 2 buttons, one will call notLazyLoaded.js and the other one will lazyLoaded.js

<body>
    <button id="alert">Alert</button> 
    <button id="lazyAlert">Lazy Alert</button>
  </body>

lazyLoaded.js and notLazyLoaded.js have basically same code.

lazyLoaded.js

const showLazyAlert = () => {
  alert("Hello from lazyLoaded.js");
};

export { showLazyAlert };

notLazyLoaded.js

const showAlert = () => {
  alert("Hello from notLazyLoaded.js");
};

export { showAlert };

In our main.js, we will add code to show an alert depending of the button clicked.

import { showAlert } from "./src/notLazyLoaded";

window.onload = () => {
  const alertBtn = document.querySelector("#alert");
  const lazyAlertBtn = document.querySelector("#lazyAlert");

  alertBtn.addEventListener("click", () => {
      showAlert();
  });
};

Currently, if we open the app, we see in the network tab that only main.js is loaded on initial load, we click the 'Alert' button and an alert shows up which is already loaded in the bundle. Now comes the main part, making changes so when user clicks on 'Lazy Alert' button, lazyLoaded.js module loads and executes.

Inside main.js, add following code

lazyAlertBtn.addEventListener("click", () => {
    import(/* webpackChunkName: "lazyLoaded" */ './src/lazyLoaded').then(module => {
        module.showLazyAlert();
    });

Save and open the app. On initial load, we only have the main.js bundle loaded, when we click the Lazy Alert button, lazyLoaded.js bundle loads and executes code. That's it. It will load only when it needs to load and will improve initial load time and overall performance of the app.

Source code is hosted on Github.

git clone https://github.com/BrsJsk/webpack-lazy-loading
cd webpack-lazy-loading
npm i
npm run webpack

Published my first NPM package that actually does something

Boris Joskic — Sun, 27 May 2018 11:12:32 +0000

Yesterday morning I was playing a bit with some personal project, and found myself having to add a simple loader. Nothing complicated, but I just wanted to do it a different way.

Could I create a package that I could reuse after? Sure.

Got an idea how I could do it, so just opened StackBlitz and started playing with it. It was working fine, and was doing what it's supposed to do.

What is it?

Just a simple JavaScript library for displaying and hiding loaders.

Why?

Why not? It was fun to make, and I could use it anytime I want to.

Usage

It's pretty simple. You initialize a loader, and send id of element where you want it to be displayed and type of loader as parameters.

let loader = new Loader('app', 'standard');

// show loader
loader.show();

// hide loader
loader.hide();

Currently, there are 4 different loaders, but I will probably add more.
You can check it out at github repo.

Nothing complex or new, but it was fun to make and play with it.

Top 10 reasons to upgrade your Angular Application

Boris Joskic — Thu, 03 May 2018 12:01:09 +0000

Angular is a popular JavaScript framework, used to create web, desktop and mobile applications. It is built and maintained by Google.

Angular 5 (codename pentagonal-donut) was released on November 1, 2017, a major release containing new features, and focusing on making your Angular application faster, smaller and easier to use.

So, with all these new features, what are top 10 reasons you should upgrade to Angular 5?

1) Performance

Angular 5 will make you application smaller and much faster. Angular CLI v1.5 comes with a build optimizer turned on by default and Angular compiler is improved to enable faster builds and rebuilds. Size of the bundle is reduced by removing AST classes, only changed files are emitted for incremental compilation and much more. Ahead of time compiler is turned on by default and it is much faster than in Angular 4. It’s different from Just In Time compilation because it converts Angular Typescript into JavaScript code before the browser downloads and runs it. The Just In Time compiler was compiling application at runtime. Using AOT gives faster rendering, smaller download sizes and detects template errors earlier. This makes Angular 5 faster in development and production.

2) Progressive Web Apps

A Progressive Web App (PWA) is a web application that uses modern web capabilities to deliver an app-like experience to users. It is an experience that combines the best of the web and mobile applications.

A Progressive Web App works for every user, regardless of their browser, it’s responsive, always up-to-date thanks to service workers, and if served via HTTPS, it’s safe as well, and all the while it feels like a real app!

Right now, the development of progressive web applications a complex process. One needs to take care during both development and deployment that neither caching nor the delivery of older versions is impaired.

This has changed with Angular 5. The development of progressive web applications should be simplified so they can even be created by default.

With Angular-CLI, Angular has the ability to create configuration and code on its own. Essentially, this allows the creation of mobile web applications that have features of native mobile applications, like offline capability, push notifications and an application logo in the start menu of a particular platform.

3) Build Optimizer

The Angular team focused on making Angular 5 faster, smaller and easier to use. In Angular 5, production builds created with the Angular CLI will now apply the build optimizer by default. The build optimizer is included in Angular CLI.

The build optimizer removes parts of your application that are not needed, and it removes Angular decorators from your application’s runtime code. Decorators are used by the compilers and are not needed at runtime and can be removed.

This reduces the size of your JavaScript bundles, and increases the boot speed of your application!

4) HttpClient

Before version 4.3, @angular/http was used for making HTTP requests. HTTP is now deprecated and the HttpClient API from @angular/common/http package that shipped in version 4.3 is now recommended for use in all apps.

Some of the features include

● JSON is an assumed default and no longer needs to be explicitly parsed

● Interceptors allow middleware logic to be inserted into the pipeline

● Progress events for both request upload and response download.

5) New router lifecycle events

Router has new lifecycle events, allowing you to track the cycle of the router from the start of running guards through to completion of activation. These events could be used for things such as showing a spinner on a specific router outlet when a child is updating or to measure performance of guards and/or resolvers.

This new lifecycle events are GuardsCheckStart, ChildActivationStart, ActivationStart, GuardsCheckEnd, ResolveStart, ResolveEnd, ActivationEnd, ChildActivationEnd.

6) CLI

Starting with Angular CLI version 1.5, support for Angular 5 is added and the CLI generates v5 projects by default and build optimizer is also turned on. By default, the build-optimizer plugin will now be applied to your build if you are using Angular 5 and building in AOT.

Build command

ng build --prod --build-optimizer

is now simplified to

ng build --prod

Angular CLI will also warn you if you are using version of TypeScript which is not the recommended one for your Angular version. You can deactivate the warning (only if you believe in yourself and you know what you are doing) with

ng set typescriptMismatch = false

7) Forms

To improve performance, we can now specify when validators should be executed. Every time a value is changed, the validation will most likely be performed with every keystroke!

In Angular 5, forms have the ability to decide when the validity and value of a field or form are updated via on blur or on submit, instead on every input event. This can drastically improve performance!

To improve performance, you can now specify when validators should be executed in forms.

8) Pipes

In previous versions, Angular has relied on the browser to provide date, number and currency formatting using browser i18n API’s. Users were seeing inconsistent results across browsers.

Angular 5 comes with new date, number and currency pipes.

Pipes rely on the CLDR to provide locale support and configurations for any locales you want to support.

Here is a document that compares pipes between v4 and v5.

You are not ready for the new pipes? You can import DeprecatedI18NPipesModule after the CommonModule.

9) Incremental builds

A lot of improvements have been made to the Angular compiler to make it faster, and it now enables faster builds and rebuilds. Ahead of time and incremental builds are possible when using –aot with ng serve command. This will probably be used by default in a future version of the Angular CLI.

10) Better Typescript and RxJS support

RxJS version 5.5 introduces a new way of using RxJS called ‘lettable operators’. Any operator can now be imported from rxjs/operators. These new operators eliminate the side effects and the code splitting / tree shaking problems that existed with the previous method of importing operators. New Angular CLI will pull this version by default and will save considerably on the bundle size!

Would you like to upgrade your application to Angular 5?

The Angular team built a nice tool to make upgrading as easy as possible or send us a message at info@jsguru.io.

Before you go…

Originally published at jsguru.io.