diff --git a/_includes/marketing.html b/_includes/marketing.html index 4cdcef68..0a84788d 100644 --- a/_includes/marketing.html +++ b/_includes/marketing.html @@ -1,5 +1,5 @@

Aprenda de um jeito fácil

Gostou do meu blog e quer aprender comigo?

- Cadastre-se Agora + Cadastre-se Agora
diff --git a/_posts/2015-01-03-making-of-parte-1.md b/_posts/2015-01-03-making-of-parte-1.md index 2e60e1c7..7e0b7965 100644 --- a/_posts/2015-01-03-making-of-parte-1.md +++ b/_posts/2015-01-03-making-of-parte-1.md @@ -125,4 +125,4 @@ O Pages te dá duas opções, criar páginas pessoais, a partir de um repositór ## Concluindo essa primeira parte -Bom, essa foi uma explicação básica de cada uma das tecnologias empregadas e os motivos de ter escolhido, é importante lembrar que foram escolhas minhas e dentro de um projeto específico. Não vá pensando que essa é a combinação perfeita para tudo, porque não é. Se tiverem alguma dúvida quanto a algo que eu falei, só mandar um comentário aqui embaixo ou se estiver muito tímido, pode mandar uma DM no meu twitter [@willian_justen](https://twitter.com/willian_justen) ou um email para [willianjustenqui@gmail.com](mailto:willianjustenqui@gmail.com). Na segunda parte eu irei falar um pouco das técnicas que utilizei e até algumas descobertas que fiz pelo caminho. Se não quiser perder nenhum post, só assinar o [RSS](http://willianjusten.com.br/feed.xml). +Bom, essa foi uma explicação básica de cada uma das tecnologias empregadas e os motivos de ter escolhido, é importante lembrar que foram escolhas minhas e dentro de um projeto específico. Não vá pensando que essa é a combinação perfeita para tudo, porque não é. Se tiverem alguma dúvida quanto a algo que eu falei, só mandar um comentário aqui embaixo ou se estiver muito tímido, pode mandar uma DM no meu twitter [@willian_justen](https://twitter.com/willian_justen) ou um email para [willianjustenqui@gmail.com](mailto:willianjustenqui@gmail.com). Na segunda parte eu irei falar um pouco das técnicas que utilizei e até algumas descobertas que fiz pelo caminho. Se não quiser perder nenhum post, só assinar o [RSS](https://willianjusten.com.br/feed.xml). diff --git a/_posts/2015-01-03-making-of-parte-2.md b/_posts/2015-01-03-making-of-parte-2.md index 0ad26ea7..935e4db8 100644 --- a/_posts/2015-01-03-making-of-parte-2.md +++ b/_posts/2015-01-03-making-of-parte-2.md @@ -99,7 +99,7 @@ Tendo o NodeJS já instalado, basta ir no terminal e iniciar o projeto: npm init ``` -Ele vai te fazer umas perguntas, vai seguindo os passos e no final é só confirmar e isso irá gerar um arquivo `package.json` com os dados preenchidos. Depois basta instalar os plugins necessários, que eu já falei no [post anterior](http://willianjusten.com.br/making-of-parte-1/). +Ele vai te fazer umas perguntas, vai seguindo os passos e no final é só confirmar e isso irá gerar um arquivo `package.json` com os dados preenchidos. Depois basta instalar os plugins necessários, que eu já falei no [post anterior](https://willianjusten.com.br/making-of-parte-1/). ```bash npm install --save-dev gulp gulp-uglify gulp-concat gulp-stylus autoprefixer-stylus browser-sync gulp-imagemin gulp-plumber jeet kouto-swiss rupture diff --git a/_posts/2015-01-04-um-post-por-dia.md b/_posts/2015-01-04-um-post-por-dia.md index 6098e34e..b8ece484 100644 --- a/_posts/2015-01-04-um-post-por-dia.md +++ b/_posts/2015-01-04-um-post-por-dia.md @@ -27,7 +27,7 @@ Se você é desenvolvedor e se interessou pela ideia, não espera não, vai lá Recebi ótimos feedbacks de amigos e pessoas desconhecidas, agradeço bastante a todo mundo =) -Mas eu também vi bastante gente falando "Até favoritei seu blog para acompanhar", acho mega legal isso, mas pow, favoritar não vai te avisar se tem post novo ou não, segue no [RSS](http://willianjusten.com.br/feed.xml) que é bem mais fácil. +Mas eu também vi bastante gente falando "Até favoritei seu blog para acompanhar", acho mega legal isso, mas pow, favoritar não vai te avisar se tem post novo ou não, segue no [RSS](https://willianjusten.com.br/feed.xml) que é bem mais fácil. Aqui tem um [listinha de apps](http://www.tecmundo.com.br/android/25914-android-10-programas-para-leitura-de-feeds.htm) para poder acessar pelo celular se quiser, diz para android, mas tem os mesmos apps para iOS também. @@ -35,7 +35,7 @@ Eu particularmente utilizo o [Feedly](http://feedly.com/) e junto a ele uso uma ![Imagem mostrando uma tela com xml para rss](/assets/img/one-post-per-day/feedly.png) -Se você estiver com a extensão do Feedly instalada e clicar em [RSS](http://willianjusten.com.br/feed.xml) vai abrir uma janela parecida com a da imagem acima, aí é só mandar abrir e pronto, toda vez que lançar algo novo, você é avisado, assim fica mais fácil de não perder nada. +Se você estiver com a extensão do Feedly instalada e clicar em [RSS](https://willianjusten.com.br/feed.xml) vai abrir uma janela parecida com a da imagem acima, aí é só mandar abrir e pronto, toda vez que lançar algo novo, você é avisado, assim fica mais fácil de não perder nada. E para vocês não falarem que eu fiz um post praticamente inútil, vai aqui um listinha de feeds que eu sigo (não são todos, porque senão seria um listão): diff --git a/_posts/2015-01-05-por-que-usar-jekyll.md b/_posts/2015-01-05-por-que-usar-jekyll.md index 661d9c6d..85c5089a 100644 --- a/_posts/2015-01-05-por-que-usar-jekyll.md +++ b/_posts/2015-01-05-por-que-usar-jekyll.md @@ -14,7 +14,7 @@ introduction: "Alguns motivos para se usar um gerador estático para a criação Olá pessoal, hoje terá um post extra! Não vai se acostumando! E brincadeirinha, não vai rolar flame war aqui, assim espero =o -Bom, como disse no [primeiro post](http://willianjusten.com.br/making-of-parte-1/) e expliquei um pouco melhor no [segundo post](http://willianjusten.com.br/making-of-parte-2/), eu utilizei o [Jekyll](http://jekyllrb.com/), que é um gerador estático, para criar o meu Blog. Algumas pessoas acharam muito legal a ideia, disseram até que já haviam pensado em criar utilizando o Jekyll ou outros geradores estáticos. Mas tiveram algumas pessoas que ficaram ainda com dúvidas de porque utilizar o Jekyll e não fazer na mão ou em um Wordpress. E teve um amigo de um grupo do qual eu participo que fez a seguinte postagem. +Bom, como disse no [primeiro post](https://willianjusten.com.br/making-of-parte-1/) e expliquei um pouco melhor no [segundo post](https://willianjusten.com.br/making-of-parte-2/), eu utilizei o [Jekyll](http://jekyllrb.com/), que é um gerador estático, para criar o meu Blog. Algumas pessoas acharam muito legal a ideia, disseram até que já haviam pensado em criar utilizando o Jekyll ou outros geradores estáticos. Mas tiveram algumas pessoas que ficaram ainda com dúvidas de porque utilizar o Jekyll e não fazer na mão ou em um Wordpress. E teve um amigo de um grupo do qual eu participo que fez a seguinte postagem. > Quero abrir aqui uma discussão sobre o furor gerado em cima do Jekyll. Gostaria que fosse deixado de lado a paixão e orgulho de ser desenvolvedor e fosse debatido o exato motivo de uso da ferramente e que me dissessem porque vocês a usam, se usam. @@ -48,4 +48,4 @@ Antes de mais nada, quero deixar claro, que achei a dúvida bastante pertinente `11)` Criação de urls amigáveis de modo prático, fácil e automático. -Se você tem mais alguma dúvida ou comentário legal a fazer a respeito disso, só mandar um comentário, discussões são sempre importantes na nossa área, para que possamos abrir mentes e obter mais conhecimento. \ No newline at end of file +Se você tem mais alguma dúvida ou comentário legal a fazer a respeito disso, só mandar um comentário, discussões são sempre importantes na nossa área, para que possamos abrir mentes e obter mais conhecimento. diff --git a/_posts/2015-01-13-como-usar-svg.md b/_posts/2015-01-13-como-usar-svg.md index 9e01c040..9cffae36 100644 --- a/_posts/2015-01-13-como-usar-svg.md +++ b/_posts/2015-01-13-como-usar-svg.md @@ -17,9 +17,9 @@ introduction: "Aqui irei explicar as diferentes formas de se inserir um SVG na s ## Introdução -Como eu havia falado no [último post](http://willianjusten.com.br/atualizacoes/), irei fazer uma série de posts ensinando tudo sobre SVG, sim, você vai cansar de me ver falando sobre SVG, até que você comece a usar!! =) +Como eu havia falado no [último post](https://willianjusten.com.br/atualizacoes/), irei fazer uma série de posts ensinando tudo sobre SVG, sim, você vai cansar de me ver falando sobre SVG, até que você comece a usar!! =) -O [primeiro post](http://willianjusten.com.br/por-que-usar-svg/), foi falando sobre o porquê de usar SVG. Lá eu falei várias coisas legais que podem ser feitas com essa tecnologia e eu aposto que vocês se impressionaram com alguma das habilidades que ela tem. +O [primeiro post](https://willianjusten.com.br/por-que-usar-svg/), foi falando sobre o porquê de usar SVG. Lá eu falei várias coisas legais que podem ser feitas com essa tecnologia e eu aposto que vocês se impressionaram com alguma das habilidades que ela tem. Agora que você já está ambientado com o que é SVG e porque usar o SVG nos seus sites e aplicações, só falta uma coisa: diff --git a/_posts/2015-01-16-onde-baixar-svg.md b/_posts/2015-01-16-onde-baixar-svg.md index 191ef468..e7f4f2b6 100644 --- a/_posts/2015-01-16-onde-baixar-svg.md +++ b/_posts/2015-01-16-onde-baixar-svg.md @@ -16,12 +16,12 @@ introduction: "Eu sou programador e não designer, como é que vou fazer essas c ## Índice da série -* [#1 - Por que usar SVG?](http://willianjusten.com.br/por-que-usar-svg/) -* [#2 - Como usar SVG](http://willianjusten.com.br/como-usar-svg/) +* [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) +* [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) ## Não sei desenhar, não posso usar SVG. -Vejo demais essa frase e é pura desculpa. Eu sou um péssimo desenhista e mesmo assim sou um evangelista do SVG. E por quê? Simples, existem milhares de lugares com SVG para baixar de graça ou a preços muito baixos. No [post anterior](http://willianjusten.com.br/como-usar-svg/), eu já expliquei como usar SVG, agora vou apresentar alguns lugares para pegarmos material para podermos começar a brincadeira. +Vejo demais essa frase e é pura desculpa. Eu sou um péssimo desenhista e mesmo assim sou um evangelista do SVG. E por quê? Simples, existem milhares de lugares com SVG para baixar de graça ou a preços muito baixos. No [post anterior](https://willianjusten.com.br/como-usar-svg/), eu já expliquei como usar SVG, agora vou apresentar alguns lugares para pegarmos material para podermos começar a brincadeira. ## Bancos de imagens @@ -71,4 +71,4 @@ No ano em que passou, as patterns bombaram e a famosa [técnica de polyart](http ## Agora não tem mais desculpa! -Já sabemos [por que usar SVG](http://willianjusten.com.br/por-que-usar-svg/), [como usar](http://willianjusten.com.br/como-usar-svg/) e agora onde baixar SVG. Se você ainda der desculpa para não usar... some daqui. Nos próximos posts iremos começar a colocar a "mão na massa" e trabalhar =) \ No newline at end of file +Já sabemos [por que usar SVG](https://willianjusten.com.br/por-que-usar-svg/), [como usar](https://willianjusten.com.br/como-usar-svg/) e agora onde baixar SVG. Se você ainda der desculpa para não usar... some daqui. Nos próximos posts iremos começar a colocar a "mão na massa" e trabalhar =) diff --git a/_posts/2015-01-20-a-estrutura-do-svg.md b/_posts/2015-01-20-a-estrutura-do-svg.md index d4b2d811..acc61f32 100644 --- a/_posts/2015-01-20-a-estrutura-do-svg.md +++ b/_posts/2015-01-20-a-estrutura-do-svg.md @@ -17,9 +17,9 @@ introduction: "Saiba como o SVG funciona de verdade, seus elementos, alguns de s ## Índice da série -* [#1 - Por que usar SVG?](http://willianjusten.com.br/por-que-usar-svg/) -* [#2 - Como usar SVG](http://willianjusten.com.br/como-usar-svg/) -* [#3 - Onde Baixar SVG](http://willianjusten.com.br/onde-baixar-svg/) +* [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) +* [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) +* [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) ## Introdução diff --git a/_posts/2015-01-21-perguntas-e-respostas-jekyll.md b/_posts/2015-01-21-perguntas-e-respostas-jekyll.md index 3fe68e36..3dcfadf8 100644 --- a/_posts/2015-01-21-perguntas-e-respostas-jekyll.md +++ b/_posts/2015-01-21-perguntas-e-respostas-jekyll.md @@ -15,7 +15,7 @@ introduction: "FAQ: Algumas dúvidas comuns sobre o Jekyll. Entenda melhor como ## Introdução -Desde a criação do meu blog e dos posts [making of - parte 1](http://willianjusten.com.br/making-of-parte-1/) e [making of - parte 2](http://willianjusten.com.br/making-of-parte-2/), apareceu um grande número de pessoas mais interessadas em Jekyll e o modelo de gerador estático. +Desde a criação do meu blog e dos posts [making of - parte 1](https://willianjusten.com.br/making-of-parte-1/) e [making of - parte 2](https://willianjusten.com.br/making-of-parte-2/), apareceu um grande número de pessoas mais interessadas em Jekyll e o modelo de gerador estático. É claro que com esse interesse, surgiram várias dúvidas, que não puderam ser explicadas somente com os dois posts. Tiveram várias pessoas que vieram me perguntar alguns detalhes em particular e o [William Goulart](https://github.com/wgoulart) colocou [essa issue](https://github.com/LFeh/1-post-por-dia/issues/20) no nosso [repositório destinado a dúvidas e pedidos de posts](https://github.com/LFeh/1-post-por-dia/), que o grande [Luiz Felipe](https://github.com/LFeh) criou. diff --git a/_posts/2015-01-22-atomic-design-no-svg.md b/_posts/2015-01-22-atomic-design-no-svg.md index c9998c2e..50baaa81 100644 --- a/_posts/2015-01-22-atomic-design-no-svg.md +++ b/_posts/2015-01-22-atomic-design-no-svg.md @@ -17,10 +17,10 @@ introduction: "Neste artigo iremos saber mais sobre a estruturação de um SVG, ## Índice da série -* [#1 - Por que usar SVG?](http://willianjusten.com.br/por-que-usar-svg/) -* [#2 - Como usar SVG](http://willianjusten.com.br/como-usar-svg/) -* [#3 - Onde Baixar SVG](http://willianjusten.com.br/onde-baixar-svg/) -* [#4 - A Estrutura do SVG](http://willianjusten.com.br/a-estrutura-do-svg/) +* [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) +* [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) +* [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) +* [#4 - A Estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/) ## Introdução diff --git a/_posts/2015-01-29-dominio-proprio-no-github-pages.md b/_posts/2015-01-29-dominio-proprio-no-github-pages.md index f2c0318b..f07cb691 100644 --- a/_posts/2015-01-29-dominio-proprio-no-github-pages.md +++ b/_posts/2015-01-29-dominio-proprio-no-github-pages.md @@ -15,7 +15,7 @@ twitter_text: 'Como ter Domínio Proprio no Github Pages' introduction: "Um tutorial passo a passo de como colocar um domínio próprio no Github Pages e já sair com seu blog personalizado." --- -Como já disse no [Making of - Parte 1](http://willianjusten.com.br/making-of-parte-1/) e no [Making of - Parte 2](http://willianjusten.com.br/making-of-parte-2/), o meu blog é hospedado no github pages. E não é só o meu, mas vários, um que está fazendo muito sucesso agora é o blog do [Fernando Daciuk](http://blog.da2k.com.br/), que é feito no [Hexo](https://hexo.io/), mas também hospedado no github pages. +Como já disse no [Making of - Parte 1](https://willianjusten.com.br/making-of-parte-1/) e no [Making of - Parte 2](https://willianjusten.com.br/making-of-parte-2/), o meu blog é hospedado no github pages. E não é só o meu, mas vários, um que está fazendo muito sucesso agora é o blog do [Fernando Daciuk](http://blog.da2k.com.br/), que é feito no [Hexo](https://hexo.io/), mas também hospedado no github pages. **Ou seja, esse processo é para qualquer tipo de site feito no github pages, através de qualquer ferramenta!!** diff --git a/_posts/2015-02-07-devo-fazer-faculdade.md b/_posts/2015-02-07-devo-fazer-faculdade.md index 4b44adf4..b8a86232 100644 --- a/_posts/2015-02-07-devo-fazer-faculdade.md +++ b/_posts/2015-02-07-devo-fazer-faculdade.md @@ -20,7 +20,7 @@ Ontem conversando com o [Fernando Daciuk](http://blog.da2k.com.br/), começamos ## Histórico -Como disse no meu [primeiro post](http://willianjusten.com.br/making-of-parte-1/), meu primeiro curso foi bem diferente do que eu faço atualmente, foi Química Industrial, mas vou falar um pouco dele, porque foi fundamental para mim. Eu tinha 17 anos quando passei para a faculdade, resolvi me mudar de cidade (Petrópolis -> Niterói) só para poder fazer o curso. Foi uma experiência completamente nova, eu nunca tinha saído de casa, ainda mais tão novo e eu estudava em lugares bem pequenos, quando vi a imensidão da UFF, com seus inúmeros Campus, foi algo bastante diferente para mim. +Como disse no meu [primeiro post](https://willianjusten.com.br/making-of-parte-1/), meu primeiro curso foi bem diferente do que eu faço atualmente, foi Química Industrial, mas vou falar um pouco dele, porque foi fundamental para mim. Eu tinha 17 anos quando passei para a faculdade, resolvi me mudar de cidade (Petrópolis -> Niterói) só para poder fazer o curso. Foi uma experiência completamente nova, eu nunca tinha saído de casa, ainda mais tão novo e eu estudava em lugares bem pequenos, quando vi a imensidão da UFF, com seus inúmeros Campus, foi algo bastante diferente para mim. Sempre fui um cara que passava em tudo com grande facilidade, fiz o vestibular praticamente sem me preparar como meus amigos e mesmo assim passei em várias faculdades e principalmente a que eu queria, que era a UFF. E esse foi o meu primeiro baque na faculdade. Meu primeiro período teve uma das matérias conhecidas como a mais carrasca de todas, que é Cálculo I e é claro que eu levei bomba na primeira prova, mas não foi coisa pouca não, eu tirei 0,3 de 10,0. Aquilo feriu demais o meu orgulho e a partir dali comecei a criar uma pequena rotina de estudos e fui um dos poucos da turma que conseguiu passar. Isso me ajudou a ver a importância dos estudos, dedicação e foco, coisa que eu nem dava bola antes. @@ -94,4 +94,3 @@ Durante a criação do post, acabei achando alguns vídeos legais e excelentes p * [O que aprendi em Harvard - Jorge Paulo Lemann](https://www.youtube.com/watch?v=rhaeYj7cln0) - **ASSISTA** * [Faculdade de informática. fazer ou não fazer? - Leandro Oriente](http://leandrooriente.com/faculdade-de-informatica-fazer-ou-nao-fazer/) * [Devo fazer faculdade? - Fabio Akita](http://www.akitaonrails.com/2009/04/17/off-topic-devo-fazer-faculdade#.VNYHTFPF88Y) - diff --git a/_posts/2015-02-24-como-se-tornar-um-desenvolvedor-front-end.md b/_posts/2015-02-24-como-se-tornar-um-desenvolvedor-front-end.md index 2311a0ee..571e48fc 100644 --- a/_posts/2015-02-24-como-se-tornar-um-desenvolvedor-front-end.md +++ b/_posts/2015-02-24-como-se-tornar-um-desenvolvedor-front-end.md @@ -122,7 +122,7 @@ Estava achando que ser desenvolvedor front end é moleza? Como disse o [Nicholas ![Um tweet falando sobre como a profissão de frontender é difícil](/assets/img/quero-ser-desenvolvedor-frontend/twitter.png) -Cada dia uma nova tecnologia é lançada e precisamos nos manter sempre atualizados, a questão é, como fazer tudo isso? Fiz um post há um tempo atrás falando sobre [técnicas de aprendizado](http://willianjusten.com.br/tecnicas-de-aprendizado/), que podem ajudar um pouco nessa longa caminhada. +Cada dia uma nova tecnologia é lançada e precisamos nos manter sempre atualizados, a questão é, como fazer tudo isso? Fiz um post há um tempo atrás falando sobre [técnicas de aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/), que podem ajudar um pouco nessa longa caminhada. Vou separar aqui as principais áreas que precisamos estudar, o porquê delas e alguns links para auxiliá-los no estudo. @@ -305,7 +305,7 @@ E qual a importância disso? Estar bem posicionado nos mecanismos de busca lhe p Nem todo desenvolvedor Front End precisa ser o mestre de tudo em SEO, podemos deixar isso para especialistas, mas algumas informações básicas é importante também. - [Agência Mestre - MestreSEO](https://www.agenciamestre.com/) -- [Como melhorar meu SEO?](http://willianjusten.com.br/como-melhorar-meu-seo/) +- [Como melhorar meu SEO?](https://willianjusten.com.br/como-melhorar-meu-seo/) - [Dicas de SEO para Front-end](https://tableless.com.br/dicas-de-seo-para-front-end/) --- diff --git a/_posts/2015-03-06-sistemas-de-icones-em-svg.md b/_posts/2015-03-06-sistemas-de-icones-em-svg.md index 927809de..4a00a83d 100644 --- a/_posts/2015-03-06-sistemas-de-icones-em-svg.md +++ b/_posts/2015-03-06-sistemas-de-icones-em-svg.md @@ -18,11 +18,11 @@ introduction: "Como dizem 'Uma imagem vale mais que mil palavras' e isso é um f ## Índice da série -* [#1 - Por que usar SVG?](http://willianjusten.com.br/por-que-usar-svg/) -* [#2 - Como usar SVG](http://willianjusten.com.br/como-usar-svg/) -* [#3 - Onde Baixar SVG](http://willianjusten.com.br/onde-baixar-svg/) -* [#4 - A Estrutura do SVG](http://willianjusten.com.br/a-estrutura-do-svg/) -* [#5 - Atomic Design no SVG - g, use, defs, symbol](http://willianjusten.com.br/atomic-design-no-svg/) +* [#1 - Por que usar SVG?](https://willianjusten.com.br/por-que-usar-svg/) +* [#2 - Como usar SVG](https://willianjusten.com.br/como-usar-svg/) +* [#3 - Onde Baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) +* [#4 - A Estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/) +* [#5 - Atomic Design no SVG - g, use, defs, symbol](https://willianjusten.com.br/atomic-design-no-svg/) ## Introdução @@ -71,7 +71,7 @@ Basicamente um ícone desenhado no illustrator e exportado para o formato SVG. > Ahhh, mas eu não sei desenhar não, para icon font eu baixo o [Font Awesome](https://fontawesome.com/) e vem tudo pronto. - Você mesmo! -Beleza campeão, mas com SVG você pode fazer o mesmo e até melhor, se quiser, dá uma olhada nesse post, [onde baixar SVG](http://willianjusten.com.br/onde-baixar-svg/) e você irá ver que tem muita coisa legal =) +Beleza campeão, mas com SVG você pode fazer o mesmo e até melhor, se quiser, dá uma olhada nesse post, [onde baixar SVG](https://willianjusten.com.br/onde-baixar-svg/) e você irá ver que tem muita coisa legal =) **Vantagens** @@ -116,7 +116,7 @@ Clicando em `Generate SVG/PNG` conforme indicado no canto inferior esquerdo da i ![Passo 3](/assets/img/svg-icons/passo-3.png) -Segue abaixo o conteúdo do zip baixado, indicando os 3 ícones em PNG e em SVG separados e no formato de `defs`, que já é a união de todos os ícones num arquivo só e já utilizando o elemento `defs`, que permite adicionar os ícones, sem renderizá-los diretamente. Eu fiz um post explicando um pouco sobre algumas dessas propriedades do SVG, se não estiver familiriazado, dê uma lidinha no artigo: [#5 - Atomic Design no SVG - g, use, defs, symbol](http://willianjusten.com.br/atomic-design-no-svg/) +Segue abaixo o conteúdo do zip baixado, indicando os 3 ícones em PNG e em SVG separados e no formato de `defs`, que já é a união de todos os ícones num arquivo só e já utilizando o elemento `defs`, que permite adicionar os ícones, sem renderizá-los diretamente. Eu fiz um post explicando um pouco sobre algumas dessas propriedades do SVG, se não estiver familiriazado, dê uma lidinha no artigo: [#5 - Atomic Design no SVG - g, use, defs, symbol](https://willianjusten.com.br/atomic-design-no-svg/) ![Arquivos](/assets/img/svg-icons/arquivos.png) diff --git a/_posts/2015-03-07-estilizando-svg-com-css-parte-1.md b/_posts/2015-03-07-estilizando-svg-com-css-parte-1.md index f4cefd5f..e08bfbff 100644 --- a/_posts/2015-03-07-estilizando-svg-com-css-parte-1.md +++ b/_posts/2015-03-07-estilizando-svg-com-css-parte-1.md @@ -18,7 +18,7 @@ introduction: "Aprenda as diferentes formas de mudar o estilo de um SVG somente ## Índice da série -Uffa, tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](http://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. +Uffa, tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. Espero voltar a escrever com mais frequência, até porque tem muita coisa legal para aprendermos em SVG ainda! @@ -28,7 +28,7 @@ Também pretendo escrever menos e colocar mais exemplos, para facilitar o entend Como eu sempre escrevo escutando alguma coisa, vou sempre falar o que estou ouvindo nos meus posts, hoje é dia de [Faded Paper Figures](http://www.fadedpaperfigures.com/). -No [artigo passado](http://willianjusten.com.br/sistemas-de-icones-em-svg/) eu falei que uma das vantagens do SVG é poder estilizá-lo via CSS e hoje vamos falar um pouquinho sobre essa grande vantagem. +No [artigo passado](https://willianjusten.com.br/sistemas-de-icones-em-svg/) eu falei que uma das vantagens do SVG é poder estilizá-lo via CSS e hoje vamos falar um pouquinho sobre essa grande vantagem. ## Propriedades de Estilo diff --git a/_posts/2015-03-08-estilizando-svg-com-css-parte-2.md b/_posts/2015-03-08-estilizando-svg-com-css-parte-2.md index c58c822f..dad3a8d9 100644 --- a/_posts/2015-03-08-estilizando-svg-com-css-parte-2.md +++ b/_posts/2015-03-08-estilizando-svg-com-css-parte-2.md @@ -18,15 +18,15 @@ introduction: "Aprenda algumas propriedades que o SVG e como trabalhar com elas. ## Índice da série -Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](http://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. +Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. ## Introdução Hoje resolvi que seria o dia de escutar clássicos e estou ouvindo [Pink Floyd](http://www.pinkfloyd.com/), para ser mais específico o [The Dark Side of The Moon - 2011 Remastered Version](http://open.spotify.com/album/3a0UOgDWw2pTajw85QPMiz), se quiser clica ali e segue junto =) -No [post anterior](http://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu expliquei um pouco sobre quais propriedades o SVG possui, quais ele compartilha com o CSS e quais as formas de estilizar. Hoje vou mostrar um pouco de algumas propriedades na prática. +No [post anterior](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu expliquei um pouco sobre quais propriedades o SVG possui, quais ele compartilha com o CSS e quais as formas de estilizar. Hoje vou mostrar um pouco de algumas propriedades na prática. -**Nota**: irei utilizar alguns conceitos já explicados e mostrados em outros posts, então caso você se perca em alguma parte do código, dá uma olhada nos [posts anteriores](http://willianjusten.com.br/series/) +**Nota**: irei utilizar alguns conceitos já explicados e mostrados em outros posts, então caso você se perca em alguma parte do código, dá uma olhada nos [posts anteriores](https://willianjusten.com.br/series/) ## Propriedade Fill diff --git a/_posts/2015-04-03-colorindo-em-svg.md b/_posts/2015-04-03-colorindo-em-svg.md index a4d4bc12..f1ec4636 100644 --- a/_posts/2015-04-03-colorindo-em-svg.md +++ b/_posts/2015-04-03-colorindo-em-svg.md @@ -18,7 +18,7 @@ introduction: "Vamos voltar a ser crianças e colorir as coisas! Aprenda como co ## Índice da série -Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](http://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. +Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. ## Introdução @@ -34,7 +34,7 @@ As cores estão em tudo e a boa escolha delas irá influir diretamente na beleza Eu costumo dizer que uma das melhores vantagens do SVG é poder manipular as cores, dessa forma podemos criar ícones únicos, ter várias logos diferentes no mesmo site, mas vindo de uma só fonte, dentre outras coisas mega legais. -No post [Estilizando SVG com CSS - Parte 1](http://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu falei das formas de se estilizar e no post [Estilizando SVG com CSS - Parte 2](http://willianjusten.com.br/estilizando-svg-com-css-parte-2/) eu mostrei algumas propriedades e como usá-las. Agora vamos a prática, que é mais legal. +No post [Estilizando SVG com CSS - Parte 1](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) eu falei das formas de se estilizar e no post [Estilizando SVG com CSS - Parte 2](https://willianjusten.com.br/estilizando-svg-com-css-parte-2/) eu mostrei algumas propriedades e como usá-las. Agora vamos a prática, que é mais legal. ### Mas e como funciona? @@ -72,7 +72,7 @@ Relaxa, com o SVG seus problemas acabaram! Basta termos uma só imagem em SVG e Para funcionar, criamos uma imagem SVG padrão sem estilos, dentro do elemento `symbol`, que irá nos permitir trabalhar com diferentes tamanhos e utilizamos o elemento `use` para chamar a logo, dentro de alguns estilos diferentes. -Se você se esqueceu como funciona o `symbol` e o `use`, dá uma lidinha no post [Atomic Design no SVG](http://willianjusten.com.br/atomic-design-no-svg/). +Se você se esqueceu como funciona o `symbol` e o `use`, dá uma lidinha no post [Atomic Design no SVG](https://willianjusten.com.br/atomic-design-no-svg/). A ideia é possuirmos um só componente reutilizável e independente, assim podemos brincar como quisermos =) diff --git a/_posts/2015-04-04-criando-svg-responsivo.md b/_posts/2015-04-04-criando-svg-responsivo.md index 384950eb..e07c7089 100644 --- a/_posts/2015-04-04-criando-svg-responsivo.md +++ b/_posts/2015-04-04-criando-svg-responsivo.md @@ -18,7 +18,7 @@ introduction: "Hoje em dia com a variedade de telas que temos, o desafio é dar ## Índice da série -Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](http://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. +Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. ## Introdução @@ -74,7 +74,7 @@ Se a `viewport` e `viewBox` não possuirem as mesmas dimensões de width e heigh ## Adicionando o SVG -Tendo feito essas especificações, basta inserir o seu SVG onde quiser. E como eu disse no post [Como usar SVG](http://willianjusten.com.br/como-usar-svg/), existem algumas maneiras de se utilizar SVG e em todas elas é possível criar um SVG fluido, uns são nativos e outros precisam de hack para IEca... Mas isso não é problema para nós! +Tendo feito essas especificações, basta inserir o seu SVG onde quiser. E como eu disse no post [Como usar SVG](https://willianjusten.com.br/como-usar-svg/), existem algumas maneiras de se utilizar SVG e em todas elas é possível criar um SVG fluido, uns são nativos e outros precisam de hack para IEca... Mas isso não é problema para nós! ### Como imagem, object e embed @@ -163,7 +163,7 @@ Para a primeira diferenciação, queremos retirar os cristais amarelo e verde, v ### Corte 2 -Para o corte 2, queremos retirar também o cristal grande e para que a logo permaneça visível, queremos deixar o texto na cor roxa. Para isso é só usar a propriedade `fill`, como vimos no [post anterior](http://willianjusten.com.br/colorindo-em-svg/). +Para o corte 2, queremos retirar também o cristal grande e para que a logo permaneça visível, queremos deixar o texto na cor roxa. Para isso é só usar a propriedade `fill`, como vimos no [post anterior](https://willianjusten.com.br/colorindo-em-svg/). ```css @media (max-width: 480px) { diff --git a/_posts/2015-05-24-usando-svg-sprites.md b/_posts/2015-05-24-usando-svg-sprites.md index 3c33567b..8e75e097 100644 --- a/_posts/2015-05-24-usando-svg-sprites.md +++ b/_posts/2015-05-24-usando-svg-sprites.md @@ -18,7 +18,7 @@ introduction: "Já foi provado que o SVG substitui icon fonts, mas e Sprites? Ap ## Índice da série -Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](http://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. +Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então para facilitar, basta ir em [series](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. ## Introdução @@ -36,7 +36,7 @@ Além desses benefícios, acho muito mais fácil de organizar os ícones, afinal ## Escolhendo os ícones -O primeiro de tudo é escolher seus ícones de preferência e montar o arquivo SVG. Se você não sabe desenhar e não tem ideia de onde baixar, fiz um [post falando sobre vários lugares para baixar](http://willianjusten.com.br/onde-baixar-svg/). +O primeiro de tudo é escolher seus ícones de preferência e montar o arquivo SVG. Se você não sabe desenhar e não tem ideia de onde baixar, fiz um [post falando sobre vários lugares para baixar](https://willianjusten.com.br/onde-baixar-svg/). Para o post eu utilizei o seguinte [conjunto de ícones](http://br.freepik.com/vetores-gratis/animais-vector-set-plana_715458.htm). @@ -68,7 +68,7 @@ Para cada ícone precisaremos criar uma `view` bem simples, colocando cada ícon Se você notar, a largura, altura e posição y se mantém e só modificamos a posição no eixo x, que representa uma imagem ao lado da outra. -Com o arquivo todo pronto, eu salvei com o nome de `animals-sprite.svg` dentro da minha pasta `/assets/img/`. Se quiser dar uma olhada diretamente na imagem, segue [link](http://willianjusten.com.br/assets/img/animals-sprite.svg). +Com o arquivo todo pronto, eu salvei com o nome de `animals-sprite.svg` dentro da minha pasta `/assets/img/`. Se quiser dar uma olhada diretamente na imagem, segue [link](https://willianjusten.com.br/assets/img/animals-sprite.svg). Tendo a imagem pronta, fica simples de usar, segue um exemplo: @@ -137,7 +137,7 @@ Dessa forma não há necessidade de se criar views, bastando somente colocar `id E para usar cada ícone, basta chamar a imagem seguida da `id`. -Coelhinho +Coelhinho ```html Coelhinho diff --git a/_posts/2015-07-01-animacoes-em-svg-com-css.md b/_posts/2015-07-01-animacoes-em-svg-com-css.md index 736f69f7..cb9f2b45 100644 --- a/_posts/2015-07-01-animacoes-em-svg-com-css.md +++ b/_posts/2015-07-01-animacoes-em-svg-com-css.md @@ -18,7 +18,7 @@ introduction: "Veja como criar diferentes animações para o SVG usando só CSS3 ## Índice da série -Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então, para facilitar, basta ir em [séries](http://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. +Tenho escrito bastante sobre SVG que agora os links cresceram e ficar listando todos o tempo todo aqui já vai ficar ruim, então, para facilitar, basta ir em [séries](https://willianjusten.com.br/series/) e lá estarão todos os meus links sobre SVG. ## Introdução @@ -29,15 +29,15 @@ Como de costume, a trilha sonora enquanto escrevo esse post é uma playlist cham O post de hoje será em forma de mini-tutorial, então já vou passando logo os exemplos que faremos hoje. * [Airplane Loader SVG](https://willianjusten.github.io/svg-animation-css/loader.html) -* [Earth SVG](http://willianjusten.com.br/svg-animation-css/) +* [Earth SVG](https://willianjusten.com.br/svg-animation-css/) * [Repositório no Github](https://github.com/willianjusten/svg-animation-css) ## Relembrando... -Uma das grandes vantagens do SVG é que ele é um código xml, que pode ser facilmente manipulado. Esse código possui uma estrutura bem definida, com elementos bases e se você quiser lembrar um pouquinho, basta ler [A estrutura do SVG](http://willianjusten.com.br/a-estrutura-do-svg/). +Uma das grandes vantagens do SVG é que ele é um código xml, que pode ser facilmente manipulado. Esse código possui uma estrutura bem definida, com elementos bases e se você quiser lembrar um pouquinho, basta ler [A estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/). -E como irei fazer animações usando CSS, é bom que você já tenha lido as formas de se [estilizar o SVG usando CSS](http://willianjusten.com.br/estilizando-svg-com-css-parte-1/) e se quiser, pode também se aprofundar em alguns dos [estilos especificos do SVG](http://willianjusten.com.br/estilizando-svg-com-css-parte-2/). +E como irei fazer animações usando CSS, é bom que você já tenha lido as formas de se [estilizar o SVG usando CSS](https://willianjusten.com.br/estilizando-svg-com-css-parte-1/) e se quiser, pode também se aprofundar em alguns dos [estilos especificos do SVG](https://willianjusten.com.br/estilizando-svg-com-css-parte-2/). ### Passo 1 - Obtendo um SVG @@ -46,7 +46,7 @@ Para este tutorial, eu vou utilizar 2 SVG diferentes. Um contendo somente um ele Os arquivos foram [exemplo 1](http://www.freepik.com/free-vector/airplane-vector-template-free_714802.htm) e [exemplo 2](http://www.freepik.com/free-vector/world-travel-vector-free-template_714008.htm). -Se você quiser, tem o link de [onde baixar svg?](http://willianjusten.com.br/onde-baixar-svg/). +Se você quiser, tem o link de [onde baixar svg?](https://willianjusten.com.br/onde-baixar-svg/). ### Passo 2 - Limpando o vetor diff --git a/_posts/2015-07-10-comecando-com-react.md b/_posts/2015-07-10-comecando-com-react.md index 6135b3bb..db085580 100644 --- a/_posts/2015-07-10-comecando-com-react.md +++ b/_posts/2015-07-10-comecando-com-react.md @@ -113,4 +113,4 @@ Essa foi só a primeira parte, para entendermos pelo menos um pouco do que é, o ## Veja mais posts -[Série sobre React](http://willianjusten.com.br/series/#aprendendo-reactjs) +[Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs) diff --git a/_posts/2015-07-14-como-usar-o-reactjs.md b/_posts/2015-07-14-como-usar-o-reactjs.md index 6988e7c3..dcd8bf3c 100644 --- a/_posts/2015-07-14-como-usar-o-reactjs.md +++ b/_posts/2015-07-14-como-usar-o-reactjs.md @@ -229,4 +229,4 @@ Bom, agora que já sabemos para que serve e diversas formas de usar, já poderem ## Veja mais posts -[Série sobre React](http://willianjusten.com.br/series/#aprendendo-reactjs) +[Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs) diff --git a/_posts/2015-07-17-o-basico-da-api-do-reactjs.md b/_posts/2015-07-17-o-basico-da-api-do-reactjs.md index 1e5f8ae5..2866dc60 100644 --- a/_posts/2015-07-17-o-basico-da-api-do-reactjs.md +++ b/_posts/2015-07-17-o-basico-da-api-do-reactjs.md @@ -20,7 +20,7 @@ introduction: "Aprenda um pouco mais sobre a API do React e como começar a brin Para animar um pouco, a trilha sonora escolhida é o [novo cd do Tame Impala - Currents](https://open.spotify.com/album/0rxKf57PZvWEoU8v3m5W2q), aproveitando que lançou essa semana. -Como prometido, vou dar continuidade a série de posts sobre ReactJS e para acompanhar tanto essa série, como outras, é só ir no link [series](http://willianjusten.com.br/series/). +Como prometido, vou dar continuidade a série de posts sobre ReactJS e para acompanhar tanto essa série, como outras, é só ir no link [series](https://willianjusten.com.br/series/). Nos posts anteriores eu falei um pouco do que é o React e as formas de utilizá-lo em um projeto, agora eu irei mostrar e explicar um pouco da API do React para podermos começar a brincadeira. @@ -44,7 +44,7 @@ render( O método `render` é um dos métodos mais importantes do React e que será responsável por renderizar elementos. Ele recebe 3 parâmetros, que são o elemento a ser criado, o local onde será inserido no DOM e uma função de callback, que é chamada logo após a renderização. -Um detalhe importante aqui é que, caso o elemento já exista no DOM, o render somente irá atualizar as partes novas no DOM, seguindo o algoritmo de diff, comentado no [primeiro post](http://willianjusten.com.br/comecando-com-react/). +Um detalhe importante aqui é que, caso o elemento já exista no DOM, o render somente irá atualizar as partes novas no DOM, seguindo o algoritmo de diff, comentado no [primeiro post](https://willianjusten.com.br/comecando-com-react/). Segue um [vídeo em inglês](http://learnreact.com/lessons/1-render-getting-started), explicando este método. @@ -270,6 +270,4 @@ Tem um curso do [Fernando Daciuk](https://twitter.com/fdaciuk) que é foda para ## Veja mais posts -[Série sobre React](http://willianjusten.com.br/series/#aprendendo-reactjs) - - +[Série sobre React](https://willianjusten.com.br/series/#aprendendo-reactjs) diff --git a/_posts/2015-07-19-como-criar-secoes-fullscreen-com-css.md b/_posts/2015-07-19-como-criar-secoes-fullscreen-com-css.md index e4678e38..f0bdfe68 100644 --- a/_posts/2015-07-19-como-criar-secoes-fullscreen-com-css.md +++ b/_posts/2015-07-19-como-criar-secoes-fullscreen-com-css.md @@ -22,8 +22,8 @@ O post de hoje é extra, ele não era esperado, mas recebi um email de mais uma Se você quiser pular já para o resultado está aqui: -* [Usando CSS simples](http://willianjusten.com.br/labs/full-screen-sections/height-100.html) -* [Usando Viewport Units](http://willianjusten.com.br/labs/full-screen-sections/viewport.html) +* [Usando CSS simples](https://willianjusten.com.br/labs/full-screen-sections/height-100.html) +* [Usando Viewport Units](https://willianjusten.com.br/labs/full-screen-sections/viewport.html) ## Dúvida @@ -90,7 +90,7 @@ header { } ``` -Segue um [exemplo](http://willianjusten.com.br/labs/full-screen-sections/height-100.html) de como ficará no final. O código está, é claro, no meu [github](https://github.com/willianjusten/labs/blob/gh-pages/full-screen-sections/height-100.html). Lembrando que é um código experimental, sempre separe o css do seu html, use meta-tags, classes bem definidas, wai-aria e etc =) +Segue um [exemplo](https://willianjusten.com.br/labs/full-screen-sections/height-100.html) de como ficará no final. O código está, é claro, no meu [github](https://github.com/willianjusten/labs/blob/gh-pages/full-screen-sections/height-100.html). Lembrando que é um código experimental, sempre separe o css do seu html, use meta-tags, classes bem definidas, wai-aria e etc =) Se você se perguntar, mas como centralizou o texto, tem um [site irado](http://howtocenterincss.com/) que ajuda como centralizar qualquer coisa só com CSS. @@ -119,7 +119,7 @@ Para termos uma altura de 80% da tela usando o viewport units é bastante simple } ``` -Basta só essa linha para tudo ficar perfeito. Se você quiser ver um exemplo, está aqui o [link](http://willianjusten.com.br/labs/full-screen-sections/viewport.html) e o [código no github](https://github.com/willianjusten/labs/blob/gh-pages/full-screen-sections/viewport.html). +Basta só essa linha para tudo ficar perfeito. Se você quiser ver um exemplo, está aqui o [link](https://willianjusten.com.br/labs/full-screen-sections/viewport.html) e o [código no github](https://github.com/willianjusten/labs/blob/gh-pages/full-screen-sections/viewport.html). ## Conclusão diff --git a/_posts/2015-07-21-animando-svg-com-smil.md b/_posts/2015-07-21-animando-svg-com-smil.md index 124a5f22..e2e76c13 100644 --- a/_posts/2015-07-21-animando-svg-com-smil.md +++ b/_posts/2015-07-21-animando-svg-com-smil.md @@ -20,7 +20,7 @@ introduction: "Aprenda a criar animações usando só SVG e nada mais, através Enquanto escrevo esse post vou ouvindo [Deftones](https://open.spotify.com/artist/6Ghvu1VvMGScGpOUJBAHNH), mudar para um som mais pesado para animar um pouco. -Já faz um tempinho que não escrevia sobre SVG, então vou dar uma quebra nos outros posts e voltar a falar um pouquinho sobre. Se você ainda não conhece SVG sai daqui, dá uma olhadinha na [série](http://willianjusten.com.br/series/) que eu escrevo nesse blog. +Já faz um tempinho que não escrevia sobre SVG, então vou dar uma quebra nos outros posts e voltar a falar um pouquinho sobre. Se você ainda não conhece SVG sai daqui, dá uma olhadinha na [série](https://willianjusten.com.br/series/) que eu escrevo nesse blog. Esse post foi baseado num apanhado de informações de vários cantos: @@ -33,7 +33,7 @@ Esse post foi baseado num apanhado de informações de vários cantos: Não é de hoje que animações são as queridinhas nos sites e apps, seja pela melhoria em algum aspecto na usabilidade, seja pela beleza que a animação pode proporcionar. -O SVG é tão incrível que permite vários tipos de animações, já falei sobre [animações usando css](http://willianjusten.com.br/animacoes-em-svg-com-css/) e agora irei falar sobre um tipo específico do SVG, que é a animação usando SMIL. +O SVG é tão incrível que permite vários tipos de animações, já falei sobre [animações usando css](https://willianjusten.com.br/animacoes-em-svg-com-css/) e agora irei falar sobre um tipo específico do SVG, que é a animação usando SMIL. ## Mas o que é SMIL? É de comer? diff --git a/_posts/2015-07-24-background-fixo-com-css.md b/_posts/2015-07-24-background-fixo-com-css.md index f627e41d..20e361a8 100644 --- a/_posts/2015-07-24-background-fixo-com-css.md +++ b/_posts/2015-07-24-background-fixo-com-css.md @@ -20,13 +20,13 @@ Mais um post extra que venho fazendo enquanto subo a serra em direção a minha ## O que vamos fazer? -Seguindo um pouco daquele post sobre [Seções em Fullscreen](http://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/), resolvi dar uma melhorada naquela técnica incluindo outras técnicas. A ideia desses tipos de posts é mostrar alguns conceitos simples e propriedades do css, para que iniciantes conheçam utilidades práticas de algumas coisas. +Seguindo um pouco daquele post sobre [Seções em Fullscreen](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/), resolvi dar uma melhorada naquela técnica incluindo outras técnicas. A ideia desses tipos de posts é mostrar alguns conceitos simples e propriedades do css, para que iniciantes conheçam utilidades práticas de algumas coisas. **Lembrando que são experimentos, verifique a compatibilidade e o suporte que deseja ter.** Para quem gosta de ver o resultado antes mesmo de começar apressadinho =p, segue aqui o link do experimento: -* [DEMO](http://willianjusten.com.br/labs/background-fixo-css/) +* [DEMO](https://willianjusten.com.br/labs/background-fixo-css/) ## Montando o Markup @@ -68,13 +68,13 @@ Para cada frase eu criei uma seção e de acordo com os pesos que eu desejava pa ### Seções com altura total -Primeiro, para ter seções ocupando 100% da viewport, vou fazer o mesmo trabalho do [post anterior](http://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/), ou seja, irei [viewport units](http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/). E para os espaçamentos e fontes, resolvi brincar com as viewport units também, porém, trabalhando com a largura da tela `vw`. +Primeiro, para ter seções ocupando 100% da viewport, vou fazer o mesmo trabalho do [post anterior](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/), ou seja, irei [viewport units](http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/). E para os espaçamentos e fontes, resolvi brincar com as viewport units também, porém, trabalhando com a largura da tela `vw`. ```css -section { - height: 100vh; +section { + height: 100vh; padding: 2vw; - font-size: 4vw; + font-size: 4vw; } ``` @@ -83,19 +83,19 @@ section { Para centralizar os textos, também resolvi brincar dessa vez com Flexbox, se quiser aprender sobre tem esse [artigo fodão](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) que ensina tudo. Primeiro defino o `display: flex` para informar que vou usar esse modelo de layout. Depois defino que quero organizar o layout com `flex-direction: column`, que no caso irá organizar de de cima para baixo. E então uso `align-itens: center` para ter meu texto centralizado verticalmente. ```css -section { +section { display: flex; flex-direction: column; align-items: center; justify-content: center; - text-align: center; + text-align: center; } ``` Para a primeira seção o seu título precisava de um destaque maior, resolvi usar o pseudo-seletor `first-of-type` para pegar só essa primeira seção. Lembrando que pseudo-seletores não são tão performáticos quanto classes, mas em momentos que você não pode utilizar classes diretamente, se tornam ótimas soluções. ```css -section:first-of-type { +section:first-of-type { text-transform: uppercase; font-size: 7vw; } @@ -117,19 +117,19 @@ O `backgroung-size` será responsável por fazer a imagem ocupar toda a área qu Como são vários backgrounds diferentes, resolvi brincar com outro pseudo-seletor que é o `nth-child(n)`, ele é responsável por selecionar elementos de acordo com o valor de `n` passado. Aproveitei que as seções ímpares são aquelas com letra branca e sombra, usei o `nth-of-type(odd)`, para assim, selecionar os números ímpares (1,3,5). ```css -section:nth-of-type(odd) { +section:nth-of-type(odd) { color: #fff; background-color: #000; - text-shadow: 0 0 5px rgba(0,0,0,0.4); + text-shadow: 0 0 5px rgba(0,0,0,0.4); } -section:nth-child(1) { - background-image: url(../img/guitar.jpg); +section:nth-child(1) { + background-image: url(../img/guitar.jpg); } -section:nth-child(3) { - background-image: url(../img/bass.jpg); +section:nth-child(3) { + background-image: url(../img/bass.jpg); } -section:nth-child(5) { - background-image: url(../img/drums.jpg); +section:nth-child(5) { + background-image: url(../img/drums.jpg); } ``` @@ -163,7 +163,7 @@ new vUnit({ }).init(); ``` -Você define uma classe, ali no caso é o `.vh` e está irá de `.vh0` até `vh100` indicando o tamanho e qual a referência. No caso eu quero que ele mude as unidades de `vh` para `height`. +Você define uma classe, ali no caso é o `.vh` e está irá de `.vh0` até `vh100` indicando o tamanho e qual a referência. No caso eu quero que ele mude as unidades de `vh` para `height`. No markup ficaria assim: @@ -181,4 +181,3 @@ Onde o `class="vh100"` indica que eu quero uma área com 100% de altura da viewp ## Conclusão Enfim, foi mais um post pequeno, fácil e rápido mostrando algumas coisinhas legais do css. Lembre-se que são só experimentos e não necessarimente você precisa usar todas essas coisas. Se tiver alguma dúvida ou quiser perguntar alguma coisa, só falar nos comentários abaixo. - diff --git a/_posts/2015-09-11-manipulando-svg-com-js.md b/_posts/2015-09-11-manipulando-svg-com-js.md index dc872973..2f8e2dad 100644 --- a/_posts/2015-09-11-manipulando-svg-com-js.md +++ b/_posts/2015-09-11-manipulando-svg-com-js.md @@ -26,7 +26,7 @@ Esse post será bem simples e introdutório, até mesmo porque se fosse sobre tu ## Em que momentos devo usar JS? -Como já dito em [posts anteriores](http://willianjusten.com.br/series/), tem como animar SVG com CSS e também com SMIL, então precisamos saber uns motivos para ter mais essa opção né? E elas são: +Como já dito em [posts anteriores](https://willianjusten.com.br/series/), tem como animar SVG com CSS e também com SMIL, então precisamos saber uns motivos para ter mais essa opção né? E elas são: - Se você estiver trabalhando com dados via JSON (em geral gráficos). - Quando precisa de alguma lógica mais complexa por trás de acordo com certas condições do contexto. @@ -95,7 +95,7 @@ Segue um exemplo fazendo algumas interações com um SVG: Sim, nós podemos criar SVG direto com JS e manipular essas propriedades! Para criar um elemento SVG, precisamos entender alguns métodos importantes e suas informações. -Como dito no [post de estrutura](http://willianjusten.com.br/a-estrutura-do-svg/), o SVG possui um Namespace que o define como um XML do tipo SVG, este é: +Como dito no [post de estrutura](https://willianjusten.com.br/a-estrutura-do-svg/), o SVG possui um Namespace que o define como um XML do tipo SVG, este é: `http://www.w3.org/2000/svg`. E para criar elementos SVG, utilizamos o [createElementNS](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElementNS). A sintaxe é bastante simples: @@ -112,7 +112,7 @@ Após criado o elemento, precisamos definir atributos para o mesmo e para isso u element.setAttributeNS(namespace, name, value); ``` -O `namespace` aqui permanece o mesmo padrão para SVG. O `name` é o atributo que você quer definir, o raio de um círculo seria o `r`, por exemplo. E `value` é claro, é o valor dessa propriedade. +O `namespace` aqui permanece o mesmo padrão para SVG. O `name` é o atributo que você quer definir, o raio de um círculo seria o `r`, por exemplo. E `value` é claro, é o valor dessa propriedade. Abaixo segue um exemplo de como criar um círculo usando esses simples métodos: @@ -170,8 +170,3 @@ Essa não é uma biblioteca específica de SVG, mas ela é incrível com qualque ## Conclusão Bom galera, eu mostrei aqui o básico de como brincar com o SVG e JS e algumas bibliotecas, agora é você partir para começar a brincadeira. Quem fizer exemplos legais, manda aí nos comentários, adoro ver coisinhas feitas com SVG <3 - - - - - diff --git a/_posts/2015-10-04-criando-apresentacoes-e-hospedando-no-github.md b/_posts/2015-10-04-criando-apresentacoes-e-hospedando-no-github.md index 2e9ea936..cde25141 100644 --- a/_posts/2015-10-04-criando-apresentacoes-e-hospedando-no-github.md +++ b/_posts/2015-10-04-criando-apresentacoes-e-hospedando-no-github.md @@ -203,7 +203,7 @@ Reveal.initialize({ #### 8 - Hospedando no Github -Como sabemos, o Github tem um sisteminha legal chamado [Github Pages](https://pages.github.com/), que permite hospedar páginas estáticas nele. Para hospedarmos algo lá, basta criarmos um projetinho com o nome que desejarmos e ao invés de usar a branch master, usarmos a branch `gh-pages`. Após isso, o projeto vai ficar hospedado em `nomedousuario.github.io/nome-do-projeto`, caso você tenha um domínio configurado, ele ficará como `dominio/nome-do-projeto`. Segue um exemplo de uma das minhas últimas apresentações [Frontend Carioca 2015](http://willianjusten.com.br/frontend-carioca-2015/). +Como sabemos, o Github tem um sisteminha legal chamado [Github Pages](https://pages.github.com/), que permite hospedar páginas estáticas nele. Para hospedarmos algo lá, basta criarmos um projetinho com o nome que desejarmos e ao invés de usar a branch master, usarmos a branch `gh-pages`. Após isso, o projeto vai ficar hospedado em `nomedousuario.github.io/nome-do-projeto`, caso você tenha um domínio configurado, ele ficará como `dominio/nome-do-projeto`. Segue um exemplo de uma das minhas últimas apresentações [Frontend Carioca 2015](https://willianjusten.com.br/frontend-carioca-2015/). --- diff --git a/_posts/2015-11-01-criando-um-menu-off-canvas-com-css3.md b/_posts/2015-11-01-criando-um-menu-off-canvas-com-css3.md index 77e17c0b..40ccfdbb 100644 --- a/_posts/2015-11-01-criando-um-menu-off-canvas-com-css3.md +++ b/_posts/2015-11-01-criando-um-menu-off-canvas-com-css3.md @@ -15,7 +15,7 @@ twitter_text: 'Aprenda a criar um menu off canvas usando CSS3.' introduction: 'Aprenda a criar um menu off canvas usando CSS3 Transitions e Transforms e um pouquinho de javascript.' --- -## Introdução +## Introdução Como eu disse no post anterior, vou tentar voltar a escrever um pouquinho mais e para isso escolhi uma coisa que há muito tempo já haviam me perguntado, que era, como criar um menu off canvas como eu uso nesse blog. A trilha sonora de hoje vai ser [Forever Alone](https://open.spotify.com/user/spotify/playlist/2U3mZqDktE7UJ1gE4eVoUv) (que minha namorada não leia isso =o). @@ -23,7 +23,7 @@ Como eu disse no post anterior, vou tentar voltar a escrever um pouquinho mais e Esse menu passou a ser mais famoso com o uso de dispositivos mobile, onde não possuímos tanto espaço em tela para poder ter um menu lateral. Então nada melhor do que esconder e mostrar só quando necessário né? -Se você é daqueles que gosta de ver funcionando primeiro, segue a [DEMO](http://willianjusten.com.br/labs/menu-off-canvas/#). +Se você é daqueles que gosta de ver funcionando primeiro, segue a [DEMO](https://willianjusten.com.br/labs/menu-off-canvas/#). **O exemplo mostrado aqui abaixo está bem simplificado sem o uso de prefixos para os browsers e pode ser instável em certas versões. Por favor, utilize um auto-prefixer para que tudo fique correto =)** @@ -77,7 +77,7 @@ Dentro dessas camadas, vamos colocar algum conteúdo, só para não ficar muito Abrir o menu

