Pas mal de petites astuces pour JavaScript.
Un moyen d'accomplir un layout à la Masonry avec uniquement du CSS (principalement Flexbox et :nth-child()). C'est très bien pensé malgré les quelques contraintes.
Le plus gros souci pour moi c'est que si un élément est beaucoup plus haut que les autres, les blocs ne s'adapteront pas pour autant et l'ordre de lecture s'en trouvera impacté. Mais pour une grande part des cas, c'est suffisant.
Bon à savoir, vous ne pouvez pas utiliser clip-path et box-shadow sur le même élément. Si vous le faite, l'ombre n'apparaîtra pas.
Solution : utiliser un élément parent pour l'ombre ou alors un pseudo-élément (::before par exemple) correctement positionné.
Accéder aux properties référencées via <context:property-placeholder> depuis un composant Java.
/** Example of accessing a property from Java code. */
public class PropertyAccessExample implements Callable {
protected final Logger logger = LoggerFactory.getLogger(getClass());
@Value("${a}")
String myProperty;
@Override
public Object onCall(MuleEventContext eventContext) throws Exception {
logger.info("From Java a={}",myProperty);
return null;
}
}Il ne faut pas grand chose pour rendre un site de base un peu joli.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #222;
max-width: 40rem;
padding: 2rem;
margin: auto;
background: #fafafa;
}
img {
max-width: 100%;
}
a {
color: #2ECC40;
}
h1, h2, strong {
color: #111;
}Une astuce pour faire sortir un contenu de son parent sans changer son positionnement.
.full-bleed {
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}Une petite astuce pour utiliser $ et $$ comme alias pour document.querySelector et document.querySelectorAll.
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
// Change the background color of a class.
$('.class').style.background="#BADA55";
// Change the inner HTML of an ID.
$('#id').innerHTML="<span>Cool beans!</span>";
// Select all images on the webpage.
$$('img')
// Print the image addresses for all the images on a webpage.
$$('img').forEach(img => console.log(img.src))Quelques astuces sur l'utilisation de Windows.
Un aspect très important de Vue.js. Lorsque vous modifiez le modèle, vous vous attendez à ce que le DOM soit mis à jour immédiatement. Mais ce n'est pas ce qui se passe.
En réalité, Vue.js ajoute cet "ordre" de modification du DOM à une file d'attente puis gère tous les ordres d'un coup à intervalle régulier (l'intervalle est bien sûr très court pour éviter une latence visuelle). Mais ça permet d'éviter de mettre à jour le DOM plusieurs fois lorsque de nombreuses modifications du modèle interviennent successivement.
La conséquence, c'est que si vous accédez au DOM juste après avoir mis à jour votre modèle, il ne sera pas à jour. La solution est donc d'utiliser la fonction $nextTick qui prend un paramètre un callback qui sera exécuté juste après la prochaine mise à jour du DOM :
this.$nextTick(() => {
// Ici, votre DOM est à jour.
document.querySelector('...')
})Quelques conseils (en anglais) avant de prendre la parole en public.
Télécharger des vidéos Youtube avec VLC uniquement.
Pas mal de bons conseils pour améliorer l'expérience utilisateurs sur vos formulaires.
Plein de petites astuces CSS compréhensibles en moins de 30 secondes, avec en prime un indicateur de support navigateur.
Un nouveau site de Google qui contient pas mal de ressources utiles au développement web.
Utiliser l'objet Vue comme un event bus (publish/subscribe).
Si dans Vue.js vos animations CSS clignotent dans IE 11, pensez à ajouter animation-fill-mode: forwards; sur l'élément auquel l'animation est affecté.