Barre latérale rafraîchissante pour 2020 – Barre latérale


Sacha Greif

Cela fait presque trois ans jour pour jour depuis la dernière refonte de la barre latérale. Mais après de nombreuses itérations, j’ai finalement pu concevoir et coder une nouvelle barre latérale fraîche!

Dites bonjour à la barre latérale 4.0!

Mais d’abord, pour célébrer cette quatrième version, je veux revenir sur l’évolution du design de Sidebar depuis son début en 2012:

Version 1: la barre latérale actuelle

La première version était assez minimaliste. Après tout, le nom de Sidebar lui-même est une référence aux barres latérales de blog qui contenaient traditionnellement des liens vers d’autres ressources intéressantes (ou un «blogroll» comme on l’appelait dans les temps anciens), donc le design faisait référence à cette idée.

Version 2: l’écran de lancement

La barre latérale 2 était beaucoup moins minimaliste. Au lieu d’être inspiré par de véritables barres latérales, il a été inspiré par des écrans de lancement de «nouvel onglet» comme Élan, avec de grandes images.

Version 3: le flux

La version 3 a évolué dans le sens des flux de médias sociaux: une longue page que vous pouviez faire défiler, principalement basée sur la typographie, mais avec juste assez d’épanouissement visuel pour garder les choses intéressantes.

Ce qui nous amène à cette dernière version.

Comme vous pouvez le voir, les vignettes ont disparu. C’est autant pour des raisons esthétiques (la plupart des articles n’ont pas de miniature correspondante que je peux présenter) que pour des raisons d’économie (l’hébergement d’images coûte cher!).

La décision de supprimer des images a beaucoup informé la conception, car je ne voulais pas me retrouver avec une page ennuyeuse contenant uniquement du texte.

Cela s’est traduit par deux choses: premièrement, donner à la typographie un grand rôle à jouer via les marqueurs de date; et deuxièmement, l’idée d’alterner la mise en page pour faire varier le rythme de la page.

Le résultat est une mise en page de type magazine (à l’aide de CSS Grid) qui offre beaucoup de flexibilité tout en gardant les choses intéressantes – et, espérons-le, suffisamment distinctives pour que les gens se souviennent du site s’ils le rencontrent.

Je voulais également avoir des zones spéciales sous chaque date pour promouvoir des choses comme le bulletin d’information, le site d’emploi ou d’autres fonctionnalités spéciales que je pourrais proposer à l’avenir.

Outre les améliorations esthétiques, j’ai également quelques nouvelles fonctionnalités prévues, dont la première est une classement qui vous montre un classement des principaux contributeurs de la barre latérale, ainsi que les domaines les plus populaires liés sur la barre latérale.

Qui sait, vous découvrirez peut-être de nouvelles personnes ou ressources à suivre!

Il y a aussi des ajustements subtils, comme le fait que l’avatar crédité à côté d’une soumission n’est plus l’avatar de la personne qui a envoyé le lien (qui est généralement moi) mais l’avatar du propriétaire du site lié.

Depuis la version 1, Sidebar a été propulsé par mon propre framework local, Vulcan.js (ou Télescope comme on l’appelait auparavant). Il s’agit d’un framework JavaScript qui contourne la tendance actuelle de Jamstack en étant un monolithe tout-en-un à pile complète. En d’autres termes, la même application qui alimente l’API Sidebar sert également ses pages.

Cette approche n’est pas sans inconvénients (elle ne peut pas vraiment correspondre à la vitesse et à la robustesse d’un contenu purement statique) mais elle vous permet de vous déplacer beaucoup, beaucoup plus rapidement en termes de vitesse de développement, car vous n’avez à vous soucier que d’une seule base de code.

La barre latérale peut sembler être un projet simple, mais si vous pensez à tout ce qui se passe dans le back-end en termes de modération des soumissions, de génération de newsletters et de navigation dans les archives, c’est en fait un projet assez complexe pour un seul développeur qui y travaille à sa place temps!

J’espère ajouter un frontal statique alimenté par Next.js devant l’API Sidebar à un moment donné dans le futur, mais pour l’instant Vulcan.js fait un excellent travail par lui-même!

Le tableau de bord des messages
Les tableaux de bord des newsletters

Je suis particulièrement satisfait des nouveaux tableaux de bord d’administration (pour aider à gérer les soumissions, les catégories, les newsletters, etc.). Ils étaient très faciles à construire car ils utilisent la fonction intégrée de Vulcan Datatable composant qui vous donne la recherche, le filtrage, la pagination, etc. hors de la boîte.

J’espère en écrire plus sur le code de Sidebar (et même open-source) bientôt, alors restez à l’écoute (ou passer par le Vulcan Slack pour dire bonjour) si vous êtes intéressé.

Après près de huit ans d’envoi de Sidebar tous les jours de la semaine, j’ai décidé de passer à un horaire de cinq jours par semaine: il n’y aura plus de Sidebars le week-end!

La raison est simple: la plupart des gens prennent leurs week-ends (comme ils le devraient!), Il y a donc beaucoup moins de contenu produit ces jours-ci, ce qui rend la recherche de cinq liens intéressants beaucoup plus difficile!

J’ai également entendu de nombreuses personnes au fil des ans qui ont eu du mal à suivre cinq liens chaque jour. C’est donc un moyen d’alléger un peu la charge et de passer de 35 à 25 liaisons par semaine. Et bon, Sidebar est de toute façon le numéro cinq, donc c’est sur la marque!

Je dois dire que travailler sur cette nouvelle version a ravivé ma motivation pour améliorer et développer Sidebar. Si je suis honnête, je n’ai pas toujours eu le temps ni l’énergie de travailler au cours des dernières années, ce qui explique probablement pourquoi le public de Sidebar n’a pas vraiment augmenté.

Mais je veux changer cela et commencer à explorer de nouvelles idées. Je pourrais peut-être présenter des membres de la communauté, comme Dribble Est-ce que. Ou que diriez-vous d’un podcast Sidebar? Ou la barre latérale devrait-elle avoir un aspect plus social avec des commentaires et des votes positifs, comme Designer News Est-ce que?

J’ai quelques idées mais je suis également ravi d’entendre les vôtres! Alors laissez-moi un commentaire ici pour me faire savoir ce que vous feriez si vous étiez en charge de la barre latérale.

En tout cas, pour l’instant je suis assez content de cette nouvelle version. Et voici sept autres années de cinq liens de conception presque chaque jour!

Close Menu