Archives de
Étiquette : JavaScript

Pace.js, automatic page load progress bars

Pace.js, automatic page load progress bars

Pace.js is a lightweight (~4kb minified and gzipped) and standalone JavaScript library to create beautiful progress indicators for your page load and ajax request. It automatically monitors AJAX requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again. Pace.js currently comes with 15 themes and 10 color variables, you can customize all these themes. Minimal Flash Barber Shop Mac OSX Fill Left Flat Top Big Counter Corner…

Lire la suite Lire la suite

AddEventListener – Javascript

AddEventListener – Javascript

An event listener is a procedure in JavaScript that waits for an event to occur. The simple example of an event is a user clicking the mouse or pressing a key on the keyboard. The addEventListener() is an inbuilt JavaScript function which takes the event to listen for, and a second argument to be called whenever the described event gets done. Any number of event handlers can be added to a single element without overwriting existing event handlers. Doing different…

Lire la suite Lire la suite

React Native for Mobile apps

React Native for Mobile apps

React Native is one of the most used language in native mobile app development. Created by Facebook, it runs on the same library as React JS. React Native combines the best parts of native development with React, a JavaScript Library (check my article https://cda.needemand.com/2020/12/07/react-js/ for more information on React JS).Over the past few years, the interest for this language has been increasing nonstop, puting it as one of the best solution for mobile apps, but WHY ?? 1/ Fast technology…

Lire la suite Lire la suite

React JS

React JS

Developed by Facebook, React JS is an OpenSource Javascript library that allows the building of user interfaces (UI). It enables to create complicated UI from isolated little pieces of code called « component ». It is only concerned with what you can see on the front-end level.Before React JS, programmers had to « build » UIs by hand. Now, with React JS, you just describe what you want and React will build the UI on your behalf in the web browser. 1/ IntroductionReactJS has…

Lire la suite Lire la suite

Chart.js

Chart.js

Il y a quelques temps j’ai eu l’idée de récupérer les données d’une station météo afin de faire un affichage de ces données sur une page WEB. Pour par exemple l’affichage des températures du jour je pourrais faire cela : Bon effectivement j’ai bien pour chaque heure de la journée les bonnes températures mais c’est pas très lisible, difficile de voir l’évolution tout au long de la journée! J’aimerais bien avoir cela : Avec cette courbe j’ai bien la représentation…

Lire la suite Lire la suite

PUG HTML

PUG HTML

Introduction to Pug Pug is a template engine implemented in JavaScript that allows you to dynamically generate HTML, like Thymeleaf in Java and Twig in PHP. Its syntax is inspired by Haml. It is therefore minimalist and based on indentations. I have never used pug but my first impressions are rather mixed. Previously « Jade » Before, Pug was called Jade. Only Jade has become a registered trademark and as the domain of the trademark is very close (both refer to the…

Lire la suite Lire la suite

The <canvas> element

The <canvas> element

<canvas> is an HTML5 element that allows the creation and manipulation of graphical elements (paths, shapes, text, bitmap images) via a scripting language, most often JavaScript. All modern browsers support it natively, and can render it using hardware acceleration. To start, we add the following tag to the page, specifying the width and height attributes: Drawing lines Let’s draw a primitive C using two lines: Drawing a shape Now, let’s add a D using the context method arc. It accepts the following arguments: Drawing text Next up, we’ll write an A using…

Lire la suite Lire la suite

BOOTSTRAP

BOOTSTRAP

« Build fast, responsive sites with Bootstrap » Voila la proposition de Bootstrap  » Créer rapidement des sites responsives ! » Si je veux faire cette exemple : Je vais devoir coder beaucoup beaucoup de CSS, pour que le titre soit centré avec un fond qui prend toute la page. Avoir trois containers alignés avec leur texte et surtout que ces trois containers passent l’un en dessous de l’autre à partir d’une taille d’écran plus petite… Boostrap va me permettre de faire cela…

Lire la suite Lire la suite