r1d36 - Tachyons, une CSS atomique statique

Posté dans :

36ème jour de mon défi #100daysofcode où je parviens à la fin de mon apprentissage des fondamentaux HTML/CSS, bien accompagné par l’excellent cours de Todd McLeod. Un cours « pur CSS » et où les frameworks CSS obèses comme « Bootcrap » sont clairement bannis.

Durant les prochaines semaines, j’envisage de déroger à la règle et d’étudier Tachyons, un framework front-end CSS avec l’intention de décrypter et hacker un joli thème GoHugo.

[en savoir plus]

Victor-Hugo sur Netlify : Un Guide Étape par Étape

Posté dans :
Jetons un oeil sur la façon d’héberger un site web statique en utilisant Hugo sur Netlify, et en n’oubliant pas d’installer un déploiement continu. Dans ce tutoriel, nous utiliserons Victor Hugo (un modèle GoHugo continuellement maintenu) pour construire notre site statique. Pour commencer, nous allons nous assurer que vous disposez de tous les outils dont vous aurez besoin. Allez-y et téléchargez Victor Hugo ici. Si vous avez déjà installé un site Hugo, vous pouvez passer directement à la section Connexion à Netlify. [en savoir plus]

Skeleton

Posté dans :
Avant de partir en pensée design css pour construire une page d’accueil « above-the-fold » avec un menu personnalisé et d’autres layouts fondamentaux, je découvre avec enchantement les potentiels de mise en forme du Skeleton, le boilerplate intégré dans le thème hugo-zen. Typographie La typo est définie avec les rems, de sorte que les tailles de police et les relations spatiales peuvent être évaluées en fonction d’une propriété <html> unique font-size. En sortie de boîte, Skeleton ne change jamais la taille de police <html>, mais il reste là dans le cas où vous en avez besoin pour votre projet. [en savoir plus]

r1d28 Migration Jekyll vers Hugo

Posté dans :
J’en rêvais depuis quelques mois. Après quelques années vécues sur jekyll, je migre aujourd’hui vers le framework GoHugo avec le thème minimaliste « hugo-zen » : Hugo Zen is a minimal hugo theme with Skeleton and has ~100 lines of custom CSS. Nouvelle aventure d’apprentissage sur la rénovation à venir de mon site personnel. Peu à l’aise sur les gros frameworks obèses comme Bootstrap, j’ai choisi ce thème pour repartir de zéro avec le framework Skeleton. [en savoir plus]

r1d23 Flexbox Patterns

Posté dans :
Devoirs de vacances aujourd’hui avec quelques exercices extraits de http://www.flexboxpatterns.com/. Ma production 100daysOfCode du jour s’achèvera sur le troisième exercice des flexbox patterns consistant à construire un en-tête de site. Vous trouverez ci-dessous mon échantillon de code, avec en bonus : Ma première « extraction SVG ». Qui devrait théoriquement s’afficher dans IE9. Une couleur d’arrière-plan du menu extraite à la pipette sur le nouveau Pantone Prince ! CSS Ce type d’échantillon de code (optimisé avec l’aide de mon mentor Todd McLeod) doit pouvoir s’utiliser un en-tête de site web. [en savoir plus]

r1d21 SVG

Posté dans :
Statut : Après l’étude des couleurs, je reste toujours motivé par l’excellente section « graphisme » dans le cours en ligne de Todd McLeod : « How to Create A Website: An HTML Tutorial and CSS Tutorial ». Mon intention à cette heure : explorer la personnalisation d’icônes SVG en HTML et CSS pour intégration dans les menus de sites web responsive, mesurer les gains de performance en évitant de charger des librairies complètes d’icônes. [en savoir plus]

R1d14

Posté dans :
Étude en cours : Flexbox et la pensée conteneur. Flexbox Froggy est un jeu vous demandant de positionner des grenouilles sur des nénuphars en utilisant les propriétés flex-box. [en savoir plus]

r1d11

Posté dans :
Retour à Paris au frais. Reprise du défi #100daysofcode avec un second moniteur. Toujours motivé avec l’intention ferme de réviser et pratiquer proprement CSS, avant toute tentation pour plonger dans le bricolage des thèmes Hugo. Appris quelques rudiments de framework Bootstrap.css en vue de poser une première page d’hommage sur code pen. Découverte du jour Le calculateur de spécificité CSS. Un moyen visuel assez génial pour enfin comprendre clairement la spécificité d’un sélecteur CSS. [en savoir plus]

Shoelace

Posté dans :
Shoelace.style est un kit de démarrage, pas un framework. Son auteur nous invite à le considérer comme une réinitialisation CSS saupoudrée de quelques composants utiles. Les utilisateurs de Bootstrap le trouveront familier, mais rafraîchissant. Shoelace est personnalisable à travers les variables CSS. Il ne nécessite ni Less, ni Sass, ni aucun prétraitement. La version minifiée fait seulement 32.1KB et elle est beaucoup plus petite lorsqu’elle est compressée. Faites simplement un lien vers shoelace. [en savoir plus]