Menu Off Canvas!!

Uma simples demo mostrando como funciona o menu off canvas.

-

Tutorial em willianjusten.com.br

+

Tutorial em willianjusten.com.br

@@ -88,15 +88,15 @@ Note também, que eu criei um botão com a seguinte classe `toggle-menu`, que va ## CSS -### Wrapper +### Wrapper Depois de montada a estrutura, precisamos deixar um pouco bonitinho e fazer a mágica acontecer. Primeiro vamos montar nosso `wrapper`, ele é o responsável por segurar o conteúdo de nosso site e "esconder" as coisas que estiverem por fora dele, por esse motivo iremos utilizar a propriedade `overflow: hidden`, que vai esconder essas coisinhas. ```css .wrapper { - position: relative; + position: relative; overflow: hidden; - width: 100%; + width: 100%; height: 3000px; /* só para deixar a página grande*/ } ``` @@ -184,7 +184,7 @@ Um truque bem famoso que podemos usar para otimizar a animação é forçar o us transform: translateX(0); } .show-menu .canvas { - transform: translateX(300px); + transform: translateX(300px); } /* Novo */ @@ -192,7 +192,7 @@ Um truque bem famoso que podemos usar para otimizar a animação é forçar o us transform: translate3d(0); } .show-menu .canvas { - transform: translate3d(300px, 0, 0); + transform: translate3d(300px, 0, 0); } ``` @@ -216,4 +216,3 @@ document.addEventListener('keyup', function(e){ É basicamente isso pessoal, existem várias coisas que vocês podem brincar, como tipos diferentes de animação e velocidades de transição. Também podem brincar com novas posições, com menus vindo de cima, da direita, enfim... Quem fizer uma brincadeira nova, posta aí nos comentários. - diff --git a/_posts/2015-12-06-criando-um-switch-button-com-css.md b/_posts/2015-12-06-criando-um-switch-button-com-css.md index 810e617b..0c84d273 100644 --- a/_posts/2015-12-06-criando-um-switch-button-com-css.md +++ b/_posts/2015-12-06-criando-um-switch-button-com-css.md @@ -61,7 +61,7 @@ Depois de criada a base, veremos simples inputs de checkbox, aqueles quadradinho } ``` -Usamos aqui o seletor `+`, conhecido como adjacente, que pega o primeiro elemento após o primeiro seletor. Se quiser ver mais sobre esse seletor, veja [esse meu post sobre alguns seletores css](http://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/). +Usamos aqui o seletor `+`, conhecido como adjacente, que pega o primeiro elemento após o primeiro seletor. Se quiser ver mais sobre esse seletor, veja [esse meu post sobre alguns seletores css](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/). As linhas `1-5` servem somente para esconder o checkbox feio e jogá-lo para fora da tela, garantindo assim, que ele não seja clicável. Enquanto as linhas `5-13` serão responsáveis por deixar o elemento ali "clicável" usando a propriedade `cursor: pointer`, também remove a opção de selecionar a label com o `user-select: none` e deixa ele como um elemento de bloco, para que possamos botar tamanho e estilo. diff --git a/_posts/2015-12-29-meu-ano-de-2015.md b/_posts/2015-12-29-meu-ano-de-2015.md index a585535c..2f6b225e 100644 --- a/_posts/2015-12-29-meu-ano-de-2015.md +++ b/_posts/2015-12-29-meu-ano-de-2015.md @@ -24,7 +24,7 @@ Resolvi fazer esse post depois de ver alguns reviews pela Net como o do [Ponyfoo ## Nascimento do Blog -Sim, para alguns pode parecer que esse blog é mais velho, mas não é. Ele nasceu no dia [03 de janeiro](http://willianjusten.com.br/making-of-parte-1/) depois de milhares e milhares e milhares de enrolações. Eu sentei em frente ao computador e me decidi que só ia sair quando estivesse pronto e assim foi. Dia 2 de Janeiro estava virando a noite para ter o blog pronto e lançá-lo no dia 3 a tarde. +Sim, para alguns pode parecer que esse blog é mais velho, mas não é. Ele nasceu no dia [03 de janeiro](https://willianjusten.com.br/making-of-parte-1/) depois de milhares e milhares e milhares de enrolações. Eu sentei em frente ao computador e me decidi que só ia sair quando estivesse pronto e assim foi. Dia 2 de Janeiro estava virando a noite para ter o blog pronto e lançá-lo no dia 3 a tarde. ![Um cara codando igual um maluco!](http://dc467.4shared.com/img/GuhWxvJg/13461cee848/keyboard-smash-o.gif) @@ -32,7 +32,7 @@ A ideia da criação do Blog era só para ter um lugar onde colocar coisas que e Quando eu lancei o blog, falei em alguns grupos do Facebook que eu participava (uma pena que a maioria está bastante parada =/) e o feedback foi praticamente instantâneo! Uma galera estava curtindo e compartilhando e nas primeiras 24h eu já tinha tido pouco mais de 2k visualizações, que para mim já era absurdo xD -Eu fiquei super feliz com a repercursão e no mesmo tempo o [Fernando Daciuk](https://github.com/fdaciuk) estava na onda de escrever [1post por dia](http://blog.da2k.com.br/2014/12/31/um-post-por-dia/), resolvi ir na [onda também](http://willianjusten.com.br/um-post-por-dia/). E caramba, como é DIFÍCIL, acho que eu não devo ter conseguido nem 4 dias seguidos, mas não deixei de escrever não, escrevi no meu tempo e estava feliz. +Eu fiquei super feliz com a repercursão e no mesmo tempo o [Fernando Daciuk](https://github.com/fdaciuk) estava na onda de escrever [1post por dia](http://blog.da2k.com.br/2014/12/31/um-post-por-dia/), resolvi ir na [onda também](https://willianjusten.com.br/um-post-por-dia/). E caramba, como é DIFÍCIL, acho que eu não devo ter conseguido nem 4 dias seguidos, mas não deixei de escrever não, escrevi no meu tempo e estava feliz. ### Reconhecimento @@ -46,7 +46,7 @@ Aliás, uma coisa que eu não posso reclamar é do carinho e reconhecimento da g ### Estatísticas -Foram **54 posts** neste quase 1 ano, falei sobre várias coisas, desde assuntos não tão técnicos como [técnicas de aprendizado](http://willianjusten.com.br/tecnicas-de-aprendizado/) até [muitos e muitos assuntos de svg](http://willianjusten.com.br/series/#o-mundo-m-gico-do-svg), que é minha paixão. +Foram **54 posts** neste quase 1 ano, falei sobre várias coisas, desde assuntos não tão técnicos como [técnicas de aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/) até [muitos e muitos assuntos de svg](https://willianjusten.com.br/series/#o-mundo-m-gico-do-svg), que é minha paixão. Agora no final do ano, posso dizer que meu blog teve muito mais acessos que eu jamais imaginava! Foram mais de **250 mil** acessos do Brasil e fora dele. Não sei se esse é um número bom ou ruim, mas quem se importa?! To feliz para caramba! @@ -54,16 +54,16 @@ Agora no final do ano, posso dizer que meu blog teve muito mais acessos que eu j E os 10 posts mais acessados foram: -- [Como se tornar um Desenvolvedor Front End](http://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/) -- [Como criar seções Fullscreen com CSS](http://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/) -- [Começando com ReactJS](http://willianjusten.com.br/comecando-com-react/) -- [3 Meses de Globo.com](http://willianjusten.com.br/3-meses-de-globocom/) -- [Alguns seletores CSS importantes para Aprender](http://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) -- [Devo fazer faculdade?](http://willianjusten.com.br/devo-fazer-faculdade/) -- [Técnicas de Aprendizado](http://willianjusten.com.br/tecnicas-de-aprendizado/) -- [Como ter Domínio Próprio no Github Pages](http://willianjusten.com.br/dominio-proprio-no-github-pages/) -- [Usando SVG Sprites](http://willianjusten.com.br/usando-svg-sprites/) -- [Animações em SVG com CSS](http://willianjusten.com.br/animacoes-em-svg-com-css/) +- [Como se tornar um Desenvolvedor Front End](https://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/) +- [Como criar seções Fullscreen com CSS](https://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/) +- [Começando com ReactJS](https://willianjusten.com.br/comecando-com-react/) +- [3 Meses de Globo.com](https://willianjusten.com.br/3-meses-de-globocom/) +- [Alguns seletores CSS importantes para Aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/) +- [Devo fazer faculdade?](https://willianjusten.com.br/devo-fazer-faculdade/) +- [Técnicas de Aprendizado](https://willianjusten.com.br/tecnicas-de-aprendizado/) +- [Como ter Domínio Próprio no Github Pages](https://willianjusten.com.br/dominio-proprio-no-github-pages/) +- [Usando SVG Sprites](https://willianjusten.com.br/usando-svg-sprites/) +- [Animações em SVG com CSS](https://willianjusten.com.br/animacoes-em-svg-com-css/) ## Eventos @@ -100,7 +100,7 @@ Nesses eventos, a gente sempre acaba conhecendo várias pessoas, que acabam vira - [Gabriel Barbier](https://twitter.com/_Barbier) - um dos que presenciou meu desespero para chegar ao aeroporto na viagem de Porto Alegre e também ajudou pacas. - Thales Marchetti - cara gente boa pacas que conheci no evento do imasters e graças a ele, arrumei meu novo teto no Rio. -Enfim, teve muiiiita gente que eu conheci (peço até desculpas por não colocar todos), que eu revi, e é por isso que eu digo que [vale a pena ir a eventos!](http://willianjusten.com.br/por-que-ir-em-eventos-vale-a-pena/) +Enfim, teve muiiiita gente que eu conheci (peço até desculpas por não colocar todos), que eu revi, e é por isso que eu digo que [vale a pena ir a eventos!](https://willianjusten.com.br/por-que-ir-em-eventos-vale-a-pena/) ## Opensource @@ -116,7 +116,7 @@ Os projetos que eu destaco desse ano para mim foram: - [Template do Blog](https://github.com/willianjusten/will-jekyll-template) - uma galera curtiu tanto o visual do blog, que eu acabei separando o tema num projeto separado e uma galera tem usado! Também descobri que um grupo de [Devs do Paraná](http://blog.devparana.org/) usou o template para criar o deles, que ficou super lindão com as modificações. - [FreeTime](https://github.com/free-time/free-time.github.io) - projeto que eu tive o orgulho de participar e ajudar. -- [Reveal Boilerplate](https://github.com/willianjusten/reveal-boilerplate) - um boilerplate simples que eu criei para as minhas apresentações e que resolvi abrir a todos. Inclusive criei um [post sobre ele](http://willianjusten.com.br/criando-apresentacoes-e-hospedando-no-github/) e acabei descobrindo váaarias apresentações por aí usando ele <3 +- [Reveal Boilerplate](https://github.com/willianjusten/reveal-boilerplate) - um boilerplate simples que eu criei para as minhas apresentações e que resolvi abrir a todos. Inclusive criei um [post sobre ele](https://willianjusten.com.br/criando-apresentacoes-e-hospedando-no-github/) e acabei descobrindo váaarias apresentações por aí usando ele <3 Enfim, não commitei todos os dias do ano, não tive milhões de stars em todos os meus projetos, mas tive uma coisa melhor ainda, que foi ver os projetos sendo utilizados, isso vale mais que 1000 dias seguidos de commit! =D @@ -124,7 +124,7 @@ Pretendo continuar criando coisinhas para que todos possam usar e que venha 2016 ## Ano novo, vida nova, blog novo... -Bom, além dos eventos e dos commits, eu tive o prazer de trabalhar esse ano na [Globo.com](http://www.globo.com/), mais especificamente no time `Esportes1` do [Globoesporte](http://globoesporte.globo.com/). Participei no projeto dos Jogos Pan Americanos de Toronto e também numa das frentes para construção do novo Feed da Globo.com. Falei até um pouco sobre isso no post de [3 meses de globo.com](http://willianjusten.com.br/3-meses-de-globocom/). +Bom, além dos eventos e dos commits, eu tive o prazer de trabalhar esse ano na [Globo.com](http://www.globo.com/), mais especificamente no time `Esportes1` do [Globoesporte](http://globoesporte.globo.com/). Participei no projeto dos Jogos Pan Americanos de Toronto e também numa das frentes para construção do novo Feed da Globo.com. Falei até um pouco sobre isso no post de [3 meses de globo.com](https://willianjusten.com.br/3-meses-de-globocom/). Aprendi muita coisa, tanto em desenvolvimento, quanto comunicação, organização e pessoas. A empresa é gigante, tem muitas pessoas, muitos projetos, milhões e milhões de acessos em todos os produtos. Foi uma oportunidade incrível e que com certeza adicionou bastante ao meu currículo. diff --git a/_posts/2016-01-01-ano-novo-blog-novo.md b/_posts/2016-01-01-ano-novo-blog-novo.md index cfcacc0a..3f8ca064 100644 --- a/_posts/2016-01-01-ano-novo-blog-novo.md +++ b/_posts/2016-01-01-ano-novo-blog-novo.md @@ -22,7 +22,7 @@ Faaaaaaaala pessoal, primeiro de tudo, um Feliz 2016 para todos! Que grandes coi Vou ouvindo uma playlist super super calma chamada [ChillStep](https://open.spotify.com/user/kent1337/playlist/6IjDl5eRczFdgZkKYXhuHZ) enquanto escrevo esse post, mas na criação desse novo visual, eu ouvi muito as [playlists comemorativas de Star Wars](https://open.spotify.com/user/official_star_wars), em especial a do [Finn](https://open.spotify.com/user/official_star_wars/playlist/6v62GOY5tiFfIwkhOHMwS5), que é composta de Indies, minha paixão <3 -Bom, como eu havia falado no [post passado](http://willianjusten.com.br/meu-ano-de-2015/), eu estava preparando um visual novo para o site e esse post vai servir para falar um pouco desse processo, minhas viagens em busca do novo visual, algumas coisas que necessariamente precisavam ter, outras que eu queria manter, enfim, uma salada mista de inspirações e a concepção de fato. +Bom, como eu havia falado no [post passado](https://willianjusten.com.br/meu-ano-de-2015/), eu estava preparando um visual novo para o site e esse post vai servir para falar um pouco desse processo, minhas viagens em busca do novo visual, algumas coisas que necessariamente precisavam ter, outras que eu queria manter, enfim, uma salada mista de inspirações e a concepção de fato. Eu sempre fui uma pessoa muito curiosa para saber como certos designs foram pensados e criados, então acho que esse meu post vai servir para essas pessoas curiosas assim como eu. @@ -47,7 +47,7 @@ E os posts também ocupavam uma área relativamente grande, com a data num desta - Css feito usando [Stylus](http://stylus-lang.com/) `<3` - Gulp para fazer processamento dos assets, livereload e build -Se quiser saber um pouco mais da construção dele, tem os posts [Making of - Parte 1](http://willianjusten.com.br/making-of-parte-1/) e [Making of - Parte 2](http://willianjusten.com.br/making-of-parte-2/) +Se quiser saber um pouco mais da construção dele, tem os posts [Making of - Parte 1](https://willianjusten.com.br/making-of-parte-1/) e [Making of - Parte 2](https://willianjusten.com.br/making-of-parte-2/) ## Blog Novo @@ -140,7 +140,7 @@ Se você quiser entender mais de `flexbox`, acesse os seguintes links: Para os cards não aparecem "duros" no scroll, eu resolvi aplicar uma leve animação neles. Essa animação foi inspirada nesse [post do Codrops](http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/), lá eles utilizam o Masonry e coisinhas a mais, o que eu precisava era só a interação no scroll, então fiz minhas devidas modificações. -Eu ia fazer um gif mostrando a animação, mas acho que é melhor você testar por si, vai lá na [Home](http://willianjusten.com.br), faça o scroll e veja por si mesmo =p +Eu ia fazer um gif mostrando a animação, mas acho que é melhor você testar por si, vai lá na [Home](https://willianjusten.com.br), faça o scroll e veja por si mesmo =p ### Organização @@ -156,7 +156,7 @@ Pensando nisso, eu criei algumas categorias como: - `dev`: essa categoria é para abordar temas mais abertos de programação como ter domínio próprio em github, testes, etc. Sua cor é o cinza. - `misc`: miscelânia, como o nome já diz, é um conjunto de tudo, que pode abordar tanto coisas de programação, como links da semana, novidades do blog, coisas off-topic, enfim, todo o resto. Sua cor é o verde. -Para acessar qualquer uma das categorias em específico, basta clicar no `ribbon` no canto superior do card, segue exemplo da [página de js](http://willianjusten.com.br/category/js). +Para acessar qualquer uma das categorias em específico, basta clicar no `ribbon` no canto superior do card, segue exemplo da [página de js](https://willianjusten.com.br/category/js). ### Página de Post diff --git a/_posts/2016-02-06-criando-e-exportando-svg-para-web.md b/_posts/2016-02-06-criando-e-exportando-svg-para-web.md index cecd8b5e..d6fe2892 100644 --- a/_posts/2016-02-06-criando-e-exportando-svg-para-web.md +++ b/_posts/2016-02-06-criando-e-exportando-svg-para-web.md @@ -46,9 +46,9 @@ Segue um exemplo da diferença entre a criação de um círculo via forma básic cx="28.1" cy="28.1" r="27.6"/> - + - + E se existisse uma maneira de ter os dois limpos? -Dessa forma nasceu o [RSCSS](http://rscss.io/)! A ideia principal dele é criar um componente pai, que irá governar os elementos internos a partir do `child selector >`, também chamado de seletor filho ou descendente. Se você não conhece esse seletor, aconselho ler esse post [seletores css importantes para aprender](http://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/), que eu fiz no ano passado. +Dessa forma nasceu o [RSCSS](http://rscss.io/)! A ideia principal dele é criar um componente pai, que irá governar os elementos internos a partir do `child selector >`, também chamado de seletor filho ou descendente. Se você não conhece esse seletor, aconselho ler esse post [seletores css importantes para aprender](https://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/), que eu fiz no ano passado. O mesmo exemplo do card usando essa metodologia ficaria: diff --git a/_posts/2016-02-09-organizando-seu-css-com-itcss.md b/_posts/2016-02-09-organizando-seu-css-com-itcss.md index ac057e4e..d6f55a75 100644 --- a/_posts/2016-02-09-organizando-seu-css-com-itcss.md +++ b/_posts/2016-02-09-organizando-seu-css-com-itcss.md @@ -17,7 +17,7 @@ introduction: 'Organizar CSS em larga escala é difícil, mas não precisa ser t ## Introdução -Fala aí pessoal, no [último post](http://willianjusten.com.br/falando-sobre-rscss/) falei um pouco de uma metodologia para nomear componentes e como escrever suas propriedades. Mas só isso não serve para manter um projeto em larga escala. Precisamos de uma arquitetura para organizar melhor todos os outros arquivos, que não são necessariamente componentes. +Fala aí pessoal, no [último post](https://willianjusten.com.br/falando-sobre-rscss/) falei um pouco de uma metodologia para nomear componentes e como escrever suas propriedades. Mas só isso não serve para manter um projeto em larga escala. Precisamos de uma arquitetura para organizar melhor todos os outros arquivos, que não são necessariamente componentes. Para escrever esse post, estou ouvindo uma playlist bem calminha chamada [Tarde Acústica](https://open.spotify.com/user/spotifybrazilian/playlist/3KWwHMxIV2J6bSVciz8dzo), acho que o Spotify me recomenda essa lista há milênios, já ouvi umas vezes, mas tá com umas músicas novas legais. No meio do post eu cansei, tava me deixando mais lento, então resolvi trocar para [Eminem](https://open.spotify.com/artist/7dGJo4pcD2V6oG8kP0tJRR), que fazia um tempo que não ouvia, olha, te falar que rendeu mais xD @@ -157,4 +157,4 @@ Colocando ali, você garante que ele será lido por último no CSS e consequente ## Conclusão -Bom galera, com isso eu fecho o básico para termos um bom padrão de escrita e arquitetura de nosso CSS. Espero que tenha sido útil para vocês, assim como foi para mim (sim, eu estudei bastante junto). Qualquer dúvida ou comentário, não deixem de fazer aqui ou nas redes sociais. +Bom galera, com isso eu fecho o básico para termos um bom padrão de escrita e arquitetura de nosso CSS. Espero que tenha sido útil para vocês, assim como foi para mim (sim, eu estudei bastante junto). Qualquer dúvida ou comentário, não deixem de fazer aqui ou nas redes sociais. diff --git a/_posts/2016-03-19-um-novo-projeto-um-novo-desafio.md b/_posts/2016-03-19-um-novo-projeto-um-novo-desafio.md index 4690d8a2..afb63cbf 100644 --- a/_posts/2016-03-19-um-novo-projeto-um-novo-desafio.md +++ b/_posts/2016-03-19-um-novo-projeto-um-novo-desafio.md @@ -97,4 +97,4 @@ Se você gostou da ideia e quer mais cursos e com mais frequência, me ajude a t Vamos lá galera, todo mundo acessando, compartilhando, curtindo, comentando e sendo feliz!!! -[Link maravilhoso para os cursos!](http://willianjusten.com.br/cursos/) +[Link maravilhoso para os cursos!](https://willianjusten.com.br/cursos/) diff --git a/_posts/2016-03-27-novo-projeto-awesome-audioviz.md b/_posts/2016-03-27-novo-projeto-awesome-audioviz.md index 16de28f3..89e07450 100644 --- a/_posts/2016-03-27-novo-projeto-awesome-audioviz.md +++ b/_posts/2016-03-27-novo-projeto-awesome-audioviz.md @@ -17,7 +17,7 @@ introduction: "Quem já acessou esse blog uma vez na vida já viu como eu amo m ## Introdução -Primeiro de tudo, gostaria muito de agradecer a receptividade do [post de ontem](http://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), foram muitos compartilhamentos, likes, comentários tanto no blog, como nos posts dos grupos, bate papos privados e até doações! Fico bastante feliz que eu ajude e inspire outras pessoas, eu escrevo no blog muito por amor ao que faço e pela vontade de ajudar a todos. +Primeiro de tudo, gostaria muito de agradecer a receptividade do [post de ontem](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), foram muitos compartilhamentos, likes, comentários tanto no blog, como nos posts dos grupos, bate papos privados e até doações! Fico bastante feliz que eu ajude e inspire outras pessoas, eu escrevo no blog muito por amor ao que faço e pela vontade de ajudar a todos. Bom, sem mais delongas, senão vou chorar. Vou escrevendo enquanto escuto uma [Playlist de ChillStep](https://open.spotify.com/user/kent1337/playlist/6IjDl5eRczFdgZkKYXhuHZ) muito boa. diff --git a/_posts/2016-04-03-novo-curso-de-git-e-github-para-iniciantes.md b/_posts/2016-04-03-novo-curso-de-git-e-github-para-iniciantes.md index 5fd47ec1..5e58ee81 100644 --- a/_posts/2016-04-03-novo-curso-de-git-e-github-para-iniciantes.md +++ b/_posts/2016-04-03-novo-curso-de-git-e-github-para-iniciantes.md @@ -19,7 +19,7 @@ introduction: 'Aprenda como funciona o git e o github em vídeos curtos e práti Vou escrevendo essa post enquanto escuto uma [playlist especial do Batman](https://open.spotify.com/user/spotifybrazilian/playlist/5jcu1LG141GiVpKuZVOTzn), até nisso é muito melhor que o super homem =p -Fazem 15 dias que eu lancei um [curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/) em cima de uma plataforma bastante legal. Fiz um [post](http://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) falando da minha vontade de fazer vídeo aulas, o porquê de começar com Jekyll e coisinhas mais. Dessa vez, resolvi fazer mais um curso gratuito =) +Fazem 15 dias que eu lancei um [curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/) em cima de uma plataforma bastante legal. Fiz um [post](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) falando da minha vontade de fazer vídeo aulas, o porquê de começar com Jekyll e coisinhas mais. Dessa vez, resolvi fazer mais um curso gratuito =) ## Por que Git e Github? diff --git a/_posts/2016-04-16-criando-efeito-parallax-no-header.md b/_posts/2016-04-16-criando-efeito-parallax-no-header.md index ad26cec4..a7442b6f 100644 --- a/_posts/2016-04-16-criando-efeito-parallax-no-header.md +++ b/_posts/2016-04-16-criando-efeito-parallax-no-header.md @@ -29,7 +29,7 @@ Quando eu fui tirar screenshots do meu blog, notei que todas acabavam ficando co Foi aí que um amigo falou que gostava muito do header do [blog do Invision](http://blog.invisionapp.com/designtalk-a-license-for-creative-advocacy/), eu olhei e pensei, pow isso aí é simplão, dá para fazer com css rapidinho e o detalhe do scroll com js puro. Acabou que eu fiz um para mim... -Se você quiser ver a demo feita para esse post, [clique aqui](http://willianjusten.com.br/labs/header-parallax/). +Se você quiser ver a demo feita para esse post, [clique aqui](https://willianjusten.com.br/labs/header-parallax/). ## Parte do CSS @@ -94,10 +94,10 @@ Depois disso, precisamos pegar o valor da posição do scroll, que pode ser capt Para não ficar chamando a função o tempo todo, mesmo depois do header sumir, verificamos se o valor de `scrollPos` é menor que a altura do nosso header. Se for menor, nós aplicamos o `translateY` para subir um pouquinho o título e também diminuímos a `opacity`, causando o efeito desejado. Os cálculos ali acima foram feitos só para a transição ser mais suave e ajustados no olho mesmo. Queremos uma `opacity` de zero quando o scroll for total (600), então `600 - (600/600)` vai se encarregar disso. E a movimentação do título precisa ser mais devagar para dar o efeito de parallax, então divido o valor do scroll por 3. -Se você não clicou ainda, o [demo está aqui](http://willianjusten.com.br/labs/header-parallax/). +Se você não clicou ainda, o [demo está aqui](https://willianjusten.com.br/labs/header-parallax/). ## Conclusão Pronto pessoal, foi um post bastante simples, mas que é interessante para firmarmos algumas propriedades e conceitos importantes. Espero que tenham gostado, devo fazer mais alguns posts do gênero, ensinando a fazer pequenos detalhes/efeitos para deixar seus sites mais legais. -Queria também agradecer o carinho da galera que tem acessado os meus [cursos online](http://willianjusten.com.br/cursos/), tem sido bastante legal ver todo mundo assistindo, aprendendo, divulgando e dando dicas. Se você ainda não acessou, vai lá e se inscreva. Todo mundo que se inscreve nos meus cursos, são avisados quando lanço um novo post e também devo começar a enviar links e notícias interessantes que eu ver por aí, em forma de weekly. Não perde a chance =) +Queria também agradecer o carinho da galera que tem acessado os meus [cursos online](https://willianjusten.com.br/cursos/), tem sido bastante legal ver todo mundo assistindo, aprendendo, divulgando e dando dicas. Se você ainda não acessou, vai lá e se inscreva. Todo mundo que se inscreve nos meus cursos, são avisados quando lanço um novo post e também devo começar a enviar links e notícias interessantes que eu ver por aí, em forma de weekly. Não perde a chance =) diff --git a/_posts/2016-04-21-pre-venda-curso-de-svg.md b/_posts/2016-04-21-pre-venda-curso-de-svg.md index 242533bc..25022f86 100644 --- a/_posts/2016-04-21-pre-venda-curso-de-svg.md +++ b/_posts/2016-04-21-pre-venda-curso-de-svg.md @@ -18,7 +18,7 @@ introduction: 'Se adiante e adquira um dos cursos mais completos de SVG totalmen ## Introdução -Faaala pessoal! Estou aqui para passar uma novidade bem rapidinha para vocês. Quando lancei meu [primeiro post](http://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) sobre o início da criação dos meus cursos, eu falei para vocês que sempre iria disponibilizar conteúdo gratuito e assim foi com o [Curso de Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) e o [Curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/). +Faaala pessoal! Estou aqui para passar uma novidade bem rapidinha para vocês. Quando lancei meu [primeiro post](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/) sobre o início da criação dos meus cursos, eu falei para vocês que sempre iria disponibilizar conteúdo gratuito e assim foi com o [Curso de Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) e o [Curso de Jekyll](https://www.udemy.com/criando-sites-estaticos-com-jekyll/). Mas hoje eu estou aqui, para disponibilizar a [pré-venda](#pre-venda) do meu mais novo curso que será premium, que será: **Aprendendo SVG do início ao avançado**! =D diff --git a/_posts/2016-05-19-mudando-sua-vida-atraves-de-projetos-paralelos.md b/_posts/2016-05-19-mudando-sua-vida-atraves-de-projetos-paralelos.md index c85f0d59..a4abbfa2 100644 --- a/_posts/2016-05-19-mudando-sua-vida-atraves-de-projetos-paralelos.md +++ b/_posts/2016-05-19-mudando-sua-vida-atraves-de-projetos-paralelos.md @@ -16,7 +16,7 @@ introduction: 'Fica aqui um relato de alguém que mudou sua vida e quer mudar ai ## Introdução -Fala pessoal, quando eu escrevi o post [O que ninguém diz para os iniciantes](http://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), eu dizia que aquele talvez fosse o post que mais me emocionava. Mas eu acho que estou ficando muito molenga, porque esse post vai ser mais um que vou me emocionar enquanto escrevo. +Fala pessoal, quando eu escrevi o post [O que ninguém diz para os iniciantes](https://willianjusten.com.br/o-que-ninguem-diz-para-iniciantes/), eu dizia que aquele talvez fosse o post que mais me emocionava. Mas eu acho que estou ficando muito molenga, porque esse post vai ser mais um que vou me emocionar enquanto escrevo. Para não perder o costume, a playlist que estou escutando hoje é uma de minha autoria e especial para esse post, que é [Side Projects](https://open.spotify.com/user/willianjusten/playlist/031nQBF66JwosHhCH9Degg). Na playlist você vai encontrar, em sua maioria, bandas indies e desconhecidas (sim, ouço muita coisa desconhecida), mas que você talvez curta =) @@ -34,7 +34,7 @@ Bom, sem mais delongas, vamos ao post! Prepara um cafézinho que o post vai ser

