EdMarcus / dctb-links

My Personal Links

Meus Links

Neste repositório estão os links interessantes de idéias, componentes e ferramentas para o desenvolvimento web.

Codrops

• http://tympanus.net/codrops/ - Coleção de Bibliotecas CSS + JavaScript;
• https://codyhouse.co/library/ - Coleção de Bibliotecas CSS + JavaScript;

Resouce Cards

• https://resourcecards.com/ - Coleção de Recursos Variados;

JQuery / Plugins / Frameworks

• http://gaya.github.io/scripts/queryLoader2/ - Loading de imagens com porcentagem;
• http://www.mattboldt.com/demos/typed-js/ - Efeito de escrita;
• https://github.com/goldfire/howler.js - Biblioteca de Sons;
• http://hilios.github.io/jQuery.countdown/ - Countdown;
• http://underscorejs.org/ - JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects;
• http://masonry.desandro.com/ - Masonry is a JavaScript grid layout library;
• http://isotope.metafizzy.co/ - Filter & sort magical layouts;
• http://flickity.metafizzy.co/ - Touch, Responsible Carrosel;
• https://github.com/maxwellito/vivus#vivusjs - Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs;
• http://t4t5.github.io/sweetalert/ - A BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S "ALERT";
• http://slippry.com/ - Slider;
• https://sbstjn.github.io/timesheet.js/ - Vizualiação em TimeLine;
• http://designwithpc.com/Plugins/ddSlick#demo - Slick;
• https://github.com/fengyuanchen/cropper - Cropper para imagens;
• http://icheck.fronteed.com/ - Personalizar checkbox e radio;
• http://abpetkov.github.io/switchery/ - Switch com visual IOS;
• https://jqueryvalidation.org/ - Validação com JQuery;
• http://srobbin.com/jquery-plugins/backstretch/ - Background em sites;
• http://viacep.com.br/exemplo/jquery/ - CEP via JQuery;
• http://giovanneafonso.github.io/jquery.cep/ - CEP via JQuery;

JavaScript

• http://blog.justdigital.com.br/o-que-muda-no-javascript-com-o-ecmascript-6 - Novidades no ECS6;
• https://contaazul.github.io/creditcard.js/ - Validação de Cartão de Crédito;
• https://medium.com/@matheusml/entendendo-programa%C3%A7%C3%A3o-funcional-em-javascript-de-uma-vez-c676489be08b#.duc4g838f - Programação JavaScript Funcinal;
• http://umbrellajs.com/ - Alternativa ao JQuery;
• http://nodedecode.com.br/javascript-ecmascript-6/ - ECS6;
• http://tableless.com.br/mais-valvulas-para-seu-javascript/ - V8;
• https://github.com/willianjusten/screamer-js - Notificações;
• http://fullcalendar.io/ - Calendário;
• http://umbrellajs.com/ - DOM manipulation;
• http://leafletjs.com/ - Manipulação de mapas;
• http://jvectormap.com/ - Criar mapas;
• http://github.hubspot.com/vex/docs/welcome/ - Alert em JS;
• http://fabien-d.github.io/alertify.js/ - Alerta em JS;
• http://limonte.github.io/sweetalert2/ - Alerta em JS;
• https://codemirror.net/ - Timeline em site;
• https://blog.jscrambler.com/12-extremely-useful-hacks-for-javascript/ - JavaScript Hacks;
• http://www.gravmatt.com/force-js/ - Animação de Elementos;
• http://jstherightway.org/ - JavaScript The Right Way;
• http://nipher.io/ES6-arrow-functions - Arrow Functions ES6;
• http://www.sitepoint.com/map-reduce-functional-javascript/ - Map Reduce;
• https://medium.com/@matheusml/o-que-todo-desenvolvedor-javascript-precisa-saber-2cc33daedb86#.n21xlxlal - O que TODO desenvolvedor JavaScript precisa saber;
• Drag and Drop Upload - http://www.dropzonejs.com/

Apache

• https://www.youtube.com/watch?v=u7pFzHai8oM - Melhorias no Apache;
• https://www.digitalocean.com/community/tutorials/apache-vs-nginx-practical-considerations?utm_medium=social&utm_source=facebook&utm_campaign=apache_vs_nginx_tut&utm_content=image - Apache vs. Ngix;

NodeJS

