Kā "griezt" ātrāk nekā "zīmē"

Lekcija krievu valodā "Как верстать сайты быстрее, чем их рисуют" no Frontend Dev Conf 2014, kur ar pieredzi dalās front-end developer Юрий Артюх. Runā par rīkiem, kas automātizētu un paatrinātu "griežšanas" procesu: Sublime, CSS Hat, PNG Hat, Skech, u.c..

Zoommy (Mac OS X)

Ir reizēs, kad "griežot" dizainu rodas nepieciešamība pēc bildēm saturam. Mac OS X lietotājiem talkā nāk vienkārša aplikācija Zoommy, kura apkopo attēlus no lielākajiem bezmaksas bilžu "stokiem".

Aplikācija ļauj caurlūkot bildes no bezmaksas bilžu "stoku" saraksta, iepatikušās bildes atzīmēt, bildi lejuplādēt ar vienu klikšķi, tā būs atrodama mapē "Downloads". Cerams ka nākošajā versijā ieviesīs meklētāju vai bilžu kategorijas.

Zoommy helps you find awesome free stock photos for your creative product or inspiration.

http://zoommyapp.com/

Transformicons

Animated icons, symbols and buttons using SVG and CSSAnimated icons, symbols and buttons using SVG and CSS

http://www.transformicons.com/

Responsive Nav

Responsive Nav is a tiny JavaScript plugin which weighs only ~1KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

http://responsive-nav.com/

Vairākslāņu CSS

Roberta Haritonova (vadošais Одноклассники.ру "griezējs") prezentācija par vairākslāņu CSS (krievu valodā) video un prezentācijas formātā.

Responsive design bookmarklet

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page. More »

Man patīk - ātri un ērti!

Retina Ready Images and Responsive Web Design

DesignModo blogā uzgāju lielisku rakstu par aktuālu tēmu - "Retina Ready Images and Responsive Web Design". Iesaku!

FripFrap video podkasts

 

Video podkasts FripFrap (angļu valodā par html/css/js/...), kuru veido divas daiļās būtnes. 

CSS refresh

CSSrefresh ir mazs javascript, kas uzrauga CSS failu. Veicot izmaiņas, javascript automātiski pārlādē lapu. Plašāka informācija cssrefresh.frebsite.nl.

You are the CSS to my HTML

HTML & CSS T-krekls

Iespējams iegādāties pie Uzvelckreklu.lv.

Saīsinam "padding" un "margin"

Apskatīšu iespēju, kā ir iespējams saīsināt atribūta "padding" un "margin" vērtības. Piemēram, nodefinēsim klasei "koks" atribūtam "padding" vērtības.

Neoptimizēts variants:

.koks
{
padding-bottom:5px;
padding-left:10px;
padding-right:15px;
padding-top:1px;
}

Optimizēts variants:

.koks {
padding: 1px 15px 5px 10px;
}

Rezultāts acīm redzams, tiek ietaupītas teju 3 rindiņas vai 45 simboli. Atliek vien atcerēties "padding: top right bottom left;" un "margin: top right bottom left;".

UI programmēšana

Web-Tehnoloģiju skolā atvērta reģistrācija, manuprāt, jaunai un ļoti perspektīvai mācību programmai - UI programmēšana.

Programmas mērķis – visu nepieciešamo līdzekļu apguve lietotāja saskarnes izveidei, ar kuras palīdzību lietotājs savstarpēji iedarbojas ar web-lapu vai web-aplikāciju caur pārlūkprogrammu. Programmā tiek studēta klasiskā un populārākā saskarnes izstrādes metode ar HTML, CSS un JavaScript valodu palīdzību, šo valodu specifikācija un tiek izskatītas problēmu risināšanas metodes web-aplikāciju izstrādes laikā, kā arī to uzturēšana dažādās pārlūkprogrammās.

Avots: webskola.lv

Sastrukturizēt CSS failu

Online serviss styleneat.com palīdz sastrukturizēt CSS failu.

Piemēram, no šī:

#id1 { property: value; }
#id1 .class1 { property: value; }
#id1 .class1 a { property: value; property2: value2; property3: value3; }
#id1 .class1 a span { property: value; property2: value2; }
#id2 { property: value; }
#id2 .class { property: value; }

uz šo:

#id1 { property: value; }
 
 #id1 .class1 { property: value; }
 
  #id1 .class1 a {
   property: value;
   property2: value2;
   property3: value3; }
 
   #id1 .class1 a span {
    property: value;
    property2: value2; }
 
#id2 { property: value; }
 
 #id2 .class { property: value; }

Web Standards Days Riga 2010

22. maijā viesnīcā "Tallink Hotel Riga" notiks konference par web izstrādi "Web Standards Days Riga 2010". Sīkāku informāciju par konferenci, tās programmu varat iepazīties webstandardsdays.ru.

Esmu jau reģistrējies, iesaku arī Tev reģistrēties, ja ir vēlme apmeklēt šo konferenci, jo vietu skaits ierobežots.