Acum ceva timp am început o colecție Apple. Urmăresc hardware-ul Apple (și estetica sa) de când eram adolescent, dar în acel moment nu aveam bani pentru a deține un Mac.

Am primit primul Mac când aveam 19 ani. Era un iBook de 700 Mhz, achiziționat pe un site web similar cu eBay din Brazilia. Banii au venit dintr-un proiect Flash.

După ce am locuit câțiva ani în Canada, am niște bani în plus de cheltuit pe un hobby. De cele mai multe ori cumpăr dispozitivele de la oameni de pe Craigslist.

După câteva laptopuri și iDevices, am decis că ar trebui să încep să colectez informații despre iThings-urile mele. La început, am creat un Gist care conține modelul, numărul de serie, modul în care am obținut dispozitivul, sistemul de operare minim / maxim și așa mai departe.

Lista a devenit din ce în ce mai mare, iar conținutul a început să pară dezordonat. Am crezut că afișarea acestui conținut pe un site web ar fi perfectă și nu am nevoie să angajez un dezvoltator: D

ad-banner

La început, am decis că îmi voi organiza datele într-o bază de date SQL, cu informațiile distribuite în diferite coloane și tabele. După aceea, aș crea un API graphQL pentru a-mi furniza datele necesare pentru a-mi completa interfața – probabil scrisă în React, compilată cu Babel și împachetată cu Webpack.

Citind paragraful anterior cu voce tare, puteți vedea că există multe tehnologii și că am ignorat chiar limbajul backend și detaliile UI, cum ar fi SASS sau componentele de stil. Totul a sunat un pic copleșitor când obiectivul meu final a fost să afișez o listă de articole într-un design frumos.

Acestea fiind spuse, m-am gândit la modul în care pot livra acest conținut fără:

  • Un API sau orice lucru backend
  • Orice cadru / bibliotecă JS
  • Orice instrumente JS (Webpack, Babel etc.)
  • Orice lucru CSS

Pe lângă aceste constrângeri, am avut câteva obiective întinse:

  • Creați un site web cu accesibilitate bună
  • Creați un site web care funcționează pe browsere vechi, deoarece am computere care rulează Mac OS 9.2 și iDevices care rulează iOS 3

Provocare acceptată. Un index.html, câteva fișiere JS vanilate și niciun CSS personalizat. Aș dori să vă împărtășesc experiența construirii site-ului.

TL, DR:

Să vorbim despre constrângeri, punct cu punct:

Fără API sau orice alt backend

Acum ceva timp am văzut un produs SaaS numit Stein. Vă creați datele într-un document Foi de calcul Google și acestea vă oferă un punct final cu datele dvs. Biblioteca lor funcționează ca ghidonele și arăta perfect pentru cazul meu de utilizare:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>
 
    {{content}}
 
    Read on <a href="{{link}}">Medium</a>
  </div>
</div>

Fără cadru / bibliotecă și instrumente JS

Am decis să evit adăugarea unui cadru sau bibliotecă în acest proiect, deoarece cazul de utilizare nu avea nevoie de unul. Toate interacțiunile JS de pe această pagină sunt destul de simple (afișați / ascundeți meniurile, deschideți un ecran modal, gestionați permalinkurile).

Deoarece nu foloseam un cadru / bibliotecă, aș putea evita adăugarea Webpack și Babel. Nu este nevoie să săpați în presetări și încărcătoare.

PS Puteți susține că aș fi putut alege create-react-app sau Next.js și să rezolv toate aceste probleme, dar nu.

Nu funcționează CSS

Îmi place să scriu CSS, mai ales când pot folosi SASS, dar am decis să nu scriu niciun CSS aici. Am avut câteva motive întemeiate pentru a evita să o fac:

  • Nu aveam nici un design în minte și, în ciuda faptului că aș putea face ceva decent, nu am vrut să pun timp și energie în el
  • Am vrut să folosesc Tailwind CSS