R1D8

Posté dans :

8ème jour. FreeCodeCamp : initiation au responsive design. Aménagement de ce micro-site. Avec l’espoir de m’émanciper en HTML/CSS pour sortir des thèmes fondés sur Bootstrap.

[en savoir plus]

Exemple de Grande Image

Posté dans :

Les bannières d’images en haut de la page font référence à bigimg dans ce thème. Elles sont facultatives, et une image ou plus peuvent être spécifiées. Si plus d’une image est spécifée, ce qui n’est pas recommandé, les images tournent toutes les 10 secondes. Dans le front matter, les bigimgs sont spécifiées en utilisant une array de hashes.

 [en savoir plus]

Échantillon Math

Posté dans :

KaTeX peut être utilisé pour générer des formules de maths complexes côté-serveur.

$$ \phi = \frac{(1+\sqrt{5})}{2} = 1.6180339887\cdots $$

Vous trouverez plus de détails sur GitHub ou sur le wiki.

[en savoir plus]

100DaysOfCode Log - Round 1

Posté dans :
Log Round 1 Copie de mon journal de bord publié sur GitHub concernant mon défi #100DaysOfCode. Un défi personnel d’apprentissage démarré le lundi 24 juillet 2017 avec la ferme volonté de colorier les « petites cases » du dessus. En somme apprendre à construire un site personnel correct et plus amusant à faire tourner. D1 : lundi 24 juillet Comment j’ai Connu le Mouvement #100DaysOfCode Tout simplement via une requête twitter « #GoHugo ». [en savoir plus]

Comment Je Stocke Mes Photos ?

Posté dans :
Rêvant d’une vie plus nomade pour 2017, je suis en train de revoir mon workflow de photos pour travailler en toute sécurité. Ce post est une traduction-adaptation d’un post trouvé dans le dépôt GitHub de Bruno Marinho. Seul le lien original fait référence. N’étant pas photographe professionnel, les sauvegardes redondantes et cette folie de multiplier les disques durs externes de sauvegarde qui ne durent que 6 ans ne sont vraiment pas ma tasse de thé. [en savoir plus]

à Rouen avec Bertrand

Posté dans :
Plus de dix ans que je n’avais posé mes pieds à Rouen. Eu la chance aujourd’hui de me mettre dans le flow et les yeux de Bertrand, un as de la jamstack. Magnifiques échanges. Partagé de belles visions sur le futur des réseaux sociaux des grandes familles élargies, le design de quartier et ses « Pattern Language » sans oublier l’UX et les UIs statiques. Retourné à Paris par le train. Épuisé, heureux et enchanté. [en savoir plus]

Un Jour en Hiver à Auvers-sur-Oise

Posté dans :
Jolie promenade hier à Auvers-sur-Oise sur les traces de Vincent Van Gogh. Je me suis simplement placé dans les yeux de Barbara avec un simple Canon 50 mm/1.8 pour tenter de capter quelques émotions de ce village bien mort en hiver. Je viens de poser sur Flickr quelques photos stimulantes afin de préparer l’organisation de quelques promenades photographiques au Printemps. Démarrage avec un PhotoFlow basé sur un export Adobe LightRoom et SiteLeaf Bonne occasion pour tester de nouveau un export de « PhotoFlow » sur la JamStack. [en savoir plus]

Bonne année Papa

Posté dans :
Ce sera ma photo du jour pour le défi de #100daysofphotos. Mon cher Papa, La photo au-dessus est un premier essai pour mettre à jour ta photo de profil. Pas terrible mais prend la comme telle. Une victoire mentale personnelle de la part de ton fils aîné. (d’autres alternatives joyeuses sont à piocher dans le stockshot de la soirée d’hier) Tu peux être plus que fier. Tout d’abord d’avoir sécurisé Laurence et mes enfants. [en savoir plus]

J2 : PhotoWalk & découverte de Violaine Ullmer, plasticienne (100DaysOfPhotos)

Posté dans :
Pause technique indieweb aujourd’hui pour un « rendez-vous » d’artiste avec Barbara. Sortir la tête de l’écran et retrouver quelque inspiration dans la vraie vie pour faire du « business development ». Belle ballade dans le Marais pour visiter Empreintes, le concept-store des métiers d’Art (rue de Picardie). Volontairement abandonné le téléphone pour ne garder que mon Canon + 50 mm afin de rester dans le flow et constituer rapidement un premier stockshot brut d’objets sensibles et pièces uniques. [en savoir plus]

J1 : 100DaysOfPhotos. Pourquoi cet engagement ?