• http://www.chalkstreet.com/learn-node-js-from-scratch-applications-tutorial-for-beginners/?utm_source=dac&utm_medium=node&utm_campaign=sn - Tutorial;
• http://nodedecode.com.br/modulos-node-js-socket-io-cluster/ - Socket.io + Cluster;
• http://webschool.io/bemean/ - NodeJs
• http://clubedosgeeks.com.br/programacao/node-js/node-js-desenvolvendo-aplicacoes-desktop-com-node-webkit - Criando um executável com NodeJS
• https://medium.com/javascript-scene/how-to-use-es6-for-isomorphic-javascript-apps-2a9c3abe5ea2#.ooapdd9ey - Transformando ECS6 em ECS5;
• https://github.com/filipedeschamps/rss-feed-emitter - RSS Feed Emitter

MongoDB

• http://webschool.io/bemean/ - MongoDB

MySQL

• http://performancedb.com.br/blog/archives/176 - MySQL + JSON;

SublimeText

• http://equinusocio.github.io/material-theme/ - Tema para o Sublime;
• http://willianjusten.com.br/meus-plugins-favoritos-do-sublime-text/ - Temas e Plugins;

Tipografia

• https://www.web-font-generator.com/ - Gerador de Fontes para CSS + HTML;
• http://www.fontsquirrel.com/tools/webfont-generator - Gerador de Fontes para CSS + HTML;
• http://fabiandesmet.com/portfolio/butler-font/ - Butler Font;
• https://www.origamid.com/wp-content/uploads/2015/05/tipografia-para-web.pdf - Tipografia para Web;
• https://onlinefontconverter.com/ - Online Fonte Converter;

Tutorial Git

• https://github.com/MuvucaGames/Tutoriais/wiki/%5BWIP%5D-Tutorial-completo-sobre-versionamento-com-GIT

HTML / Templates

• https://braziljs.org/blog/legenda-em-videos-html5/ - Legendas em vídeos no html;
• https://github.com/tui2tone/flat-admin-bootstrap-templates - Template Admin
• https://webdesignviews.com/cheat-sheets/ - Cheat Sheets for Frontend Developers;
• http://www.getmdl.io/index.html - Material Design Lite;
• http://willianjusten.com.br/efeito-de-desenhar-com-svg/ - Desenhar com SVG;
• http://cienciacomputacao.com.br/desenvolvimento/coverr-videos-como-background/ - Vídeos como Background;
• http://willianjusten.com.br/manipulando-svg-com-js/ - SVG + Js;
• http://willianjusten.com.br/semcomp-2015/#/7 - Vetor;
• http://willianjusten.com.br/animando-svg-com-smil/ - SVG animado com Smil;
• http://willianjusten.com.br/como-criar-secoes-fullscreen-com-css/ - Seções Full Screen;
• http://willianjusten.com.br/usando-svg-sprites/ - Usando SVG's sprites;
• http://pastebin.com/ZA9shjxU - WebDatabase;
• https://www.script-tutorials.com/pure-html5-file-upload/ - Upload de arquivos em HTML5;
• https://24ways.org/2013/animating-vectors-with-svg/ - Vetor com SVG
• https://davidwalsh.name/svg-animation - Animação SVG
• http://tympanus.net/codrops/2013/06/06/on-scroll-animated-header/ - Header animado on scroll;
• https://www.tinymce.com/ - Editar códigos em site;
• https://codyhouse.co/gem/vertical-timeline/ - Timeline;
• https://www.origamid.com/aula/4-2-separadores-e-ornamentos/ - Separadores

Bootstrap / CSS