Um mergulho na minha história

-Quando eu lancei o meu blog, há mais ou menos 1 ano e meio atrás, eu fiz uma [pequena apresentação sobre mim](http://willianjusten.com.br/making-of-parte-1/), falando que passei por outra área antes de chegar de fato a programação. Mas vou completar essa história com mais alguns pedacinhos. Eu sempre gosto de saber a experiência de vida das pessoas, o que fizeram antes, quais suas escolhas para tal, então por que eu mesmo não fazer né? +Quando eu lancei o meu blog, há mais ou menos 1 ano e meio atrás, eu fiz uma [pequena apresentação sobre mim](https://willianjusten.com.br/making-of-parte-1/), falando que passei por outra área antes de chegar de fato a programação. Mas vou completar essa história com mais alguns pedacinhos. Eu sempre gosto de saber a experiência de vida das pessoas, o que fizeram antes, quais suas escolhas para tal, então por que eu mesmo não fazer né? Bom, eu como todo nerd/geek sempre fui apaixonado por jogos, como eles funcionavam, a lógica e a física me impressionavam. E por causa disso, lá pelos idos de 2000, acabei conhecendo uma parada chamada [Rpg Maker](http://www.rpgmakerweb.com/), era uma engine beeeem tosca, mas que te permitia criar joguinhos de RPG com interface gráfica e alguns pequenos detalhes de lógica todo fundamentado em condicionais, ali deve ter sido meu "primeiro contato" com "programação". Criei vários joguinhos com meus primos, me divertia muito. @@ -54,7 +54,7 @@ Quando eu voltei para minha cidade, eu precisava arrumar um emprego, porque não Dentro da faculdade de TI, eu resolvi criar esse blog, meu **segundo projeto paralelo** de grande importância. Meu amigo [Guilherme Louro](http://guilhermelouro.com.br/) ficava me sacaneando para eu criar logo um site e foi assim que eu criei. Nesse blog, eu me dediquei a sempre passar conteúdo que eu achava importante e também para eu fixar melhor algum assunto. Foi através desse blog que eu comecei a ficar mais ativo na comunidade, acabei conhecendo várias e várias pessoas da área, comecei a palestrar, fui trabalhar na [globo.com](http://www.globo.com/) e depois na [HUGE](http://www.hugeinc.com/). -E agora, eu diria que comecei meu grande **terceiro projeto paralelo**, que é a criação dos meus cursos. Hoje completam 2 meses que lancei meu [curso sobre criação de sites estáticos com Jekyll](http://willianjusten.com.br/um-novo-projeto-um-novo-desafio/), logo depois criei um [curso sobre Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) e agora estou fazendo a [pré-venda do meu curso de SVG](https://www.udemy.com/aprendendo-svg-do-inicio-ao-avancado/?couponCode=PROMOSITE). +E agora, eu diria que comecei meu grande **terceiro projeto paralelo**, que é a criação dos meus cursos. Hoje completam 2 meses que lancei meu [curso sobre criação de sites estáticos com Jekyll](https://willianjusten.com.br/um-novo-projeto-um-novo-desafio/), logo depois criei um [curso sobre Git e Github](https://www.udemy.com/git-e-github-para-iniciantes/) e agora estou fazendo a [pré-venda do meu curso de SVG](https://www.udemy.com/aprendendo-svg-do-inicio-ao-avancado/?couponCode=PROMOSITE). Isso é um pouquinho da minha história, sempre fui meio maluco de meter as caras, mudei bastante através dos meus projetos paralelos e continuo mudando. E reparei que a cada projeto paralelo, uma grande mudança veio junto. diff --git a/_posts/2016-06-01-como-criar-footer-fixo.md b/_posts/2016-06-01-como-criar-footer-fixo.md index abd474ad..86d7febe 100644 --- a/_posts/2016-06-01-como-criar-footer-fixo.md +++ b/_posts/2016-06-01-como-criar-footer-fixo.md @@ -226,4 +226,4 @@ Bom pessoal, foi um post rapidinho e simples, só mesmo para que vocês vejam as Se você gostou do post, não deixe de comentar, curtir, compartilhar =) -Também lembrando aqui, que a promoção de [pré-venda](http://willianjusten.com.br/pre-venda-curso-de-svg/) do meu Curso de SVG está chegando ao fim, esse domingo (05/06) é o último, então corre para aproveitar o descontão! +Também lembrando aqui, que a promoção de [pré-venda](https://willianjusten.com.br/pre-venda-curso-de-svg/) do meu Curso de SVG está chegando ao fim, esse domingo (05/06) é o último, então corre para aproveitar o descontão! diff --git a/_posts/2016-06-03-utilizando-svg-sprites-com-react.md b/_posts/2016-06-03-utilizando-svg-sprites-com-react.md index 9bfcc236..a1475f8c 100644 --- a/_posts/2016-06-03-utilizando-svg-sprites-com-react.md +++ b/_posts/2016-06-03-utilizando-svg-sprites-com-react.md @@ -20,13 +20,13 @@ introduction: 'Aprenda a utilizar os famosos ícones SVG dentro do React de form Fala pessoal, para dar início as escritas sobre React, resolvi unir com outra paixão minha, que é o SVG. Então, qual forma melhor de explicar alguma coisa, do que fazendo algo na prática? -Se você ainda não viu nenhum post meu sobre React, eu estou voltando a escrever dentro [dessa série](http://willianjusten.com.br/series/#aprendendo-reactjs), olha lá. +Se você ainda não viu nenhum post meu sobre React, eu estou voltando a escrever dentro [dessa série](https://willianjusten.com.br/series/#aprendendo-reactjs), olha lá. Vou falando e ouvindo [um álbum de remixes do Ludovico Einaudi](https://open.spotify.com/album/5vvLGd70sOZSZddNnIejFv), bom demais esse som =D ## Sprites em SVG -Já fiz dois posts sobre esse tipo de técnica em SVG. Um sobre [sistemas de ícones em SVG](http://willianjusten.com.br/sistemas-de-icones-em-svg/) e um outro sobre a [própria técnica](http://willianjusten.com.br/usando-svg-sprites/) de utilizar sprites em SVG. +Já fiz dois posts sobre esse tipo de técnica em SVG. Um sobre [sistemas de ícones em SVG](https://willianjusten.com.br/sistemas-de-icones-em-svg/) e um outro sobre a [própria técnica](https://willianjusten.com.br/usando-svg-sprites/) de utilizar sprites em SVG. A prática consiste basicamente em você ter um arquivo com vários ícones, famoso sprite, com cada ícone sendo um `symbol` do SVG referenciado pelo seu id. @@ -40,7 +40,7 @@ Um exemplo de sprite svg seria: ``` -Se você quiser ver o código extendido, só clicar [neste link](http://willianjusten.com.br/assets/img/react-svg/sprite.svg). +Se você quiser ver o código extendido, só clicar [neste link](https://willianjusten.com.br/assets/img/react-svg/sprite.svg). Se você reparar, cada ícone tem o seu próprio `symbol` e também sua própria `viewBox`, que serve para delimitar seu tamanho e área. Para você utilizar um ícone dessa forma, basta você utilizar a tag `use`, seguindo esse exemplo: @@ -54,7 +54,7 @@ No lugar do `xlink:href`, você passa o id do ícone que você deseja. Para cham ```html - + ``` @@ -66,7 +66,7 @@ Não queremos criar um componente React que simplesmente jogue a nossa chamada d ## O que são Stateless Functions? -As `stateless functions` são de fato, funções sem estado. Ué? Como assim? Você num tinha dito que os componentes de React tinham estado? Mostrou até [um pouco da API](http://willianjusten.com.br/o-basico-da-api-do-reactjs/). +As `stateless functions` são de fato, funções sem estado. Ué? Como assim? Você num tinha dito que os componentes de React tinham estado? Mostrou até [um pouco da API](https://willianjusten.com.br/o-basico-da-api-do-reactjs/). ![Gato com dúvida](https://warosu.org/data/fa/img/0063/58/1371640339134.png) @@ -98,7 +98,7 @@ Essa forma simplificada é destinada para se criar componentes que não vão ter ```js // Definimos a url onde se encontra o sprite -const url = 'http://willianjusten.com.br/assets/img/react-svg/sprite.svg'; +const url = 'https://willianjusten.com.br/assets/img/react-svg/sprite.svg'; // Aqui criamos um componente // que irá gerar nosso ícone SVG @@ -135,4 +135,4 @@ Se você estiver com dúvidas no ES6, como funciona esse tal de `const`, `fat ar Bom galera, post bastante simples, mas muito importante, tanto para o ecossistema React, quanto para o SVG. É importante que você tente ao máximo criar funções puras para ter mais performance na sua aplicação React. E também é bastante importante que você utilize Sprites SVG para diminuir o número de requisições e também possuir ícones que se adaptam em qualquer tipo de tela. -Se você estiver com dúvidas em SVG e quiser saber mais, aproveita que até dia **05/06** meu curso está com o desconto da pré-venda, você pode saber [mais informações aqui](http://willianjusten.com.br/pre-venda-curso-de-svg/). +Se você estiver com dúvidas em SVG e quiser saber mais, aproveita que até dia **05/06** meu curso está com o desconto da pré-venda, você pode saber [mais informações aqui](https://willianjusten.com.br/pre-venda-curso-de-svg/). diff --git a/_posts/2016-07-10-trabalhando-com-git-hooks-de-forma-facil.md b/_posts/2016-07-10-trabalhando-com-git-hooks-de-forma-facil.md index 0e5b310c..371fa2b9 100644 --- a/_posts/2016-07-10-trabalhando-com-git-hooks-de-forma-facil.md +++ b/_posts/2016-07-10-trabalhando-com-git-hooks-de-forma-facil.md @@ -21,7 +21,7 @@ Faaaala pessoal, faz um tempinho que escrevi meu último post, nesses últimos d Lá eu palestrei sobre dois assuntos bem legais e se você ainda não viu meus slides, seguem: - [CSS loves Math - Meetup CSS SP](https://willianjusten.com.br/meetup-css-sp) -- [JS loves Music](http://willianjusten.com.br/frontinsampa-16) +- [JS loves Music](https://willianjusten.com.br/frontinsampa-16) Enquanto escrevo esse post vou ouvindo a trilha de um jogo que estou viciado, o jogo em questão é o premiado [Life is Strange](https://www.youtube.com/watch?v=AURVxvIZrmU) e se você só de assistir esse trailer, já se apaixonou pelo jogo, segue comigo na [playlist](https://open.spotify.com/user/officiallifeisstrange/playlist/1f5ZzLDTXHTDR8CYIEddpW), que é incrivel <3 @@ -29,7 +29,7 @@ Enquanto escrevo esse post vou ouvindo a trilha de um jogo que estou viciado, o Git hooks são scripts que rodam automaticamente cada vez que você realiza alguma ação em particular no repositório Git. Eles permitem modificar o comportamento interno do Git e adicionar triggers customizáveis em vários pontos chave do ciclo de desenvolvimento. -Casos comuns do uso de Git Hooks são encorajar alguma política de commit, alterar algo do ambiente dependendo do estado do repositório ou implementar algum workflow de Integração Contínua. +Casos comuns do uso de Git Hooks são encorajar alguma política de commit, alterar algo do ambiente dependendo do estado do repositório ou implementar algum workflow de Integração Contínua. Essas triggers podem ser ativadas através de commits, push para o repositório remoto, rebase, merges e etc. @@ -53,7 +53,7 @@ $ tree -d -L 1 Como vamos trabalhar com Hooks, já é de se imaginar que devemos nos preocupar com a pasta `hooks`. Se listarmos os arquivos, teremos: ```bash -$ ls +$ ls applypatch-msg.sample pre-applypatch.sample pre-rebase.sample commit-msg.sample pre-commit.sample prepare-commit-msg.sample @@ -89,7 +89,7 @@ test "" = "$(grep '^Signed-off-by: ' "$1" | } ``` -Poderíamos editar esse mesmo arquivo e colocar algo como: +Poderíamos editar esse mesmo arquivo e colocar algo como: ```bash #!/bin/sh @@ -128,7 +128,7 @@ Depois disso, basta ir no seu `package.json` na parte de scripts e colocar os ho } ``` -Ali eu estou criando dois hooks que são `precommit` e `prepush` e estou dizendo que antes de um commit ou um push para o remoto, eles deverão rodar os comandos `lint` e `test`, que eu também determinei no meu npm script. Isso vai garantir que ele verifique se no código não tem nada fora do padrão de escrita, usando o nosso lint. E também irá rodar os testes, evitando que suba algo quebrado. +Ali eu estou criando dois hooks que são `precommit` e `prepush` e estou dizendo que antes de um commit ou um push para o remoto, eles deverão rodar os comandos `lint` e `test`, que eu também determinei no meu npm script. Isso vai garantir que ele verifique se no código não tem nada fora do padrão de escrita, usando o nosso lint. E também irá rodar os testes, evitando que suba algo quebrado. ![Um carinha com bigodes e vestido com camisa de unicórnio falando it's magic de forma bem engraçada](http://i.imgur.com/iZcUNxH.gif) @@ -137,14 +137,3 @@ Se você não conhece o `eslint` para verificar seu padrão de escrita, dá uma ## Conclusão Bom galera, espero que vocês tenham entendido o quanto é simples de se utilizar um Git Hook e como ele pode ser importante para o nosso desenvolvimento. Não quero mais ninguém subindo código fora de padrão e com testes quebrando hein! =p - - - - - - - - - - - diff --git a/_posts/2016-08-29-achievement-concluido-braziljs.md b/_posts/2016-08-29-achievement-concluido-braziljs.md index f999c451..3a0917f0 100644 --- a/_posts/2016-08-29-achievement-concluido-braziljs.md +++ b/_posts/2016-08-29-achievement-concluido-braziljs.md @@ -65,7 +65,7 @@ Ter visto a galera rindo dos meus exemplos e das minhas piadas bobas foi só me

final da palestra do @Willian_justen foi excelente 😁 #braziljs pic.twitter.com/aDLggwbhUd

— yuri (@ybrntt) August 26, 2016
-E para assistir a apresentação inteira, só seguir [nesse link](https://youtu.be/tJ0XV9W4nHw?t=23396), já no tempo marcado. Os slides também [estão aqui](http://willianjusten.com.br/braziljs-16). +E para assistir a apresentação inteira, só seguir [nesse link](https://youtu.be/tJ0XV9W4nHw?t=23396), já no tempo marcado. Os slides também [estão aqui](https://willianjusten.com.br/braziljs-16). ## Depois diff --git a/_posts/2017-06-15-criando-um-loader-animado-em-svg.md b/_posts/2017-06-15-criando-um-loader-animado-em-svg.md index 55bea583..d7154971 100644 --- a/_posts/2017-06-15-criando-um-loader-animado-em-svg.md +++ b/_posts/2017-06-15-criando-um-loader-animado-em-svg.md @@ -26,7 +26,7 @@ Faaaaaala pessoal, quanto tempo não escrevo aqui e hoje eu venho trazer um post ## Detalhes -Se você quiser ver na prática ao invés de só no vídeo, segue o [link da demo](http://willianjusten.com.br/curso-de-svg/strokes/loader.html). +Se você quiser ver na prática ao invés de só no vídeo, segue o [link da demo](https://willianjusten.com.br/curso-de-svg/strokes/loader.html). Como visto no vídeo, primeiro a gente precisa criar um triângulo, definindo um `svg` com sua `viewbox`. Se quiser, tem um [post sobre a estrutura do SVG](https://willianjusten.com.br/a-estrutura-do-svg/) onde você pode ler mais sobre também. E o código fica: diff --git a/about.html b/about.html index 96741c08..1f8816c2 100644 --- a/about.html +++ b/about.html @@ -43,7 +43,7 @@

Projetos

  • Lyef - Um projeto em React para criação de componentes desacoplados e independentes.
  • Awesome-SVG - uma lista de links sobre SVG.
  • Awesome Audio Visualization - uma lista de links sobre Audio Visualization
    • -
  • Screamer JS - um plugin em javascript puro para criação de notificações web via Notification API.
    • +
  • Screamer JS - um plugin em javascript puro para criação de notificações web via Notification API.
  • Tradução do SVG Pocket Guide
  • Qualy Front - um boilerplate para trabalhar com ES6, focando em qualidade e padrões de código, usando hooks e linters.
    • @@ -51,7 +51,7 @@

    Projetos

  • Fast Boilerplate - um boilerplate para criação de projetos rápidos.
  • O template de 2015 desse blog lindo
  • O template de 2016 desse blog lindo
    • -
  • Minimal Blog - um template minimalista feito em Jekyll.
    • +
  • Minimal Blog - um template minimalista feito em Jekyll.
  • Várias coisinhas no Github
    • @@ -72,13 +72,13 @@

    Talks

    -

    Se interessou em algum conhecimento meu e quer entrar em contato? Só mandar um email para willianjustenqui@gmail.com.

    \ No newline at end of file +

    Se interessou em algum conhecimento meu e quer entrar em contato? Só mandar um email para willianjustenqui@gmail.com.

    diff --git a/initpost.sh b/initpost.sh index d160bf16..4e4dd74b 100755 --- a/initpost.sh +++ b/initpost.sh @@ -46,7 +46,7 @@ POSTPATH="${BINPATH}/_posts" DIST_FOLDER="$POSTPATH" # Set your blog URL -BLOG_URL="http://willianjusten.com.br" +BLOG_URL="https://willianjusten.com.br" # Set your assets URL ASSETS_URL="assets/img/" @@ -161,4 +161,4 @@ main() { } # Initialize -main $* \ No newline at end of file +main $*