🏊 Dive into ES6 and the future of JavaScript

Overview

The Modular JavaScript book series glowing over the desktop of an eager learner.

Practical Modern JavaScript

Dive into ES6 and the future of JavaScript 🏊

Modular JavaScript is a book series with the mission of improving our collective understanding of writing robust, well-tested, modular JavaScript code. Practical Modern JavaScript is the first book in the series, and it discusses ES6 features in detail. Practical Modern JavaScript includes hundreds of real-world use cases for the new language features, as well as detailed explanations of what works and what hasn’t when it comes to leveraging ES6 in the wild.

πŸ—ž Start with the book launch announcement on Pony Foo
πŸ’³ Participate in the crowdfunding campaign on Indiegogo
🐀 Share a message on Twitter or within your social circles
🌩 Amplify the announcement on social media via Thunderclap
πŸ““ Purchase the Early Release from O'Reilly
πŸ‘ Contribute to the source code repository on GitHub
πŸ¦„ Read the free HTML version of the book on Pony Foo

This book focuses on two aspects of JavaScript development: modularity and ES6 features. You’ll learn how to tackle application development by following a scale-out approach. As pieces of your codebase grow too big, you can break them up into smaller modules.

Practical Modern JavaScript is Free to Read!

The book is publicly available in HTML format and free forever. Each book chapter is styled similarly to how Pony Foo blog posts β€” such as the book series launch announcement β€” are styled, which makes for a fairly enjoyable read as far as HTML books go.

Every book in the series will be distributed in this way.

The free-to-read version of Practical Modern JavaScript is subject to the same license as the rest of the content I publish on Pony Foo: Creative Commons Attribution-NonCommercial-ShareAlike.

It took me a bit of time but I've managed to get the git repository to trigger builds on the O'Reilly build server. The build server then pings back to ponyfoo.com, letting the site know when a build is ready. Lastly, Pony Foo finally downloads the updated HTML files for the web version. Luckily I developed the code in such a way that I will be able to share HTML versions of other books in the series effortlessly.

Read the HTML version of the book on Pony Foo! πŸ¦„

Source Code Repository!

I want this book series to be as widely available as possible, and the best course of action for that purpose was to release the vast majority of its contents to the open-source community.

The book chapters, code samples, and related graphics are all open-source and free to read online. The repository is the same one I work on while writing the book. You can help me in real-time, or just take a peek at my writing process and progress.

The GitHub repository is automatically synchronized with the website using webhooks and the O'Reilly Atlas API.

O'Reilly provides their authors with git repositories under a system dubbed "Atlas" β€” the same system that handles the HTML and PDF build jobs. They also offer a way of using a GitHub repository while keeping their remote up to date via git hooks.

Those are the implementation details, but it means I can offer an open-source repository for the books β€” the same repository I will be working on myself. This means I can take issues, pull requests, and everything directly on GitHub. You can fork the book, fix some typos or add a new paragraph, and submit a PR.

When I merge a PR, the website will be updated after an automated build courtesy of the O'Reilly Atlas service!

Contribute to the source code repository on GitHub! πŸ‘

A Crowdfunding Campaign!

Offering all of this content free of charge is amazing because I can ensure that anybody who's interested in JavaScript can learn more about it. The satisfaction alone doesn't pay any bills, though.

At the same time, I have to manage to write the series somewhere in between my day job at Elastic (it's the absolute best company β€” we're hiring! πŸ¦„ πŸ’– πŸ”Ž πŸŽ‰ ) and my night job life bliss being a husband.

That's why I'm asking for your help with a crowdfunding campaign. The main concern in the campaign is to keep me motivated to find the time to see the series to its end. The first book is already well underway, and I'd love to be able to justify the dedication that each book in the series deserves.

There's a few perks in the campaign, as is the norm with crowdfunding campaigns. Go check out the campaign and let's make this happen!

Participate in the crowdfunding campaign on Indiegogo! πŸ’Έ

O'Reilly Media Early Release!

I've partnered with O'Reilly Media to publish the book. This is a paid offering that includes a PDF ebook and eventually a print book. The published book is a great way to show your support for my work, by paying a bit for it β€” and telling your friends how awesome my writing is. 😘

We'll start with an Early Release, where you will get the first few chapters in ebook format. As new chapters come out and old ones get improvements, you'll receive those updates at no extra cost to you. You'll also get an opportunity to steer the direction of my writing efforts by reporting errors and delivering book reviews.

This is a great way to stay in touch with me through the writing process and letting me have it when drafts are not up to your expectations, so that we can improve the book iteratively before it goes to print.

Purchase the Early Release from O'Reilly! πŸ““

Contribute

Check out the contributing guidelines! πŸ‘

License

NicolΓ‘s Bevacqua Β© 2016-2017. Creative Commons. Details at ponyfoo.com/license.

