it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Rendi tutti i contenuti incorporati reattivi con Reframe.js

La parte più delicata sull'incorporazione dei video sta nel correggere la larghezza e l'altezza. Questi numeri definiscono le proporzioni e quando sono spenti si ottiene un video player stupido .

Questo è vero per tutti gli elementi incorporati come iframe e widget di social media. E queste cose possono essere ancora più complicate con il design reattivo perché di solito non sono elementi di risposta .

Ma con Reframe.js, puoi rendere qualsiasi elemento reattivo per qualsiasi proporzione .

Questo è forse uno dei plugin JS più semplici e più preziosi sul web. In realtà è stato creato da Dollar Shave Club che sorprendentemente ha la sua pagina GitHub.

Reframe è uno dei loro plugin gratuiti creato per gli sviluppatori che desiderano un modo più semplice per gestire contenuti incorporati reattivi .

L'evidente colpevole è il video incorporato da siti come YouTube e Vimeo. È notoriamente difficile rendere questi elementi reattivi senza gli hack CSS.

Con Reframe.js, basta selezionare qualunque elemento tu voglia targetizzare e riformarlo usando la funzione reframe() .

Inizia aggiungendo il plugin Reframe.js alla tua pagina web. Puoi scaricare una copia da GitHub ed è limitata a 1KB.

Quindi, si passa semplicemente la funzione a un selettore per gli elementi che si desidera riformulare. Carica la pagina e il boom! Dovresti essere tutto pronto.

Ad esempio, supponiamo che tu abbia alcuni video incorporati nel tuo sito. Puoi aggiungere la classe .video e usarla come selettore. Reframe aggiunge automaticamente un div e class attorno ad esso per creare lo stile reattivo.

Quindi il tuo codice JavaScript sarebbe simile a questo:

 ridefinire ( 'video.'); 

Abbastanza semplice, vero?

Questo codice punta a tutti gli elementi con la classe .video e li rende reattivi . Nessun hack in più, nessun CSS in più. Certo, non c'è niente di sbagliato nell'usare il metodo CSS, ma è necessario avvolgere manualmente tutti i video incorporati con la classe extra.

Reframe ti fa solo risparmiare quel passo in più e lo porta a termine con JavaScript. Per controllare una demo e trovare alcuni frammenti di codice di base, visita la homepage di Reframe.js. Puoi scaricare una copia del codice direttamente dal repository GitHub.

10 migliori app per fitness per Smartwatch Android Wear

10 migliori app per fitness per Smartwatch Android Wear

Le metriche e il monitoraggio dei progressi sono molto utili per cercare di rimanere in forma e in salute. Per coloro che optano per questo con l'aiuto di uno smartwatch Android, hanno un sacco di applicazioni di fitness per aiutarli a rimanere in forma. Le app aiutano a monitorare la vitalità del corpo, gli allenamenti, il sonno, l'assunzione di cibo e altro ancora.

(Consigli tecnici e di design)

20 strumenti SEO gratuiti che ogni blogger dovrebbe conoscere

20 strumenti SEO gratuiti che ogni blogger dovrebbe conoscere

Oltre a un sito Web di bell'aspetto con contenuti interessanti e regolarmente aggiornati, SEO è essenziale per i blogger. Mentre è del tutto possibile fare SEO da soli, a causa della complessità delle regole SEO da rispettare, è probabilmente molto più efficiente ripiegare su strumenti là fuori che sono innescati per aiutare il tuo sito rank più alto .Che si

(Consigli tecnici e di design)