felipefialho

Teste para projetos responsivos

##Problema Testar/verificar a disposição dos elementos de uma determinada página em determinadas resoluções de tela.

Solução

Executar captura de telas de acordo com os viewports definidos em um script, com a ajuda do PhantomJS.

Necessário ter o node e o npm instalados

felipefialho

Lista de estudo para Desenvolvedores Front-End

Quer estudar sobre algo além do trio mágico HTML, CSS e Javascript e não sabe por onde começar?

Segue uma lista com sugestões de estudo extra para Desenvolvedores Front-End.

CSS

• PostCSS

felipefialho

Teoria x Prática

Aproximando seus estudos de cenários mais reais

O problema

Uma das perguntas mais comuns entre desenvolvedores iniciantes ou que ainda estão em fase de estudos, é:

felipefialho

desenvolvedor front-end jr

Trendi

(região da berrini, são paulo - sp)

• regime: CLT
• escolaridade: segundo grau completo
• conhecimento necessário:
  • html (3)
• css (3)

felipefialho

Fonts

REM fallback for old browsers and set line-height

Mixin

//
// Fonts - REM fallback for old browsers and line-height
// --------------------------------------------------

felipefialho

// ==================================================
// Smooth Scroll
// ==================================================

function smoothScroll(el, to, duration) {

  'use strict';

  if (duration < 0) {
    return;

felipefialho

0 info it worked if it ends with ok
1 verbose cli [ 'c:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Felipe\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'install' ]
2 info using npm@3.5.3
3 info using node@v5.11.1
4 silly loadCurrentTree Starting
5 silly install loadCurrentTree
6 silly install readLocalPackageData
7 silly install normalizeTree

felipefialho

// ==================================================
// IE Checker
// ==================================================

function isIE(userAgent) {
  userAgent = userAgent || navigator.userAgent;
  return userAgent.indexOf('MSIE ') > -1 || userAgent.indexOf('Trident/') > -1 || userAgent.indexOf('Edge/') > -1;
}

felipefialho

<section class="place">
  <div class="place__container">
    <h1>Lugares vistos recentemente</h1>
    <p>Continue de onde parou</p>

    <a class="card" href="#">
      <div class="card__main">
        <img src="" alt=""> 
        <h2>Hospedado por Luciana</h2>
        <p>Rio de Janeiro</p>

felipefialho

// The molecule
.card
  h2 
  ...

  p
  ...

  .price
  ...