Comments
  • I think arrow functions create closures

    I think arrow functions create closures

    The section Lexical Scoping https://ponyfoo.com/books/practical-modern-javascript/chapters/2#lexical-scoping-8zsxfqh9 claims that arrow functions don't create closures. It looks like they do. In fact, the code relies on closure of arguments in the evaluation of the returned function. I think this should say "arrow functions don't create their own lexical scope, so arguments is accessed from the closure of the enclosing function".

    calc=((a)=>( (b)=>{debugger; return a+b} ))(a=1); calc(2)

    Screen Shot 2019-06-15 at 15 08 04
    opened by jameshbush 6
  • ch03: fix possible typo in

    ch03: fix possible typo in "Local Symbols" section

    The current variant contradicts the note in the "Symbols" section above:

    ...local symbols, created with the Symbol built-in wrapper object and accessed by storing a reference or via reflection...

    and the possibility of Reflect.ownKeys() to obtain symbol keys.

    opened by vsemozhetbyt 5
  • ch08: Fix footnote. Fix mixed brackets.

    ch08: Fix footnote. Fix mixed brackets.

    • changed <span class=footnote"... to <span data-type="footnote" (footnote is incorrectly shown in PDF version, I assume this should fix it)
    • from "...in the [0, n) range" to "...in the [0, n] range"
    opened by kaijicode 4
  • escape the * of the generator function note to fix formatting

    escape the * of the generator function note to fix formatting

    Reading this chapter on github in asciidoc format, I found that in the beginning of the "Generator Functions and Generator Objects* section, a "*" was not escaped properly, so that the rest of the text was rendered bold: grafik

    Checking locally with asciidoctor, only the rest of the line was rendered bold: grafik

    I have added an escape sequence to properly show the "*" and not have anything rendered in bold, that shouldn't.

    opened by chewiebug 4
  • Inconsistent code style of template literals

    Inconsistent code style of template literals

    In some places you put spaces inside curly braces:

    const message = `The sum of ${ input.join(`+`) } is ${ sum }`
    

    but in others you don’t:

    const summary = `${units}x ${name} ($${unitPrice}) = $${totalPrice}`
    
    opened by sapegin 4
  • Can't buy book

    Can't buy book

    Why I can't buy book? Amazon is the worst choice for ebooks, because there is no way to get and read clean pdf.

    1. I use Ubuntu (Linux) and there is no software for ebooks from Amazon
    2. No pdf support (for my electronic device PocketBook)
    3. Reading online requires exposing a lot of confidential information
    4. Paperback is no choice for faraway countries like Russia (and I want to get updates)

    Why shall I grant you:

    • Post Tweets for you
    • See your email address
    • Update your profile
    • Read Tweets from your timeline

    Don't you think it is too much access rights for you? And violate privacy? Why do you need such information about people?

    It would be good to consider collaborating with other platforms such as Manning publishing (as they provide all formats) or PacktPub Publishing.

    I suggest it might be a good book about modern Javascript, but the way how you distribute book gives no change to acquaint with it.

    opened by likern 2
  • Typo: self => this

    Typo: self => this

    I believe we have a typo here.

    The previous code outputs "Fired caliber undefined pistol"

    The modified code outputs "Fired caliber 50 pistol"

    opened by thiagoarrais 2
  • Screenshot of ESLint output seems a bit outdated

    Screenshot of ESLint output seems a bit outdated

    See https://github.com/mjavascript/practical-modern-javascript/blob/master/ch01.asciidoc#fig0102 and the previous code.

    Currently, I get this output:

    Code:
      1:12  error  Infix operators must be spaced                                                                                 space-infix-ops
      3:10  error  'hello' is defined but never used                                                                              no-unused-vars
      3:15  error  Missing space before function parentheses                                                                      space-before-function-paren
      3:17  error  Missing space before opening brace                                                                             space-before-blocks
      4:17  error  Requires a space before '}'                                                                                    block-spacing
      4:17  error  Closing curly brace should be on the same line as opening curly brace or on the line after the previous block  brace-style
      6:1   error  Expected space(s) after "if"                                                                                   keyword-spacing
      6:4   error  Unexpected constant condition                                                                                  no-constant-condition
      6:10  error  Missing space before opening brace                                                                             space-before-blocks
    
    βœ– 9 problems (9 errors, 0 warnings)
      7 errors, 0 warnings potentially fixable with the `--fix` option.οΏ½
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
    

    Maybe at least the line about extra semicolon can be deleted from the screenshot as most confusing (there is no semicolon in the code).

    opened by vsemozhetbyt 2
  • Join to translate English into Indonesian

    Join to translate English into Indonesian

    hello sir ... can i translate into indonesian language. so that the people of Indonesia easier to read it .....?? thank you very much for the attention

    opened by mohdhaekal 2
  • proposed fix for mixed sentence

    proposed fix for mixed sentence

    I have found a short sentence that was mixed into another sentence. As a proposal, I have moved the sentence to the end of the paragraph. Maybe, you want to put it into a different place - it just doesn't belong, where it is, now.

    The second fix is just a missing space character after a full stop.

    opened by chewiebug 2
  • code snippet mismatch

    code snippet mismatch

    The code is at the end of chapter 2.3.4.

    It has a miswrite the '+' identifier in the sku: brand + ':' [] make

    const getCarProductModel = ({ brand, make, model }) => ({
      sku: brand + ':' make + ':' + model,
      brand,
      make,
      model
    })
    getCarProductModel(car)
    
    opened by AmagiDDmxh 2
  • Spread Operator Syntax for Objects

    Spread Operator Syntax for Objects

    This section suggests the Spread Operator syntax only works for iterable object literals. In fact, generic Object literal declarations also support spread operator assignment syntax:

    "Note that the spread operator isn’t limited to arrays and arguments. The spread operator can be used with any iterable object. Iterable is a protocol in ES6 that allows you to turn any object into something that can be iterated over. We’ll research the iterable protocol in Iteration and Flow Control."

    Screen Shot 2019-06-16 at 09 41 20

    Is there another section where non-iterable Object Literal spread syntax is covered?

    opened by jameshbush 3
