Builder Book: Open Source Web Application to Learn JS Stack

Builder Book

Open source web app to self-publish and sell books or other online content.

If you want to learn how to build this project from scratch, check out our book: https://builderbook.org.

The open source project is located in the builderbook folder. If you purchased our book, codebases for each of the book's chapters are located in the book folder.

We've used this builderbook project to build:

• Builder Book - learn how to build full-stack web apps from scratch
• SaaS Boilerplate - open source web app to build your own SaaS product
• Async - Urgent vs non-urgent team communication tool for small teams
• Async Labs - many custom dev projects

Showcase

Check out projects built with the help of this open source app. Feel free to add your own project by creating a pull request.

• workinbiotech.com: Work in biotech, job board for small and young biotech companies
• Async: urgent and non-urgent communication for remote teams
• Retaino by Earl Lee: Save, annotate, review, and share great web content. Receive smart email digests to retain key information.
• michaelstromer.nyc by Michael Stromer: Books and articles by Michael Stromer.
• SaaS Boilerplate
• Async Labs

What can I learn from this project?

You will learn how to structure your project and build many internal and external API infrastructures.

On the browser, the main technologies you will learn are: Next.js, React.js, Material-UI. On the server, the main technologies you will learn are: Next.js, Node.js, Express.js, Mongoose.js, MongoDB database.

In addition to the above technologies, you can learn how to integrate your web application with the following external API services:

• Google OAuth API
• Github API
• Stripe API
• AWS SES API
• Mailchimp API

Plus, you can learn many concepts such as session and cookie, headers, HTTP request-response, Express middleware, Promise, async/await, and more. You have to know these concepts to be a confident web developer, no matter what language you use.

The main use cases for this project, besides learning, are:

• To write and host free documentation with Github being a source of truth for content.
• To sell online content, such as books.
• To extend it (see our second book, SaaS Boilerplate Book) to start software business.

Run locally

Clone the project and run yarn to add packages.

Before you start the app, create a .env file at the app's root. This file must have values for some env variables specified below.

To get MONGO_URL_TEST, we recommend a free MongoDB at MongoDB Atlas (to be updated soon with MongoDB Atlas, see issue).

Get GOOGLE_CLIENTID and GOOGLE_CLIENTSECRET by following official OAuth tutorial.

Important: For Google OAuth app, callback URL is: http://localhost:8000/oauth2callback 
Important: You have to enable Google+ API in your Google Cloud Platform account.

Specify your own secret key for Express session SESSION_SECRET: https://github.com/expressjs/session#secret

To use all features and third-party integrations (such as Stripe, Google OAuth, Mailchimp), create a .env file and add values for all variables as shown below. These variables are also listed in .env.example, which you can use as a template to create your own .env file.

.env :

# Used in server/server.js
MONGO_URL=
MONGO_URL_TEST=
SESSION_SECRET=

# Used in lib/getRootUrl.js
NEXT_PUBLIC_URL_APP=
NEXT_PUBLIC_PRODUCTION_URL_APP="https://heroku.builderbook.org"

# Used in server/google.js
GOOGLE_CLIENTID=
GOOGLE_CLIENTSECRET=

# Used in server/aws.js
AWS_ACCESSKEYID=
AWS_SECRETACCESSKEY=
AWS_REGION=

# Used in server/models/User.js
EMAIL_ADDRESS_FROM=

----------
# All environmental variables above this line are required for successful sign up

# Used in server/github.js
GITHUB_TEST_CLIENTID=
GITHUB_LIVE_CLIENTID=
GITHUB_TEST_SECRETKEY=
GITHUB_LIVE_SECRETKEY=

# Used in server/stripe.js
NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY=
NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY=
STRIPE_TEST_SECRETKEY=
STRIPE_LIVE_SECRETKEY=
STRIPE_TEST_DEMO_BOOK_PRICE_ID=
STRIPE_LIVE_DEMO_BOOK_PRICE_ID=
STRIPE_TEST_SECOND_BOOK_PRICE_ID=
STRIPE_LIVE_SECOND_BOOK_PRICE_ID=

# Used in server/mailchimp.js
MAILCHIMP_API_KEY=
MAILCHIMP_REGION=
MAILCHIMP_PURCHASED_LIST_ID=
MAILCHIMP_SIGNEDUP_LIST_ID=

