Aleem Isiaka

CSS action pseudo classes

Without JavaScript, dynamic UI is possible with just CSS action class selectors. Case study Help text for input element which is only visible when the input is focused. The HTML 1 2 3 4 <div class="input-cont"> <input type="text" placeholder="Focus me" autofocus /> <span class="help" data-help="Enter your email"></span> </div> To achieve the above, a span holding the help text in a data-help attribute as a sibling to the actual input. Both the input and the span are children to a parent div with class name input-cont. ...

An introduction to Erlang

If you have used WhatsApp or Facebook Chat, then you have one way or the other interacted with an Erlang-backed system. Erlang is a language created for the telecommunication industry by Jor Armstrong, Robert Virding, and Mike Williams in 1986. It was recorded that Jor Armstrong claimed he was provided a library and did not know what to do with it, then they taught him to solve the reliability and concurrent problem of the telecommunication industry, and that gave birth to Erlang. ...

CSS counters

CSS can keep count of numbers without writing any additional JavaScript. It does this by taking note the amount of time a CSS block affects a page then incrementing the counter for that block if the counter-increment rule is implemented. For example: 1 2 3 input:invalid { counter-increment: invalid-count; } With no JavaScript at all, CSS understands that whenever there is an invalid element, it should increment the count for the invalid-count identifier. ...

Structural CSS Selectors

Yeah, you read that right. Let go straight into it! A Test Case Can you interprete this CSS selector query? 1 2 3 p.title:first-of-type { color: red; } Let me think like you would: Select every P element that has the class name of title and apply the color red to the first of its type. 1 2 3 4 <body> <p>Lorem Ipsum</p> <p class="title">Paragraph 2 (shows in red color)</p> </body> You think you’re right. ...

How to enable background Audio Play in iOS React Native

Open ios/{APP_NAME}/Info.plist. Add 1 2 3 4 5 6 7 8 9 10 11 <plist> <dict> ... ... ... <key>UIBackgroundModes</key> <array> <string>audio</string> </array> </dict> </plist> Press r on the metro terminal Voila!

Configure Rollup to bundle Axios module

npm install rollup-plugin-node-resolve rollup-plugin-json. Add it to the plugins inside rollup.config.js 1 2 3 4 5 6 7 8 9 10 11 // Rollup configuration ... plugins: [ rollupNodeResolve({ jsnext: true, preferBuiltins: true, browser: true }), rollupJson(), ... ] ** Notice the browser: true ** Run your build again: yarn run build Voila! Source

How to create Application Icon (Appstore | Playstore)

To make Application Icons for both iOS and Android, use https://appicon.co/ The advantage of appicon.co is that after adding the base icon image, it generates the set of standard icons, and automatically downloads them to a ZIP file named: AppIcons. Extract the zip archive, it contains appstore.png: For Apple AppStore playstore.png: For Google playstore android/: A folder of standard Icons for Android Assets.xcassets: A folder of standard Icons for iOS

Title of the post

Write Here

Dockerized Node/Nginx, MongoDB, Redis app setup

Introduction Docker is an app development tool that eases the process of creating, running, and deploying applications. It uses the concept of containers which work just like a Virtual Machine does. While Docker runs more like a Virtual Machine does, it is more advantageous than a VM. It let us define OS-like images like we are writing an actual OS that includes the only tools that we need, aside this, Docker utilizes the concept of layers which makes its images very much extensible. With this little feature, developers, sysadmins and devops engineers prefer it more. And since it has been in existence, Docker has witnessed widespread usages making it one of the defacto tool for software development, testing and delivery. ...

SocketIO - App structure and architecture

Introduction SocketIO is a JavaScript library that makes developers’ lives easier when dealing with web socket and socket programming. This is the fact that SocketIO has abstracted out all the low-level and tedious steps that are associated with setting up a socket server and client; it has made the question of programmers be “How can I structure my application.” While I have done different types of socket implementations, I will walk us through a setup that has always work for me and has proven to be the best in cases that I have had to use SocketIO. ...