Infinite Scroll

/in , , /by

Have you ever seen those automatic “load more” while you scroll down? Did you see them on Tumblr for images, Gmail for messages or Facebook? Cool, isn’t it? The infinite scroll is an alternative for pagination and it’s everywhere. It optimizes the user experience loading data as the user required it (indirectly). You get faster loading process for pages, web, apps and it just loads what you need instead of the whole bunch. You don’t need to add extra interactions, buttons or widgets because it comes with the normal reading behaviour that you are used to: scroll down with the mouse or with the finger in a touchable screen.

So, here how to do it in a simple pure JavaScript 🙂

CSS zoom

/in , , /by

Easy zoom in, zoom out, normal zoom and zoom adjusted to the container with CSS and JS.

If you want to change the zoom, just add or subtract from the original zoom CSS property.

document.querySelector("#zoomin").addEventListener("click", function() {
    $area.style.zoom = Number($area.style.zoom) + 0.2;
});

You can also set up maximum and minimum values to avoid infinite zoom.

To adjust an area or image to your container you need to divide the width or height depending of what you want to adjust.

document.querySelector("#zoomfix").addEventListener("click", function() {
    $area.style.zoom = $container.offsetWidth / $area.offsetWidth;
});

Here a real example:

Basic CSS transition using box-shadow

/in , /by

Would you like to set up a cool basic transition for your buttons when the cursor is over them?

  1. Create your HTML button. We have chosen the smile face character but you can use whatever you want (I normaly use Font Awesome).
  2. Define your CSS transition. In our case we want a period of 0.5 seconds every time our CSS changes and a transition effect with a slow start and end (ease-in-out).
transition: all 0.5s ease-in-out;

Our CSS will change if the mouse is over the button.

i { 
    box-shadow: 0 0 0 75px #E94F37 inset;
    color: white;
}

i:hover {
    box-shadow: 0 0 0 4px #E94F37 inset;
    color:#E94F37;
}

We are filling up the element with an inner shadow (inset) and changing the font color.

Here a real example:

Would you like to start with web development?

/in , , , /by

UPDATED: 2022-05-06

If you don’t know anything about programming but you would like to start creating your own webs, desktop or mobile apps from scratch, I’m here to help you out ^^

Break the ice with a short fun history about JavaScript and the Web

  1. From undefined to something.js

Here we go, our first real code contact! You can start doing these fantastic courses from CodeAcademy (guided step by step, interactive and very basic)

  1. Introduction to HTML
  2. Introduction to CSS
  3. Introduction to JavaScript (and intermediate)

Follow with these complete courses from W3CSchools (a wider guide with many examples)

  1. HTML – The language for building webs
  2. CSS – The language for styling webs
  3. JavaScript – The language for programming webs

Don’t worry if some concept are repeated, you need to consolidate, humans learn buy doing.

Another really good option is Mozilla Developer Network (shared knowledge for the Open Web) and all courses about Web Technologies where you can find a wonderful documentation, tutorials and tools. Everything very well structured and in many different languages with the chance to dive deeper into Web Technologies.

After doing CodeAcademy, W3CSchools courses and having taken a glance to MDN I would recommend you to watch this YouTube tutorial: Understanding the Weird Parts of JavaScript. It’s also really basic but it explains some aspects under the hood of JS. This guy made a really good presentation, one of the best videos about JS I’ve ever seen. You can complete his course on Udemy.

After consolidating a good base:

  1. Functional Programming with JavaScript (mandatory)
  2. Understanding the even loop (mandatory)
  3. CSS Grid
  4. Svelte
  5. Some of my tricks

Things are as easy as you want them, the knowledge should be open and free for everyone. There are many genius out there and most of them cannot afford their studies, even if they are public. Do not keep your knowledge for you, spread it out together with your ideas to build a better world 🙂

How to make a mobile app?

/in , , , /by

cordova-logo

In this tutorial I’m going to explain you step by step how I make phone apps using Cordova (Phonegap/Ionic) and Ubuntu.

1) Install Cordova

For those who don’t know anything about Cordova, it is an opensource platform for building multiple platforms applications using HTML, CSS and JavaScript. The main different between Cordova and Phonegap is that the second one gets the Cordova code and redistributes with some Adobe rights, now it’s free but maybe tomorrow who knows, my recommendation is to use Cordova that apart of this is always more updated!

So, first step you have to install Cordova, open a shell in Ubuntu and type:

$ sudo npm install -g cordova

Any problems? See the Cordova documentation.

2) Install Platform

After that you need to install a platform, in this example we are going to develop an Android app so you have to install the Android SDK.

I recommend you to install Android Studio that brings you the SDK and many extra tools in an user friendly access. Get Android Studio.

Once you download it and unzipped it, you have to run it the first time to install everything. If you set android-studio in your home folder, it will create an Android folder with the SDK.

3) Add Android SDK to your “PATH”

Make Android SDK accessible in your environment (system)

Open a shell and type:

$ nano ~/.bashrc

Then you need to add to your “PATH” variable where your SDK and Gradle are.

export ANDROID_SDK_ROOT=~/Android/Sdk
export PATH=${PATH}:~/Android/Sdk/tools:~/Android/Sdk/platform-tools:~/android-studio/gradle/gradle-5.1.1/bin

After that, reload bashrc, if not it will not have any effect.

$ source ~/.bashrc

Note: you need to set your own path and names for the Android SDK, I used my “home” folder and default Android Studio’s folders.

4) Install Text Editor / IDE

Use the one you feel more confortable, my favorites are: Atom and VSCodium.

5) Create your App

$ cordova create myApp
$ cd myApp
$ cordova platform add android
$ cordova run --debug --device

Now you can start programming! HTML, CSS and JavaScript files are in the “www” folder.

Remember you need to activate developer options in your Android phone.

If you have any access problem (EACCES)  to your android-studio folder.

$ chmod 777 -R ~/android-studio/

Enjoy 🙂

Here if you want you can download my Cordova logo and use it for free: Cordova logo