# Used in pages/_document.js and pages/_app.js
NEXT_PUBLIC_GA_MEASUREMENT_ID=
COOKIE_DOMAIN=".builderbook.org"

IMPORTANT: do not publish your actual values for environmentable variables in .env.example; this file is public and only meant to show you how your .env file should look.

Add your value (domain that you own) for COOKIE_DOMAIN and NEXT_PUBLIC_PRODUCTION_URL_APP.

Start the app with yarn dev.

• To get NEXT_PUBLIC_GA_MEASUREMENT_ID, set up Google Analytics and follow these instructions to find your tracking ID.
• To get Stripe-related API keys, set up or log into your Stripe account and find your key here.

Env keys NEXT_PUBLIC_GA_MEASUREMENT_ID and NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY/NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY are universally available (client and server). Env keys inside .env file are used in server code only unless they have NEXT_PUBLIC_ prepended to their name. In that case, they are universally available.

To make user a book's owner, set "isAdmin": true on corresponding MongoDB document in your database (default value is false for any new user).

Important: if you don't add values for environmental variables to .env file, corresponding functionality will not work. For example, login with Google account, purchasing book, getting repo information via GitHub API and other third-party API infrastructures.

Add a new book

• Create a new Github repo (public or private).
• In that repo, create an introduction.md file and write some content.
• At the top of your introduction.md file, add metadata in the format shown below. See this file as an example.

---
title: Introduction
seoTitle: title for search engines
seoDescription: description for search engines
isFree: true
---

• Go to the app, click "Connect Github".
• Click "Add Book". Enter details and select the Github repo you created.
• Click "Save".

When you add new .md files or update content, go to the BookDetail page of your app and click Sync with Github.

Important: All .md files in your Github repo must have metadata in the format shown above.

Important: All .md files in your Github repo must have name introduction.md or chapter-N.md.

To make the content of a .md file private (meaning a person must purchase the content to see it), remove isFree:true and add excerpt:"". Add some excerpt content - this content is public and serves as a free preview.

Add your own styles

To change the color scheme of this app, modify the primary and secondary theme colors inside lib/context.js. Select any colors from Material UI's official color palette.

Recommended ways to add your own styles to this app:

1. Inline style for a single element
2. Reusable style for multiple elements within single page or component
3. Reusable/importable style for multiple pages or components
4. Global style for all pages in application

Inline style for a single element

USE CASE: apply a style to one element on a single page/component 
For example, in our book page, we wrote this single inline style:

<p style={{ textAlign: 'center' }}>
  ...
</p>

See usage

Reusable style for multiple elements within single page or component

USE CASE: apply the same style to multiple elements on a single page/component.
For example, in our tutorials page, we created styleExcerpt and applied it to a <p> element within the page:

const styleExcerpt = {
  margin: '0px 20px',
  opacity: '0.75',
  fontSize: '13px',
};

<p style={styleExcerpt}>
  ...
</p>

See usage

Reusable/importable style for multiple pages or components

USE CASE: apply the same style to elements on multiple pages/components.
For example, we created styleH1 inside components/SharedStyles.js and exported the style at the bottom of the file:

const styleH1 = {
  textAlign: 'center',
  fontWeight: '400',
  lineHeight: '45px',
};

module.exports = {
  styleH1,
};

See usage

We then imported styleH1 into our book page, as well as our index page, and applied the style to a <h1> element:

import {
  styleH1,
} from '../components/SharedStyles';

<h1 style={styleH1}>
  ...
</h1>

See usage

Global style for all pages in application

USE CASE: apply the same style to elements on all pages of your app.
Create your style in pages/_document.js. For example, we specified a style for all hyperlinks that use the <a> element:

<style>
  {`
    a, a:focus {
      font-weight: 400;
      color: #1565C0;
      text-decoration: none;
      outline: none
    }
  `}
</style>

See usage

Deploy to Heroku

In this section, we will learn how to deploy our app to Heroku cloud. We will deploy our React-Next-Express app to lightweight Heroku container called dyno.

Instructions are for app located at /book/8-end. Adjust route if you are deploying app from the root of this public repo.

We will discuss the following topics in this section:

1. installing Heroku on Linux-based OS
2. creating app on Heroku dashboard
3. preparing app for deployment
4. configuring env variables
5. deploying app
6. checking logs
7. adding custom domain

