Dynamisk avkortet tekst med Shave.js-plugin

De fleste WordPress-blogger bruker "Les mer" -funksjonen til å vise forhåndsvisningstekst fra et innlegg. Denne teksten er avkortet og avkortet på et bestemt tidspunkt for å spare plass og oppfordre leserne til å klikke videre for å fortsette å lese .

Men noen ganger vil du legge til denne funksjonen på en enkelt side. Skriv inn Shave.js, JavaScript-pluginet for dynamisk avkorting av innhold .

Et kult fakta om denne plugin er at den er skapt av Dollar Shave Club, laget som laget en av de morsomste annonsene jeg noensinne har sett. Jeg var ikke klar over at laget deres selv hadde en GitHub-side, men den er full av repos både original og forked.

Denne spesielle plugin er ganske ny og den har allerede 800 + stjerner. Det er avhengighetsfritt, slik at det kan kjøre på vanlig JavaScript, uavhengig av nettleseren eller andre inkluderte biblioteker .

Kodeoppsett er også ganske enkelt med shave () -funksjonen bare å ta to parametere: en elementvelger og en maksimal høyde for det elementet. Her er et veldig grunnleggende eksempel:

 maksimal høyde = 320; barbering ('elemclass', maxheight); 

Naturligvis finnes det ekstra parametere du kan passere for egendefinerte tegn etter den avkortede teksten, eller flere valgører hvor du vil bruke barberingseffekten .

Du kan faktisk se en live demo på Shave plugin-siden, og de har en fin CodePen-demo også.

Barbering er bygd for å jobbe på jQuery eller Zepto hvis du foretrekker noen av disse bibliotekene. Men siden det også kjører på vanilje JS, er det en av de enkleste pluginene å slippe inn på nettstedet ditt og begynne å bruke.

Det er ikke så mange scenarier hvor du vil avkorte tekst, men når du gjør det er det mye lettere å bruke et plugin som barbering enn å skrive all koden selv.

For å komme i gang, last ned en kopi fra GitHub repo eller trekk fra en repo som npm. Du finner også retningslinjer og dokumentasjon på GitHub repo, slik at du bokstavelig talt bare kan kopiere, lime inn og få barbering!

Få ekstern tilgang til datamaskinen med Chrome Remote Desktop

Vi har alle vært der før: Vi er på kontoret eller hjemmefra, og plutselig innser vi at vi trenger en bestemt fil eller et dokument som er på en annen datamaskin . Dessuten er filene ikke på Dropbox eller andre cloud storage. Dette vil vanligvis føre til mye frustrasjon, men det er der eksterne desktop applikasjoner kommer inn i spill. Det

(Tekniske og design tips)

Lag Showy & Interactive Animasjoner enkelt med Animatron

Folk liker å flytte objekter mer enn statiske vanlige. Det er derfor videoer og animasjon er en hit . Hvis du sammenligner de to, er animasjonen mer effektiv med et enkelt bevegelige objekt - det er lys både i størrelse og båndbredde .I webdesign er det veldig enkelt å lage en veldig enkel animasjon. Det

(Tekniske og design tips)