Posté dans :
Je me suis engagé hâtivement ce matin à poster durant 100 jours sur la thématique photo. Tous mes Voeux 2017 > https://t.co/hfa6Rixz1J #indieweb #100daysOfIndieWeb > #100DaysOfPhotos — Christophe Ducamp (@xtof_fr) 1 janvier 2017 L’engagement officiel : 100 jours de photos, (aka #100DaysOfPhotos) est une variante des 100 jours de blogging. À savoir publier durant les 99 prochains jours de véritables posts d’articles avec photo (et non pas de simples petites notes avec images sur des sujets atomiques et spécifiques. [en savoir plus]

J1 : Voeux et engagement IndieWeb

Posté dans :
Après avoir produit quelques premiers engagements raisonnables indieweb pour cette année, je me retrouve très inspiré par le défi des 100 jours d’IndieWeb proposé par Aaron Parecki. De mon côté je retourne à l’essentiel pour m’engager personnellement à poster durant les 100 prochains jours une photo ou un dessin résumant mes pages matinales et points d’amélioration en cours de production. Si vous voulez nous rejoindre, prenez connaissance des projets sur la page wiki canonique et aidez moi à raffiner la traduction déposée ici pour l’ouverture de nouvelles inscriptions. [en savoir plus]

Stratégies de Sauvegarde 2017

Posté dans :
Ménage de fin d’année Rapide compte-rendu des travaux et quelques pensées en vrac avant de prendre le train pour me reposer à Auvers-sur-Oise. La migration de ce site est enfin terminée et basée sur une architecture flexible (pile JAM). Un schéma soufflé par Bertrand lors de notre dernier déjeuner de travail : Registraire domaine : Gandi, Réseau de distribution de contenus (CDN) : Netlify, Stockage : dépôt chez GitHub. [en savoir plus]

Migration vers la jamstack

Posté dans :
Officiellement en vacances sur le « free-lancing », pause famille et déconnexion sociale jusqu’à lundi pour penser ma stratégie 2017 à valider avec mes trois enfants… La nouvelle interface de publication (siteleaf) m’ouvre ici un chemin facile pour déposer un point technique rapide afin de valider ma roadmap 2017 avec les dévs de JamStatic raffiner deux premiers engagements pris sur l’indieweb (deadline 2016-12-31) Après un gros mal de crâne vécu avant-hier pour me simplifier la vie en 2017 (domaine, admin serveurs, performance/sécurité et activation d’un certificat SSL sur ce domaine),… très heureux de recevoir une bonne nouvelle de la part du « registrar » OVH : [en savoir plus]

Un carnet de bal pour 2017

Posté dans :
I created a Jekyll theme for keeping a journal. Learn more: https://t.co/e5b9KxkSre pic.twitter.com/AJ4e2YOXM1 — craigeley (@craigeley) 18 décembre 2016 Des gens, des lieux, des dates & des rencontres Craig Eley travaille sur une architecture astucieuse pour tenir un journal quotidien. Trophy Logbook, un thème intéressant à localiser pour étudier quelques hacks de Jekyll avant proposition à Lucie d’interfaces-utilisateur mobiles pour étude UX type « carnet de bal ». [en savoir plus]

Avis de recherche : vélo Abici cadre Fuga jaune

Posté dans :
Pour information, je suis à la recherche de mon vélo jaune. Volé dans la soirée du 20 décembre à la Place Pigalle. Signes particuliers : panier inox pour les courses pneu Continental 4 seasons valves de chambres à air neuves munies d’un capuchon transparent. Panier Bikeporter CopenhagParts Le modèle est assez unique pour être facilement repérable. Si vous le voyez dans la rue ou en ligne, prenez-le en photo et prévenez-moi ! [en savoir plus]

Newbie sur la Jamstack...

Posté dans :
(edit : post initalement posé sur christophe.ducamp.me pour configuration de sous-domaine de famille) Sous le regard bienveillant de Bertrand Keller, je délaisse momentanément mes recherches d’activation de certificats SSL sur Gandi… Premiers pas dans l’interface-utilisateur de Netlify pour m’essayer à la JAMstack en 2017… La JAMstack est une manière idéale de bâtir des sites et des applications web performants, sécurisés et simples à mettre à jour. JAM signifie JavaScript, APIs and Markup (JavaScript, APIs et balisage). [en savoir plus]

thème Jekyll : de Minima à Minima...

Posté dans :
Les premiers thèmes pour Jekyll arrivent sur GitHub \o/ https://t.co/FiljDMuAc6 — Jamstatic-fr (@jamstatic_fr) 15 décembre 2016 L’annonce est prometteuse. Essayé d’installer le thème Minimal sur un référentiel existant chez Github Pages pour quelques premiers tests en attendant l’arrivée d’autres thèmes de la communauté. Suivi la documentation ce matin… la documentation Vous aussi, construisez votre site web GitHub Pages avec un thème Jekyll en quelques clics. Créez un nouveau référentiel GitHub ou allez sur un référentiel existant. [en savoir plus]