Let's go step by step.

1. Install Heroku CLI (command-line interface) on your OS. Follow the official guide. In this book we provide instructions for Linux-based systems, in particular, a Ubuntu OS. For Ubuntu OS, run in your terminal:

sudo snap install --classic heroku

To confirm a successful installation, run:

heroku --version

As example, my output that confirms successful installation, looks like:

heroku/7.22.7 linux-x64 node-v11.10.1

2.   Sign up for Heroku, go to your Heroku dashboard and click purple New button on the right:

On the next screen, give a name to your app and select a region. Click purple Create app button at the bottom:

You will be redirected to Deploy tab of your newly created Heroku app:

3.   As you can see from the above screenshot, you have two options. You can deploy the app directly from your local machine using Heroku CLI or directly from GitHub. In this tutorial, we will deploy a async-labs/builderbook/book/8-end app from our public async-labs/builderbook repo hosted on GitHub. Deploying from a private repo will be a similar process.

Deploying from GitHub has a few advantages. Heroku uses git to track changes in a codebase. It's possible to deploy app from the local machine using Heroku CLI, however you have to create a Git repo for async-labs/builderbook/book/8-end with package.json file at the root level. A first advantage is that we can deploy from a non-root folder using GitHub instead of Heroku CLI.

A second advantage is automation, later on you can create a branch that automatically deploy every new commit to Heroku. For example, we have a deploy branch for our demo for SaaS boilerplate. When we commit to master branch - there is no new deployment, when we commit to deploy branch - new change is automatically deployed to Heroku app.

Let's set up deploying from GitHub. On Deploy tab of your Heroku app at Heroku dashboard, click Connect to GitHub, then search for your repo, then click Connect next to the name of the proper repo:

If successful, you will see green text Connected and be offered to select a branch and deploy app automatically or manually. Automatic deployment will deploy every new commit, manual deployment requires you to manually click on Deploy Branch button. For simplicity, we will deploy manually from master branch of our async-labs/builderbook repo.

Before we perform a manual deployment via GitHub, we need Heroku to run some additional code while app is being deploying. Firstly, we need to tell Heroku that 8-end app in the async-labs/builderbook repo is not at the root level, it's actually nested at /book/8-end. Secondly, Heroku needs to know that our app is Node.js app so Heroku finds package.json file, properly installs dependencies and runs proper scripts (such as build and start scripts from package.json). To achieve this, we need to add so called buildpacks to our Heroku app. Click Settings tab, scroll to Buildpacks section and click purple Add buildpack button:

Add two buildpacks, first is https://github.com/timanovsky/subdir-heroku-buildpack and second is heroku/nodejs:

Next, scroll up while on Settings tab and click purple Reveal Config Vars button, create a new environmental variable PROJECT_PATH with value book/8-end:

The above variable will be used by the first buildpack subdir-heroku-buildpack to deploy app from repo's subdirectory.

4.   If we deploy app at this point, our app will deploy with errors since we did not add environmental variables. Similar to how you added PROJECT_PATH variable, add all environmental variables from book/8-end/.env file to your Heroku app. Remember to add the rest of env variables for all features to work, including signup event.

5.   While on Settings tab, scroll to Domains and certificates section and note your app's URL. My app's URL is: https://builderbook-8-end.herokuapp.com Let's deploy, go to Deploy tab, scroll to Manual deploy section and click Deploy branch button. After deployment process is complete , navigate to your app's URL:

6.   Server logs are not available on Heroku dashboard. To see logs, you have to use Heroku CLI. In your terminal, run:

heroku login

Follow instructions to log in to Heroku CLI.

After successful login, terminal will print:

Logged in as email@domain.com

Where email@domain.com is an email address that you used to create your Heroku account.

To see logs, in your terminal run:

heroku logs --app builderbook-8-end --tail

In your terminal, you will see your most recent logs and be able to see a real-time logs.

You can output certain number of lines (N) for retrieved logs by adding --num N to the heroku logs command. You can print only app's logs by adding --source app or system's logs by adding --source heroku.

7.   Time to add a custom domain. The Heroku app that we created is deployed on free dyno. Free dyno plan does not let you to add a custom domain to your app. To add custom domain, go to Resources tab and click purple Change Dyno Type button:

Select a Hobby plan and click Save button.

