Posts

Zedplug will be decommissioned on November 30th

Greetings to each and every one of you. I am writing this letter to inform you that Zedplug will be decommissioned on November 30th. With the goal of becoming the authoritative source of Zambian music, Zedplug began development in November 2019 and was released on February 18, 2020. Since then, Zedplug has worked tirelessly to achieve its objective of being Zambia's leading music distributor. Throughout Zedplug's history, we've had our fair share of good and horrible times, but we've always been committed to keeping Zedplug up and operating. Among other notable milestones, we've had the opportunity to interact with well-known performers. Zedplug has reached the end of its life cycle. I've made my money, and I feel it's time for me to pull the plug on Zedplug. (Please permit me to serve as your master of ceremonies at this moment.) This is how the dismantling will go down. Recap from a few weeks ago: We halted our routines and refused to distribute any music....

FlappingBird Postmortem (JS13K)

Image
FlappingBird was my Primary entry for JS13K Games competition 2020 It's about a bird flying in a forest of trees (Some of which are upside down) It started out as i was trying to draw some clouds for fun, then later i added every missing component to complete the sky First day. I planned making a game that should as well serve as a 404 page with a hidden game such that when a button is pressed It transitions into gameplay qualities were that it should be easy to play by everybody without need to master many rules Second day. There was a bunch of game ideas up my sleeves one of them was a game where a typical 404 page transitions into a green garden like mine sweeper version made up of a flowering mine field with smooth sweet sound effects Fourth day. We'll Since Mine sweeper is not a very common game there's nothing fun about it and not everyone knows how it's played. So i gave up on it and on this day i started working on backgrounds for flappingBird "the final...

FlappingBird JS13K Games

