Day: June 14, 2020
A selection of new articles on the Laravel framework. Secrets of an Eloquent Relationship. The long-awaited download of files in Livewire. Spatie-free Task Scheduler. Tutorials on creating a Blog, News Site and flexible Shopping Cart. Tests, traits and TDD.
Photo: Erika Heidi
node-ts), or compile themselves in advance (for example, through`
TypeScript should be compiled in advance, through specialized compilers (for example,
tsc) and run already JS code.
A couple of topical reasons:
You never know where you will deploy your code.
Today it is a server you control where you can use
node-ts, tomorrow it is AWS Lambda or Google App Engine, where you need to deploy JS code.
When switching from
node-tspre-compilation, unforeseen errors and fuss may occur with changes in the configuration of CI / CD and the like, therefore it is more reliable to start immediately with pre-compilation.
Disgusting, unobvious errors …
I came across one of them quite recently: I wrote a TypeScript application for Node.js, compiled it and installed it on Google App Engine.
Everything worked on the personal Mac, and an error appeared on the server that there is no file along the path
Error: Cannot find module 'some/folder/path/FileName.ts' at ...
One would think that the code simply does not compile, or I download the old version, or it crashes
NODE_PATHand the like, but everything turned out to be much worse:
Since I compiled in advance, I could see what kind of js code is sent to the server. And then it became clear that only this ONE file was not compiled with the original name:
FileName.ts– but with a small letter:
fileName.ts… It was
useful to find out what was the matter and it turned out:
(1) TS compiler names the compiled files not according to the name of their originals, but according with imports in code.
That is, if you wrote with a small letter
import * from "some/folder/path/fileName", and the original is called with a capital letter (
FileName.ts), then TS will compile it into a file with a small letter. Even if in the rest of the code there are everywhere imports with a capital letter:
import * from "some/folder/path/FileName"
(2) On the Node.js poppy, the application is not case sensitive, so everything worked quietly
(3) On the Google App Engine, the case is case sensitive …
I had the option to compile ts files on the fly and send them to Google App Engine and then I would spend too much time to find out a similar problem. But since I was going through pre-compilation, I could safely go into the JS files being sent and secure them.
If you use TS, then first compile it with the appropriate tools (tsc, webpack, etc.), and only then run / deploy to the desired platform.
So when TS has its own VM, then … we’ll compile for a couple of years until it appears in different ecosystems such as Google, Amazon, .etc, and now we’ll live by the way.
What do you think about this: are there any advantages to using it
node-ts? Have you encountered non-obvious problems without prior compilation?
Good luck to everyone, do not let debugging kill the happiness of coding!
Also, in order for JS to have no problems with the name at all, it is better to stick to the “kebab case”, as advised by Uncle Google.
Most of those starting to learn programming started out of a desire to make their game. I’m not an exception, but fate brought me to web development.
Okay, let’s get to the point. Create a clicker with pixi.js.
The task is trivial, but because I understand little about game development, I had to study this topic a little better.
Why js? Why pixi.js? Why is a clicker at all ?!
– I decided to show only my implementation of the task. I don’t want to teach someone what technologies to use, how to write code. Just my solution to the problem.
Before you write code:
This is a video of the process of creating games. If you are too lazy to read, then you can watch and listen
Secondly, I will insert all the code with a picture, but at the end of the article there will be a link to github with the project sources so that you can poke yourself.
In the code, I left explanatory comments for you, I hope it will be clear.
First, we declare aliases and initialize the application itself.
We create the necessary variables for all elements of the game and load pictures.
For the pictures, I chose the atlas format.
If you are not familiar with the atlas, then this is the json format for downloading a large number of pictures at a time.
This is how it looks in code.
I created it using TexturePacker. To do this manually, in my opinion, is not advisable.
Using the setup function, I parse the atlas, set the location of the elements, styles for the text, add the initial value of the points.
These are standard actions for everything (layout). The most interesting are the three properties of target. interactive, buttonMode and on (“pointerdown”, handlerClick). The first two are needed for the interaction of the click and the target element. on is a regular event handler.
Now we need to write all the necessary functions for the game to work.
Game loop – gameLoop Game
state – play
Click processing – handlerClick
gameLoop simply calls the state function.
In play, I check the timer value (it is 10) and allow the click on the button, also update the size of the target.
handlerClick is checking for the possibility of a click and a click is made.
From the flaw that I see is resizing on the target element. It changes from 0.9 to 1. Immediately. No animation. But when you play it does not notice, left as is.
As promised, below is a link to the github project.
If you have not encountered pixi, but want to deploy the game on your own, then you need a server. I used openserver. This is for ajax requests.
As promised, the link to the code.