Navigate to Settings tab and scroll to the Domains and certificates and click purple Add domain button:

Type your custom domain name, I added heroku.builderbook.org as a custom domain, click Save changes button.

Heroku will display you a value for CNAME record that you have to create for your custom domain. For me, custom domain is heroku.builderbook.org and I manage DNS records at Now by Zeit.

After you create a CNAME, ACM status on Heroku's dashboard will change to Ok:

It's important that you remember to manually add your custom domain to the settings of your Google OAuth app (Chapter 3) and GitHub OAuth app (Chapter 6). If you forget to do it, you will see errors when you try to log in to your app or when you try to connect GitHub to your app.

Scaling

You may want to consider splitting single Next/Express server into two servers:

• Next server for serving pages, server-side caching, sitemap and robots
• Express server for internal and external APIs

Here is an example of web application with split servers: https://github.com/async-labs/saas

Splitting servers will get you:

• faster page loads since Next rendering does not block internal and external APIs,
• faster code reload times during development,
• faster deployment and more flexible scaling of individual apps.

Docker

• Install Docker and Docker Compose
• Modify docker-compose-dev.yml file
• If using Ubuntu, follow these steps: https://stackoverflow.com/questions/38775954/sudo-docker-compose-command-not-found
• Start app with docker-compose -f docker-compose-dev.yml up

Screenshots

Chapter excerpt with Buy Button for Public/Guest visitor:

Chapter content and Table of Contents for book Customer:

Add-book/Edit-book page for Admin user:

Book-detail page for Admin user:

Built with

Core stack

• React
• Material-UI
• Next
• Express
• Mongoose
• MongoDB

Third party APIs

• Google OAuth
• Github
• AWS SES
• Stripe
• MailChimp

Check out package.json.

Contributing

We welcome suggestions and bug reports via issues and and pull requests.

By participating in this project, you are expected to uphold Builder Book's Code of Conduct.

Want to support this project? Sign up at async and/or buy our books, which teach you how to build web apps from scratch. Also check out our open source SaaS boilerplate.

Team

• Kelly Burke
• Timur Zhiyentayev

You can contact us at team@builderbook.org

If you are interested in working with us, check out Async Labs.

Live app:

https://builderbook.org/books/builder-book/introduction.

Project structure

.
├── .vscode
│   ├── extensions.json
│   ├── settings.json
├── book
├── builderbook
│   ├── .elasticbeanstalk
│   │   ├── config.yml
│   ├── components
│   │   ├── admin
│   │   │   ├── EditBook.jsx
│   │   ├── customer
│   │   │   ├── BuyButton.jsx
│   │   ├── Header.jsx
│   │   ├── MenuWithAvatar.jsx                   
│   │   ├── Notifier.jsx
│   │   ├── SharedStyles.js
├── lib
│   ├── api
│   │   ├── admin.js
│   │   ├── customer.js
│   │   ├── getRootURL.js
│   │   ├── public.js
│   │   ├── sendRequest.js
│   ├── notify.js
│   ├── theme.js
│   ├── withAuth.jsx
├── pages
│   ├── admin
│   │   ├── add-book.jsx
│   │   ├── book-detail.jsx
│   │   ├── edit-book.jsx
│   │   ├── index.jsx
│   ├── customer
│   │   ├── my-books.jsx
│   ├── public
│   │   ├── login.jsx
│   │   ├── read-chapter.jsx
│   ├── _app.jsx
│   ├── _document.jsx
│   ├── index.jsx
├── public
│   ├── robots.txt
├── server
│   ├── api
│   │   ├── admin.js
│   │   ├── customer.js
│   │   ├── index.js
│   │   ├── public.js
│   ├── models
│   │   ├── Book.js
│   │   ├── Chapter.js
│   │   ├── EmailTemplate.js
│   │   ├── Purchase.js
│   │   ├── User.js
│   ├── utils
│   │   ├──slugify.js
│   ├── app.js
│   ├── aws.js
│   ├── github.js
│   ├── google.js
│   ├── logger.js
│   ├── mailchimp.js
│   ├── routesWithSlug.js
│   ├── sitemapAndRobots.js
│   ├── stripe.js
├── test/server/utils
│   ├── slugify.test.js
├── .eslintrc.js
├── .gitignore
├── package.json
├── yarn.lock