Nouveau sélecteur de thèmes pour Github Pages

Posté dans :
Les premiers thèmes pour Jekyll arrivent sur GitHub \o/ https://t.co/FiljDMuAc6 — Jamstatic-fr (@jamstatic_fr) 15 décembre 2016 Vous pouvez désormais construire un site web GitHub Pages avec un thème Jekyll en quelques clics. Créez un nouveau référentiel GitHub ou allez sur un référentiel existant. Ouvrez le sélectionneur de thème dans la section GitHub Pages « Theme Chooser » des réglages de votre référentiel. Sélectionnez un thème. Utiliser un thème Jekyll veut dire que votre contenu de site web vit dans des fichiers Markdown, que vous pouvez modifier et gérer comme vous voulez en utilisant votre workflow Git préféré. [en savoir plus]

Lecture : Design Web Résilient

Posté dans :
Tombé ce matin sur ce post de Jeremy Keith, une de mes premières muses sur le design indieweb… : Introducing Resilient Web Design I wrote a thing. The thing is a book. But the book is not published on paper. This book is on the web. It’s a web book. Or “wook” if you prefer …please don’t prefer. Here it is: Resilient Web Design. It’s yours for free. Much of the subject matter will be familiar if you’ve seen my conference talks from the past couple of years, particularly Enhance! [en savoir plus]

Installation jekyll-admin

Posté dans :
Pour faciliter l’ajout de nouveaux posts, installé pour essayer un plugin de Jekyll qui se rapproche d’une interface graphique de type CMS pour publier du contenu et administrer les sites Jekyll : https://jekyll.github.io/jekyll-admin/ Un gros progrès comparé à l’ajout manuel de post. Je trouve curieux de ne pas avoir intégré par défaut la mise à jour automatique des champs de métadonnées pour les posts ? Ajout de post avec jekyll-admin Si vous optez pour jekyll-admin, pensez à ajouter quelques champs de métadonnées. [en savoir plus]

Retour sur Jekyll !

Posté dans :
(post de test - importé d’une branche expérimentale ) L’hiver arrive, temps de reprendre les explorations et quelques engagements indieweb où j’aimerais m’engager publiquement pour implémenter de nouvelles fonctionnalités sur mon site personnel. Après maintes explorations passionnantes et difficiles démarrées en 2013 pour découvrir GitHub et les fondamentaux des générateurs statiques, je suis très heureux de repartir sur cette nouvelle branche (de sous-domaine de famille) afin d’apprendre, tester les nouvelles fonctionnalités de Jekyll découvertes via la communauté jekyll francophone et aider quelques amis qui voudraient se lancer en 2017. [en savoir plus]

Bertrand Keller - Agilité Pour Petits Projets (vidéo 24 min)

Posté dans :
Eu la chance de croiser Bertrand dans la remarquable communauté jamstatic. Regardé attentivement et à l’instant sa vision et ses pratiques des générateurs statiques pour préparer notre déjeuner. Une vision très inspirante du web moderne que j’aimerais bien pouvoir proposer à quelques freelances et micro-entrepreneurs. Quels épisodes peut-on proposer à un client pour réaliser un site innovant ? Utiliser Jekyll pour produire des prototypes fonctionnels, mettre en place des animations léchées et construire une documentation complète. [en savoir plus]

Dogfooding sur Jekyll 3.3.

Posté dans :
Travaux en cours : « CatFood » pour 2017 Oui, ce site est toujours en travaux… Mais non, ce site n’est pas abandonné ! Joie de reprendre l’apprentissage « statique » après 6 mois d’absence. Bonnes nouvelles concernant le *générateur statique * Jekyll : - évolution sensible des éditeurs et interfaces-utilisateurs pour faciliter la mise à jour des pages, posts, notes et autres fichiers de données. - et tout un plein de nouveautés pour se simplifier la vie avec la version 3. [en savoir plus]

L'homme explore le faux texte, et cette exploration est à son point culminant

Posté dans :
Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum, qui permet donc de faire office de texte d’attente. L’avantage de le mettre en latin est que l’opérateur sait au premier coup d’oeil que la page contenant ces lignes n’est pas valide, et surtout l’attention du client n’est pas dérangée par le contenu, il demeure concentré seulement sur l’aspect graphique. [en savoir plus]

Mise à jour Jekyll 3