Dacă nu ați auzit niciodată de Tailwind CSS, vă rugăm să nu vă gândiți doar „Este doar o alternativă la Bootstrap”. Iată o scurtă explicație bună de pe site-ul lor web:

Majoritatea cadrelor CSS fac prea mult.

În loc de componente predefinite, Tailwind oferă clase de utilități de nivel scăzut, care vă permit să creați modele complet personalizate fără a părăsi vreodată codul HTML.

Acest lucru este aproape adevărat. O căutare rapidă vă oferă multe aplicații web „reconstruite” cu Tailwind CSS:

Creați un site web cu accesibilitate bună

Luna trecută am început să urmez cursuri de accesibilitate la Universitatea Deque. Conținutul lor este minunat și mi-a amintit asta HTML este accesibil în mod implicit. Folosind o structură semantică HTML și testând lucruri de bază precum navigarea pe tastatură și contrastul culorilor, eliminați câteva bariere care îndepărtează persoanele cu dizabilități de conținutul dvs.

Nu sunt expert în accesibilitate, dar iată câteva lucruri legate de accesibilitate la care am lucrat pentru acest site:

  • Dezactivați foile de stil: prin dezactivarea foilor de stil vă puteți asigura că conținutul dvs. urmează un mod logic / structural.
  • VoiceOver: VoiceOver este inclus în MacOS și iOS. Este foarte simplu de utilizatși, experimentând cu aceasta, puteți înțelege mai bine modul în care oamenii folosesc această caracteristică.
  • Modale: Modalele pot fi problematice. Am decis să urmez Ire Aderinokun abordare.
  • topor: Extensia este un verificator de accesibilitate pentru regulile de accesibilitate WCAG 2 și Secțiunea 508.

Nu este perfect – există câteva lucruri pe care nu am lucrat pentru site-ul meu, cum ar fi adăugarea unui link de omitere la conținutul principal. Dacă ești curios, iată Pull Request cu toate modificările.

Creați un site web care funcționează în browsere vechi

Nu am putut atinge acest obiectiv, deoarece nu aveam control asupra scripturilor și stilurilor. Cu toate acestea, nu pare a fi imposibil. Câteva lucruri pe care le-am observat:

  • Accelera (Clientul Stein) utilizează aduc, care era doar adăugat în Safari 10. Solicitarea către serverul lor ar putea fi înlocuită probabil cu o cerere XMLHttpRequest.
  • Tailwind folosește Flexbox în multe elemente. Safari a început să accepte Flexbox doar în iOS 7. Poate aș putea scrie câteva proprietăți pentru elementele lor existente pentru a obține un aspect decent.
  • Certificatele SSL pot fi o problemă pentru browserele vechi.

Concluzii

Realizarea acestui site a fost foarte distractiv. Având acest tip de proiect pentru animale de companie mi-a dat un motiv bun pentru a lucra cu tehnologie pe care nu o folosesc în slujba mea. Poate că în viitor, Stein și / sau TailwindCSS vor fi utile pentru a prototipa o caracteristică sau pentru a construi un proiect hackathon.

Faptul că am adăugat „constrângeri” la proiectul meu m-a făcut să mă gândesc în afara casetei. Chiar dacă nu mi-am atins toate obiectivele, m-a ajutat să înțeleg din ce în ce mai mult despre cum sunt conectate toate piesele.

Vă recomand cu totul să faceți așa ceva pentru a vă oferi șansa de a vă juca cu diferite tehnologii. Nu trebuie să fie o colecție Apple – puteți crea un site pentru a lista cărțile preferate sau cele mai bune drumeții pe care le-ați făcut. În acest caz, călătoria contează mai mult decât scopul.

Din curiozitate, mi-am urmărit timpul folosind Clockify și între codificare, crearea datelor, testarea și scrierea acestui post am lucrat 13 ore la asta.

Postat și pe blogul meu. Urmărește-mă Stare de nervozitate