SingleFile: Une extension pour sauvegarder une page web complète

Une page web complète est sa structure générale technique, elle est constitué d'un document rédigé en Hypertext Markup Language (HTML) comme structure de base, de feuilles de style en cascade (CSS), d'images, et de JavaScript. Pour plus d'informations, consultez les liens suivants: Page web 1 et Page web 2 

 L'outil SingleFile est une extension très intéressant du fait qu'il peut sauvegarder une page web que vous etes entrain de voir en y intégrant tout les CSS, les images...etc. C'est à dire avec toutes les ressources possibles connues d'une page web consultable sous internet mais sans aller aux autres liens externes. SingleFile vous permet aussi de faire une mise en page. 

 SingleFile vous offre plusieurs options comme la conservation aux choix d'une page web affichée, des liens sélectionnés, certains de vos onglets ouverts, l'enregistrement automatique de certaines page web dans l'historique, l'annotation d'un page web de votre choix avec vos remarques. 
 L'utilisation de SingleFile se fait par une ligne de commande, vous pouvez l'interfacer par des userscripts. C'est un outil très pratique pour ceux qui aiment sauvegarder des archives.
Vous avez la possibilité d'avoir un certificat de sauvegarde grace à Woolet . 

 Suivez ces liens pour l'installation du SingleFile (Selon les navigateurs):
  


Une astuce pour intégrer le mode sombre sur votre site

 Et oui, une petite astuce que j'ai trouvé dans la toile, il s'agit de transformer votre site web (Blog, Forum, ...) en mode sombre qui permet de réduire la luminosité de la page et ainsi de naviguer tranquillement pendant la nuit, aujourd'hui cette option est à la mode puisque qu'elle envahit meme la majorité des applications connues.
 Il s'agit d'un script JS annexé à une CSS afin de permuter les couleurs d'une page web (Le noir va se transformer en blanc et le blanc en noir).

 Ainsi, an ajoutant ce script ( ou code) sur votre page web, vous allez avoir un petit bouton magique vous permettant de switcher entre le mode clair et le mode sombre de votre blog (ou site).

L'astuce est d'ajouter ce bout de code suivant dans la section: :

<script src="https://binayak.codes/dark-theme-switcher
/app.js"></script> <link rel="stylesheet" href="https://binayak.codes/
dark-theme-switcher/styles/style.css" />

Pour avoir le bouton switch qui permet de permuter entre les deux modes, insérer ce petit code en choisissant l'endroit où il va apparaître sur la page web:

<script> window.ThemeSwitcher().Init(); </script>

 Je vous suggère de chercher ces codes dans leur site d'origine si vous craignez de les avoir à partit des sources externes (parfois suspectes de virus). Après avoir les télécharger vous pouvez les éditer à votre guise, les sources de ces codes sont:

 Méthode d'installation et usage du mode sombre
 Code sur Github

HTML + CSS: fabriquer une couverture d'un livre

Il s'agit en fait d'un service très spécial, il est très pratique pour les rédacteurs qui vendent des eBooks ( sous formes PDF, EPUB,..etc) sur les plateformes spécialisées comme Amazon.
 Comment créer donc et générer les couvertures des livres numériques en PDF destinés aux lecteurs et aux utilisateurs en générale? Grace à 3D Book Image CSS Generator, vous pouvez des jolies couvertures pour vos livres et de récupérer en plus un code HTML + CSS qui peut être intégré dans votre sidebar.
 Grace à cet outil en ligne vous pouvez impressionner vos visiteurs, ensuite vous n'avez qu'à lier l'image d'illustration vers le vrai lien où se trouve votre livre, de fournir le lien absolu de l'image de la couverture, votre nom, le nom du livre, et d'éditer les autres paramètres restants ( largeur, animation, hauteur,...etc).

 C'est tout, pourquoi ne pas l'essayer ;)

Comment utiliser les hyperliens dans Google Sheets