• http://expo.getbootstrap.com/ - Exemplos bootstrap;
• https://jonsuh.com/hamburgers/ - Menus;
• http://www.voxelcss.com/ - CSS 3D;
• http://imasters.com.br/front-end/css/centralizando-conteudo-na-vertical-e-na-horizontal-com-css-flexbox/ - Flexbox;
• http://flexboxgrid.com/ - A grid system based on the flex display property;
• http://philipwalton.github.io/solved-by-flexbox/ - Flexbox;
• http://willianjusten.com.br/filtros-css/ - Filtros em CSS;
• http://msurguy.github.io/background-blur/ - Background Blur;
• http://willianjusten.com.br/alguns-seletores-css-importantes-para-aprender/ - Seletores Importantes;
• http://fezvrasta.github.io/bootstrap-material-design - Material Design + Bootstrap;
• https://bootstrap-datepicker.readthedocs.org/en/latest/ - Calendário em Bootstrap;
• https://mjolnic.com/bootstrap-colorpicker/ - Color picker;
• https://daneden.github.io/animate.css/ - Animação utilizando CSS;
• https://silviomoreto.github.io/bootstrap-select/examples/ - Select para bootstrap;
• http://hackerthemes.com/bootstrap-cheatsheet/ - Bootstrap 4 Cheat Sheet;
• https://cssanimation.rocks/twitter-fave/ - Animação de Ícones;
• http://codepen.io/origamid/details/KzRLKJ - Calc em Grids;
• https://css-tricks.com/snippets/css/complete-guide-grid/ - Guia Completo Grids;
• http://clovisdasilvaneto.github.io/anima-es-avan-adas-com-css3-introdu-o/ - Animações CSS;
• https://codeappweb.blogspot.com.br/2016/05/animaciones-css3-framework-list.html?platform=hootsuite - Animações CSS + JS;
• https://codepen.io/nxworld/pen/ZYNOBZ - Efeitos houver imagens;

Efeitos

• https://daneden.github.io/animate.css/
• https://elrumordelaluz.github.io/csshake/
• http://mynameismatthieu.com/WOW/
• http://lab.hakim.se/scroll-effects/
• http://www.jasonlusk.com/scroll/

Temas Wordpress

• http://themeforest.net/item/kalium-creative-theme-for-professionals/10860525

Temas Linux

• http://itsfoss.com/install-numix-ubuntu/

Git

• https://git-scm.com/book/pt-br/v1/Ramifica%C3%A7%C3%A3o-Branching-no-Git-B%C3%A1sico-de-Branch-e-Merge
• https://about.gitlab.com/downloads/#ubuntu1604 - Install Git Lab
• https://braziljs.org/blog/profissionalizando-seus-projetos-no-github-2/ - Dicas para usar o GitHub

PHP

• http://www.douglaspasqua.com/2015/05/24/criando-aplicativos-facebook-sdk-v5-em-php/ - Facebook e PHP;
• http://reactphp.org/ - ReactPHP (React is a low-level library for event-driven programming in PHP);
• http://socketo.me/ - Websockets com PHP;
• http://www.codeigniter.com/ - Framework PHP;
• http://forum.imasters.com.br/topic/489419-exportando-relatorio-para-pdf/ - PDF com PHP;
• https://github.com/masterexploder/PHPThumb/wiki/Basic-Usage - Manipulação de Imagens;

Ferramentas para Gerência de Projetos

• http://cienciacomputacao.com.br/desenvolvimento/solo-gerencie-seus-projetos-facilmente/ - Solo;
• www.slack.com - Slack;

Linux

• http://www.howtogeek.com/104708/how-to-customize-ubuntus-message-of-the-day/ - Alterando mensagem do dia;

Diversos

