Petites choses sur mon site personnel

Online Coding Courses for Kids

J’ai mis à jour mon site Web personnel l’autre jour. Toujours un projet amusant, car c’est l’un des rares où c’est à 100% rien que moi. C’est mon terrain de jeu personnel sans autre objectif que de faire en sorte que le site me représente pour s’amuser un peu. Ce n’est pas une réécriture complète, juste une nouvelle peinture.

Je pensais que j’en documenterais de petits morceaux ici juste pour me concentrer sur certains des bouts de ruse dans l’esprit d’apprendre par le partage.

Capture d'écran de toute la longueur de la page d'accueil de ChrisCoyier.net. Quatre grandes boîtes de contenu: créez votre propre bio en jaune, des articles de blog en violet, des éléments d'action en rouge et une vidéo en bleu.

Polices Hoefler

Je pense que le Encrier la famille est super cool. J’aime mélanger et assortir non seulement les poids, mais aussi les empattements et les sans-serif et les casquettes contre non.

De l’encrier poste d’introduction.

J’ai également utilisé Inkwell dans la dernière conception, mais je craignais que ce soit un peu trop farfelu pour la copie du corps d’un article de blog. Mon écriture est extrêmement décontractée, mais pas toujours, et Inkwell est beaucoup trop jovial pour des sujets sérieux. Je suis allé avec Ideal Sans pour la copie corporelle la dernière fois, mais le jumelage avec Inkwell me semblait un peu décalé.

Cette fois, je suis allé avec Whitney pour une copie générale du corps, qui est encore assez légère, mais fonctionne lorsque la copie est plus droite.

Blogroll

Si vous allez zébrer une table, vous feriez quelque chose comme…

tr:nth-child(even) {
  background-color: var(--color-1);
}
tr:nth-child(odd) {
  background-color: var(--color-2);
}

Et si vous vouliez faire pivoter quatre couleurs? C’est toujours :nth-child tromperie, sélection tous les quatre, puis compensation. Ici, je vais le faire avec les éléments de liste dans Sass (l’imbrication est agréable, pas besoin de répéter le sélecteur):

li {
  &:nth-child(4n) a {
    color: $blue;
  }
  &:nth-child(4n + 1) a {
    color: $yellow;
  }
  &:nth-child(4n + 2) a {
    color: $red;
  }
  &:nth-child(4n + 3) a {
    color: $purple;
  }
}

C’est ce que j’ai fait pour créer la blogroll colorisée:

Notez le Sass utilisé ci-dessus… J’ai utilisé Sass car il était déjà utilisé sur le projet. Tout ce que j’avais à faire était d’ouvrir CodeKit et le traitement était prêt à l’emploi.

Oh, et les blogs sont à nouveau cool.

Chill YouTube

J’ai utilisé cette technique du clic pour charger YouTube (du tout) qui est toujours extrêmement intelligente. Avoir un

Comparaison d'une intégration YouTube et d'une iframe avec juste une image à côté. A peine différent du tout, visuellement.

Types de publication personnalisés partout

Je suis un grand fan de me donner des données structurées avec lesquelles travailler. Dans WordPress-land, cela signifie souvent que les types de publication personnalisés sont associés à quelque chose comme le plugin Advanced Custom Fields pour obtenir les bonnes données nécessaires pour le travail.

Trois écrans de saisie CMS: Ajouter une nouvelle conférence (avec des champs liés à la conférence), Ajouter une nouvelle interview et Ajouter une nouvelle action.

Ensuite, je peux boucler sur des choses et les sortir comme je veux. Ce n’est pas si compliqué, mais cela ouvre beaucoup plus facilement toutes les futures portes que je souhaite.

Créez votre propre bio

Il n’y a rien d’extraordinaire à la façon dont cela fonctionne:

Générateur de bio montrant du HTML pour ma bio personnelle. Boutons radio à côté pour changer la 1ère à la 3ème personne, la longueur et le type de code de la bio.

J’ai littéralement fait 18

éléments (3 longueurs * 2 styles * 3 types de code = 18) et permutez entre avec un peu de JavaScript qui calcule une chaîne de classe en fonction des choix actuels, sélectionne cette classe et l’affiche tout en masquant le reste.

$(".bio-choices input").on("change", function () {
  var lengthClass = ".bio-" + $("input[name=length]:checked").attr("id");
  var styleClass = ".bio-" + $("input[name=style]:checked").attr("id");
  var codeClass = ".bio-" + $("input[name=code]:checked").attr("id");
  var selector = lengthClass + styleClass + codeClass;

  $(".bio").hide();
  $(selector).show();
});

jQuery! C’est ce qui se trouvait déjà sur le site, et le site utilise également la version jQuery de FitVids pour les vidéos réactives – j’ai donc pensé que je laisserais tout faire.

Si j’allais réécrire ces parties du site, je déchirerais probablement jQuery et utilisez ceci pour FitVids. Ensuite, je trouverais un moyen de n’avoir que trois biographies (peut-être six si je ne peux pas trouver un bon moyen de gérer les échanges de mots entre la première et la troisième personne) et ensuite obtenir le reste en convertissant automatiquement les formats d’une manière ou d’une autre (peut-être un nuage fonction si je devais).

ztext.js

J’ai utilisé ztext pour l’en-tête! C’est ce genre de choses qui me donne une impression de Web supplémentaire. Je ne suis pas sûr de faire quelque chose avec autant de mouvement sur un site comme CSS-Tricks (car les gens le visitent plus souvent et le temps passé sur le site est plus long). Mais pour un site sur lequel les gens pourraient atterrir une fois dans une lune bleue, il a la bonne dose de légèreté joyeuse, je pense.

Fond SVG

J’étais ravi de voir le Arrière-plans SVG site obtenir une mise à jour ces derniers temps. Je jouais là-dedans et j’étais comme OUI, je fais ça.

Site Web d'arrière-plans SVG montrant des lignes ondulées gris foncé sur noir, configurable via un panneau de commande.

Je suis allé avec un background-attachment: fixed regarde, ce que je pense que j’aime. J’ai également ajouté l’effet de pied de page coulissant sur le bureau, mais je suis moins convaincu que cela fonctionne ici. C’est plus amusant lorsque l’arrière-plan change, et cela ne se produit pas ici. Je vais probablement changer l’arrière-plan du pied de page ou supprimer l’effet.

Astuce de filtrage pour les liens

Certaines des différentes sections du site utilisent une couleur de surbrillance principale différente, et les liens de ces sections suivent cette couleur. Cela peut être discutable (peut-être que tous les liens devraient être bleus) mais, jusqu’à présent, je pense que cela a un sens décent (ils ont toujours des styles de survol et de focus). Cependant, lorsque vous avez une variété de couleurs et de styles pour les éléments interactifs, cela signifie souvent que vous devez créer des styles alternatifs spéciaux pour le survol et la mise au point. Cela pourrait signifier créer des modifications de couleur sur mesure pour chaque couleur. Ce n’est pas la fin du monde, mais j’aime beaucoup cette petite astuce pour les styles interactifs qui se termine par un look cohérent dans toutes les couleurs:

a:focus, .button:focus,
a:hover, .button:hover {
  filter: brightness(120%);
}

En tous cas! Ce n’était que quelques heures de peinture sur ce site. Principalement parce que les blogs étaient le défi CodePen cette semaine. Mais je ne peux jamais toucher un site que je n’ai pas depuis un moment et faire une seule chose. Je suis aspiré et je dois faire plus!

Close Menu