Cet article vous explique comment créer et gérer facilement des hyperliens dans Google Sheets. Une cellule entière de la feuille ou un texte spécifique à l'intérieur de cette cellule peut être lié à des liens des pages Web externes.A savoir que une cellule peut également contenir plusieurs hyperliens.
Dans une cellule Google Sheet, si vous saisissez une adresse de page Web, elle est automatiquement convertie en un lien cliquable hypertexte.


 Vous pouvez ajouter du texte d'ancrage à des hyperliens simples pour des URL plus accessibles.

 Passez votre curseur de la souris sur l'hyperlien et cliquez sur l'icône Modifier, puis ajoutez le texte d'ancrage dans la zone de saisie du Texte et cliquez sur le bouton vert "Appliquer". 

 Vous avez aussi la possibilité d'utiliser la fonction "HYPERLINK" intégrée dans Google Sheet pour créer des liens Web avec du texte d'ancrage. =HYPERLINK("https://www.filtrenet.com", "Le filtre du net")

 Il est également possible d'intégrer plusieurs hyperliens dans une seule cellule de la feuille Google.

 Tapez simplement n'importe quel texte, incluez les URL en texte brut et lorsque vous déplacez le curseur hors de la cellule, les URL sont converties en hyperliens.

 Je vous donne une astuce concernant ce que j'ai cité en haut, il s'agit de sélectionner tout ces liens dans la meme cellule et appuyer sur Alt+Entrée et HOP! tout les liens vont s'ouvrir en même temps dans de nouveaux onglets.

 Donc, vous pouvez utiliser la technique précédente pour modifier plusieurs hyperliens contenus dans une seule et meme cellule et en ajouter du texte d'ancrage.

 En effet vous n'avez qu'à passer votre souris sur un lien dans la cellule, puis cliquez sur l'icône de modification et modifiez le texte d'ancrage. cette opération peut être répétée pour tout les autres liens de la même cellule.

 La gestion de ces hyperliens avec Google scripts

 Dans ce qui suit, je vais vous donner quelques extraits qui peuvent vous aider à gérer vos hyperliens dans Google Sheets grace aux macros de Google Script.

 A- Création des liens dans les cellules Google Sheet via la formule Hyperlien.

 const createHyperLinkWithFormula = () => {
  const link = 'https://www.filtrenet.com';
  const text = 'Le Filtre du net';
  const value = `=HYPERLINK("${link}", "${text}")`;
  const sheet = SpreadsheetApp.getActiveSheet();
  const range = sheet.getRange('A1');
  range.setValue(value);
};

 B- Création des liens avec le générateur RichTextValue 
const createHyperLinkWithRichTextValue = () => {
  const link = 'https://www.filtrenet.com';
  const text = 'Le Filtre du net';
  const value = SpreadsheetApp.newRichTextValue()
    .setText(text)
    .setLinkUrl(link)
    .build();
  SpreadsheetApp.getActiveSheet().getRange('A1').setRichTextValue(value);
};
 C- Création de plusieurs liens dans une seule cellule 
const createMultipleHyperLinks = () => {
  const value = SpreadsheetApp.newRichTextValue()
    .setText('Google acquired YouTube in 2006')
    .setLinkUrl(0, 6, 'https://www.google.com')
    .setLinkUrl(16, 23, 'https://www.youtube.com')
    .build();
  SpreadsheetApp.getActiveSheet().getRange('A1').setRichTextValue(value);
};

 D- Extraction des les liens d'une cellule qui utilise la formule HYPERLINK 
const extractLinkFromFormula = () => {
  const sheet = SpreadsheetApp.getActiveSheet();
  const range = sheet.getRange('A1');
  const formula = range.getFormula();
  const [, url, , text] =
    formula.match(/=HYPERLINK\("(.+?)"([;,]"(.+?)")?\)/) || [];
  Logger.log({ url, text: text || url });
};

 E- Extraction de plusieurs liens et du texte d'ancrage à partir d'une cellule
const extractMultipleLinks = () => {
  const urls = SpreadsheetApp.getActiveSheet()
    .getRange('A1')
    .getRichTextValue()
    .getRuns()
    .map((run) => {
      return {
        url: run.getLinkUrl(),
        text: run.getText(),
      };
    })
    .filter(({ url }) => url);
  Logger.log(urls);
};

Apprendre le développement web grâce à des professeurs les plus impressionnants

