Check Out the New Page Builder in Drupal 8.5!
▻https://www.ostraining.com/blog/drupal/drupal-85
“the most exciting feature in Drupal 8.5 is the Layout Builder. No matter what you personally think about Page Builders, vast sections of the website-building world loves them. You can talk about other Drupal features headless frontends and continuous integration tools all day, but drag-and-drop Page Builders is what many end-users care about”
]]>Retour d’experience sur le developement d’un éditeur rich text, axé rédaction digital, pour le NYT.
manipulation DOM, Utilise ProseMirror, intéressant pour la structuration des blocs imbriqués de contenu…
Building a Text Editor for a Digital-First Newsroom
▻https://open.nytimes.com/building-a-text-editor-for-a-digital-first-newsroom-f1cb8367fc21
]]>Designing Tables for Reusability
▻https://uxdesign.cc/designing-tables-for-reusability-490a3760533
“designing a standard table UI pattern that could be used across multiple product lines with different use cases and different target users”
]]>Réécriture de code vieux de 17 ans - Anna Filina - Forum PHP 2017
▻https://www.youtube.com/watch?v=AlkdqUNX4Rw
Excellente conférence sur des méthodes et des stratégies pour faire du refactoring même de très vieux projets très compliqués. Merci @marcimat !
#refactoring #programmation #développement #code #bonnes_pratiques #bonne_pratique #tests_unitaires #documentation #PHP et bien sûr 17 ans ça vous dit rien ? #idée_pour_spip !
ProseMirror
►http://prosemirror.net
#wysiwyg
Frappé Charts
▻https://frappe.github.io/charts
GitHub-inspired simple and modern charts for the web with zero dependencies.
#graphes #outils #javascript (et pas #d3.js)
▻http://blockbuilder.org/Fil/e0e862c46b4fe5087f28c6f601772d78
]]>Cache-cache #css – La vie en #ffoodd
▻http://www.ffoodd.fr/cache-cache-css
#webdev #masquer #hidden #focus #a11y
Confort-plus, une solution libre contre la #dyslexie
▻http://confort-plus.orange.com
Je découvre en jetant un œil au programme de Paris-web cette conférence sur la dyslexie et de manière plus générale sur l’accessibilité
▻https://www.paris-web.fr/2017/conferences/dyslexie-des-solutions-numeriques-pour-rendre-le-web-plus-lisible.php
Ce service offre une vingtaine d’options pour adapter les sites Web à votre besoin : que vous ayez des déficiences visuelles ou une simple fatigue, des problèmes de reconnaissance des mots pour des raisons de dyslexie ou autres, de la difficulté à utiliser une souris ou que vous ne sachiez pas comment paramétrer votre ordinateur, Orange Confort+ vous apporte des solutions : un paramétrage à réaliser une fois et tous les sites Web prendront en compte vos préférences
Apparemment assez léger à intégrer sur son site (et pourquoi pas dans l’interface privée de Spip ?). L’outil est dispo sur GitHub et en GPL.
]]>About - graphql-php
▻http://webonyx.github.io/graphql-php
Une implémentation en PHP d’un serveur GraphQL, et qui permet de l’utiliser avec nos logiques métiers déjà existantes (on implémente suivant notre backend quoi).
graphql-php is a feature-complete implementation of GraphQL specification in PHP (5.5+, 7.0+). It was originally inspired by reference JavaScript implementation published by Facebook.
This library is a thin wrapper around your existing data layer and business logic. It doesn’t dictate how these layers are implemented or which storage engines are used. Instead, it provides tools for creating rich API for your existing app.
#graphql #php #api #développement #web #idée_pour_SPIP
]]>La gestion des médias avec Drupal 8
▻https://www.flocondetoile.fr/blog/la-gestion-des-medias-avec-drupal-8
« La gestion des médias a été identifiée comme une des priorités lors de la dernière DrupalCon (Nouvelle Orléans 2016). Si nous pouvions disposer sur Drupal 7 de quelques modules contribués offrant une expérience utilisateur sans égal pour la gestion des médias, Drupal 8 était encore orphelin il y a peu d’une solution équivalente. »
]]>country-list/data at master · umpirsky/country-list · GitHub
▻https://github.com/umpirsky/country-list/tree/master/data
la liste de tous les pays dans toutes les langues en correspondance avec leur ISO code, dans quasiment tous les formats « utiles » : json, txt, xml, csv, php, sql, yaml...
]]>Moving to a System #Font Stack in 2017
▻https://woorkup.com/system-font
With the font-family property with web fonts, you typically have your primary font and one or two fallback fonts. With system fonts, you have to include all of the different operating systems, and therefore you have to stack quite a few more fonts. This is why it is called a “system font stack.”
Davantage d’exemples intéressants (Medium, Github…) dans cet article cité ici : ▻https://seenthis.net/messages/528287
]]>An open-source CMS for your Git workflow ►https://www.netlifycms.org
Content management in a single-page app
Built in React.js with extensible components
Integrate with any build tool
Plug in to any static site generator
C’est intéressant la concrétisation dans une interface utilisateur d’un workflow editorial basé sur Git.
]]>How We Engineered CMS Airship to be Simply Secure - Paragon Initiative Enterprises Blog
▻https://paragonie.com/blog/2017/03/how-we-engineered-cms-airship-be-simply-secure
CMS Airship is a Free Software content management system (available on Github) that we introduced to the world last year.
We chose to build CMS Airship for two reasons:
The population of online publishers that need a content management system significantly dwarfs the population of web designers or software developers.
The existing content management systems offered inadequate security and neglected to cultivate a culture that promotes better security practices. (Often, they sacrifice security entirely in pursuit of adoption and market share.)
Although we have tried for years (and will continue to try) to improve the security posture of other open source CMS platforms, we believe that truly democracised publishing is only possible if a secure-by-default option is available today.
]]>Le «handbook» de la communauté de travail participative Enspiral (NZ)
Github : ▻https://github.com/enspiral/handbook
Site : ▻https://handbook.enspiral.com
Ils éditent notamment un logiciel de prise de décision collaborative appelé Loomio : ▻https://github.com/loomio/loomio
]]>MediumEditor
▻http://yabwe.github.io/medium-editor
Un éditeur de texte en ligne sans textarea . Pur javascript (pas de lib compliquée/lourde). Nombreux modules complémentaires (ajout d’images ou vidéos, de code HTML, utilisation de Markdown...)
#SPIP #crayons #javascript #wysiwyg #editeur
]]>Pouvoir créer des tableaux à partir de data json : ▻https://www.dynatable.com
#idée_pour_spip #json #javascript
PHP : NumberFormatter - Manual
▻http://php.net/manual/fr/class.numberformatter.php
Cette classe PHP est disponible dans le noyau depuis 5.3. Elle mériterait d’être intégrée en filtre dans SPIP à mon avis, car elle permet d’afficher les nombres suivant la langue (avec point ou virgule ou espace, etc). Et donc ça peut s’utiliser aussi bien pour les tailles de fichiers, les distances, les prix, ou n’importe quoi. D’ailleurs la fonction gère aussi les prix avec devise suivant la langue (avec la devise avant ou après le nombre par exemple), et donc elle pourrait être aussi utilisée dans le plugin Prix à la place du vieux money_format()
.
#développement #web #PHP #nombre #internationalisation #multilinguisme #SPIP #idée_pour_SPIP
]]>api.gouv.fr
▻https://api.gouv.fr
Vous êtes une #administration, une collectivité, un éditeur de solutions pour les particuliers ou les entreprises et souhaitez simplifier radicalement la relation des usagers à l’administration.
Les #API présentées ici sont des interfaces web permettant la communication et l’échange de #données entre applications.
Les API proposées vous permettent de :
simplifier les démarches d’un usager
guider l’usager dans la saisie d’informations
récupérer des informations que l’administration possède déjà
Voir par ex la base d’#adresses nationales : ▻https://api.gouv.fr/api/base-adresse-nationale.html
#gouvernement #big_data #web_dev
Les nouveaux outils de personnalisation d’interface de Medium
▻https://medium.com/une-histoire/how-to-make-your-publication-look-great-6a6d38175faa
Medium vient d’ajouter des outils pour personnaliser ses pages, donc faire un site plus perso. C’est intéressant de voir que ça permet des choses mais tout en restant limité. Header, grilles, etc. Ça a l’air simple et bien fichu, sans 40000 options trop compliquées.
Idées à piquer pour un squelette SPIP qui aurait des options de personnalisation mais-pas-trop ?
#idée_pour_SPIP #Medium #interface #personnalisation #ergonomie
]]>recompress jpg files on the fly · GitHub
▻https://gist.github.com/Fil/d5c57c49ef07f6ff4400cdcdf8b5051c
Un proxy (en php) pour servir les images jpeg optimisées par jpeg-recompress (cf ►https://github.com/danielgtaylor/jpeg-archive). Inclus un système de cache et la gestion des en-têtes pour ne pas recompresser à chaque hit.
A intégrer en plugin SPIP ? (merci Fil !)
#php #jpeg-recompress #github #optimisation #jpg #jpeg
Secure #PHAR Automation
▻https://mwop.net/blog/2015-12-14-secure-phar-automation.html
Un outil surpuissant pour Importer du xml ou du csv dans wordpress
▻http://www.soon7.com/developpements/un-outil-surpuissant-pour-importer-du-xml-ou-du-csv-dans-wordpress
WP All Import est un plugin wordpress vous permettant d’importer des fichiers xml et CSV de façon assez bluffante. Vous pouvez importer votre fichier soit depuis votre machine, soit depuis une url (ce dernier choix permettant de mettre à jour vos données dès que le fichier est mis à jour) Il vous permet (entre autre) […]
]]>GraphQL is the King. Long Live the King! (R.I.P. REST) — Medium
▻https://medium.com/@scbarrus/graphql-is-the-king-long-live-the-king-r-i-p-rest-cf04ce38f6c
Basically, GraphQL is the future of the internet. For the next few years anyway. REST was great, served a lot of good purposes, and will likely remain how we structure our services even with a GraphQL layer for our own sanities sake. But, IMHO GraphQL is the future.
]]>Écrire avec VIM, pusher sur GitHub, publier sur WordPress
▻http://aldarone.fr/ecrire-avec-vim-pusher-sur-github-publier-sur-wordpress
J’en ai parlé il y a quelques jours sur mon Shaarli, voila un article un peu plus complet sur mon nouveau workflow d’écriture de #blog.(Permalink)
]]>Help users checkout faster with Autofill
▻http://updates.html5rocks.com/2015/06/checkout-faster-with-autofill
Autocomplete attributes are a way for you, the developer, to control how the browser should populate a given form field. For example, if you are expecting a street address you can hint to the browser that you are expecting it by using autocomplete="address-line1"
. This prevents the browser from incorrectly guessing form fields on your website which can result in a poor user experience.
]]>Why would you Like to Create your Own Framework?¶
▻http://symfony.com/doc/current/create_framework/introduction.html
Why would you like to create your own framework in the first place? If you look around, everybody will tell you that it’s a bad thing to reinvent the wheel and that you’d better choose an existing framework and forget about creating your own altogether. Most of the time, they are right but there are a few good reasons to start creating your own framework:
To learn more about the low level architecture of modern web frameworks in general and about the Symfony full-stack framework internals in particular;
To create a framework tailored to your very specific needs ( just be sure first that your needs are really specific );
To experiment creating a framework for fun (in a learn-and-throw-away approach);
To refactor an old/existing application that needs a good dose of recent web development best practices ;
To prove the world that you can actually create a framework on your own (... but with little effort).
#idée_pour_SPIP ^^
]]>Interroger l’API Graph de Facebook pour obtenir dans un JSON le nombre d’interactions avec un URL :
https://graph.facebook.com/fql?q=select%20like_count,share_count,comment_count%20from%20link_stat%20where%20url=%22http://www.flip-zone.com/fashion/bridal/the-bride/zuhair-murad-5620%22
Accessible Footnotes with CSS via @goetsu
►http://www.sitepoint.com/accessible-footnotes-css
Et pour l’utilisation des counters (mais ça c’est pas forcément obligatoire avec un CMS parce qu’on génère dynamiquement et que donc on a des compteurs au niveau serveur de toute façon) :
▻http://caniuse.com/#feat=css-counters
Mais le fait de les rendre bien accessibles avec des aria
c’est bien.
#idée_pour_SPIP #développement #web #accessibilité #html #css
]]>OpenID Connect : un nouveau standard de SSO - RMLL 2015
▻https://2015.rmll.info/openid-connect-un-nouveau-standard-de-sso?lang=fr
OpenID Connect est un protocole d’authentification unique (SSO - Single Sign On) bâti au-dessus du framework OAuth 2.0. Porté par la fondation OpenID, il est toute fois très différent des protocoles OpenID 1.0 et OpenID 2.0, désormais considérés comme obsolètes.
Cette conférence vous fera découvrir ce nouveau standard, et fera quelques comparaisons avec d’autres comme SAML ou CAS.
]]>The Art Of The SVG Filter And Why It Is Awesome
▻http://www.smashingmagazine.com/2015/05/26/why-the-svg-filter-is-awesome
Sophisticated SVG Filters: CSS For Type
Most of this is already possible: The trick is to unleash the magic of SVG filters. SVG filters (and CSS filters) are usually considered a way to spice up bitmaps via blur effects or color manipulation. But they are much more. Like CSS rules, an SVG filter can be a set of directives to add another visual layer on top of conventional text. With the CSS filter property, these effects can be used outside of SVG and be applied directly to HTML content.
]]>OAuth2 Server PHP
▻http://bshaffer.github.io/oauth2-server-php-docs
An OAuth2 Server Library for PHP
Implement OAuth2.0 cleanly into your PHP application.
Ce serait sympa un plugin #spip pour disposer de son propre serveur oauth2/openID.
Évolution de mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
J’ai ajouté, dans la page « Admin / Vider le cache » un troisième pavé, permettant de gérer plus finement les images générées pour les besoins du responsive.
Exemple sur un site avec des milliers d’images :
L’idée, c’est d’essayer de faire la différence entre les images utilisées souvent (conserver le cache) et les images utilisées moins souvent (qu’on peut donc virer en priorité si on a besoin). Par approximation, je me base sur l’âge de dernier accès au fichier (fileatime()
de PHP).
PhotoSwipe : JavaScript Image Gallery
▻http://photoswipe.com
Une #box pour les #photos / images très chouette avec zoom dans le zoom, légendes, et contrôles tactiles
]]>Alternative à IFTTT qui peut intéresser @fil : ▻https://github.com/foxmask/django-th
Training the #cms · An A List Apart Article
▻http://alistapart.com/article/training-the-cms
Launching a site powered by lovingly crafted content models is a joy. But what happens in the weeks that follow, as authors start entering new content into the CMS? If you want to keep your well-structured content intact and on strategy, a training PDF won’t cut it. Let Eileen Webb show you what will: getting editorial guidelines where your authors need them most-in the CMS itself. Tags: #webdesign cms
]]>Loading webfonts with high performance on responsive websites
▻http://bdadam.com/blog/loading-webfonts-with-high-performance.html
Only serve #fonts in woff format Other browsers get the old “websafe” fonts Download the font in “binary” format and optimize it Serve the fonts yourself Serve them as #css files - base64 encoded data URIs If the user doesn’t have the font, load it asynchronously and store in localStorage Otherwise load it from localStorage without accessing the server Have fun because your site renders much faster and your users have a much better usability experience
]]>Utilisation des metabalises Open Graph dans SPIP - SPIP Forums
▻http://forum.spip.net/fr_241688.html
Exemples d’intégration de #balise #meta pour #opengraph de #facebook
]]>jonom/jquery-focuspoint
▻https://github.com/jonom/jquery-focuspoint
Intelligent cropping for flexible image containers
]]>Mieux qu’une barre d’édition : des raccourcis
▻http://romy.tetue.net/barre-outils-edition-raccourcis
Les barres d’outils d’édition ne sont pas accessibles. Pire, elles constituent des obstacles pour certain·e·s. Si elles sont utiles à d’autres, elles ne sont pas la meilleure aide qui soit. Elles ne constituent donc pas une aide suffisante, mais secondaire ; l’aide principale doit être autre. Enfin, dans le cas où une barre d’édition est disponible, celle-ci doit être absente par défaut et affichable à la demande. Et chaque fonctionnalité devrait faire l’objet d’un raccourci documenté.
Même s’ils causent certaines difficultés, les raccourcis clavier standards sont davantage utilisables. Mieux encore, les raccourcis de saisie ou syntaxe de rédaction à balisage léger, de type wiki, sont ce qu’il y a de plus utilisable par tous et toutes. Trop peu mis en avant, ces raccourcis sont méconnus. Ils nécessitent d’être expliqués par l’interface, en contexte. Il suffit d’une phrase explicative, avant chaque champ de saisie.
#toolbar #WYSIWYG #raccourcis #syntaxes_légères
#handicap #accessibilité #a11y #ergonomie #UX #clicodrome