Creative Development with WebGL, SVG, and Canvas

What is creative development?

Creative developers are a specialized set of frontend developers who focus more on the "wow" factor. They work with animations, video game engines, SVGs, amongst other tools to bring cool projects to life

---

How are creative developers different from frontend developers?

01:00

Most frontend development is building boring CRUD apps.

This is, building forms that hook up to a backend. Administration panels for managing orders, customers, etc.

On the other hand, there is a subsection of frontend developers called Creative Developers.

These are developers who focus more on the "wow" factor while still providing practical functionality to the site.

Some web agencies will specialize in creative marketing projects. Many times these are companies with large marketing budgets, such as fortune 500 companies.

Creative development projects include webRTC projects for real time commmunication, online video games, and fancy marketing sites.

Skills creative developers need

14:30

Creative webdevelopers need to have good frontend development skills in React, Vue, Angular or any single-page app. But they also need to know a variety of other highly interactive skillsets. These include:

• SVGs
• HTML Canvas
• WebGL
• Animations

SVGs

SVGs stands for scalable vector graphics.

These are different than a bitmap image such as a png since it's based on vectors. So this image and scale up or down and still look crisp

SVGs can do alot. You can port SVGs from a tool like adobe illustator to bring drawings to life.

These SVGs can be placed inline in your app, and treated just like regular HTML elements! So it can be styled, animated etc

SVGs can be created in Adobe AfterEffects as well and exported using a tool called Lottie

HTML Canvas

HTML Canvas is like a blank canvas where you can draw and render information many objects on a page.

It's useful for highly interactive states, sites that need to be zoomed in, interactive with, etc.

It's useful for multiplayer-type application. For instance, a page where everyone can draw at the page at the same time

Other examples include an online video game that is isometric or 2D in nature

WebGL

3D applications is generally done through webGL.

It runs on top of HTML Canvas, but also uses your graphics card for processing information.

For projects like these, you'll pull a 3D library to handle most of the work for you. ThreeJS is very popular here

When developing a threeJS app, you specify the scene, the textures in the environment, meshes, material, and lightning

CSS Animations & selecting tools for your creative project

CSS Animations can be added on top of SVGs to bring elements to life. Same with ThreeJS, you can use the same physics in CSS animations

When your deciding on what tools to use for a creative web project, this is the thought process

1. If you need shader support, use WebGL
2. Look into HTML Canvas if you need a lot of rerenders on a page for multiplayer applications
3. Otherwise look into SVGs for everything else

Examples of Creative Developers

• http://www.rleonardi.com/ -> canvas scroll
• https://designcode.io/ -> tutorial website
• https://bruno-simon.com/ -> WebGL video game resume
• https://codepen.io/ge1doot -> Gerdand
• https://codepen.io/chrisgannon -> Chris Gannon
• https://codepen.io/sdras/ -> Sarah Drasner

DESSERT TIME! - Dancing & Vue

54:00

Vincent talks about joining a dance choreography team. German talks about Vue development

Social Media

• German's Twitter
• Vincent's Twitter
• Vincent's Instagram
• Tweet us your thoughts on @codechefsdev