Download details:
Author: async-labs
Source code: https://github.com/async-labs/builderbook
License:

#next #nextjs #react #reactjs #javascript

What is GEEK

Buddha Community

NBB: Ad-hoc CLJS Scripting on Node.js

Nbb

Not babashka. Node.js babashka!?

Ad-hoc CLJS scripting on Node.js.

Status

Experimental. Please report issues here.

Goals and features

Nbb's main goal is to make it easy to get started with ad hoc CLJS scripting on Node.js.

Additional goals and features are:

• Fast startup without relying on a custom version of Node.js.
• Small artifact (current size is around 1.2MB).
• First class macros.
• Support building small TUI apps using Reagent.
• Complement babashka with libraries from the Node.js ecosystem.

Requirements

Nbb requires Node.js v12 or newer.

How does this tool work?

CLJS code is evaluated through SCI, the same interpreter that powers babashka. Because SCI works with advanced compilation, the bundle size, especially when combined with other dependencies, is smaller than what you get with self-hosted CLJS. That makes startup faster. The trade-off is that execution is less performant and that only a subset of CLJS is available (e.g. no deftype, yet).

Usage

Install nbb from NPM:

$ npm install nbb -g

Omit -g for a local install.

Try out an expression:

$ nbb -e '(+ 1 2 3)'
6

And then install some other NPM libraries to use in the script. E.g.:

$ npm install csv-parse shelljs zx

Create a script which uses the NPM libraries:

(ns script
  (:require ["csv-parse/lib/sync$default" :as csv-parse]
            ["fs" :as fs]
            ["path" :as path]
            ["shelljs$default" :as sh]
            ["term-size$default" :as term-size]
            ["zx$default" :as zx]
            ["zx$fs" :as zxfs]
            [nbb.core :refer [*file*]]))

(prn (path/resolve "."))

(prn (term-size))

(println (count (str (fs/readFileSync *file*))))

(prn (sh/ls "."))

(prn (csv-parse "foo,bar"))

(prn (zxfs/existsSync *file*))

