[Dev Web] Veille technologique, partie présentation et dynamique : CSS, JS, etc

Je propose de partager ici les dernières technologies, langages, trouvailles et autres informations qui pourraient intéresser les gens qui s’intéressent à la présentation de sites Web.

Ce sujet se concentre sur la partie finale des pages, c’est à dire la présentation et les interactions. Pour la génération des pages, veuillez voir cet autre sujet.
 
Twitter bootstrap
 
bootstrap est une boîte à outils de règles CSS et de fonctions Javascript pour habiller et faciliter l’utilisation de son site sans avoir à partir de zéro.
 
Concernant la mise en page, il y a (entre autres) :

  • des classes qui utilisent un système de grilles qui peuvent s'adapter à la taille de l'écran, par exemple afficher des blocs de largeur 25 % sur les écrans larges, 50 % sur les écrans de taille moyenne et 100 % sur les petits écrans (téléphones et tablettes)
  • des classes pour styler les tableaux, les boutons, les formulaires, etc.
En utilisant les fonctions Javascript (c'est facultatif), on peut afficher des fenêtres modales, des onglets, etc.   Il y a également des styles basés sur Bootstrap pour personnaliser son site sans avoir à sélectionner une couleur pour chaque élément.

Grâce au CDN officiel, on peut se passer de l’hébergement des fichiers CSS et JS sur son site.

Et quand on commence a l’utiliser on se rend compte que de nos jours 90% des sites ouaib de la planete l’utilisent et c’est deprimant :wink:

Allez j’y vais de ma pierre dans la liste des trucs de base: Cassandra. Parceque a moins d’etre dans les transactions financieres, SQL c’est pour papi et que le downtime prevu ou imprevu, c’est pour les amateurs. Choisissez votre societe favorite du web 4.0 ou 3.0 ou chai plus ou on en est, et ils utilisent Cassandra: netflix, foursquare, etc. et meme les vieux s’y mettent c’est dire.

220px-Cassandra_logo.svg.png

Parler de bootstrap c’est plus de la veille, c’est de la torpeur :wink:

Un concurrent à bootsrap : Foundation
J’avoue que c’est le genre d’outils bien sympa, mais dès qu’on sort un peu sentiers battus, ça devient vite la merde. Mais bon, vu la plaie que c’est pour moi de gérer des css, ça reste super pratique. C’est à se demander pourquoi ce genre de framework n’a pas vu le jour plus tôt.

En plus light y a les blueprints chez tympANUS (j’y peux rien, c’est comme ça…). D’ailleurs leur site est en pleine refonte apparemment. Y a pas mal de petit widgets sympas (dropdown/up/right/left menu, …). Du coup c’est pratique si on veut pas se prendre la tête pour une pauvre petite feature et éviter de se taper tout bootstrap/foundation.

J’ai une chiée d’autres tools orientés web mais pas vraiment le temps là. Je compléterai une autre fois.

Etant dev web et donc consacré au front, c’est un peu mon boulot la veille :stuck_out_tongue:

Je préfère Foundation à Bootstrap, plus facile à appréhender, je trouve, au niveau des gros frameworks dans le genre. En plus light, il y a KnackCSS et son autogrid qui peut souvent servir. Après perso, si on ne fait pas de responsive design, le terme à la mode, je suis pas forcément fan d’utiliser ce genre de FW, mais bon, faut connaître le CSS et le reste qui va autour si on veut s’affranchir de ce genre d’outils. Et si vous voulez faire du responsive, vraiment, tâchez de penser « mobile first », ça vous sauvera la vie en milieu / fin de projet (enfin, seulement si une approche mobile a un sens pour ce que vous faites, sinon, oubliez le, vraiment).

De manière plus globale, je colle des liens qui me servent souvent :

Et pour ce qui manque, soit vous ne savez pas chercher, soit vous n’avez pas les compétences pour faire un site de l’internet (ce n’est pas péjoratif hein, mais pour utiliser ce genre de trucs, faut un minimum connaître le sujet), soit vous voulez faire un truc qui n’existe pas ou qui est super complexe. Stackoverflow pourra potentiellement répondre à vos questions.

Savoir quels sont les dernières technologies web qu’on peut raisonnablement utiliser dans un projet: Can I Use

Le problème de bootstrap c’est qu’autant c’est bien pour du prototypage ou du back-office, mais faire un vrai site avec c’est un peu la misère, et ça implique de tout redéfinir dès qu’on s’éloigne un peu du modèle de base.

perso j’aime bien purecss, pour mes projets persos (côté pro je fais quasi exclusivement du back: php, drupal, ez publish). Il y a juste une couche css (pas de couche js), et on garde facilement la main sur tout ce qu’on a de spécifique.

Nous avons été contraints d’abandonner bootstrap quand nous nous sommes rendu compte que nous passions plus de temps à le surclasser qu’autre chose. Je pense que c’est le défaut majeur de tous ces framework CSS ; c’est génial pour faire des designs génériques mais quand tu as un vrai dev front-end dans l’équipe cela finit par te ralentir.

Par contre il nous a donné goût aux préprocesseurs CSS et nous a converti à l’utilisation de SASS qui nous a vraiment beaucoup aidé à créer un système évolutif.

Pour faire des applis HTML5 du web 3 des objects connectés :

Django + Django REST Framework + AngularJS

Variante :

Flask + Flask RESTful + Backbone.js

Notez que ça fonctionne aussi en java avec JaxRS et euh, Ember.js (paf, comme ça on a les trois dans un seul post)

Ça vous aidera pas pour le design, mais pour ça on fait appel a des graphimste. :slight_smile: (et on les paye, c’est important)

[quote=« GloP, post:2, topic: 55656 »][/quote]

Et même pour les transactions financières, ici on réfléchit à utiliser Couchbase.

Vanilla JS : c’est vraiment le meilleur framework javascript, beaucoup plus rapide que jQuery et consorts. C’est même ce qui est utilisé chez Google, Amazon & co

Mmmm je connaissais pas Vanilla (enfin je crois en avoir entendu parlé mais rien de plus). Je vais j’ter un oeil.

[quote=“cedric, post:9, topic: 55656”][/quote]

En plus, jQuery et autres sont basés dessus!

[quote=“Maune, post:7, topic: 55656”][/quote]

Je rebondis là-dessus, étant dev front. C’est plus ou moins vrai, mais utiliser un fw de ce genre pour faire du responsive c’est quand même bien bonheur, ça évite de se faire sa petite sauce de media queries tout seul. Perso le FW ne me limite plus dans ce que je veux faire, mais c’était vrai au début.

Pour les préprocesseurs et SASS, je ne peux que plussoyer, s’en passer, c’est moche.

Je rajoute GruntJs pour éviter d’avoir trop de tasks a lancer à la main et Yeoman pour les gros fainéant dans mon genre.

Et CasperJS pour les tests, et CoffeeScript qui permet de remplacer le js par quelque chose de lisible. 

J’allais oublier aussi node.js pour faire du js côté serveur.

Ce topic me fait peur.

2 « J'aime »

En templating front j’ai utilisé handlebars, qui est basé sur mustache mais plus complet. Par contre dispo uniquement en js, là ou mustache a des implémentations en une foultitude de langages.

Je suis également sur handlebars via le plugin Assemble de gruntjs, c’est pas mal foutu effectivement.

Dans les trucs funky :

Un serveur web / app web / site web en distribué vous tente ?

http://www.chicagoboss.org/ Un framework a la django mais en erlang. (donc du fonctionnel) et en plus on peut ecrire les pages en http://elixir-lang.org/ elixir.

Sinon je me penche de plus en plus sur Go :

http://revel.github.io/  <- revel ressemble a django sur pas mal de point

https://github.com/go-martini/martini <- plus simple et plus concis tres interessant.

L’algo raft semble etre sympas je creuse la semaine prochaine :
http://raftconsensus.github.io/

Consul is a new product by HashiCorp which aims to solve the core issues of service discovery and configuration. As part of that it needs to maintain a strongly consistent catalog shared between multiple servers for availability. Raft was used as the consensus protocol for Consul because it was the most readily understandable and simple algorithm available.

Une implementation en go :
https://github.com/goraft/raft

Et sinon pour tout ce qui est news hackernews :
https://news.ycombinator.com/

(je me suis meme fait debauché pour faire du perl a amsterdam suite au thread qui cherche du boulot)

Vu il y a quelques temps : https://github.com/dypsilon/frontend-dev-bookmarks

[quote=“Zoubi, post:18, topic: 55656”][/quote]
instant bookmark, putain thx pour ce glossaire.

Merci à tous pour vos contributions, j’ai créé un autre sujet car parler de Cassandra puis de CSS c’est mélanger les torchons et les serviettes.

[quote=« Ivru, post:3, topic: 55656 »][/quote]
J’ai découvert bootstrap il y a 6 mois environ, sur le tard ouais. Mais si personne n’en parle comment le présenter à ceux qui ne le connaissent pas encore ? :wink:
 

[quote=« cedric, post:9, topic: 55656 »][/quote]
Pfff, je suis tombé dans le panneau, j’étais prêt à te répondre « oui mais la syntaxe est moins accessible que celle de jQuery, en plus quel est l’intérêt de sélectionner un élément 12 000 000 de fois par seconde ? ». C’est quand j’ai vu que la taille du fichier à télécharger ne changeait pas que j’ai compris. :slight_smile: C’est un joli troll !
 

[quote=« Ravine, post:14, topic: 55656 »][/quote]
Pourquoi donc ?
 

[quote=« Gratz, post:4, topic: 55656 »][/quote]
Il y a aussi bootsnipp (bootstrap snippets).

[quote=« Gratz, post:4, topic: 55656 »][/quote]

  • ∞ pour StackOverflow, dès que j’ai une question ou un problème je cherche directement sur SO, je passe à Google si je ne trouve rien sur SO, mais c’est assez rare.
     
    Glop et Anaethelion : pouvez-vous déplacer (reposter) vos messages dans le sujet consacré à la génération de pages Web ? Merci d’avance.

Anaethelion, je ne savais pas trop où placer ton message vu que tu présentes des chaînes complètes d’outils allant de la génération de pages aux interactions Javascript. Mais puisque le second ne va pas sans le premier (), je pense que ça a plus sa place dans l’autre sujet.
 
(
) : oui, on peut faire du Javascript qui lit des pages HTML statiques mais l’intérêt est très limité. :wink: