![Maria Antonietta Perna](https://uploads.sitepoint.com/wp-content/uploads/2019/02/1549724999whatsappprofile-small-150x150.jpg)
Maria Antonietta Perna is a teacher and technical writer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding or writing for the web, she enjoys reading philosophy books, taking long walks, and appreciating good food.
Maria Antonietta's articles
![Arrow Functions in JavaScript: How to Use Fat & Concise Syntax](https://uploads.sitepoint.com/wp-content/uploads/2022/03/1646875624arrowfunction-300x158.jpg)
Learn how to use JavaScript arrow functions, understand fat and concise arrow syntax, and what to be aware of when using them in your code.
![Flexbox or CSS Grid? How to Make Layout Decisions that Make Sense](https://uploads.sitepoint.com/wp-content/uploads/2021/08/1629855005flexbox-vs-grid-300x170.png)
Flexbox came first. Then came Grid. Is Flexbox needed any more? Yes it is! Learn what each does best and when to choose one over the other.
![Canvas vs SVG: Choosing the Right Tool for the Job](https://uploads.sitepoint.com/wp-content/uploads/2016/03/1614127705canvas-vs-svg-300x170.jpg)
Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.
![Static Site Generators: A Beginner’s Guide](https://uploads.sitepoint.com/wp-content/uploads/2021/02/1613775777ssg-sm-300x158.jpg)
Static site generators are a key element of the modern Jamstack architecture. We explore the standout features of leading SSGs.
![Getting Started with Gatsby: Build Your First Static Site](https://uploads.sitepoint.com/wp-content/uploads/2020/09/1601469285gatsby-construction-300x158.jpg)
Gatsby has power, plugins, and community. Our guide will get youstarted with Gatsby's basic use case: a static site generator.
![GreenSock 3 Web Animation: Get to Know GSAP’s New Features](https://uploads.sitepoint.com/wp-content/uploads/2020/08/1597120553gsap-3-web-animation-300x180.png)
Learn about the great features in GreenSock Animation Platform 3, and find out how to use them to create better animations for the web.
![6 Top JavaScript UI Frameworks & Libraries for 2020](https://uploads.sitepoint.com/wp-content/uploads/2020/07/1593783519library-300x225.jpg)
The JavaScript ecosystem offers countless UI frameworks and libraries. These top options help developers build complex reactive apps that scale well.
![30 Life-saving Tools for Front-end Developers](https://uploads.sitepoint.com/wp-content/uploads/2020/06/1591148465front-end-tools-300x170.png)
Maria Antonietta Perna rounds up 30 top tools for front-end web developers, from code playgrounds and editors to CSS generators, JS libraries, and more.
![How to Set Up Basic jQuery Form Validation in Two Minutes](https://uploads.sitepoint.com/wp-content/uploads/2016/08/1586403493jquery-validate-300x170.png)
A step-by-step tutorial on how to set up basic jQuery form validation in just a few minutes, demonstrated through validation on a registration form.
![Five Ways to Lazy Load Images for Better Website Performance](https://uploads.sitepoint.com/wp-content/uploads/2018/11/1585618767lazy-load-images-300x170.png)
Maria Antonietta Perna highlights the benefits of lazy loading images on websites and shows five approaches to implement lazy loading for your website.
![30 Web Development Checklists Every Team Should Keep Handy](https://uploads.sitepoint.com/wp-content/uploads/2020/03/1585614006web-dev-resources-300x170.png)
Maria provides a roundup of helpful web development checklists, covering everything from front-end and performance to SEO and marketing.
![5 Super CSS Grid Generators for Your Layouts](https://uploads.sitepoint.com/wp-content/uploads/2019/07/1564709144jan-jakub-nanista-UHyrjKPsshk-unsplash-300x199.jpg)
Want to design your CSS Grid layouts in a few clicks and grab the code? Here are five CSS Grid generators with great visual interfaces.
![Learn to Design and Animate in 3D with Zdog](https://uploads.sitepoint.com/wp-content/uploads/2019/07/1562654983joshua-newton-GMjmjBi579I-unsplash-300x200.jpg)
We introduce you to Zdog, a library that helps you design and animate in 3D, and show you demos that you can reverse-engineer and learn from.
![How to Beat 5 Common JavaScript Interview Challenges](https://uploads.sitepoint.com/wp-content/uploads/2019/01/1548891607job-interview-300x200.jpg)
Maria Antionetta Perna shows how you can tackle five common coding challenges you might be asked when interviewing for a JavaScript or front-end position.
![How to Find a Development Mentor](https://uploads.sitepoint.com/wp-content/uploads/2019/01/1548641944dev-mentor-300x200.jpg)
Having a great development mentor can boost your progress, from helping you learn to code to getting a job. Find out how to find one.
![A Guide to Writing Your First Software Documentation](https://uploads.sitepoint.com/wp-content/uploads/2019/01/1547766526software-docs-300x179.jpg)
Maria Antonietta Perna covers the importance of good software documentation, showing you how to get up and running with your first software documentation.
![A Practical Guide to CSS Variables (Custom Properties)](https://uploads.sitepoint.com/wp-content/uploads/2017/06/1497370796css-variables-custom-properties-300x154.jpg)
Maria Antonietta Perna walks you through CSS variables/custom properties, the awesome new technology that adds more flexibility and fun to CSS coding.
![7 Performance Tips for Jank-free JavaScript Animations](https://uploads.sitepoint.com/wp-content/uploads/2017/11/1511233257js-animation-300x200.jpg)
Maria Antonietta Perna presents tips for optimizing JavaScript animation performance and achieving the 60fps target for smooth motion on the web.
![The CSS Grid Layout vs CSS Frameworks Debate](https://uploads.sitepoint.com/wp-content/uploads/2018/02/1519084915grid-vs-framework-300x200.jpg)
Maria Antonietta Perna takes Bootstrap as representative of CSS frameworks, asking if there are still reasons to use frameworks now that we have CSS Grid.
![Bootstrap UI Libraries for Angular, React and Vue.js](https://uploads.sitepoint.com/wp-content/uploads/2018/02/1519082330bootstrap-ui-libraries-300x207.jpg)
Maria Antonietta Perna lists a number of Bootstrap UI libraries to style your Angular, React, and Vue.js components.
![Customizing Bootstrap jQuery Plugins](https://uploads.sitepoint.com/wp-content/uploads/2018/02/1518067876plugins-300x190.jpg)
Maria Antonietta Perna illustrates how you can customize Bootstrap plugins, modifying both the CSS files and the JavaScript files.
![3 Tips for Speeding Up Your Bootstrap Website](https://uploads.sitepoint.com/wp-content/uploads/2018/02/1518053056speed-300x200.jpg)
Maria Antonietta Perna points out the importance of front-end optimization and lists 3 tips for achieving a great user experience on your Bootstrap website.
![Spicing Up the Bootstrap Carousel with CSS3 Animations](https://uploads.sitepoint.com/wp-content/uploads/2015/03/1518138767bootstrap-carousel-300x200.jpg)
Maria Antonietta Perna uses some jQuery and the Animate.css animations library to add some extra subtle visuals to the slides in the Bootstrap carousel.
![Getting Bootstrap Tabs to Play Nice with Masonry](https://uploads.sitepoint.com/wp-content/uploads/2015/02/1518050893masonry-bootstrap-300x194.jpg)
Maria Antonietta Perna discovered a problem when combining Bootstrap tabs with Masonry. She describes a solution to the issue in this post.
![Bootstrap: Super Smart Features to Win You Over](https://uploads.sitepoint.com/wp-content/uploads/2015/09/1517901159bootstrap4-300x190.jpg)
Maria walks through some of the new features in Bootstrap 4, including its modular architecture, reusable components and easier scaling across screen sizes.
![Optimizing CSS: Tweaking Animation Performance with DevTools](https://uploads.sitepoint.com/wp-content/uploads/2017/05/1494616713css-animation-performance-with-webdevtools-300x200.jpg)
Maria Antonietta Perna explores the Performance Tool available in the Firefox browser to find out more about CSS animation performance.
![How to Tell if React is the Best Fit for Your Next Project](https://uploads.sitepoint.com/wp-content/uploads/2017/05/1496057411fast-interactive-uis-react-300x200.jpg)
React eases the development of snappy, event-driven user interfaces that are fast at responding to state changes. This is particuarly important considering users expect web apps to feel smooth and seamless like native apps. In this article, you'll learn about what React is good at and what makes it work. This should provide you with the context required to decide if this library could be a good fit for your next project, and whether you should learn React.
![Fancy Web Animations Made Easy with GreenSock Plugins](https://uploads.sitepoint.com/wp-content/uploads/2017/08/1503588039featured-greensock-animation-part3-300x201.jpg)
Maria Antonietta Perna gives you an overview of GreenSock plugins to add complex animations to your project quickly and in a few lines of code.
![GreenSock for Beginners (Part 2): GSAP’s Timeline](https://uploads.sitepoint.com/wp-content/uploads/2017/07/1500479574greensock-animation-part2-300x201.png)
In Part 2 of her GreenSock (GSAP) tutorial for beginners, Maria Antonietta Perna shows how GSAP timeline makes coding complex animations easier and faster.
![GreenSock for Beginners: a Web Animation Tutorial (Part 1)](https://uploads.sitepoint.com/wp-content/uploads/2017/06/1498590122featured-greensock-animation-300x201.png)
Maria Antonietta Perna introduces GreenSock in a multi-part article for the Beyond CSS: Dynamic DOM Animation Libraries series. Ready for some cool effects?