Google Fonts fungerer ikke i Kina - Slik løser du det

Grunnen til at vi bruker Google API for å vise biblioteker som jQuery og Web Fonts, er at den tjener fort gjennom Googles pålitelige infrastrukturer. Den brukes nesten overalt, og så mye at noen brukere allerede har cachen lagret i nettleseren, noe som gjør at bibliotene lastes enda raskere.

Dessverre er det ikke tilfellet i Kina. Kinas regjering stengte tilgang til mange av Googles tjenester, inkludert Google API, i 2014. Sjansen er at nettstedet ditt kan vises delvis ødelagt i Kina, fordi jQuery og web-fonter som er vert i Google, er utilgjengelige.

I dette innlegget skal vi se hvordan vi går forbi Kinas "digitale" Great Wall, slik at nettstedet vårt kan løpe som hvordan det blir sett utenfor Kina. Vi skal bruke et alternativ skriftbibliotek som speiler Google Fonter og biblioteker, men først må vi sette inn noen tiltak for å identifisere brukere som hagler fra Kina.

Identifisere brukerplassering

Til å begynne med må vi finne hvor vår besøkende kommer fra og for å gjøre det, vi bruker denne WIPMania API som tillater henting av en besøkers geolokasjon, inkludert landets navn:

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funksjon (data) {swal ('Du er fra', data.address.country);}); 

Vi bruker jQuery $.getJSON å ringe til API. Vi sender deretter data.address.country som skal fortelle oss hvor den besøkende er fra. Her er en demonstrasjon.

Gir Alternative Web Font Source

Så nå som vi kan hente vår besøkendes beliggenhet, skal vi erstatte Google Fonts med Useso-biblioteker, en CDN-tjeneste som speiler fonter og biblioteker fra Google API, for å betjene besøkende fra Kina.

På dette stadiet har vi fortsatt skrifttypestiler som peker på Google API:

Vi erstatter href i linkelementet med en JavaScript-funksjon.

 funksjon () / ', ' //fonts.useso.com/ '); $ (dette) .attr (' href ', $ erstatte);}); } 

Denne funksjonen erstatter hver lenke for å henvise til //fonts.useso.com/ i stedet for å peke til Google API-adressen, //fonts.googleapis.com/ .

Funksjonen vil bare løpe når den besøkende er fra CN, Kinas internasjonale landskode.

 $ .getJSON ('http://api.wipmania.com/jsonp?callback=?', funksjon (data) {if (data.address.country_code == 'CN') {replaceGoogleCDN ();}}); 

Vi er alle satt. Nå vil besøkende fra Kina bli servert skrifter via //fonts.useso.com/ som ikke er blokkert av den kinesiske regjeringen.

18 gratis Photoshop-utvidelser for alle kreative

Adobe Photoshop er et veldig populært grafikkredigeringsprogram som kommer med massevis av funksjoner - alt for mange til å nevne. Det er vanskelig å forestille seg at noen kan trenge flere funksjoner. Men Photoshop støtter utvidelser, som lar deg legge til enda flere nyttige funksjoner til programmet. No

(Tekniske og design tips)

Legg til React.js Explorer til Chrome med React Developer Tools

Hver webutvikler burde allerede vite om de fantastiske Chrome Developer Tools . Denne funksjonen er bygget rett inn i Chrome, og lar utviklere inspisere sider og redigere eller fjerne elementer direkte fra nettleseren.Det er utrolig kraftig, og det er den beste måten å studere sideadferd som latens, side ressurser, eller å utføre konsollkommandoer.Fac

(Tekniske og design tips)