HTML, CSS & JS: olhando pra frente

O L H A N D O P R A F R E N T EH T M L , C S S & J S :

flickr.com/tisdale53

http://flickr.com/tisdale53

L U I Z T I A G O

• CTO @ MGR Tecnologia

• Pós graduado em Desenvolvimento Mobile @ CESAR

• Graduado em Sistemas para Internet @ FMR

• Co-fundador do Pernambuco.JS / jQuery Brasil

G U I L H E R M E FA R I A S

• Front-end Engineer @ MGR Tecnologia

• Graduando Sistemas de Informação @ AESO

• Firefox OS Developer & Evangelist

• Zepto.JS Contributor

D O M L E V E L 4

• Working Draft - 07 November 2013

• AbstractDOM define um modelo de plataforma para eventos, promises e document nodes.

http://www.w3.org/TR/2013/WD-dom-20131107/

http://www.w3.org/TR/2013/WD-dom-20131107/

D O M L E V E L 4

• Feature Detection

Modernizr is a JavaScript library that detects HTML5 and CSS3

features in the user’s browser.

D O M L E V E L 4

• Better Class’s Manipulation

C S S S E L E C T O R S

L E V E L 4

flickr.com/doug88888

http://flickr.com/doug88888

C S S S E L E C T O R S L E V E L 4

• E:local-linkQualquer link que o destino já seja a página atual

• E:current

• E:past

• E:future

http://dev.w3.org/csswg/selectors4



• E:active-dropElemento que vai receber o elemento que está sendo arrastado

• E:valid-dropElemento que pode receber o elemento arrastado

• E:invalid-drop(!E:valid-drop)




• E:valid && E:invalid Input válido ou inválido de acordo com a validação HTML (type email, required, pattern=“[0-9]”)

• E:required && E:optional Elementos que tem ou não o atributo required

• E! > F O pai do elemento :)



C S S S E L E C T O R S

L E V E L 5

Ideas to consider


• ::first-words(n)

• ::first-lines(n)

• ::nth-line(an+b)

• ::last-line

• ::quote-start

• ::quote-end

http://wiki.csswg.org/spec/selectors



• ::dragging

• :time[ before <time> | after <time> | <time> to <time> ] Controlar durante uma transição CSS

• :click && :clicked

• :keydown && :keyup

• :placeholder



M E D I A Q U E RY

4flickr.com/randomgirl

http://flickr.com/randomgirl

M E D I A Q U E RY 4

• @media script

http://dev.w3.org/csswg/mediaqueries4/

http://loopinfinito.com.br/2013/11/26/media-queries-nivel-4/




• @media pointer

• none - não há dispositivo apontador;

• coarse - há dispositivo apontador de baixa precisão (tela sensível ao toque);

• fine - há dispositivo apontador de alta precisão (mouse, trackpad e tela sensível a Pen Stylus).






• @media pointer






• @media hover






• @media luminosity

• dim - O dispositivo se encontra num ambiente escuro ou com pouca iluminação.

• normal - O ambiente tem um nível ideal de luminosidade.

• washed - O ambiente tem um nível muito claro ou até excessivo em quantidade de lux.






• @media luminosity





H T M L 5 . 1

• capture input [ filesystem, camera, camcorder, microphone ]

http://www.w3.org/wiki/HTML/next

http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

H T M L 5 . 1

• download



H T M L 5 . 1

• Elements

• <reco> (Speech Web API)

• <tts> (Speech Web API)

• <intent> (Web Itents)



H T M L 5 . 1

• Web Components

• <template>

• <content>

• <decorator>

• <element>

• <shadow>



H T M L 5 . 1 - I D E A S

• Decompress Element <decompress>

• Inputable <Select>

• <Audio> Balance

• Melhorias em <video>



E C M A S C R I P T 6

flickr.com/evarinaldiphotography

http://flickr.com/evarinaldiphotography

E C M A S C R I P T 6

• Sets Lista com elementos únicos ordenados



E C M A S C R I P T 6http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Sets Lista com elementos únicos ordenados



• MapsLista com elementos únicos ordenados, mas com chave/valor



• WeakMaps Lista com elementos únicos ordenados, mas com chave/valor, mas a chave não pode ser primitivo.



• Iterators for-ofPermite iteração em arrays e collections, e traz como resultado os valores dos elementos.



• GeneratorsPermite iteração em arrays e collections, e traz como resultado os valores dos elementos.



• Arrow FunctionsSimples e elegante <3



• Default ParametersSimples e elegante [2] <3



