codexdesign
code and design experiences for beginners
Why JavaScript?
There are so many languages! Why JavaScript? JavaScript, or JS, is an extremely popular language, and it is the language of the web meaning most websites use JavaScript. While it isn't the most intuitive language it is supported and loved. With some experience JavaScript code begins to feel approachable because it does have rules, conventions, and patterns. All current web browsers have console and inspector type tools. These tools reveal the JavaScript code running behind the scenes making content dynamic and making interation possible. Every site on the web provides an opportunity for curious learners to directly observe how code is crafted.
Why p5.js?
The JavaScript series uses p5.js, a JavaScript library (a constrained extension of the core JavaScript language) created to teach non-programmers the fundamentals of programming. Note that the name p5 is a bit confusing and abstract because it refers to another library that came before it. The p5 approach to learning JavaScript is popular and it has a mission forgrounding inclusion and participation. The p5 approach includes an entire learning ecosystem: it is code, it is an optional online coding environment where learners type the code (called an Integrated Development Environment or IDE), and it is a committed community of diverse learners, educators, and contributors.
Learning Pathway
The JavaScript experience includes: 01 Visual Design Elements, 02 Visual Design Principles, 03 Visual Design Color Systems, 04 Motion Design, 05 Pattern Design, 06 User Event Design, 07 Text and Image Content, 08 Modular and Reusable Code Design. Each unit provides samples that integrate code concepts and design concepts. Beginners should go in order. Users of p5 do not need any experience with code but should have some experience with web markup (this means html and css). While p5 is an excellent coding experience for beginners, it is contingent on some basic web development know-how.
Download the components
The JavaScript approach requires the p5.js library, an html file, a js project file, an optional css file, and access to any web browser. The .js file extension means 'javascript'. There are a few options. With flexibility comes some complexity, but the good news is every p5 user can find and define their own personal learning environment.
The p5 Pieces: files, editors, options...
To work with p5 users might opt for: the online p5 editor; download the collection of p5 contingent files and use a text editor like Sublime Text (there are many many text editors to choose from); or use a general online code editor like CodePen. Note that with CodePen and any other online editor users will need to "add external scripts" to enable access to the p5 library through the software interface. All routes enable users to open, study, and manipulate the codexdesign example files.
Making discoveries and decisions is a natural part of working with web code and web cultures. Its a very dynamic context. Tools and standards are in constant development.
Find more information about the p5 environment here: https://p5js.org/get-started/.