--- title: Avenue Code Snippets | Front-end (3) description: Front-end | Follow the main news in the area of ​​technology. Software development, design and UX, ML, DevOps and much more! (3) --- [AvenueCode.com](https://avenuecode.com) [News](https://avenuecode.com/news) [Contact](https://avenuecode.com/contact) [![Avenue Code Snippets Logo](https://blog.avenuecode.com/hubfs/Avenue%20Code%20New%20Logos%20-%202023/AC-Snippets---Black.png)](https://blog.avenuecode.com/) *menu* - Technology [Cloud and DevOps](https://blog.avenuecode.com/blog/topic/cloud-and-devops?hsLang=en-us) [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) [Quality Assurance](https://blog.avenuecode.com/blog/topic/quality-assurance?hsLang=en-us) [Integration](https://blog.avenuecode.com/blog/topic/integration?hsLang=en-us) [Design and UX](https://blog.avenuecode.com/blog/topic/design-and-ux?hsLang=en-us) [Solutions Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) [Data and Machine Learning](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) [Microservices](https://blog.avenuecode.com/blog/topic/microservices?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) - [Cloud and DevOps](https://blog.avenuecode.com/blog/topic/cloud-and-devops?hsLang=en-us) - [Design and UX](https://blog.avenuecode.com/blog/topic/design-and-ux?hsLang=en-us) - [Delivery Infrastructure](https://blog.avenuecode.com/blog/topic/delivery-infrastructure?hsLang=en-us) - [Solutions Architecture](https://blog.avenuecode.com/blog/topic/solution-architecture?hsLang=en-us) - [Web Experience](https://blog.avenuecode.com/blog/topic/web-experience?hsLang=en-us) - [Data and Machine Learning](https://blog.avenuecode.com/blog/topic/data-and-machine-learning?hsLang=en-us) - [Agile Mindset](https://blog.avenuecode.com/blog/topic/agile-mindset?hsLang=en-us) - [Mobile Experience](https://blog.avenuecode.com/blog/topic/mobile-experience?hsLang=en-us) - [Microservices](https://blog.avenuecode.com/blog/topic/microservices?hsLang=en-us) - [Quality Assurance](https://blog.avenuecode.com/blog/topic/quality-assurance?hsLang=en-us) - [Integration](https://blog.avenuecode.com/blog/topic/integration?hsLang=en-us) - [Whitepapers](https://blog.avenuecode.com/blog/topic/whitepapers?hsLang=en-us) - [Spotlight](https://blog.avenuecode.com/blog/topic/spotlight?hsLang=en-us) - [Extraordinary Women in Tech](https://blog.avenuecode.com/blog/topic/extraordinary-women-in-tech?hsLang=en-us) - [Avenue Code Culture](https://blog.avenuecode.com/blog/topic/avenue-code-culture?hsLang=en-us) ## [Featured [Creating A Data Visualization From Scratch Using d3.js](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js?hsLang=en-us) *perm\_identity* [André Gonzaga](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js/author/andr%C3%A9-gonzaga?hsLang=en-us) *schedule* 7/27/17 4:00 PM](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js?hsLang=en-us) ## [Creating A Data Visualization From Scratch Using d3.js](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js?hsLang=en-us) *perm\_identity* [André Gonzaga](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js/author/andr%C3%A9-gonzaga?hsLang=en-us) *schedule* 7/27/17 4:00 PM Deriving information from data can be a big challenge. In this post, we will learn how to create a simple data visualization using d3.js. Moreover, we will try to understand the basic concepts under this amazing library as well as go through a brief overview of javascript, css, and svg. *perm\_identity* [André Gonzaga](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js/author/andr%C3%A9-gonzaga?hsLang=en-us) *schedule* 7/27/17 4:00 PM [READ MORE](https://blog.avenuecode.com/creating-a-data-visualization-from-scratch-using-d3.js?hsLang=en-us) ## [A JAVA Developer's Perspective on Node.js](https://blog.avenuecode.com/java-developer-exploring-nodejs?hsLang=en-us) *perm\_identity* [Milena Santos](https://blog.avenuecode.com/java-developer-exploring-nodejs/author/milena-santos?hsLang=en-us) *schedule* 5/17/17 4:00 PM > According to the latest StackOverflow [survey](http://stackoverflow.com/insights/survey/2017#technologies-and-occupations), Javascript is the top-ranked technology in terms of overall usage. Unsurprisingly, it's also top of the list for occupations, and with the advent of Node.js, has become increasingly in-demand.   *perm\_identity* [Milena Santos](https://blog.avenuecode.com/java-developer-exploring-nodejs/author/milena-santos?hsLang=en-us) *schedule* 5/17/17 4:00 PM [READ MORE](https://blog.avenuecode.com/java-developer-exploring-nodejs?hsLang=en-us) ## [9 Ways To Avoid Pitfalls Using Node.js](https://blog.avenuecode.com/9-ways-to-avoid-pitfalls-using-nodejs?hsLang=en-us) *perm\_identity* [Wellington Soares](https://blog.avenuecode.com/9-ways-to-avoid-pitfalls-using-nodejs/author/wellington-soares?hsLang=en-us) *schedule* 3/22/17 4:36 PM > Node.js has been widely adopted over the last few years, even by such well-known giants as Netflix, IBM, Walmart, Intel and NASA. Benefits like a support plan and a vast collection of open-source libraries account for much of the growth in Node adoption in the enterprise, replacing typical... *perm\_identity* [Wellington Soares](https://blog.avenuecode.com/9-ways-to-avoid-pitfalls-using-nodejs/author/wellington-soares?hsLang=en-us) *schedule* 3/22/17 4:36 PM [READ MORE](https://blog.avenuecode.com/9-ways-to-avoid-pitfalls-using-nodejs?hsLang=en-us) ## [Enabling Rich Previews of Shared Links](https://blog.avenuecode.com/rich-previews-of-shared-links?hsLang=en-us) *perm\_identity* [Mark Carlson](https://blog.avenuecode.com/rich-previews-of-shared-links/author/mark-carlson?hsLang=en-us) *schedule* 2/15/17 7:50 PM *A hands-on look at enabling rich previews of links in iMessage, Facebook, and beyond. First published on January 9th, 2017 at [markcarlson.io](http://markcarlson.io/enabling-rich-previews-of-shared-links/)* The iMessage app in iOS 10 provides rich previews of links when they are properly formatted to take advantage of this new feature. In addition, these same... *perm\_identity* [Mark Carlson](https://blog.avenuecode.com/rich-previews-of-shared-links/author/mark-carlson?hsLang=en-us) *schedule* 2/15/17 7:50 PM [READ MORE](https://blog.avenuecode.com/rich-previews-of-shared-links?hsLang=en-us) ## [How To Build a WebApp Using Swift - Part 1](https://blog.avenuecode.com/how-to-build-a-webapp-using-swift-part-1?hsLang=en-us) *perm\_identity* [Lucio Fonseca](https://blog.avenuecode.com/how-to-build-a-webapp-using-swift-part-1/author/lucio-fonseca?hsLang=en-us) *schedule* 1/11/17 11:00 PM > During the Wordwide Developers Conference (WWDC) 2014, Apple brought to the world something every iOS developer was expecting: A new language named [Swift](https://developer.apple.com/swift/), that was presented as the solution for the already old-fashioned Objective-C. The promise was that Swift would be modern, and would bring more... *perm\_identity* [Lucio Fonseca](https://blog.avenuecode.com/how-to-build-a-webapp-using-swift-part-1/author/lucio-fonseca?hsLang=en-us) *schedule* 1/11/17 11:00 PM [READ MORE](https://blog.avenuecode.com/how-to-build-a-webapp-using-swift-part-1?hsLang=en-us) ## [Improving Javascript Performance with Event Delegation](https://blog.avenuecode.com/improving-javascript-performance-with-event-delegation?hsLang=en-us) *perm\_identity* [Rafael Guedes](https://blog.avenuecode.com/improving-javascript-performance-with-event-delegation/author/rafael-guedes?hsLang=en-us) *schedule* 1/5/17 12:23 AM > Events are the most common way to promote interactions between the UI and application layers on web applications. Be it a click, a focus or a scroll, webapps are filled with them, bringing sites to life, enhancing user experience and promoting friendly interfaces to the end user. *perm\_identity* [Rafael Guedes](https://blog.avenuecode.com/improving-javascript-performance-with-event-delegation/author/rafael-guedes?hsLang=en-us) *schedule* 1/5/17 12:23 AM [READ MORE](https://blog.avenuecode.com/improving-javascript-performance-with-event-delegation?hsLang=en-us) ## [Parallax on the web](https://blog.avenuecode.com/parallax-on-the-web?hsLang=en-us) *perm\_identity* [Eduardo Silva](https://blog.avenuecode.com/parallax-on-the-web/author/eduardo-silva?hsLang=en-us) *schedule* 12/28/16 4:36 PM > Those who enjoy surfing the internet and admire the beauty in websites have almost definitely noticed the introduction of a new design concept: the parallax. The parallax itself is a technique that explores component independent movement, creating astonishing 3D visual effects in the page. This... *perm\_identity* [Eduardo Silva](https://blog.avenuecode.com/parallax-on-the-web/author/eduardo-silva?hsLang=en-us) *schedule* 12/28/16 4:36 PM [READ MORE](https://blog.avenuecode.com/parallax-on-the-web?hsLang=en-us) [Previous](https://blog.avenuecode.com/topic/front-end/page/2?hsLang=en-us) [Next](https://blog.avenuecode.com/topic/front-end/page/4?hsLang=en-us) ### Avenue Code Social [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Blog/facebook.png?t=1486470796564)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Blog/twitter.png?t=1486470796842)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Blog/linkedin.png?t=1486470796556)](https://www.linkedin.com/company/avenuecode/) ### Newsletter Want to stay on top of all tips and news from Avenue Code? ### Popular Snippets ![Avenue Code-primary versions_logo white avenue code endorsement 2](https://blog.avenuecode.com/hs-fs/hubfs/Avenue%20Code%20New%20Logos%20-%202023/Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png?width=1180&name=Avenue%20Code-primary%20versions_logo%20white%20avenue%20code%20endorsement%202.png "Avenue Code-primary versions_logo white avenue code endorsement 2") ### About Us - [Who We Are](https://www.avenuecode.com/who-we-are) - [What We Do](https://www.avenuecode.com/what-we-do) - [Portfolio](https://www.avenuecode.com/portfolio) - [Partners](https://www.avenuecode.com/partners) - [News](https://www.avenuecode.com/news) - [Events](https://www.avenuecode.com/events) - [Blog](https://blog.avenuecode.com/) - [Contact](https://www.avenuecode.com/contact) ### Our Offices San Francisco [+1 415 766 4178](tel:+553125161448) [ac.inquiries@avenuecode.com](mailto:brazil.info@avenuecode.com) Belo Horizonte [+55 31 2516 1448](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) São Paulo [+55 11 3205 3232](tel:+553125161448) [brazil.info@avenuecode.com](mailto:brazil.info@avenuecode.com) ### We're Hiring! - [Belo Horizonte](https://www.avenuecode.com/who-we-are) - [New York](https://www.avenuecode.com/what-we-do) - [San Francisco](https://www.avenuecode.com/portfolio) - [São Paulo](https://www.avenuecode.com/partners) --- ©2015 - 2017 Avenue Code [![Facebook Icon](https://blog.avenuecode.com/hubfs/Images/Icons/facebook-2.png)](https://www.facebook.com/avenuecode) [![Twitter Icon](https://blog.avenuecode.com/hubfs/Images/Icons/twitter-2.png)](https://twitter.com/AvenueCode) [![LinkedIn Icon](https://blog.avenuecode.com/hubfs/Images/Icons/linkedin-2.png)](https://www.linkedin.com/company/avenue-code) [![Glassdoor Icon](https://blog.avenuecode.com/hubfs/Images/Icons/glassdoor-icon-1.png)](https://www.glassdoor.com/Overview/Working-at-Avenue-Code-EI_IE456173.11,22.htm) [![YouTube Icon](https://blog.avenuecode.com/hubfs/Images/Icons/youtube-2.png)](https://www.youtube.com/user/AvenueCodePlay) © 2026 Avenue Code