• REST ParametersSimples e elegante [3] <3



• letVariáveis com escopo em bloco



• constTambém com escopo em bloco apenas



• Objetos tipados

• uint8: Inteiros positivos de 8-bituint16: Inteiros positivos de 16-bit uint32: Inteiros positivos de 32-bit

• int8: Inteiros (positivos e negativos) de 8-bit int16: Inteiros (positivos e negativos) de 16-bit int32: Inteiros (positivos e negativos) de 32-bit



• Objetos tipados

• float32 : Números com pontos flutuantes de 32-bit float64 : Números com pontos flutuantes de 64-bit

• boolean : Valor booleano primitivo do ECMAScript

• string : String primitiva do ECMAScript


E C M A S C R I P T 6 C L A S S E S


• ClassesDeclaração



• ClassesHerança



• Modules“CommonJS + RequireJS”



• Proxies



• Better Math• Math.log10(x)

Realiza cálculos de logaritmos de base 10

• Math.log2(x)Realiza cálculos de logaritmos de base 2

• Math.log1p(x)Realiza cálculos de logaritmos naturais de 1 + x

• Math.cosh(x)Co-seno hiperbólico de x.

• Math.sinh(x)Seno hiperbólico de x.

• Math.tanh(x)Tangente hiperbólica de x.

• Math.acosh(x)Inverso do Co-seno hiperbólico de x.

• Math.asinh(x)Inverso do Seno hiperbólico de x.

• Math.atanh(x)Inverso da Tangente hiperbólica de x.

• Math.trunc(x)Trás o número inteiro de x



• Better Math• Math.hypot(x,y[,z])

Retorna a raiz quadrada da soma dos quadrados dos seus argumentos. (pode ser 2 ou 3 argumentos)(hipotenuza)

• Math.hypot2(x,y[,z])Retorna a soma dos quadrados dos seus argumentos. (pode ser 2 ou 3 argumentos)(hipotenuza)

• Math.cbrt(x)Raiz cúbica de x.

• Math.sign(x) Indica se o número é positivo, negativo ou não é um número. Ou seja, se x for -100 o resultado será -1, se x for 50 o resultado será +1.

• Math.expm1(x)Retorna um calculo preciso de uma função exponencial de x com a base dos logaritmos naturais

• Math.imul(x,y)Retorna o resultado da multiplicação de 32 bits (C-like) dos dois parâmetros. ex: Math.imul(0xfffffffe, 5) //-10



• Better Number• Number.EPSILON

Retorna o valor da diferença entre 1 e o menor número maior que 1, que é equivalente a 2.2204460492503130808472633361816 x 10^-16

• Number.toInteger(x)Transforma x em um número inteiro

• Number.isNaN(x)Retorna true se x não for um número

• Number.isInteger(x)Retorna true se x for um número inteiro

• Number.isFinite(x)Retorna true se x for um número finito



• Template Strings



• startsWith String.startsWith(searchString,position)



• endsWith String.endsWith(searchString,position)



• containsString.contains(searchString,position)



• toArrayString.toArray()



• repeatString.repeat(n)



• from & ofArray.from(arrayLikeElements) & Array.of(elements)



• find, findIndex Array.prototype.find(fn) & Array.prototype.findIndex(fn)



• fillArray.prototype.fill(value, start, end)



• assignObject.assign(target, source)

• Faz uma cópia profunda do objeto, incluindo os dados de target para dentro do objeto source. Isso é muito util quando se trabalha com com objetos complexos, devido a forma que o javascript trabalha com os ponteiros para posições de memórias de objetos.



• isObject.is(value1, value2)


E C M A S C R I P T 7 +

E C M A S C R I P T 7 +http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

• Novas tipagens: bignum, rational, symbol, complex…

• Sobrecarga de operadores

• Traits (estrutura parecida com a do PHP)

• Trademarks

• Guards

• Brander



• Brander

• Relationships (x @ r = 10;)

• Distributed persistence

• Code isolation

• Weak References

• Quasi-parsers for JS, HTML, CSS



• Possibly lexically nested modules

• Parallel array (SIMD - Single instruction, multiple data)

• Distribution compatible promises (at least Promises/A+)

• Communicating Event Loop concurrency model


O B R I G A D O , R E C I F E ! ( :

@[email protected]

!

@[email protected]

mailto:[email protected]

mailto:[email protected]

HTML, CSS & JS: olhando pra frente

Technology

Transcript of HTML, CSS & JS: olhando pra frente