Slik viser du W3C-spesifikasjonsdata ved hjelp av web API

Emmy®-prisbelønte W3C er en internasjonal standardorganisasjon for World Wide Web. Det skaper nye webstandarder og reviderer dem hele tiden for å holde dem konsistente og relevante over hele verden.

Nettlesere og nettsteder har blitt standard kompatible i større grad med tiden, slik at nettsteder kan gjengi og jobbe jevnt over alle de forskjellige nettleserne. En av de mest nyttige ressursene som er tilgjengelig for publikum er W3C-spesifikasjonsdokumentasjonen i w3c.org.

Nylig gjorde W3C sine data tilgjengelig via en web-API, hvor prosjektsiden er i Github. Innføringen av denne API-en fra prosjektsiden er som følger:

"Som svar på etterspørsel fra utviklere i vårt fellesskap som ønsker å samhandle med W3Cs data, har W3C Systems Team utviklet en Web API. Gjennom det gjør vi tilgjengelige data om spesifikasjoner, grupper, organisasjoner og brukere. "

I dagens innlegg ser vi hvordan du henter spesifikasjonsdataene via W3C API . Du finner de ulike forespørslene du kan legge inn for å hente spesifikasjonsdataene og andre på https://api.w3.org/doc. Den kommer også med en sandkasse for hver forespørsel for å teste API, men du trenger en API-nøkkel.

La oss først se hvordan du får API-nøkkelen .

1. Logg inn på W3C-kontoen din eller opprett en.
2. Deretter går du til Administrer API-nøkler på profilsiden din.
3. Klikk på Ny API-nøkkel og gi den et navn for å generere nøkkelen.
4. Deretter kan du, hvis du ønsker det, kopiere og lime det inn i api-tastaturboksen på begynnelsen av nettsiden https://api.w3.org/doc for å teste API i sandkassen.

For dette innlegget vil vi se på forespørselen som bruker kortnavn for å vise spesifiseringsadressen, beskrivelse og dokumentstatus . Forespørselen ser slik ut:

 https://api.w3.org/Specifications/{shortname}?apikey={apikey}&_format=json 

For eksempel vil en HTML5-spesifikasjonsforespørsel være slik:

 https://api.w3.org/Specifications/html5?apikey={apikey}&_format=json 

La oss nå fokusere på HTML-en som vi skal bruke for å vise dataene hentet gjennom API-en. For dette har jeg bestemt meg for å bruke HTML Template. HTML-maler brukes til å holde HTML-kode som blir analysert, men ikke gjengitt før de er lagt til siden ved hjelp av JavaScript.

 W3C SPESIFIKASJONER 

Malen er klar. Nå, på JavaScript som vil gjøre HTTP-forespørselen og vise svaret JSON-data i HTML. Her er settet med globale variabler vi starter med:

 var shortnames = ['html5', 'selectors4', 'batteristatus', 'fullskjerm'], xmlhttp = ny XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector '); 

shortnames er en rekke shortnames av spesifikasjonene vi vil vise i vår nettside; Hvis du vil finne kortnavnet til en spesifikasjon, se på W3C-nettadressen, og du vil kunne se den på slutten.

Det er imidlertid ikke garantert at du vil kunne få alle spesifikasjoner som dette; Det er ikke en endelig liste over kortnavn og spesifikasjoner som er tilgjengelige via APIen ennå.

Gå gjennom shortnames og legg inn en HTTP-forespørsel for hver, og hent svaret.

 for (var i = 0; i 
responseText er en JSON-streng og må analyseres for å få JSON-objektet. displaySpec er funksjonen som vil bruke JSON dataene og vise den i HTML.
Nedenfor er eksemplet JSON svartekst for HTML5-spesifikasjon og etter koden for displaySpec .
 funksjonsvisningSpec (json) {if ('innhold' i templateEle) {/ * få malens innhold * / templateEleContent = templateEle.content; / * legg til spesiell tittel til h2 header * / w3cSpecHeader = templateEleContent.querySelector ('.w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * legg til spesifikke URL til lenken * / w3cSpecLink = templateEleContent.querySelector ('.w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * legg til spesifikasjonsbeskrivelse * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * legg til spesifikasjonsstatus og farge den basert på dens verdi * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["siste versjon"]. tittel; W3cSpecLatestVerStatus.textContent = status; bytte (status) {case 'Anbefaling': W3cSpecLatestVerStatus.className = "recommendation"; gå i stykker; tilfelle 'Working Draft': W3cSpecLatestVerStatus.className = 'utkast'; gå i stykker; tilfelle 'Pensjonert': W3cSpecLatestVerStatus.className = 'pensjonert'; gå i stykker; case 'Kandidatanbefaling': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; gå i stykker; } / * legg til kopi av malens innhold til hoved div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)); } else {/ * legg til JS kode for å lage elementene individuelt * /}} 

if ('content' in templateEle) er å kontrollere om HTML-mal støttes av nettleseren, hvis ikke, lag alle HTML-elementene i selve JS. Og når det er støtte, fyll ut HTML-elementene som er inne i malens innhold med de respektive dataene fra JSON, og til slutt legg til en kopi av #w3cSpecs innhold til hovedmenyen #w3cSpecs div.

Det er det. Med litt CSS stylings ser utgangen slik ut:

Slik åpner du nettleseren din alltid i privat modus

Nettleserens private modus lar ingen spor av surfing på PCen, noe som er veldig nyttig hvis PCen din også er i bruk av andre. Hvis du liker å holde surfingen privat hele tiden, kan du være interessert i å starte nettleseren din i privat modus som standard .I dette innlegget vil jeg vise deg hvordan du kan lage Chrome, Firefox, Internet Explorer og Opera i en privat modus når du starter nettleseren.Merk:

(Tekniske og design tips)

Trekk Subreddit Nøkkelord med dette gratis reddit søkeordverktøyet

Reddit er en gullmine av underholdning, nyheter, råd og markedsundersøkelser. Du finner en subreddit på stort sett alt, og dette skaper nisamfunn på hvert tema under solen.Keyworddit er en gratis søkeordforskning webapp utviklet med ett formål: å skrape subreddits og trekke relaterte søkeord, sammen med deres søkevolum.Den er h

(Tekniske og design tips)