Pas mal de chercheurs, se lancent dans le domaine du codage et ainsi à apprendre ce type de développement web, cette pratique améliore les compétences existantes de ce codage.D'autres, essayent d'apprendre de nouveaux languages de programmations et framworks.e. Pour cela, je vais vous proposer plusieurs nombres de didacticiels vidéos et de cours en ligne spécialisés en programmation et plus particulièrement en développement web.

 Pour devenir l'un des meilleurs développeurs, je vais vous citer plusieurs impressionnants enseignants et professeurs qui ne sont pas d’excellents programmeurs, mais d’éducateurs extraordinaires et qui ont l’art d’expliquer des concepts complexes et très difficiles.

 Et si vous apprenez la programmation Web moderne grâce à des meilleurs professeurs en ligne !

 Donc voici un résumé que j'ai pris d'un certain blog et qui vous donne les meilleurs instructeurs de la toile qui peuvent vous aider sur Google Golang, React, Redux, JavaScript, Firebase (base de données et stockage),Node.js, Docker, Typescript, Flutter (pour le développement d'applications mobiles), Dart, Git, Webpack.et ....plus. beaucoup des internautes ont suivi les cours de chacun de ces instructeurs indiqués ci dessous et les recommandent vivement aux autres.
Si vous n'arrivez pas à bien voir cette image ci dessus, je vous suggère ce lien du Google Drive, grace à lui vous pouvez télécharger l'image avec sa taille réelle: instructeurs recommandés de la programmation.
Voici un petit résumé de la plateforme (ou language) et son cours ( ou professeur) correspondant:

Le language React.js correspond aux Andrew Mead, Maximilian Schwarzmüller, Stephen Grider, Ryan Florence, Scott Tolinski, Elijah Manor, Brian Holt, Dave Ceddia, Kirupa Chinnathambi.

Advanced JaVascript/ ES6/ ES2017 correspondent au Anthony Alicea, Wes Bos, Mark Zamoyta, Tyler McGinnis, Mosh Hamedani, Kent C. Dodds, Kyle Simpson, Kyle Robinson Young, Brandon Morelli, Cody Seibert.

Redux correspond aux cours suivants selon leurs auteurs:Dan Abramov, Shaun Pelling,...etc

Docker / Kubernetes correspond aux:Jake Wright, Stephen Grider, James Lee

A savoir que ces cours sont dans la plus part des cas en anglais, il y'en a des centaines d'autres sur la toile, ces derniers représentent en fait qu'un tout petit résumé.

CSS Peeper: Une extension Chrome concurrente de l'inspecteur de code

L'inspecteur de code pour l'analyse des pages web est déjà connu chez les bricoleurs de CSS, mais lorsque vous êtes marre de l'utiliser, je vous propose  CSS Peeper qui va vous relancer à bien bidouiller dans les codes CSS.

Avec CSS Peeper plus besoin de faire des recherches approfondies dans les feuilles de styles, il vous suffit de cliquer sur l'icone représentative en haut ( après l'installation de l'extension Chrome bien sur), de mettre ensuite la souris sur la partie de la page que vous voulez pour obtenir toutes les informations à propos du CSS de cette partie concernée: les assets (les éléments) et couleurs, les styles...ets

A mon avis, CSS Peeper est très simple d'utilisation par rapport à l'inspecteur de code qui est traditionnel, CSSPeeper est à la portée des débuteurs qui se servent souvent de CSS des pages web. C'est un outil indispensable pour beaucoup de designers et intégrateurs. Essayez de faire un petit test et vous verrez !

Voici le lien du téléchargement de cette extension: CSS Peeper

Simple CSS: Créez vous même vos feuilles de style

Vous ne connaissez rien en CSS? vous n'avez pas de temps pour apprendre ce truc alors que vous êtes entrain de créer une feuille de style pour votre site?

J'ai trouvé peut être une solution pratique qui peut vous aider à créer vous même la feuille de style basique en quelques petites étapes, il s'agit d'un petit programme surnommé Simple CSS.
En plus de sa disponibilité en version Windows ou Linux, ce petit logiciel exécutable, vous permet d'exporter les fichiers CSS propres ce qui veut dire qu'ils sont modifiables et éditables.
Du fait que les fichiers sont exportables, vous pouvez se servir de cet outil dans différentes plate-formes qui aident à créer les sites ( Blogger, Wordpress, ...etc)

Sur ce programme, tout les termes du CSS que vous connaissez, existent sous les onglets suivants (Text, Display, Borders, Dimension, Source)
J'ai fais un petit test et voici le résultat:
Enfin, je peux l'enregistrer sur mon disque dur avec le type: All file (*,*), je vous rappelle du lien de ce soft: Simple CSS

3 services en ligne pour apprendre le CSS en s'amusant

 D'abord, c'est quoi le CSS?, c'est l'abréviation anglaise du "Cascading Style Sheets", ce sont des styles qui définissent la manière dont le contenu devrait ressembler sur une page web. A titre d'exemple, vous pouvez se servir du CSS pour donner une ombre portée d'un tableau sur la page web, spécifier son épaisseur ou donner une couleur du texte à l'intérieure de ce tableau.

 L'apprentissage du CSS est très facile, internet est plein ressources très pour apprendre ce langage efficacement et rapidement, je vous donne quelques liens ci dessous:

*-S’entraîner efficacement avec le CSS
*-Cours CSS pour les débutants
*-Des tutoriaux gratuits pour apprendre le langage CSS...etc

 En plus de ces ressources, vous pouvez apprendre le CSS en regardant les vidéos YouTube, il y a des dizaines de chaines YouTube qui expliquent très bien ce langage informatique, il vous suffit de faire une petite recherche sur YouTube avec des mots clés adéquats.

 Je vais vous présenter dans ce qui suit trois intéressants services en ligne pour apprendre le CSS en s'amusant, l'un utilise des notes postées, l'autre se sert avec des chats et le dernier une table à dîner:

1- Post-it® Notes ( 16 leçons CSS):

Créee par Kaylan, l'auteur a intégré les couleurs pour bien visualiser les concepts fondamentaux du langage.tout ces 16 petites leçons incluent une image explicative chacune, par exemple la leçon "FLOAT" est représentée par:


 La leçon "FIXED" est représentée par:


Fondé par Mike Borsare, ce service utilise des mignons chats pour vous expliquer la syntaxe de base du sélecteur CSS. L'apprentissage est en grand partie visuel. C'est un intéressant outil à consulter surtout pour les débutants.

Je vous propose d'utiliser cette magique table de dîner si vous avez des connaissances basiques en sélecteurs CSS afin de pratiquer vos compétences en CSS. Testez le avec attention pour bien apprendre.