• http://portillodesign.com.br/programacao/sefaz-como-fazer-integracao-nfe-cte.html - Notas Fiscais;
• http://devdocs.io/ - Documentações de Várias Linguagens de Programação;
• http://willianjusten.com.br/links-da-semana-6/ - Vários Links Interessantes;
• https://www.digitalocean.com/community/tutorials/how-to-use-ps-kill-and-nice-to-manage-processes-in-linux - How To Use ps, kill, and nice to Manage Processes in Linux;
• http://ionicframework.com/ - Ionic: Advanced HTML5 Hybrid Mobile App Framework;
• https://browserdiet.com/pt/ - Como perder peso no browser;
• http://imgur.com/1c9y0 - Linux - Terminal Commands;
• https://www.pubnub.com/blog/2014-10-21-building-a-webrtc-video-and-voice-chat-application/ - Call Video;
• http://viverdeblog.com/usabilidade-conversao/ - Usabilidade Conversão;
• http://www.gigga.com.br/2015/07/06/novo-framework-do-google-leva-material-design-para-paginas-da-web/ - Material Design para Web;
• http://rohanbernartt.com.br/ubuntu-como-ambiente-de-desenvolvimento-php/ - Ubuntu como ambiente de desenvolvimento web;
• http://willianjusten.com.br/como-se-tornar-um-desenvolvedor-front-end/ - Como se tornar um desenvolvedor Front-End;
• https://medium.com/brasil/trezentas-coisas-gratuitas-e-sensacionais-para-empreendedores-e-startups-4d054afd6395#.5trtora5r - Trezentas coisas Gratuitas para Startups;
• http://www.designculture.com.br/extensoes-gratuitas-do-photoshop-para-designers/ - Extensões Gratuitas para Photoshop;
• https://mega.co.nz/#F!CNoRyJgS!UukXMgpWDAMgZ3dFO-tUlA
• https://www.mailpile.is/ - Cliente de Email Local;
• http://it-ebooks-search.info/ - Ebooks Gratuitos;
• http://libgen.io - Materiais Gratuitos;
• https://tasafo.wordpress.com/2014/08/09/iniciando-com-elasticsearch/ - Elastic Search;
• https://www.youtube.com/watch?v=xtqMatzVoSA - Advanced Custom Fields Wordpress Plugin;
• http://blog.da2k.com.br/2015/02/05/segredos-do-github-hospedando-seu-site-no-github/ - Hospedando seu site no GitHub;
• http://www.mettzer.com/ - Plataforma para Confecção de TCC nas normas da ABNT;
• https://www.import.io - Ferramenta para importação de dados;
• https://github.com/CodeSeven/toastr - Toast em site;
• http://www.json-generator.com/ - Gerador de JSON;
• http://www.allitebooks.com/ - Livros de TI;
• https://markdown-it.github.io/ - Markdown live preview;
• http://blog.cloudfour.com/responsive-logo-composition-with-svg/ - Logo responsiva com SVG;
• http://css4rocks.cygenic.com/selectors-level-4/?utm_source=html5weekly&utm_medium=email - Seletores CSS4;
• http://design.google.com/resizer/ - Google Resizer;
• http://willianjusten.com.br/criando-efeito-parallax-no-header/ - Efeito Paralax;
• http://fvsch.com/code/svg-icons/how-to/ - Ícones em SVG;
• https://www.youtube.com/watch?v=KJG1dETacLI - Expressões Regulares;
• http://tableless.com.br/lojas-virtuais-com-woocommerce/ - WooCommerce;
• http://instacod.es/ - Imagem para códigos instagram;
• http://www.z-cron.com/ - Cron no windows;

Web Mobile Optimizing

• http://blog.teamtreehouse.com/optimizing-mobile-web-apps-ios

Design Assets

• https://pixabay.com/ - Site gratuito de imagens em alta resolução;
• https://www.pexels.com/ - Tbm é gratuito porém acervo é menor que o primeiro;
• http://graphicburger.com/ - Vetores, mock-ups, icons e etc;
• http://instantlogosearch.com/ - Grande acervo de logos;
• http://www.brusheezy.com/ - Arquivos em psd, contém brushes e actions gratuitos;
• http://www.inspi.com.br/2016/05/8-sites-para-te-ajudar-escolher-palheta-de-cores-ideal/ - Paleta de Cores;
• https://visualhunt.com/ - Imagens Creative Commons;

Usabilidade e Pesquisa

• UsabilityHub - https://usabilityhub.com/
• Usabilla - https://usabilla.com/
• Morae - https://www.techsmith.com/morae.html
• Testaisso - http://www.testaisso.com.br/
• Dribbble - https://dribbble.com/
• Behance - https://www.behance.net/
• MaterialUp - http://www.materialup.com/
• Pintrest - https://br.pinterest.com/
• Calltoidea - http://www.calltoidea.com/

Arquitetura de Informação, Fluxogramas e SiteMaps

• Google Draw - https://docs.google.com/drawings/
• Draw.io - https://www.draw.io/
• Illustrator CC - http://www.adobe.com/br/products/illustrator.html
• Gliffy - https://www.gliffy.com/
• Axure - http://www.axure.com/

Wireframes e Prototipação

• Axure - http://www.axure.com/
• QuirkTools - http://quirktools.com/wires/p0njrs/
• Pixate - http://www.pixate.com/
• Fireworks - http://www.adobe.com/br/products/fireworks.html
• Sketch V3 - https://designcode.io/sketch
• Invision (Prototipação colaborativa) - http://www.invisionapp.com/
• Adobe Experience Design (Preview) - http://www.adobe.com/jp/products/experience-design.html
• Balsamiq - https://balsamiq.com/

