no.hideout-lastation.com
Paradis For Designere Og Utviklere


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

15 Kreative foreldre og barn bilder som virkelig inspirerer

15 Kreative foreldre og barn bilder som virkelig inspirerer

Barn vokser til voksne i løpet av bare noen år. Derfor er noen foreldre så dedikert til å dokumentere sine minner med sine barn på de mest imponerende måtene som er mulige, mens de underkastes noen kreative eksperimenter selvfølgelig!I dette innlegget har vi satt sammen en spennende samling på 16 bilder fanget eller manipulert av foreldre, som også ser ut til å være reklamer som elsker å gjøre barna sine til å gjøre magiske ting . Ha det gøy å

(Tekniske og design tips)

Glatt helbladsrulling med jQuery Plugin viewScroller.js

Glatt helbladsrulling med jQuery Plugin viewScroller.js

JavaScript rulleffekter har eksistert i årevis med dusinvis av flotte biblioteker å velge mellom. Men en ny konkurrent i feltet er viewScroller.js .Dette svært små, men kraftige biblioteket kan bygge enkelsidige layouter som rulle som blokker med en sveipe av rullehjulet (eller berøringsplaten). Det

(Tekniske og design tips)