Posté dans :
Mise à jour à partir d’une ancienne version de Jekyll ? Quelques petites choses ont changé dans la version 3.0. Avant de nous lancer, ouvrez votre fenêtre de terminal et récupérez la dernière version de Jekyll : $ gem update jekyll html <div class="note feature"> <h5 markdown="1">Plongeon</h5> <p markdown="1">Vous voulez un nouveau site Jekyll et démarrer rapidement ? Lancez simplement <code>jekyll new NOMSITE</code> pour créer un nouveau répertoire avec un site Jekyll pré-installé. [en savoir plus]

Pierre : Un #indiewebcamp OpenChateau début juin ?

Posté dans :
IndieWeb (french) https://t.co/aCxvtxh8W9 — Pierre (@pierreozoux) 30 Janvier 2015 Aujourd'hui, on ne peut pas parler de blogging sans parler d'IndieWeb ! C'est la révolution à mon sens et au sens de beaucoup de personnes. J'en ai des frissons rien que d'y penser. indieweb (french) (Pierre Ozoux, 2015-01-31) Salut Pierre. Touché par ton pitch indieweb en français et plus largement par tous les efforts produits par IndieHosters pour soutenir la stratégie francophone indieweb 2015. [en savoir plus]

Comment lire plus

Posté dans :
Achevé l’excellent ouvrage d’Austin Kleon, Partagez comme un Artiste désormais traduit en français et en occasion chez Gibert à 7.80 € Inspiré par la check-list pour lire plus en 2015 et parvenir à un objectif de 50 livres, soit plus de 4 par mois… Les 7 trucs d’Austin Kleon pour lire plus : Jetez votre téléphone dans l’océan. Faites un budget, achetez les livres que vous voulez lire, faites-en une pile que vous croiserez tous les jours (bien sûr, une bibliothèque c’est génial) Emportez toujours un livre avec vous à tout moment Si vous n’appréciez pas un livre ou n’y apprenez rien, arrêtez immédiatement de le lire. [en savoir plus]

Je hais le nouvel an

Posté dans :
Duodi 12 Nivôse CCXXIII 2015-01-01T08:47 Le soleil vient de se lever… Chaque matin, une année nouvelle… Bonne Année Internationale de la Lumière et des Techniques Utilisant la Lumière. #IYL2015 #IYL2015 Happy International Year of Light & Light-based Technologies everyone! #IYL2015 @UNESCO pic.twitter.com/S7zaNyfrv7 — IYL2015 (@IYL2015) 31 Décembre 2014 (...) Je veux que chaque matin soit pour moi une année nouvelle. Chaque jour je veux faire les comptes avec moi-même, et me renouveler chaque jour. [en savoir plus]

Démarrer des Collections dans Jekyll

Posté dans :
Inspiration & remerciements à Taylor Jones pour son post de référence m’ayant sérieusement aidé pour capter le fonctionnement des collections dans Jekyll. Le code de l’exemple d’une collection d’albums de musique est posé sur github. Comment Démarrer des Collections dans Jekyll 2.xx Migration WordPress vers Jekyll : un an déjà… Fin 2013, je prenais la décision de migrer de WordPress vers une motorisation Jekyll pour m’essayer à la pose de quelques premières briques de construction indieweb. [en savoir plus]

Les collections dans Jekyll (doc)

Posté dans :
lien de référence Dans votre site Jekyll, tout n’est pas « Post » ou « Page ». Vous voudrez peut-être parfois publier des petites notes de statut, documenter différentes méthodes dans votre projet OpenSource, un annuaire des membres d’une équipe, une liste de livres ou d’albums de musique. Les collections vous permettent de définir un nouveau type de document qui se comporte comme le font normalement les Pages ou les Posts, mais disposent aussi de leurs propres propriétés uniques et d’un espace-nom. [en savoir plus]

Anti-sèche markdown.

Posté dans :
Après plus d’un an passé sur la syntaxe Mediawiki, décidé de passer l’année 2014 en Markdown ! Cette anti-sèche est destinée à des fins de référence rapide pour étude d’inter-opérabilité de ce langage de mise en forme très simple. (Pressenti ailleurs comme l’avenir de l’écriture)) Pour une information de référence plus complète, regardez la spécification originale de John Gruber et la page d’information sur le Markdown-enrichi de GitHub. P.S. Ce post est un premier essai publié directement à partir de l’éditeur de texte Byword assorti de son module intégré de publication vers WordPress. [en savoir plus]

Algie Vasculaire de la Face, Anti-Douleur et Humeur