Design

• Photoshop - http://www.adobe.com/br/products/photoshop.html
• Fireworks - http://www.adobe.com/br/products/fireworks.html
• Illustrator CC - http://www.adobe.com/br/products/illustrator.html
• Experience Design CC - http://www.adobe.com/products/experience-design.html
• Front-End Linux - http://blog.da2k.com.br/2015/01/15/como-ser-um-dev-frontend-usando-linux/

Codificação

• SublimeText - https://www.sublimetext.com/
• Dreamweaver - http://www.adobe.com/br/products/dreamweaver.html
• Visual Studio - https://code.visualstudio.com/
• Brackets - http://brackets.io/
• Wakatime - https://wakatime.com/
• Atom - https://atom.io/

Codificação online

• Tutorials Point - http://www.tutorialspoint.com/codingground.htm
• JSFiddle - https://jsfiddle.net/
• Codepen - http://codepen.io/
• Plunker - https://plnkr.co/
• C9 - https://c9.io/

SEO & Otimização

• Google Webmaster - https://www.google.com/intl/pt-BR/webmasters/#?modal_active=none
• Google Analytics - https://www.google.com/intl/pt-BR/analytics/
• Good Adwords (Key Planner) - https://adwords.google.com.br/KeywordPlanner
• Bing Webmaster - http://www.bing.com/toolbox/webmaster
• Woorank - https://www.woorank.com/pt
• OpenLinkProfiler - http://openlinkprofiler.org/
• Moz - https://moz.com/products/pro
• http://tableless.com.br/seo-iniciantes-basico/

Outros

• Asana - https://app.asana.com/0/102300481623694/102300481623695
• Redepen - https://redpen.io/
• GhostLab (Igual ao AdobeEdge) - https://www.vanamco.com/ghostlab/

Processo de Criação Web

• https://www.youtube.com/watch?v=f15NQEyKoDU

Compressão de Imagens

• TinyPNG - https://tinypng.com/
• PNGQuant - https://pngquant.org/
• Plugin Photoshop PNGQuant - http://www.fnordware.com/superpng/

UX / UI

• http://chocoladesign.com/design-basico-diferenca-entre-ux-e-ui-design
• http://arquiteturadeinformacao.com/mercado-e-carreira/o-mito-do-hibrido-uxui-designer

Fontes

• https://www.google.com/fonts#ReviewPlace:refine/Collection:Oswald|Roboto|Roboto+Condensed|Open+Sans|Open+Sans+Condensed:300

Transferência de Arquivo

• https://reep.io
• http://www.wetransfer.com
• http://www.mega.nz

Conferência

• https://role.vc
• https://appear.in

Paleta de cores

• http://colorphile.com/ - Escolher cores;
• http://clrs.cc/ - Escolher cores;
• http://brandcolors.net/ - Cores de logos e empresas famosas;
• http://cymbolism.com/ - Significado de cores;

Imagens em PSD

• http://freepsds.org/
• http://pt.365psd.com/
• http://www.pixeden.com/
• http://www.premiumpixels.com/
• http://freebiesbug.com/
• http://pt.clipart.me/
• http://uidock.com/
• http://www.freepik.com/
• http://freepsdfiles.net/
• http://www.psdgraphics.com/
• http://psdreams.com/
• http://www.brusheezy.com/psds
• http://psdblast.com/

Imagens vetorizadas

• http://www.vecteezy.com/
• http://vector.so/
• http://www.freevectors.net/
• https://www.vectorstock.com/free-vectors
• http://pt.vector.me/
• http://www.freevector.com/

Icones

• https://fortawesome.github.io/Font-Awesome/icons/
• https://icomoon.io/
• http://paymentfont.io/
• http://iosicongallery.com/
• https://www.iconfinder.com/
• http://findicons.com/
• http://www.iconarchive.com/
• http://iconmonstr.com/
• http://flaticons.net/
• http://famfamfam.com/
• http://www.iconspedia.com/
• http://fonticons.net/
• http://flaticon.io/
• http://fontello.com/

Construtor de páginas

• https://bootstrapstudio.io/
• http://codecanyon.net/item/html-builder-frontend-version/full_screen_preview/8432859
• http://www.layoutit.com/build
• https://www.nitrous.io/