Slik testes nettstedet over flere nettlesere og enheter synkront

Responsive Web Design (RWD) er nå en felles tilnærming til å bygge en mobil vennlig nettside. Men å bygge en responsiv nettside kan være ganske irriterende når du må teste nettstedet i flere enheter og skjermstørrelser.

Si at du har tre enheter til å kjøre testen på, du kan ende opp med å oppdatere hver nettleser i hver av disse enhetene, som er tungvint, for å si mildt.

Så ideen om "synkronisert testing" har kommet fram for å løse denne situasjonen og gjøre arbeidsflyten mer strømlinjeformet. Det er et Grunt-plugin kalt Browser Sync for å utføre dette, og vi skal vise deg hvordan du distribuerer den i prosjektet ditt, i dette innlegget.

Hvorfor bruke nettlesersynkronisering?

For det første sier jeg ikke at Browser Sync er det perfekte verktøyet. Det finnes også en rekke GUI-applikasjoner som Adobe Edge Inspect og Ghostlab, som også er gode verktøy. De har begge en fin GUI, men her er hvorfor jeg tror Browser Sync er bedre enn disse programmene:

1) Browser Sync (samt Grunt) er gratis som hjelper hvis du har lite eller ingen budsjett til å jobbe med.

2) Det er åpen kildekode . Avhengig av JavaScript og Node.js ferdigheter kan du utvide den for å imøtekomme dine egne spesifikke krav.

3) Det er tverrplattform . Du kan bruke den i Windows, OS X og Linux . Ghostlab, derimot, er bare tilgjengelig i OS X og Windows.

Installasjon

For å starte, skal vi installere Grunt-plugin-programmet, kalt Browser Sync. Jeg er sikker på at navnet sier alt denne plugin- synkroniseringen er en rekke samspill som skjer på nettsiden, inkludert sideskrolling, fylle skjemafelt og klikke på koblinger.

Alle disse handlingene vil bli reflektert i de andre nettleserne og enhetene som de skjer. Skriv inn følgende kommando for å installere Browser Sync i arbeidskatalogen din:

 npm installere grunt - save-dev npm installere grunt-browser-sync - save-dev 

konfigurasjon

Når installert, kan Browser Sync lastes inn i Gruntfile.js, på denne måten.

 modul.exports = funksjon (grunt) {grunt.initConfig ({browser_sync: {dev: {bsFiles: {src: 'navbar-fixed-top.css', }, ghostMode: {klikk: true, scroll: true, links: sant, former: sant, }, }, }, }); grunt.loadNpmTasks ( 'grynt-browser-sync'); }; 

Denne konfigurasjonen overvåker navbar-fixed-top.css-filen og oppdaterer automatisk nettleseren når den endres. Vi bør også aktivere ghostMode å holde oversikt over samspill på nettstedet .

Merk: Browser Sync gir også en rekke andre konfigurasjoner, du kan sjekke dem ut i detalj på denne siden . For tiden bør ovennevnte konfigurasjon være tilstrekkelig for prosjekteksemplet i denne artikkelen.

Når konfigurasjonen er angitt, går du til Terminal (eller Kommandoprompt) og kjører oppgaven ved å bruke følgende kommando:

 grunt browser_sync 

Etter at du har kjørt kommandoen, blir du bedt om å legge til tre linjer av skript i stikkord.

Også når du ser på nettstedet ditt i flere nettlesere, registreres det også disse nettleserne, og gir deg beskjed i Terminal. I dette tilfellet åpnet jeg nettstedet i Chrome, Safari og Mobile Safari (via iPhone Simulator).

Sjekk det ut

Nå, som du ser fra følgende animerte GIF, blir alle oppdateringer, endringer og samspill synkronisert i sanntid i alle nettleserne.

Ytterligere ressurser

Her er flere ressurser til å grave videre inn i Grunt og "Synchronized Testing".

• Møt Grunt: Byggverktøyet for JavaScript - Kode +
• Synkronisert mobiltest på tvers av mobilenheter - HTML5-bergarter

20 Gratis Fet og Chunky Fonter til Jazz opp dine design

Det er visse må-ha skrifter som blir kvintessige for designene dine, og dype skrifttyper er en slik type. Fet og klumpete skrifttyper legger mye stoff i designet og ser også estetisk godt ut .I dette innlegget har vi satt sammen en interessant samling gratis dristige og klumpete skrifter som kan brukes til overskrifter, titler eller et annet aspekt av designet.

(Tekniske og design tips)

20 verktøy for oppstart som ikke kan gi råd til designlag

I begynnelsen var det deg og din bærbare. Som gründere har vi alle vært der: oppdra en visjon om hva vår app / produkt skal være og sliter med for å formidle det til massene. Fordi du ikke slår deg opp med et designteam på hånden, gjør du det i det risikable, ensomme vannet i et leid skrivebord i et felles kontorlokal.Sikker på

(Tekniske og design tips)