Kultainen koodi

.NET-osaajan ajatuksia paremmasta koodailusta

Archive for the tag “frontend”

Keskitä vertikaalisesti kolmella koodirivillä

Työkaveri vihjasi törkeän mainion sivun, jossa kerrotaan miten UI-elementin voi keskittää vertikaalisesti kolmella koodirivillä. Taikasana on CSS.

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Saman voi kirjoittaa myös mixininä.

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align();
}

Elementti voi sijoittua pikseleiden väliin, jolloin elementin reunat voivat näyttää sumuisilta tai pehmeiltä. Määrittelemällä keskittämisen parin lisämääreen avulla ongelma ratkeaa.

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Korjauksen voi tehdä myös perspectiven avulla (ratkaisua ehdotti alkuperäisessä postissa roydukkey):

.element {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

Nauti keskittämisestä!

Mainokset

Underscore js – JavaScriptin muistilista

Frontin tekeminen ja JavaScript? Underscorejs ratkaisee huolesi tarjoamalla pikaisia vastauksia tyypillisiin ongelmiin. Tavallisesti ongelmiin liittyvät vastaukset joutuu kaivamaan API:sta tai StackOverflowsta, mutta JavaScriptin puolella ratkaisukokoelma helpottaa elämää.

Näyttökuva 2017-03-26 kello 15.58.37

Underscoren kautta löytää hyviä esimerkkejä tyypillisiin funktiokutsuihin. Positiivisena puolena voi mainita funktiot. Jos osaat funktionaalista ohjelmointia, JavaScriptin opetteleminen tätä kautta käy helposti. Mikäli et vielä ymmärrä funktioita, niin esimerkkien avulla opit lisää.

Osaamistasi saat lisättyä codewarsin kautta, kuten kerroin aiemmin.

Riemullista JavaScriptailua!

Post Navigation