Owner
Modular JavaScript Book Series
πŸ“š An open effort to improve our collective understanding of writing robust, well-tested, and modular applications
Modular JavaScript Book Series
Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

Project Name Awsome books Description the project. adding books daynamiclly Built With Major languages Frameworks Technologies used Live Demo (if avai

Alzubair Alqaraghuli 5 Jul 25, 2022
Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Ghazanfar Ali 8 Sep 28, 2022
This repo is a collection of code samples and links to previous twitch live stream sessions. If you have any ideas or suggestions for future episodes, feel free to open an issue.

Talk DEV to me Talk DEV to me is a monthly show on twitch.tv/aws hosted by Tiago Barbosa and Alex Melnyk, where we invite customers, partners, or Amaz

AWS Samples 122 Jan 6, 2023
Might be mineral fish site in future, idk. Currently just a fish list. Made with Svelte

Might be mineral fish site in future, idk. Currently just a fish list. Made with Svelte. Built version (used at mineralfish.github.io) at the build branch. Build steps and original README below.

Mineral Fish 3 Nov 3, 2022
βœ… A future task manager (βš’οΈ working).

A beautifully task manager ?? soon ?? Packages: ⚑️ Vitejs - Next generation frontend tooling. ☁️ Vitejs PWA - Zero-config PWA Framework-agnostic Plugi

Pablo Hdez 6 Aug 8, 2022
⭐ Password manager of the future.

Cool Keeper ?? About Cool keeper is the modern password manager we have been looking for. Built using the latest technologies from the web development

Vitor Windberg 8 Dec 14, 2022
Timelock Encryption made practical. A Typescript library for encrypting for the future.

tlock-js A typescript library for encrypting data which can only be decrypted at a set time in the future using drand. tlock-js uses AGE to symmetrica

drand 54 Dec 1, 2022
In this project, I restructure my previous Awesome books app code. The goal is to practice ES6 syntax and also make the code more organized by using ES6 modules.

Awesome Books In this project, I will restructure my previous Awesome books app code. The goal is to make it more organized by using modules. I will a

Sidney Kaguli 9 Aug 23, 2022
Responsive, auto-saving To-Do List made from scratch using JavaScript only, but refactoring the code into ES6 standard

Project Name ES6 AWESOME BOOKS Website Name AWSM BOOKS Project Website (GitHub Pages) https://github.com/Zeraltz/es6-awsm-books Clone the Project git

Andres Mauricio Cantillo 5 Jun 25, 2022
Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card. Uses simplenotsimpler/modern-table library.

SimpleNotSimpler 6 Feb 17, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

bizimungu pascal 4 May 20, 2022
Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

Awesome-books A single page project with the porpuse of storing books' titles and authors. Built With CSS, HTML & Javascript. How to run in your local

Saadat Ali 7 Feb 21, 2022
This project is about the awesome books we did during Microverse to build a website for adding and removing the books.Done using HTML and ES6 JAVASCRIPT and modules

Awesome-books-with-ES6 Description the project. this project is about the awesome books we did during Microverse to build a website for adding and rem

Ilham Bouaik 5 May 28, 2022
Satyam Sharma 3 Jul 8, 2022
this project is an online library application that enables users to keep track of books in their library by adding to and removing books from a list. Built with JavaScript ES6 syntax, HTML, and CSS

Awesome-Book1 The aim of this project is to restructure the Awesome books app code by using ES6 syntax and organising the workspace using modules. The

Afolabi Akorede 7 Jul 17, 2022
"To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Hello! I am a software developer! I can help you build a product, feature or website. Take a look of my works. If you like what you see and have a pro

ABDUL ALI 7 Jul 17, 2022