Forem: Sébastien Beaury

Introducing Dev Chapters. Find the best web dev ebooks out there 📚

Sébastien Beaury — Thu, 04 Jun 2020 23:54:42 +0000

Why this website?

Some learn best through online video tutorials, others through reading an ebook. I do prefer the second method. As an example, the Road to React is a great resource for every beginner looking for learning from the bottom up.

I also wanted to give Vue a try so I went ahead and decided to design a single web page displaying the best ebooks available for web developers. The website is built with Vue CLI and Bulma.

This is also to give back to the community and allow beginners to create their first pull request so everyone can can contribute to the project. The repo is tagged first-timers-only friendly.

Check it out

Website

sbeaury / dev-chapters

Find the best web dev ebooks out there 📚

Dev Chapters

📚 Find the best web dev ebooks out there. 📚

Made with Vue and Bulma

Prerequisite

It is required to have Node.js with version 8.5.0 or higher. To see what version of Node.js is installed on your machine type the following command in the terminal:

node -v

If you do not have installed Node.js in your machine then go to this link in order to install node.

How to contribute (and add more books to the shelf)

Fork it (https://github.com/sbeaury/dev-chapters/fork)
Create your feature branch (git checkout -b feature/fooBar)
Edit the book database in data/books.yaml by adding an url, an image url, an alt attribute and tag (technology or stack).
Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request

Credits

This project uses several open source packages:

Vue…

View on GitHub

Want to contribute (and add more books to the shelf)?

If you do not have installed Node.js in your machine then go to this link in order to install node.
Fork it (https://github.com/sbeaury/dev-chapters/fork)
Create your feature branch (git checkout -b feature/fooBar)
Edit the book database in data/books.yaml by adding an url, an image url, an alt attribute and a tag (technology or stack).

# books.yaml

# others books sit here
# ...

# inserting new book

- linkUrl: "https://www.yourbook.com"
  imgUrl: "https://www.yourimageurl.com"
  alt: "you don't know Javascript image"
  tag: "Javascript"

Commit your changes (git commit -am 'Add some fooBar')
Push to the branch (git push origin feature/fooBar)
Create a new Pull Request and I will review it

Thanks for reading! The Dev community is awesome!

Follow me if you like to follow my next adventures

How I built my first Chrome extension with React

Sébastien Beaury — Wed, 01 Apr 2020 17:16:30 +0000

This is my first post on Dev.to so please give me any feedback after reading this post! 🙏🙏

How I came up with the idea?

The idea was to add another app to my portfolio and solve a daily life problem: user would be to save their whole YouTube watch history on one page and resume watching any paused video by clicking on a video thumbnail.

How I built this? 🧱

Special thanks to satendra02 for this ReactJs Chrome Extension Boilerplate that help me getting started.

Finally my manifest.json and app.js files look like this:

// manifest.json
{
  "manifest_version": 2,
  "name": "Youtube Resume",
  "author": "Sebastien Beaury",
  "version": "1.0.0",
  "description": "Resume your videos on Youtube.",
  "chrome_url_overrides": {
    "newtab": "index.html" /* triggered when opening a new tab */
  },
  // set up all the chrome permissions 
  "permissions": ["tabs", "*://www.youtube.com/*", "storage"],
  // define the custom action buttons
  "browser_action": {
    "default_icon": "youtube-play.png",
    "default_title": "Youtube Resume"
  },
  "content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vflEtXIPQ/www-widgetapi.js https://img.icons8.com/dusk/2x/youtube-play.png 'sha256-bYa5+qTPCwiUjcorwLU5xL8hkt2cfxlYzC1xEaFW6VA='; object-src 'self'",
  /* declarative injection for content scripts, runs automatically on specified pages */
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["/static/js/index.js"]
    }
  ]
}

// app.js
/* global chrome */  /*this gives us access to Chrome browser methods*/
import React, { Component } from 'react';
...

class App extends Component {
  render() {
  ...
  }
}

export default App;

Check the repo

sbeaury / youtube-resume

Youtube Resume Chrome Extension

Don't let your YouTube browsing history fade away. YouTube Resume Tab replace the default browser new tab screen with your previous YouTube videos paused. Just click on the video to resume watching.

Built with React.

Installation

Install through Chrome Web Store

Install through Developer Mode

Make sure you have latest NodeJs version installed

Clone repo

git clone git@github.com:sbeaury/youtube-resume.git

Go to youtube-resume directory and run

yarn install

Now build the extension using

yarn build

You will see a build folder generated inside the project directory named youtube-resume

Adding React app extension to Chrome

In Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on the LOAD UNPACKED and browse to [PROJECT_HOME]\build. This will install the React app as a Chrome extension.

When opening a new tab, extension will be triggered.

Feedback

Just…

View on GitHub

Screenshots

Get it installed through Chrome Web Store

Just play with it 🔧

Build the app

Clone repo

git clone git@github.com:sbeaury/youtube-resume.git

Go to youtube-resume directory and run

yarn install

Now build the extension using

yarn build

You will see a build folder generated inside the project directory named youtube-resume

Adding React app extension to Chrome

In Chrome browser, go to chrome://extensions page and switch on developer mode. This enables the ability to locally install a Chrome extension.

Now click on Load unpacked and browse to youtube-resume/build. This will install the React app as a Chrome extension.

When opening a new tab, the extension will be triggered. For now, the extension doesn't allow to save the YouTube history by clicking on the toolbar action button.

Give me your feedback 👏

3 ways to help me improve (as a Junior Dev):

Write a comment about what you liked / disliked
Like this post (only if you liked it)
Follow me if you like to follow my next adventures

Forem: Sébastien Beaury

Introducing Dev Chapters. Find the best web dev ebooks out there 📚

Why this website?

Check it out

sbeaury / dev-chapters

Find the best web dev ebooks out there 📚

Dev Chapters

📚 Find the best web dev ebooks out there. 📚 Made with Vue and Bulma

Prerequisite

How to contribute (and add more books to the shelf)

Credits

Want to contribute (and add more books to the shelf)?

How I built my first Chrome extension with React

How I came up with the idea?

How I built this? 🧱

Check the repo

sbeaury / youtube-resume

Youtube Resume Chrome Extension

Youtube Resume Chrome Extension

Installation

Install through Chrome Web Store

Install through Developer Mode

Adding React app extension to Chrome

Feedback

Screenshots

Get it installed through Chrome Web Store

Just play with it 🔧

Build the app

Adding React app extension to Chrome

Give me your feedback 👏

📚 Find the best web dev ebooks out there. 📚

Made with Vue and Bulma