Posté dans :
Humeur à 100% avec Algie Vasculaire de la Face. Même si ça pique toujours aussi fort… (#douleur) Wikipedia raconte que les Américains la surnomment cyniquement the Boss Headache (le mal de tête du patron) … Des références sont demandées ! L’algie vasculaire de la face (AVF) est une forme aigüe de céphalée essentielle. Il s’agit d’une maladie neurologique rare qui touche à la fois les nerfs et les vaisseaux. [en savoir plus]

Les Collections !

Posté dans :
Les collections dans Jekyll 2.0 Tout dans votre site Jekyll n’est pas un post ou une page. Vous voudrez peut-être documenter différentes méthodes dans votre projet OpenSource, l’annuaire des membres d’une équipe ou une liste d’albums de musique. Les collections vous permettent de définir un nouveau type de document qui se comporte comme le font normalement les Pages ou les Posts, mais elles disposent aussi de leurs propres propriétés uniques et d’un espace-nom. [en savoir plus]

Redirections URLs dans Jekyll

Posté dans :
Depuis la publication de ce post, la motorisation de ce site a changé pour Hugo, aussi les liens d’exemples sont dépréciés. Les instructions déposées restent à vérifier. Inspiré pour reprendre l’étude de l’IndieMark sur cette instance Jekyll. Une inspiration particulièrement dopée par l’arrivée sur IndieWeb de Pierre Ozoux. Et par le dépannage webmention reçu de Michiel, notre ami sauveur du web passé à Paris mercredi dernier pour le premier meetup de décentralisation du net chez Mozilla. [en savoir plus]

La quantification de soi à la recherche de sens

Posté dans :
De la critique sur les usages et la pertinence des offres actuelles de l’auto-mesure. Pourquoi le mouvement du Quantified Self peine à décoller ? titre Télérama dans un excellent article critique paru au sein du webdocumentaire Quand le Corps Humain devient Machine. En super-bonus, découvrez notamment les points de vue éclairés de Nicolas Geraud et Remy Bourganel, co-producteurs de notre dernière rencontre consacrée au design : (…) Pourquoi ce mouvement peine-t-il à décoller alors qu’il a apparemment tout pour réussir ? [en savoir plus]

Design : Joel Glovier rhabille Jekyll

Posté dans :
Just finished an upgrade of the default @jekyllrb blog theme. https://t.co/hpLZs2RS4R (or preview it: http://t.co/QAJmm9wS8Q) — Joel Glovier (@jglovier) 24 Février 2014 Cela fait quelques jours que je savoure avec grand intérêt les évolutions de Joel sur son repo jekyll-new, le nouveau template qui sera implémenté par défaut dans la version 2.0. à venir de Jekyll (motorisation puissante de génération de sites web). Très simple et épuré, ce template se montre au premier coup d’oeil carrément plus élégant et pro que la version « out-of-the-box » existante qui décorait ce site… [en savoir plus]

Jekyll : Générer un Post avec Rakefile

Posté dans :
Les nom et permalien de ce post ont été générés automatiquement à l’aide de rakefile… Envisageant de raffiner l’architecture et le design de ce site personnel destiné à quelques futurs tests d’indiewebification. Bien d’accord avec vous, ce site bien que fonctionnel demeure vraiment très moche (et qui plus est, ennuyeux au possible !). Ne souhaitant pas tomber dans la facilité d’installer un magnifique thème pré-construit sans rien y comprendre, je me donne encore quelques mois pour étudier quelques fondamentaux CSS avant de m’aventurer sur les pentes escarpées du « look and feel ». [en savoir plus]

Comment Déployer Jekyll

Posté dans :
lien de référence (doc Jekyll) Seul le lien officiel fait référence. Difficultés rencontrées avec le script automatique Glynn. Étude en cours et recherches de scripts SSH et rsync simples à paramétrer pour simplification et automatisation. Du fait de la nature statique de la production générée, tous les sites construits avec Jekyll peuvent être déployés de différentes façons. Quelques-unes des techniques les plus communes sont décrites ci-dessous. Fournisseurs d’hébergement web (FTP) Quasiment tous les fournisseurs d’hébergement web traditionnels vous permettent de copier des fichiers sur leurs serveurs par FTP. [en savoir plus]

Webmentions et Jekyll

Posté dans :
Après la première expérimentation de fédération de commentaires #indieweb chez Laurent aidé de quelques plugins WordPress, je (chrono)rêve depuis septembre dernier de parvenir à faire tourner simplement la brique de construction webmention sur quelques simples pages HTML statiques. Pelle Wessman a lancé en décembre dernier un service qui peut recevoir et embarquer les Webmentions pour les sites statiques. Ce post est à cette heure un premier test en cours à valider et sujet à réglages divers. [en savoir plus]

Comment localiser la date en français dans Jekyll ?

Posté dans :
Edit : le contenu de ce post est déprécié et maintenu à titre d’archive souvenir. Pour formater les dates en français dans Jekyll, lisez cette notice « Traduire la date dans Jekyll » publiée le 19 mai 2017. - xtof Vous venez d’installer Jekyll en 3 lignes de commande et souhaiteriez afficher toutes les dates en français ? Non programmeur comme moi, vous vous sentez déroutés par la doc officielle sur les templates et le langage de programmation Liquid de Shopify. [en savoir plus]

Markdown : Le Futur de l'Écriture

Posté dans :
En cours d’étude pour migrer sérieusement vers Jekyll, parti en séance d’essais de quelques éditeurs de texte pour écrire en Markdown. Cet article original de Robby Ingebretsen publié le 28 juin 2013 m’a bien éclairé sur ce langage. Comme à l’habitude, seul le lien original fait référence. Si vous désirez écrire sérieusement, alors il est temps d’envisager sérieusement Markdown. Sinon, continuez à utiliser WordPerfect. Allons droit au but : par écriture, j’entends une écriture réfléchie, pensée et structurée. [en savoir plus]

Démarrer avec Pages GitHub (Plus Bonus Jekyll)

Posté dans :
Lien de référence : Get Started With GitHup Pages (Plus Bonus Jekyll), (24ways - Anna Debenham, 18 décembre 2013) Après plusieurs tentatives avortées pour démarrer avec les Pages GitHub, je me suis jurée que si jamais j’y parvenais, je l’écrirais. Heureusement, j’y suis enfin arrivée, aussi voici ma copie. Pourquoi Je Trouve que Pages GitHub Est Cool Normalement, quand vous hébergez des trucs sur GitHub, vous ne faites que stocker vos fichiers là-bas. [en savoir plus]

GitHub : Être Social

Posté dans :
Lien de référence : Be Social L’une des fonctionnalités géniales de GitHub est la capacité de pouvoir voir sur quoi d’autres personnes travaillent et avec qui elles se connectent. Quand vous suivez quelqu’un, vous recevrez des notifications de son activité GitHub sur votre tableau de bord. Suivez des Personnes Quand vous suivez quelqu’un sur GitHub, vous recevrez des notifications concernant son activité sur votre tableau de bord. Une fois que vous sur l’une de ses pages, cliquez sur le bouton Follow : [en savoir plus]

Forker un Repo sur GitHub

Posté dans :
Lien de référence : Fork A Repo Si vous vous trouvez sur cette page, je peux supposer que vous débutez sur Git et GitHub. Ce petit guide vous fera réviser quelques fondamentaux et vous aidera à faire vos premiers pas sur GitHub. Forker un Repo Un fork est une copie d’un dépôt. Forker un dépôt vous permet d’expérimenter librement des modifications sans toucher au projet original. Plus communément, les forks sont utilisés soit pour proposer des modifications sur le projet de quelqu’un d’autre ou pour utiliser le projet de quelqu’un d’autre comme point de départ pour une nouvelle idée. [en savoir plus]

Créer un Dépôt sur GitHub

Posté dans :
Lien de référence : Create A Repo Si vous vous trouvez sur cette page, je peux supposer que vous débutez sur Git et GitHub. Ce petit guide vous fera réviser quelques fondamentaux et vous expliquera comment faire vos premiers pas sur GitHub. Produire un nouveau dépôt sur GitHub Chaque fois que vous produisez un commit (instantané) avec Git, il est stocké dans un dépôt (aussi appelé « repo »). Pour déposer votre projet sur GitHub, vous devrez disposer d’un dépôt GitHub pour le faire vivre. [en savoir plus]

GitHub pour les Débutants : Consignez, Poussez et Foncez !

Posté dans :
Traduction -à des fins d’étude et de mémo- d’un article original de Lauren Orsini publié le 2 octobre 2013 pour ReadWriteWeb. Seul le lien original fait référence. - xtof_fr Maintenant que nous connaissons les concepts Git, il est temps de jouer. Voici venue la deuxième partie de notre série. Dans la 1ère partie de ce tutoriel GitHub en deux parties, nous avons examiné les principales utilisations de GitHub, commencé le processus d’enregistrement d’un compte GitHub et pour finir, nous avons créé notre propre repository local pour le code. [en savoir plus]

GitHub Pour les Nuls : Pas de Panique, Lancez-Vous ! (Première Partie)

Posté dans :
Traduction d’un article original de Lauren Orsini publié le 30 septembre 2013 pour ReadWriteWeb. Seul le lien original fait référence. La traduction reste à raffiner avec la pratique de cet outil. Seconde partie en cours d’étude pour me lancer sous peu dans les premiers commits à la ligne de commande. Mise en forme prévue pour le plan de route indieweb 2014. Merci. - xtof_fr GitHub est plus qu’un simple outil de programmation. [en savoir plus]

MacOSX : Comment Utiliser les Pages GitHub pour votre page Projet

Posté dans :
Lien de référence chez Thinkful Vous êtes débutant comme loi dans la ligne de commande et sur Git ? Si vous cherchez un moyen gratuit d’héberger quelques documents et projets, les Pages GitHub peuvent être une réponse. Non seulement, GitHub vous permet d’héberger des sites web avec HTML, CSS et javascript, mais ce service vous permet en outre de vous familiariser avec Git, un outil important de gestion de versions mais plutôt difficile à appréhender pour les non-programmeurs. [en savoir plus]

Installer Git

Posté dans :
lien de référence Au coeur de GitHub, il y a un système de contrôle de version appelé Git. Comment l’installer ? Installer Git N.B. Si vous êtes perdu.e sur cette page, … oubliez le terminal ! Vous pouvez à la place utiliser l’application native de GitHub pour Mac Si vous atterrissez sur cette page, je suppose que comme moi, vous débutez sur Git et GitHub. Ce petit guide vous fera réviser quelques fondamentaux et vous aidera à faire vos premiers pas sur GitHub. [en savoir plus]

Quelques Astuces sur le Terminal

Posté dans :
Les blocs de code comme ceux-ci sur cette page font partie d’un langage de programmation appelé Bash. Pour utiliser des programmes Bash, nous devons utiliser Terminal, une application livrée avec votre Mac, généralement trouvée dans /Applications/Utilitaires. Saisie echo 'Ceci est du texte saisi' # Ce truc d'aide vous dit ce qui se passe. Une ligne qui commence par un signe dollar ($) indique une ligne de programme Bash que vous devez taper. [en savoir plus]

Antisèche Ligne de Commande pour Démarrer sur GitHub !

Posté dans :
Utile, si vous démarrez dans la fenêtre de Terminal. Glossaire Git pour les Nuls git init : Initialise un dépôt git dans un répertoire vide. git status : Affiche le statut des choses dans le répertoire suivi git add <NOM DU FICHIER A SUIVRE> : Ajoute un fichier à suivre dans la zone d’attente git commit -m "entrez votre message" : Consigner (déclarer) toute modification. git remote add origin [adresse URL GitHub ici] : Connecte votre dépôt local avec GitHub. [en savoir plus]

GitHub pour Mac : Fusionner des Branches

Posté dans :
Lien de référence Une fois que vous avez produit une nouvelle branche et fini le travail sur votre dernière idée, vous voudrez fusionner les modifications dans master (ou peut-être une autre branche), de manière à ce qu’elles fassent partie du corps de travail principal. Si vous travaillez comme membre d’une équipe, c’est une bonne pratique que d’avoir une révision de votre branche par vos collègues (peut-être en produisant une pull request sur GitHub. [en savoir plus]

GitHub pour Mac : Lancer un dépôt

Posté dans :
Lien de référence Edit - Page à rafraîchir et synchroniser Créer une branche pour votre travail À Propos des commits Committer et réviser les modifications de votre projet Réinitialiser un commit – Attention : contenu déprécié : Plutôt que de cloner un repo pré-existant - commençons cette fois-ci par créer un tout nouveau projet. Cliquez sur « Repositories » tout en haut de la fenêtre de l’app, de manière à revenir dans la vue principale Repositories. [en savoir plus]

Github Pour Mac : Faire des Modifications

Posté dans :
Lien de référence Après avoir forké un dépôt et l’avoir cloné vers GitHub pour Mac, vous pouvez visualiser le dépôt sur GitHub.com et ajouter quelques amis comme collaborateurs de façon à ce qu’ils puissent aussi travailler sur votre fork… mais tout d’abord, faisons quelques modifications par nous-mêmes ! GitHub pour Mac dispose d’un raccourci très pratique pour que vous puissiez rapidement voir vos dépôts dans le Finder – survolez et posez-vous sur le dépôt dans la vue des dépôts principaux et faites un control-clic, puis sélectionnez « Show in Finder » dans le menu contextuel qui apparaît. [en savoir plus]

Github Pour Mac : Travailler avec des dépôts

Posté dans :
lien de référence GitHub ce n’est que de la collaboration. Deux personnes ou plus peuvent disposer chacune de leurs propres copies locales d’un dépôt, qu’elles synchronisent chacune sur la même copie distante. Encore peu à l’aise sur Git et la ligne de commande, ces quelques premiers pas sur l’interface visuelle de Github pour Mac sont destinés à un premier rôdage pour produire un premier « Fork & Clone ». Traduit dans mes mots…, cela consiste à rapatrier sur mon mac personnel une copie locale d’un projet open source existant à distance (sur github). [en savoir plus]

Arrivée sur Jekyll : Ouf !

Posté dans :
Satisfait d’être parvenu à publier cette première page sur le moteur jekyll. Non programmeur, la pente a été raide et escarpée. Point le plus difficile jusqu’à présent : parvenir à héberger ce site gracieusement sur les « Pages Utilisateur de Github ». Pause à cette heure dans les tutoriels de lignes de commande Git désespérément rebutants pour les débutants. Premier Gist En Ligne Premier gist-souvenir. Un gist dans le contexte est un moyen simple de partager des morceaux de code avec d’autres. [en savoir plus]