Image
FlappingBird is a Mobile side scroller game where the player controls a bird, attempting to fly between columns trees without hitting them Development of this game started out when i was attempting to draw perfect clouds programmatically on a canvas i later added a few more clouds (Something's missing) add moon, stars,  buildings and also add Gradients and for the games character i settled on a bird (using Sprite sheet obtained freely from opengameart) add more them and animated everything. FlappingBird is a single player arcade-style game in which the player controls the bird, which moves persistently to the right. The player is tasked with navigating the bird through pairs of trees that have equally sized gaps placed at random heights. the bird automatically gravitates and only ascends when the player taps the touchscreen or spacebar. Each successful pass through a pair of trees awards the player one point. Colliding with a tree or the ground ends the gamepl...

Adding Gameover and introduction screen on HTML Canvas

Image
Its been four days since my last status report. Ever since then I've been struggling trying to glue myself together and harness that for something gamedev. I've reorganized pretty much everything about the structure of the code by splitting chunks of it into bite sized modules wherever possible  and apart from that I'm proud i brought my "404" and "Gameover" sketchings to life Am looking forward to implementing main characters of the game soon. And am yet to announce everything about gameplay publicly to everybody. Here's Progress so far And gameover screen

Animated daylight on HTML5 Canvas

Image
It's Fourth day and i made improvements by adding new background Obstacle for daylight notice the wind turbines replacing trees, the sun replacing the moon and the disappearance of stars from the Sky. However it's more like day three extended++ (plus plus) trust me i've added nothing new i spent most of the time sketching introduction screens and gameover screens Here's progress so far.

Animated sky on HTML5 Canvas

Image
So far I've added a new bunch of clouds, some stars and a phase changing moon' As the number of Clouds increased i cursed them into an Array and created two more Obstacles the Moon and Stars Here's progress. (Extended preview) In extended preview i added trees and buildings. (everything is drawn programmatically without using static Images)

How to draw clouds on HTML5 Canvas

Image
So basically clouds are shapes with a flat bottom and 3 curves on top (two on the sides on bigger one on the middle) As i was creating a JS13K Game i wondered around googling if i'd find something as simple as that and 'i couldn't find anything interesting So i took some pictures of simple animated clouds and sketched it on my notepad trying to reverse engineer shapes in the figure In my first attempt i discovered that "the base is something similar to css pills, so there's rectangular shape with roundish edges and a circle overlay on top". Putting that into vanilla JavaScript i resorted to creating two canvases 1. foreground layer 2. background layer Clouds are drawn using a solid color formed by four shapes 3 circles and a rectangle then using some alpha the resultant image is then overlay-ed onto the primary canvas. Here's an example It's a sneaky way todraw clouds so they got to be a cleanway todo this without Jumping extra hoops Last reso...

JS13K Preparation

JS13K Is an annual gamejam (hackerthon) held on the 13th of August and participants are given 30 days to created a game using JavaScript less than 13KB in size minified (optional) and zipped including assets On the 13th of August a 'secret' theme is announced and everybody must create a game inline with it. Last years competition was so epic. it was themed "back". And as a beginner i dropped two entries "watchmyback" and "firedrone" interpreting the theme in my own way So far i've been watching everyone showcasing their amazing and creative works under the hashtag #js13k on Twitter For today i'm only going to create a new directory for my project, init a git repository and stuff.

Snake monochrome (JS1024)

JS1024 is an annually held code golfing competition where you're basically required to create something creative in 1024 bytes or less of raw "JavaScript/HTML/WebGL" I participated for JS1024 2020 competition with my First entry titled "Snake monochrome" Originally inspired by the old Nokia game going by the same name "Snake" which i used to play as far back as 2007-2008 Another entry making it Second is named "Tetris monochrome" i was compiled to do this game as a dare from my Girlfriend on June 6 the "Tetris 1984" anniversary Third one is F1-racer it's inspired by my bestfriend who wasn't impressed with how i hooked up controls on "Tetris Monochrome" so he requested "i modify controls a bit", and i improved "input/output" by adding smooth touch input to it as requested Snake game contains two entities. The Snake and the Apple, the Snake is an Object with properties position (vect...

How to restore PostgreSQL database dump

They'res a magnitude of methods to restore PostgreSQL dumps for a typical plaintext dump "psql" can do a pretty neat Job In few words a PostgreSQL plaintext dump is nothing but a corpus embodied with SQL statements, which when executed tables are created data gets retrieved, inserted and restored. So assuming you have a backup dump saved somewhere on your system open your terminal. And type; psql -U {{username}} < {{dump.sql}} That's it you've imported a database dump

how to dump a postgresql database using from the terminal

PostgreSQL is a relational database management system and arguably the best database management around. postgreSQL comes with utilities used to manipulate databases from the terminal "psql" being the most popular utility I'm sure you've read somewhere or used "psql" dumping "backing" databases is done using PostgreSQL's pg_dump utility In your terminal type; pg_dump <database name> > <output> For instance to backup a database named "books" to a file named "books.sql" do; pg_dump "books" > books.sql How to exclude database data from backups To exclude database data from your output file you should include "-s" flag in your command pg_dump -s "books" > books.sql

Introduction to webshare API (navigator.share)

Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps webshare API is supported on most updated mobile browsers Including Google chrome for Android Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function. For a webshare request to succeed you must supply at lest one of the parameters navigator.share returns a Promise upon being called "upon navigator.share({     "url": document.location,     "text": "I'm an example",     "title": document.title }) .then(resp => console.info("Successfully shared")) .catch(errors => console.error(errors))

How to stop moz dotbot from accessing your website

Image
DotBot is Moz's web crawler, it gathers web data for the Moz Link Index Dotbot obeys robots.txt rules before accessing your host machine so the easiest way to stop dotbot is by adding robots.txt rules that limit dotbot activities To forbid a directory let's say "login" add; User-agent: dotbot Disallow: /login/ Upon reading and parsing directives above moz dotbot won't dare access you sites login sub directory in it's craw routine To forbid an entire website's access include directives below; User-agent: dotbot Disallow: / Alternatively you can limit crawl rate by adding directives below "time is probably in seconds" User-agent: dotbot Crawl-delay: 10 I've attached an nginx log it's a trail left by dotbot along with it's ip and moz support e-mail address; 216.244.66.194 - - [19/Mar/2020:15:16:29 +0000] "GET /index.html HTTP/1.1" 200 13433 "-" "Mozilla/5.0 (compat...

How to set content disposition header for nginx server to force content download

Image
Nginx (pronounced as engine x) is an HTTP server, reverse proxy server, as well as a mail proxy server Nginx is well known for its high performance, stability, efficiency, rich feature set, simple configuration, and low resource consumption. content disposition headers direct web browsers to save content instead of attempting to render it To set content disposition open your desired server configuration in "/etc/nginx/sites-available/" within your configuration add code below within your server {block} location ~* (mp3|ogg|wav)$ {     add_header Content-Disposition "attachment"; } mp3, ogg and wav are example file extensions matched by regular expressions rules Test configuration by acessing mp3, ogg and wav files from your webserver Alternatively you can force custom filenames as shown below "$1" substitutes filenames sent to clients. As an example its value corresponds to the requested file's extension lo...

Reasons why you shouldn't consider hosting on github pages

Image
Github pages is a service for deployment of static websites normally software documentation and blogs Github pages is available on all public github repositories and on premium accounts it extends to private repositories as well. So what's not to like about it. hmmmm think about it. that's too good to be true It's not a secret that "the only free cheese is served on a mouse trap" 1. "Downtime due to maintenance" Every now and then github pages websites undergo an annoying and imaginary maintenance that causes undesirable user experience especially for professional websites. 2. "Slow deployment" I've been using github pages to host my static website with less than 10,000 pages deployment process knocked my entire site offline for 10 mins again that's unnecessary downtime sometimes it extended to days 3. "uninvited cloners" So you put your site out there few days later 50 clones uninvited unwelcom...

How to set content disposition headers for express nodejs apps

Image
In express nodejs apps you can force the user agent "browser" to rather download content instead of displaying or attempting to render given content within the browser. In this example assuming you're using express.static to serve content pass an Object as second argument to express.static function An Object with configuration parameters; const config = { setHeaders: res => res.set('Content-disposition',  'attachment') } In your code replace "path/to/media/" with the path pointing to the static content. app.use('/media/', express.static('path/to/media/', config)) To test try accessing content at /media/*

HTML minifier module for Nodejs

HTML minification is a process involving striping off unneeded, abundant or otherwise unused HTML attributes and elements without affecting the webpage appearance. minification is useful for statically genetated 'serverless' web application webpages as it delivers easy to digest minimal webpages html-minifier is free and open-source npm nodejs module written in JavaScript for minifying HTML documents, as compared to similar nodejs html minification modules html-minifier proves to be pretty fast, flexible and efficient html-minifier module can be used to minify HTML code programmatically or alternatively you can minify HTML code using global commandline module Npm module Installation To install module in your terminal type npm i html-minifier To install commandline version of html-minifier in your terminal type npm i -g html-minifier usage: html-minifier [options] [files...] options: --remove-comments Strip HTML comments --remove-empty-attributes Remove all attri...

Open-graph meta data tags introdution

Open-graph elements are meta tags that contain extra meta data of a webpage open-graph is used by Facebook to create website cards for urls shared on it's platform  cards contain website image thumbnail and as well as title, description, type and url open-graph meta tags have a property attribute containing a property prefixed by "og:" For example; <meta property="og:image"  content="image-url">

Solutions to blocked URLs on Facebook

Facebook allows sharing links on it's platform but in order to protect it's users from accessing URLs containing malicious content Facebook on a regular scraps content on shared URLs effectively raising an alarm if content shared goes against Facebook community standards or in short it's content is forbidden on the Facebook platform, Forbidden content may include potentially malicious crafted phishing websites or websites spreading malware among others Facebook may as well ban content flagged spam either reported or flagged by Facebook moderating algorithm "Facebook sheriff" You wouldn't want to find your website 'spam-list handed' you should avoid that There's no way to redeem a website flagged as a blocked website on Facebook except other non viable alternates such as completely changing your domain or using another sub-domain Facebook may as well ban content containing banned URLs in the meta open graph attributes To resolve open-graph sha...

How to remove null elements from array in JavaScript

Every now and then arrays normally tend to have null or otherwise empty elements Array filter is a specialized JavaScript function for filtering array elements found to be matching a given criteria for example; const arr = ['max', 'duke'] In order to remove duke from elements of the array you can do it as follows; arr.filter(name => (name == 'duke' ? false : true)) // returns ['max'] You can filter empty and false elements as well, using a similar syntax as done above; const arr = ['max', null, 'duke'] arr.filter(name => name) // ['max', 'duke']