JS.weekly() => #48: Animating with Clip-Path

New Next.js 9, design patterns for API and Moveable.

JavaScripting.com
JS.weekly()
2 min readJul 22, 2019

--

Animating with Clip-Path

clip-path feels like math class because it requires working with geometric shapes, each with different values that draw certain shapes in certain ways. In this article, you will dive right into clip-path, specifically looking at how we can use it to create pretty complex animations.

Next.js 9 with built-in zero-config TypeScript support

Main changes:

  • Built-in Zero-Config TypeScript Support: Build your application with increased confidence, thanks to automatic TypeScript support and integrated type-checking.
  • File system-Based Dynamic Routing: Express complex application routing requirements through the file system without the need for a custom server.
  • Automatic Static Optimization: Create ultra-fast websites that leverage Server-Side Rendering and Static Prerendering by default without compromising on features.
  • API Routes: Quickly build back-end application endpoints, leveraging hot-reloading and a unified build-pipeline.
  • More Production Optimizations: Applications are more responsive than ever thanks to in-viewport prefetching and other optimizations.
  • Improved DX: Unobtrusive, ease-of-use improvements to help you develop at your best.

Design patterns for modern web APIs

In this post author looks at several design and architectural patterns that can help create web APIs:

  • Service layer: A protocol independent interface to our application logic
  • REST: An architectural design principle for creating web APIs
  • RESTful services: A service layer that follows the REST architecture and HTTP protocol methods
  • Middleware: Reusable functions that can control the flow of data and trigger additional functionality when interacting with REST services
  • Real-time: A set of events that can be sent automatically when following the REST architecture”

We are adding new libraries to JavaScripting.com every week. Here is one worth checking out:

Moveable

Moveable! Draggable! Resizable! Scalable! Rotatable!

JS.weekly() is a weekly digest of the best JavaScript articles, hand-picked by our experts in the JavaScripting community, sponsored by Salsita Software. Don’t forget to follow us on Twitter.

--

--

JavaScripting.com
JS.weekly()

The best JavaScript, web development and general programming articles of the day. Sponsored by Salsita Software (http://www.salsitasoft.com)