(zx/$ #js ["ls"])

Call the script:

$ nbb script.cljs
"/private/tmp/test-script"
#js {:columns 216, :rows 47}
510
#js ["node_modules" "package-lock.json" "package.json" "script.cljs"]
#js [#js ["foo" "bar"]]
true
$ ls
node_modules
package-lock.json
package.json
script.cljs

Macros

Nbb has first class support for macros: you can define them right inside your .cljs file, like you are used to from JVM Clojure. Consider the plet macro to make working with promises more palatable:

(defmacro plet
  [bindings & body]
  (let [binding-pairs (reverse (partition 2 bindings))
        body (cons 'do body)]
    (reduce (fn [body [sym expr]]
              (let [expr (list '.resolve 'js/Promise expr)]
                (list '.then expr (list 'clojure.core/fn (vector sym)
                                        body))))
            body
            binding-pairs)))

Using this macro we can look async code more like sync code. Consider this puppeteer example:

(-> (.launch puppeteer)
      (.then (fn [browser]
               (-> (.newPage browser)
                   (.then (fn [page]
                            (-> (.goto page "https://clojure.org")
                                (.then #(.screenshot page #js{:path "screenshot.png"}))
                                (.catch #(js/console.log %))
                                (.then #(.close browser)))))))))

Using plet this becomes:

(plet [browser (.launch puppeteer)
       page (.newPage browser)
       _ (.goto page "https://clojure.org")
       _ (-> (.screenshot page #js{:path "screenshot.png"})
             (.catch #(js/console.log %)))]
      (.close browser))

See the puppeteer example for the full code.

Since v0.0.36, nbb includes promesa which is a library to deal with promises. The above plet macro is similar to promesa.core/let.

Startup time

$ time nbb -e '(+ 1 2 3)'
6
nbb -e '(+ 1 2 3)'   0.17s  user 0.02s system 109% cpu 0.168 total

The baseline startup time for a script is about 170ms seconds on my laptop. When invoked via npx this adds another 300ms or so, so for faster startup, either use a globally installed nbb or use $(npm bin)/nbb script.cljs to bypass npx.

Dependencies

NPM dependencies

Nbb does not depend on any NPM dependencies. All NPM libraries loaded by a script are resolved relative to that script. When using the Reagent module, React is resolved in the same way as any other NPM library.

Classpath

To load .cljs files from local paths or dependencies, you can use the --classpath argument. The current dir is added to the classpath automatically. So if there is a file foo/bar.cljs relative to your current dir, then you can load it via (:require [foo.bar :as fb]). Note that nbb uses the same naming conventions for namespaces and directories as other Clojure tools: foo-bar in the namespace name becomes foo_bar in the directory name.

To load dependencies from the Clojure ecosystem, you can use the Clojure CLI or babashka to download them and produce a classpath:

$ classpath="$(clojure -A:nbb -Spath -Sdeps '{:aliases {:nbb {:replace-deps {com.github.seancorfield/honeysql {:git/tag "v2.0.0-rc5" :git/sha "01c3a55"}}}}}')"

and then feed it to the --classpath argument:

$ nbb --classpath "$classpath" -e "(require '[honey.sql :as sql]) (sql/format {:select :foo :from :bar :where [:= :baz 2]})"
["SELECT foo FROM bar WHERE baz = ?" 2]

Currently nbb only reads from directories, not jar files, so you are encouraged to use git libs. Support for .jar files will be added later.

Current file

The name of the file that is currently being executed is available via nbb.core/*file* or on the metadata of vars:

(ns foo
  (:require [nbb.core :refer [*file*]]))

(prn *file*) ;; "/private/tmp/foo.cljs"

(defn f [])
(prn (:file (meta #'f))) ;; "/private/tmp/foo.cljs"

Reagent

Nbb includes reagent.core which will be lazily loaded when required. You can use this together with ink to create a TUI application:

$ npm install ink

ink-demo.cljs:

(ns ink-demo
  (:require ["ink" :refer [render Text]]
            [reagent.core :as r]))

(defonce state (r/atom 0))

(doseq [n (range 1 11)]
  (js/setTimeout #(swap! state inc) (* n 500)))

(defn hello []
  [:> Text {:color "green"} "Hello, world! " @state])

(render (r/as-element [hello]))

Promesa

Working with callbacks and promises can become tedious. Since nbb v0.0.36 the promesa.core namespace is included with the let and do! macros. An example:

(ns prom
  (:require [promesa.core :as p]))

(defn sleep [ms]
  (js/Promise.
   (fn [resolve _]
     (js/setTimeout resolve ms))))

(defn do-stuff
  []
  (p/do!
   (println "Doing stuff which takes a while")
   (sleep 1000)
   1))

(p/let [a (do-stuff)
        b (inc a)
        c (do-stuff)
        d (+ b c)]
  (prn d))

$ nbb prom.cljs
Doing stuff which takes a while
Doing stuff which takes a while
3

Also see API docs.

Js-interop

Since nbb v0.0.75 applied-science/js-interop is available:

(ns example
  (:require [applied-science.js-interop :as j]))

(def o (j/lit {:a 1 :b 2 :c {:d 1}}))

(prn (j/select-keys o [:a :b])) ;; #js {:a 1, :b 2}
(prn (j/get-in o [:c :d])) ;; 1

Most of this library is supported in nbb, except the following:

• destructuring using :syms
• property access using .-x notation. In nbb, you must use keywords.

See the example of what is currently supported.

Examples

See the examples directory for small examples.

Also check out these projects built with nbb:

• c64core: retrocompute aesthetics twitter bot
• gallery.cljs: script to download walpapers from windowsonearth.org.
• nbb-action-example: example of a Github action built with nbb.

API

See API documentation.

Migrating to shadow-cljs

See this gist on how to convert an nbb script or project to shadow-cljs.

Build

Prequisites:

• babashka >= 0.4.0
• Clojure CLI >= 1.10.3.933
• Node.js 16.5.0 (lower version may work, but this is the one I used to build)

To build:

• Clone and cd into this repo
• bb release

Run bb tasks for more project-related tasks.

Download Details:
Author: borkdude
Download Link: Download The Source Code
Official Website: https://github.com/borkdude/nbb 
License: EPL-1.0

#node #javascript

An Open-Source Book About the Open Source World

Open source today is a word that often include a lot of things, such as open knowledge (Wikimedia projects), open hardware (Arduino, Raspberry Pi), open formats (ODT/ODS/ODP) and so on.

It is a world of opportunities that can be difficult for newcomers but also for intermediates. This article will help you discover how to approach specific roles, activities or projects/communities in the best way.

Everything Started with “Coaching for OpenSource Communities 2.0”

I decided to write a book in my personal style about my experience in the last 7 to 8 years in open source. I was surprised when I reached 100 pages about various different topics.

My idea was to write something that I would like to read, so nothing that is boring or complicated, but full of real facts.

The second goal was to include my experience but also my philosophy on contributing and how I contribute daily.

Thirdly, I wanted to give a lot of hints and resources and an overall view of this open source world.

Basically, I wanted to write something different from self-help or coaching books that includes just a list of suggestions and best practices. Instead, I take real examples from real life about the OSS world.

As a contributor and developer, I prefer to have real cases to study, because best practices are useful, but we need to learn from others and this world is full of good and bad cases to discover.

In 2019, I started writing a book after Fosdem 2019 and after 2 years inside the Mozilla Reps Council. In that Fosdem edition, I had a talk “Coaching for Open Source Communities 2.0” and after the feedback at the conference and my thoughts in various roles, activities, and projects, it was time to write something.

At the end it wasn’t a manual but a book that included my experience, learnings, best practices and so on in Localization, Development, Project Maintainer, Sysadmin, Community Management, Mentor, Speaker and so on. It contains the following sections:

• Biography - This choice isn’t for self promotion but just to understand my point of view and my story that can be inspiring for others
• Philosophy - Not the usual description of Open Source or the 4 freedoms, but just what Open Source means and how you can help
• How to live inside the Open Source - A discovery about communications and tools, understanding the various kind of people and the best way to talk with your community
• How to choose a project - Starting with some questions to yourself and how to involve more people in your project
• The activity - Open Source is based on tasks that can be divided in 2 levels: Support, Testing, Marketing, Development etc
• How to use your time - We are busy, we have a life, a job and a family but Open Source can be time-consuming
• Why document is important - How writing documentation can be healthy for your community and the project’s future and brand

There are also three appendices that are manuals which I wrote throughout the years and gathered and improved for this book. They are about: community management, public speaking, and mentoring.

The book ends with my point of view about the future and what we have to do to change opinions about those topics.

I wrote this book and published in October 2019, but it was only possible with the help of reviews and localizers that improved and contributed. Yes, because this book is open source and free for everyone.

I picked the GPL license because this license changed the world and my life in the best way. Using this license is just a tribute. This decision usually is not clear because after all this is a book and there are better licenses like Creative Commons.

#open-source #contributing-to-open-source #programming #software-development #development #coding #books #open-source-software

Top6 Advantages of MEAN Stack for Web App Development

Last decade has seen introduction of lot of new software development framework and technologies. The purpose behind creating these frameworks is to serve the need of growing demand for web and mobile applications around the world.MEAN stack is one of these latest tools for web based software development.

What is Mean stack?
MEAN Stack development is basically a composition for MongoDB, Express js, angular.js and node.js. MEAN stack some time uses react.js and to form MERN stack.Let’s look at each component in more details.

Mongo DB: MongoDB is an open-source NoSQL database that will hold all of the application’s data. It allows developers to quickly change the structure of the data is persisted. Here it relies on an architecture that comprises of collection & documents and not table & rows.

Express JS: It is used to create web application easily. Also provides a slight simplification for creating a request to developer procedure. This way it gets easier to write modules, secure & fast applications.

Angular.Js: A Client-side framework, often referred to as simply Angular, it has, in fact, become a ‘default’ web front-end JavaScript formwork. Angular Js allows the client to seamlessly send and receive JSON documents.

Node.js: This java Script-based runtime is built on the version 8 engine by chrome. With a compilation of JavaScript source code to the machine code prior to execution, high-performing and scalable web applications are built by the developers.Experss is used to create a Restful API server. To connect mango dB and app server, the node.js driver is been used.
Benefits of MEAN Stack Development
Server and Client switch was never this easy
JavaScript is very popular and powerfuland it allows you to switch seamlessly between client-side and server-side. There will be no need for a third-party standalone server like Apache for deploying the app. The Node.js technology allows the developer to open the application on the server.

Multipurpose and Flexible
MEAN stack is truly wonderful and offers greater flexibility with development to developers. The framework allows for easy testing of the app on the cloud platform upon completing the development process. The development, testing and introduction into the cloud processes are done seamlessly. Any additional information can also be incorporated into the app by simply adding an extra filed on to the form. The technology responsible for this feature is MongoDB which, because it is specifically tailored for the cloud, offers automatic replication and full cluster support.

Build MVP quickly
MVP stands for a minimum viable product. It comprises to the app developed with the most basic and essential features. This set of features are the bare minimum of what users are searching for in a product. Being able to develop an MVP in the shortest time possible is critical for cutting costs as well as testing the product in the market. The MEAN stack makes it possible to create an MVP quickly because the framework offers fast development.

MEAN / MERN allows Isomorphic coding possible
There are two major OS platforms on which mobile operators, namely: iOS and Android. Anyone interested in creating an app for both platforms needs to do a separate project for each. But with the MEAN / MERN stack, this is not necessary. Apps developed using MEAN /MERN are isomorphic, meaning that they can work on multiple platforms without having to change the base code. Thus, the developer’s work is cut in half and more time is spent on enhancing the app already created. Businesses aiming to reach a wider market segment will therefore benefit from using the stack.

Ease in Development with Single Programming Language
MEAN the technologies based on JavaScript. The working environment for developers is thus enhanced, ensuring that they come up with products that will draw the attention of the users by everything that happens in one language. Single programming language also means that the backend response unit will be in a position to handle client requests quickly and efficiently as the program grows with time.

Responsive and Time-saving
If you need to develop an application with limited timelines, use MEAN stack to achieve that. It has infinite module libraries for node Js, which are ready for use. As a result this aspect saves your time and initially used to create modules from scratch. It also has an automated testing feature that instantly notifies you when a particular feature is broken. It gives you more time to polish your project to perfection.
Some of the benefits outlined above are just a little of what the company stands to gain in incorporating the MEAN stack in their app development projects. Enhanced app quality, reduced costs, and time for app development and also which to save time and money, or are just interested in managing a business.

DasinfomdiaPvt.Ltd. offer MEAN stack development services to produce adaptable, versatile web and mobile applications, which utilize JavaScript, on both client and server-side. We provide customer-centric Hire MEAN Stack Development Services.Our MEAN stack export is exceptional when it comes to MEAN stack technology and possess years of experience.

#full-stack application development #full-stack web application, #full-stack web application development #web-development #hire dedicated mean stack developers, #hire frontend developers,

Authentication In MEAN Stack - A Quick Guide

I consider myself an active StackOverflow user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers.

To create angular demo I usually use either plunker or stackblitz or even jsfiddle. I like all of them but when I run into some errors I want to have a little bit more usable tool to undestand what’s going on.

Many people who ask questions on stackoverflow don’t want to isolate the problem and prepare minimal reproduction so they usually post all code to their questions on SO. They also tend to be not accurate and make a lot of mistakes in template syntax. To not waste a lot of time investigating where the error comes from I tried to create a tool that will help me to quickly find what causes the problem.

Angular demo runner
Online angular editor for building demo.
ng-run.com
<>

Let me show what I mean…

Template parser errors#

There are template parser errors that can be easy catched by stackblitz

It gives me some information but I want the error to be highlighted

#mean stack #angular 6 passport authentication #authentication in mean stack #full stack authentication #mean stack example application #mean stack login and registration angular 8 #mean stack login and registration angular 9 #mean stack tutorial #mean stack tutorial 2019 #passport.js

How To Read 43 Machine Learning Books in a Year

The Garrison (armies of militia) of libraries worldwide offer millions of books, such as the Library of Congress in D.C. has over 162 million books, and the New York Public library carries around 53 million books. So many books, so little time in a human’s life.

A number of people have asked me through several of my channels and conferences — how to find time to read books, and what can be done to read more books each month. Some audiences even feel that 43 machine learning books in a year are insufficient, and want more.

I keep discovering new material every day on top of the antiquated books, which still offer good concepts. To get started, I would suggest disconnecting from Netflix, Amazon Video, and regular TV channels. The more you watch any of this stuff, the more you wouldn’t be finding time to read the books.

In 2020, I had managed to read more than 96,120 pieces of books, eBooks, articles, averaging 267 pieces of books, eBooks, research papers, or articles per day. However, on average, people might have read 10 to 30 machine learning books in a year.

#free machine learning books #garrison platoon of machine learning books #machine learning #machine learning books made free #reading machine learning books