5 |
5 |
6 |
7 | [Offline Web Applications by Google course](https://www.udacity.com/course/offline-web-applications--ud899) lesson 1/3
8 |
9 | Udacity Google Mobile Web Specialist Nanodegree program part 2 lesson 16
10 |
11 | Udacity Grow with Google Scholarship challenge course lesson 02
12 |
13 | Brendon Smith
14 |
15 | br3ndonland
16 |
17 | ## Table of Contents
18 |
19 | - [Lesson](#lesson)
20 | - [1.01. Intro](#101-intro)
21 | - [1.02. The Problem](#102-the-problem)
22 | - [1.03. The Benefits of Offline First](#103-the-benefits-of-offline-first)
23 | - [1.04. Quiz: What Can Slow Us Down](#104-quiz-what-can-slow-us-down)
24 | - [1.05. Quiz: What Does Online First Look Like](#105-quiz-what-does-online-first-look-like)
25 | - [1.06. Quiz: What Are Ways To Be Offline First](#106-quiz-what-are-ways-to-be-offline-first)
26 | - [1.07. Introducing the Demo App](#107-introducing-the-demo-app)
27 | - [1.08. Quiz: Installing the Demo App](#108-quiz-installing-the-demo-app)
28 | - [1.09. Quiz: Running the Demo App](#109-quiz-running-the-demo-app)
29 | - [1.10. Exploring the Demo Apps Code](#110-exploring-the-demo-apps-code)
30 | - [1.11. Quiz: Changing Connection Types](#111-quiz-changing-connection-types)
31 | - [1.12. Quiz: Testing Lie Fi Mode](#112-quiz-testing-lie-fi-mode)
32 | - [1.13. Introducing Service Worker](#113-introducing-service-worker)
33 |
34 | ## Lesson
35 |
36 | ### 1.01. Intro
37 |
38 | ### 1.02. The Problem
39 |
40 | ### 1.03. The Benefits of Offline First
41 |
42 | ### 1.04. Quiz: What Can Slow Us Down
43 |
44 | ### 1.05. Quiz: What Does Online First Look Like
45 |
46 | ### 1.06. Quiz: What Are Ways To Be Offline First
47 |
48 | ### 1.07. Introducing the Demo App
49 |
50 | ### 1.08. Quiz: Installing the Demo App
51 |
52 | - Node installed:
53 |
54 | ```shell
55 | $ node --version
56 | v8.7.0
57 | ```
58 |
59 | - Clone and run app
60 |
61 | ```shell
62 | $ cd 
4 |
5 | Udacity Grow with Google Scholarship challenge course
6 |
7 | Intermediate Web Developer track
8 |
9 | Brendon Smith
10 |
11 | [br3ndonland](https://github.com/br3ndonland)
12 |
13 | [](https://choosealicense.com/)
14 |
15 | ## Background
16 |
17 | This repository contains notes and resources from the [Udacity Grow with Google](https://www.udacity.com/grow-with-google) Scholarship challenge course, in the Intermediate Web Developer track.
18 |
19 | The [Grow with Google scholarship program](https://www.udacity.com/grow-with-google) is an initiative designed to help people make career changes into coding. I was accepted to the intermediate web developer track to learn techniques for building progressive web apps. There was a three month challenge round, after which the top participants move on to a more advanced Mobile Web Specialist program.
20 |
21 | Here's how it went down:
22 |
23 | - Found out about the Grow with Google scholarship via Udacity's [Facebook](https://www.facebook.com/Udacity/posts/1250067568431912) and [Medium](https://medium.com/udacity/grow-with-google-50-000-new-scholarships-available-now-1aa0513430b6) posts, while on a bus to NYC for the [New York Coffee Festival](https://www.newyorkcoffeefestival.com/) on October 14, 2017.
24 | - [Applied](https://github.com/br3ndonland/udacity-google/blob/master/udacity-google-00-apply.md) in December 2017.
25 | - Won the scholarship in January 2018!
26 |
27 | Social media message:
28 |
29 | > I won a web development scholarship from Udacity and Google! I was accepted to the intermediate web developer track. There is a three month challenge round. If I do well, I can win another scholarship to a more advanced Mobile Web Specialist program.
30 | >
31 | > #GoogleUdacityScholars #GrowWithGoogle
32 |
33 | - Started the challenge course materials February 21, 2018.
34 | - Completed the challenge course materials on March 7, 2018 (working on Udacity basically full time). The course taught us how to build progressive web apps and use the new features in JavaScript ES6.
35 | - Attended five local meetups.
36 | - Started building a collaborative open-source transportation app, [MBTAccess](https://github.com/growwithgooglema/mbtaccess), in April 2018.
37 | - **Ranked in the top 10% of 10,000 students in the intermediate web developer track.** Ranking was based on completing all course materials, as well as participation in the Slack workspace, discussion forum, and meetups.
38 | - **Won a full scholarship to the [Google Mobile Web Specialist Nanodegree program](https://www.udacity.com/course/mobile-web-specialist-nanodegree--nd024).** See my [udacity-google-mws](https://github.com/br3ndonland/udacity-google-mws) repo for materials from the Nanodegree program.
39 |
40 | ## Course materials
41 |
42 | Materials in this repository:
43 |
44 | - [es6](es6): JavaScript ES6 course
45 | - [es6-1-syntax](es6/es6-1-syntax.md): JavaScript ES6 Syntax
46 | - [es6-2-functions](es6/es6-2-functions.md): JavaScript ES6 Functions
47 | - [es6-3-built-ins](es6/es6-3-built-ins.md): JavaScript ES6 Built-Ins (Symbols, Sets, Proxies, Maps, Generators)
48 | - [es6-4-polyfills-transpiling](es6/es6-4-polyfills-transpiling.md): JavaScript ES6 Transpiling and Polyfills
49 | - [offline-web-apps](offline-web-apps): Offline web apps course
50 | - [offline-1-benefits](offline-web-apps/offline-1-benefits.md): Intro to offline-first web apps
51 | - [offline-2-sw](offline-web-apps/offline-2-sw.md): Overview of Service Worker for offline-first web apps
52 | - [offline-3-indexeddb](offline-web-apps/offline-3-indexeddb.md): IndexedDB and Caching for offline-first web apps
53 | - [markdown-guide.md](markdown-guide.md): Guide to writing with Markdown
54 | - [udacity-google-00-apply.md](udacity-google-00-apply.md): Program application
55 | - [udacity-google-01.md](udacity-google-01.md): Course intro
56 | - [udacity-google-10.md](udacity-google-10.md): Program completion and feedback
57 | - [udacity-google-story.md](udacity-google-story.md): Developer story detailing my experience in the program
58 |
--------------------------------------------------------------------------------
/udacity-google-10.md:
--------------------------------------------------------------------------------
1 | # Lesson 10. Challenge Course Wrap-Up
2 |
3 | Udacity Grow with Google Scholarship challenge course
4 |
5 | Intermediate Web Developer track
6 |
7 | Brendon Smith
8 |
9 | br3ndonland
10 |
11 | ## Table of Contents
12 |
13 | - [Table of Contents](#table-of-contents)
14 | - [I did it](#i-did-it)
15 | - [Great work](#great-work)
16 | - [Program feedback](#program-feedback)
17 | - [Program suggestions](#program-suggestions)
18 |
19 | ## I did it
20 |
21 | I did it! I got through all the material for the challenge course! I will find out the results mid-April.
22 |
23 | 
24 |
25 | 
26 |
27 | ## Great work
28 |
29 | Message from Udacity:
30 |
31 | > Congrats on completing the Mobile Web Specialist challenge course!
32 | >
33 | > It's been an awesome journey and we hope you've enjoyed the program thus far.
34 | >
35 | > The fun doesn't stop here. We will be evaluating your course progress and engagement in the student community to determine the recipients of Nanodegree scholarships for the second phase of this program.
36 | >
37 | > Stay tuned for the announcement of round two scholarship recipients on April 17!
38 |
39 | ## Program feedback
40 |
41 | I was really pumped when I got this scholarship. And even more pumped when I started the lessons.
42 |
43 | **I enjoyed the introduction to progressive web apps (PWAs)**. I think about PWAs every time I look at my phone. I regularly prune my app collection to remove anything I don't use, but my Google Pixel XL still currently has >150 apps. That seems like too many. I think we are over-dependent on native apps. Native apps have their place, but have reduced the openness of the web and created clutter on our mobile devices. The future seems like it's going to be in blurring the line between websites and apps. I'm excited to be surfing the next wave of PWAs!
44 |
45 | The **timing** was challenging. When the Grow with Google challenge course began, I had been working through the Udacity Full Stack Web Developer Nanodegree program (FSND). I was a a little bit stressed about the time limit on the challenge course, and about how to budget my time between the two programs. However, with the help of my Udacity FSND mentor, I came up with an effective approach. I worked up to a good pause point in the FSND, then worked through the Grow with Google materials, finishing over a month ahead of the deadline, and then got back to the FSND.
46 |
47 | Another challenging aspect for me was the **participation**. Social media can be distracting. It took me a little while to warm up to the forums and Slack, but I was glad I did. Two positive outcomes of the social networking were **meetups** and **pomodoros**. I got to meet up with some fellow Udacious humans in Boston. I also learned about the pomodoro technique. It's like interval training for working, and really helped me get through the course materials efficiently. My participation not only helped me, but the other students as well. I took detailed notes on the course materials and shared them on [GitHub](https://github.com/br3ndonland/udacity-google). Other students appreciated the organized, thorough notes. I also put together a [guide to writing with Markdown](markdown-guide.md) to help other students maximize their documentation.
48 |
49 | Thanks Udacity and Google!
50 |
51 | ## Program suggestions
52 |
53 | - **Present the ES6 lessons first.** This would especially help those of us new to JavaScript. I heard some students did the ES6 syntax lessons first and found it helpful.
54 | - **Update the wittr code for ES6.** This would make the codebase for the course more cohesive, allowing us to apply what we learn in the ES6 syntax lessons. It is helpful to include Babel transpiling for browser compatibility, but for the students it would be more helpful to always be looking at ES6 throughout the course.
55 | - **Explain the wittr stack more clearly.** There was a lot of code running under the hood. The instructor Jake did a good job explaining how the app connects to the internet (caching, sockets, etc), but it would have been great to have a more detailed walk-through of the code used to actually build the app.
56 | - It would also be great to have a **project** as a more technical assessment of our performance, but I understand that it would be difficult to evaluate 10K projects.
57 |
58 | I shared this in the Udacity discussion forum, and many people agreed.
59 |
60 | [(Back to TOC)](#table-of-contents)
61 |
--------------------------------------------------------------------------------
/udacity-google-story.md:
--------------------------------------------------------------------------------
1 | # Student stories challenge
2 |
3 | ## Table of Contents
4 |
5 | - [Table of Contents](#table-of-contents)
6 | - [Personal story](#personal-story)
7 | - [1. Circumstances that brought you to Udacity](#1-circumstances-that-brought-you-to-udacity)
8 | - [2. Reasons for applying](#2-reasons-for-applying)
9 | - [3. Ways in which this Scholarship Challenge helped so far in your life](#3-ways-in-which-this-scholarship-challenge-helped-so-far-in-your-life)
10 | - [Tips for fitting study time/project time into your daily schedule](#tips-for-fitting-study-timeproject-time-into-your-daily-schedule)
11 | - [Result](#result)
12 |
13 | ## Personal story
14 |
15 | ### 1. Circumstances that brought you to Udacity
16 |
17 | During my two years in a large molecular biology lab at Harvard, I became frustrated by the lack of technology tools to do my work efficiently. I saw that we are facing a reproducibility crisis in science, in which the discoveries that we publish are not correct or relevant to humans. I also saw that many scientists are struggling to sustain work/life balance.
18 |
19 | We will never effectively address these issues without better technology tools to perform and document our work. After realizing this, I left my job at Harvard to dedicate myself to web development. My purpose is to build science technology tools for a more efficient, reproducible and sustainable research culture.
20 |
21 | ### 2. Reasons for applying
22 |
23 | I wanted to expand my training into progressive web apps (PWAs). I think about PWAs every time I look at my phone. I regularly prune my app collection to remove anything I don't use, but my Google Pixel XL still currently has >150 apps. That seems like too many. I think we are over-dependent on native apps. Native apps have their place, but have reduced the openness of the web and created clutter on our mobile devices. The future seems like it's going to be in blurring the line between websites and apps. I'm excited to be surfing the next wave of PWAs!
24 |
25 | ### 3. Ways in which this Scholarship Challenge helped so far in your life
26 |
27 | I was really pumped when I got this scholarship. And even more pumped when I started the lessons. I enjoyed the introduction to progressive web apps (PWAs) in the lessons, and found that the program improved my life!
28 |
29 | I discovered that **web development engages the two major motivating outcomes in my life, focused personal growth and positive impact.**
30 |
31 | I am most happy when I am improving myself. Web developers use a large set of tools and skills. I have enjoyed building these skills so far, and appreciate how quickly I can make progress. My vision for improving science leads my personal growth to be focused and purposeful.
32 |
33 | Web development will enable me to have a positive impact on the world by building technology tools for science. Science is of central importance in our society, but scientists do not have the software or hardware to work effectively. I will be able to deliver improved technology tools that will allow science to become more efficient, reproducible, and sustainable.
34 |
35 | **The participation was challenging for me, but ended up really enriching my experience.** Social media can be distracting. It took me a little while to warm up to the forums and Slack, but I was glad I did. Two positive outcomes of the social networking were **meetups** and **pomodoros**. I got to meet up with some fellow Udacious humans in Boston. I also learned about the pomodoro technique. It's like interval training for working, and really helped me get through the course materials efficiently. My participation not only helped me, but the other students as well. I took detailed notes on the course materials and shared them on [GitHub](https://github.com/br3ndonland/udacity-google). Other students appreciated the organized, thorough notes. I also put together a guide to writing with Markdown to help other students maximize their documentation.
36 |
37 | Thanks Udacity and Google!
38 |
39 | ## Tips for fitting study time/project time into your daily schedule
40 |
41 | Pomodoro intervals were really helpful for watching lessons. I found that each lesson took about one 25 minute pomodoro. After the 25 minutes, I would reflect on how well I used my time, and how I want to spend the next 25 minutes. Pomodoros helped me stay efficient and focused.
42 |
43 | ## Result
44 |
45 | One story winner was selected from each track of the program.
46 |
47 | Slack announcement:
48 |
49 | > _WAY TO GO, SCHOLARS!_ You exceeded our 1,000 story goal by submitting 1,193 of your amazing Student Stories to us! :man_dancing::dancer:
50 | >
51 | > And now, we'd like to introduce the five Mobile Web finalists:
52 | >
53 | > HUGE congrats to @jSick, @neuralnet, @derick_gross, @twip, and @Serenity :clap:
54 | >
55 | > Read their personal story and vote for your favorite in the doc below. You can only pick one! All votes need to be in by _tomorrow March 21st at 11:59 pm PT._
56 | >
57 | > Thank you to everyone who submitted a story! It was so much fun getting to know you better.
58 | >
59 | > Mobile Web Finalist Stories [here](https://docs.google.com/presentation/d/1XItqm2vEREGrqLCBh1FMgG0fbhBJtFEMArvJYAW1kvQ/edit?usp=sharing)
60 |
--------------------------------------------------------------------------------
/es6/es6-4-polyfills-transpiling.md:
--------------------------------------------------------------------------------
1 | # JavaScript Polyfills and Transpiling
2 |
3 |
4 |
5 |
6 |
7 | [ES6 - JavaScript Improved course](https://www.udacity.com/course/es6-javascript-improved--ud356) lesson 4/4
8 |
9 | Udacity Google Mobile Web Specialist Nanodegree program part 3 lesson 07
10 |
11 | Udacity Grow with Google Scholarship challenge course lesson 09
12 |
13 | Brendon Smith
14 |
15 | [br3ndonland](https://github.com/br3ndonland)
16 |
17 | ## Table of Contents
18 |
19 | - [Intro](#intro)
20 | - [4.01. The Web is Growing Up](#401-the-web-is-growing-up)
21 | - [4.02. Old and New Browsers](#402-old-and-new-browsers)
22 | - [4.03. ES6 Specification](#403-es6-specification)
23 | - [4.04. Supported Features](#404-supported-features)
24 | - [4.05. The Web is Eternal](#405-the-web-is-eternal)
25 | - [Polyfills](#polyfills)
26 | - [4.06. Polyfills](#406-polyfills)
27 | - [4.07. Using Polyfills](#407-using-polyfills)
28 | - [4.08. Polyfill Walkthrough](#408-polyfill-walkthrough)
29 | - [4.09. Other Uses for Polyfills](#409-other-uses-for-polyfills)
30 | - [Transpiling](#transpiling)
31 | - [4.10. Transpiling](#410-transpiling)
32 | - [4.11. Using Babel](#411-using-babel)
33 | - [4.12. Transpiling Walkthrough](#412-transpiling-walkthrough)
34 | - [4.13. Transpiling Recap](#413-transpiling-recap)
35 | - [4.14. Course Summary](#414-course-summary)
36 | - [Feedback on Lesson 9 (JavaScript ES6 lesson 4/4)](#feedback-on-lesson-9-javascript-es6-lesson-44)
37 |
38 | ## Intro
39 |
40 | **This lesson will show us how to write ES6 code, even when browsers haven't caught up to the latest features yet.**
41 |
42 | **ES6 is also referred to as ES2015.**
43 |
44 | ### 4.01. The Web is Growing Up
45 |
46 | ### 4.02. Old and New Browsers
47 |
48 | #### Code doesn't work in old browsers
49 |
50 | The code from the course throws errors in old browsers like Safari 9 and IE 11
51 |
52 | 
53 |
54 | 
55 |
56 | > It makes sense that code doesn't work in older browsers that were developed prior to the release of ES6, but there are some browsers that have been released after ES6 that don't support the new JavaScript syntax and functionality yet.
57 | >
58 | > Most of us don't think much about the browser and all it can do...until it doesn't work! But really, browser makers have a tough time. Think about HTML, CSS, and JavaScript - these languages are fluid and are always improving. Browser makers have to keep up with all of these changes.
59 |
60 | #### But how do they know about these changes
61 |
62 | > They learn (or actually build) the language specifications!
63 | >
64 | > Just like the [World Wide Web Consortium (W3C)](https://www.w3.org/) is the standards body for things like HTML, CSS, and SVG, [Ecma International](https://www.ecma-international.org/) is an industry association that develops and oversees standards like JavaScript and JSON. You can find the specifications for ES6 [here](http://www.ecma-international.org/ecma-262/6.0/index.html).
65 |
66 | #### Further Info
67 |
68 | > Ecma International is an important industry community and definitely worth checking out in more detail:
69 | >
70 | > - [https://en.wikipedia.org/wiki/Ecma_International](https://en.wikipedia.org/wiki/Ecma_International)
71 | > - [http://www.ecma-international.org/memento/index.html](http://www.ecma-international.org/memento/index.html)
72 | >
73 | > **NOTE:** The code we've been looking at in this course is not supported by older browsers. Older browsers that were developed prior to the release of ES6 were developed to support the version of JavaScript at the time (which was ES5.1). If you try running any ES6 code in an older browser, it won't work.
74 |
75 | ### 4.03. ES6 Specification
76 |
77 | #### Intro to ES6 Specification
78 |
79 | > The specification (commonly shortened to "spec") for ES6 can be found [here](http://www.ecma-international.org/ecma-262/6.0/index.html). The spec lists the set of rules and guidelines on _how_ the language is supposed to function. It doesn't give specific details on how browser makers are supposed to achieve functionality, but it does provide step-by-step instructions on how the language is supposed to work. While making this course, we repeatedly referred to this official spec.
80 | >
81 | > Ok, so honestly, it can be a little difficult to decipher some of the cryptic wording of the spec. But when you have a question about ES6, we recommend checking out info on the topic like that provided by the [Mozilla Developer Network](https://developer.mozilla.org/) and then also reviewing what the spec actually says.
82 |
83 | #### Quiz Question
84 |
85 | Check out the [ES6 Specification](http://www.ecma-international.org/ecma-262/6.0/index.html). Which section in the spec covers arrow functions?
86 |
87 | - section 6
88 | - section 10.3.2
89 | - section 14.2
90 | - section 18.3.29
91 |
92 | 
293 |
294 | #### Transpiling project in repo
295 |
296 | > If you check in the [repo for this project](https://github.com/udacity/course-es6/tree/master/lesson-4/walk-through-transpiling), inside the Lesson 4 directory is a little project that's all set up for transpiling ES6 code to ES5 code. There's an "ES6" directory that contains the ES6 code we'll be transpiling (using Babel) to ES5 code that will be able to run in every browser.
297 | >
298 | > The way Babel transforms code from one language to another is through plugins. There are plugins that transform ES6 arrow functions to regular ES5 functions (the [ES2015 arrow function plugin](http://babeljs.io/docs/plugins/transform-es2015-arrow-functions/)). There are plugins that transform ES6 template literals to regular string concatenation (the [ES2015 template literals transform](http://babeljs.io/docs/plugins/transform-es2015-template-literals/)). For a full list, check out [all of Babel's plugins](http://babeljs.io/docs/plugins/).
299 |
300 | 
301 |
302 | > Now, you're busy and you don't want to have to sift through a big long list of plugins to see which ones you need to convert your code from ES6 to ES5. So instead of having to use a bunch of individual plugins, Babel has **presets** which are groups of plugins bundled together. So instead of worrying about which plugins you need to install, we'll just use the [ES2015 preset](http://babeljs.io/docs/plugins/preset-es2015/) that is a collection of all the plugins we'll need to convert all of our ES6 code to ES5.
303 | >
304 | > You can see that the project has a `.babelrc` file. This is where you'd put all of the plugins and/or presets that the project will use. Since we want to convert all ES6 code, we've set it up so that it has the ES2015 preset.
305 |
306 | ```json
307 | {
308 | "presets": ["es2015"]
309 | }
310 | ```
311 |
312 | 
313 |
314 | > **WARNING:** Babel uses both **Node** and **NPM** to distribute its plugins. So before you can install anything, make sure you have both of these tools installed:
315 | >
316 | > - install [Node](https://nodejs.org/) (which will automatically install NPM)
317 |
318 | ### 4.12. Transpiling Walkthrough
319 |
320 | **Note that Richard has selected the MIT license for his materials. I have correspondingly also selected the MIT license for my course repo.**
321 |
322 | > The project's \*package.json- file lists all of the NPM packages that this project depends on.
323 | >
324 | > This project depends on
325 | >
326 | > - `babel-cli`
327 | > - `babel-preset-es2015`
328 | >
329 | > The babel 2015 preset is a collection of all es6 plugins. So these are the plugins that will be downloaded and installed.
330 | >
331 | > Once they're installed we need to tell the Babel CLI which plugins it should use to do the transpiling. The CLI will check the \*.babelrc- file for which plugins and presets to use.
332 | >
333 | > So the _package.json- file lists what should be installed and the _.babelrc- file tells babel which plugins to use when it does its transpiling.
334 | >
335 | > Now that babel knows to use this preset we need to tell it to actually transpile the code. To do that we've added a build script that will tell babel to take the files in the ES6 directory, transpile them using the es2015 preset, and then put the transformed code in the ES5 directory.
336 |
337 | 
338 |
339 | ### 4.13. Transpiling Recap
340 |
341 | > NOTE: As of the creation of this course (circa Winter 2016), most of ES6 is supported by the current set of browsers. But that's "most", not "all", unfortunately. And that's also referring to "current" browsers. There are plenty of older browsers that do not support many, if any, of the new ES6 additions. However, it is safe to say that pretty much every browser supports the previous version of the language (ES5.1).
342 | >
343 | > It's important to stay on top of all the changes JavaScript is going through. The best way to do that is to start making use of the new features that are added. The problem is that not all browsers support these new features.
344 | >
345 | > So, to have your cake and eat it too, you can write in ES6 and then use a transpiler to convert it to ES5 code. This lets you transform your project's code base to the newest version of the language while still letting it run everywhere. Then, once all of the browsers your app has to run on fully support ES6 code, you can stop transpiling your code and just serve the straight ES6 code, directly!
346 |
347 | ### 4.14. Course Summary
348 |
349 | 
350 |
351 | ## Feedback on Lesson 9 (JavaScript ES6 lesson 4/4)
352 |
353 | Informative and helpful lesson.
354 |
355 | [Previous lesson](es6-3-built-ins.md)
356 |
357 | [(Back to top)](#top)
358 |
--------------------------------------------------------------------------------
/offline-web-apps/offline-3-indexeddb.md:
--------------------------------------------------------------------------------
1 | # IndexedDB and Caching
2 |
3 |
4 |
5 |
6 |
7 | [Offline Web Applications by Google course](https://www.udacity.com/course/offline-web-applications--ud899) lesson 3/3
8 |
9 | Udacity Google Mobile Web Specialist Nanodegree program part 3 lesson 08
10 |
11 | Udacity Grow with Google Scholarship challenge course lesson 04
12 |
13 | Brendon Smith
14 |
15 | br3ndonland
16 |
17 | ## Table of Contents
18 |
19 | - [Intro](#intro)
20 | - [3.01. Introducing the IDB Promised Library](#301-introducing-the-idb-promised-library)
21 | - [3.02. Getting Started with IDB](#302-getting-started-with-idb)
22 | - [3.03. Quiz: Getting Started with IDB](#303-quiz-getting-started-with-idb)
23 | - [3.04. Quiz: More IDB](#304-quiz-more-idb)
24 | - [Caching](#caching)
25 | - [3.05. Using the IDB Cache and Display Entries](#305-using-the-idb-cache-and-display-entries)
26 | - [3.06. Quiz: Using IDB Cache](#306-quiz-using-idb-cache)
27 | - [3.07. Quiz: Using IDB 2](#307-quiz-using-idb-2)
28 | - [3.08. Quiz: Cleaning IDB](#308-quiz-cleaning-idb)
29 | - [Cache photos and avatars](#cache-photos-and-avatars)
30 | - [3.09. Cache Photos](#309-cache-photos)
31 | - [3.10. Quiz: Cache Photos Quiz](#310-quiz-cache-photos-quiz)
32 | - [3.11. Cleaning Photo Cache](#311-cleaning-photo-cache)
33 | - [3.12. Quiz: Cleaning Photo Cache Quiz](#312-quiz-cleaning-photo-cache-quiz)
34 | - [3.13. Quiz: Caching Avatars](#313-quiz-caching-avatars)
35 | - [3.14. Outro](#314-outro)
36 | - [Lesson feedback](#lesson-feedback)
37 |
38 | ## Intro
39 |
40 | ### 3.01. Introducing the IDB Promised Library
41 |
42 | - This will be a crash course in IndexedDB
43 | - The wittr app will benefit from a **database**. It will allow us to add and remove posts as needed.
44 | - **IndexedDB** allows us to create a **database** for the app. You will generally have one database per app, with multiple **object stores**.
45 | - The database object stores can contain JavaScript objects, strings, numbers, dates, or arrays.
46 | - Changes are made to the database with **transactions**. Transactions are atomic-if one part fails, none of the changes are applied.
47 | - **Indexes** (indices?) organize data by properties.
48 |
49 | 
50 |
51 | - Why does IndexedDB have a bad reputation?
52 | - The API is "a little... horrid" and it can create spaghetti code.
53 | - It has its own event-based promise system (it predates promises) that can be confusing.
54 | - Jake believes in teaching the web platform rather than libraries, but in this case, we will use **[IndexedDB Promised (idb)](https://github.com/jakearchibald/idb)**, which Jake created. It mirrors the IndexedDB API and uses promises instead of events.
55 |
56 | ### 3.02. Getting Started with IDB
57 |
58 | - Navigate to [http://localhost:8888/idb-test](http://localhost:8888/idb-test) which is currently just a blank page with a script tag to import `idb`.
59 | - Jake walked through some of the code in `idb`.
60 |
61 | #### Create database
62 |
63 | - `createObjectStore`: Jake referred to [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase/createObjectStore). Jake creates an object store named 'keyval'.
64 | - `IDBObjectStore.put()`: [MDN](https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore/put)
65 |
66 | ```javascript
67 | import idb from "idb"
68 |
69 | var dbPromise = idb.open("test-db", 1, function(upgradeDb) {
70 | var keyValStore = upgradeDb.createObjectStore("keyval")
71 | keyValStore.put("world", "hello")
72 | })
73 | ```
74 |
75 | #### Read from database
76 |
77 | ```javascript
78 | dbPromise
79 | .then(function(db) {
80 | var tx = db.transaction("keyval")
81 | var keyValStore = tx.objectStore("keyval")
82 | return keyValStore.get("hello")
83 | })
84 | .then(function(val) {
85 | console.log('The value of "hello" is:', val)
86 | })
87 | ```
88 |
89 | #### Add another value to the object store
90 |
91 | ```javascript
92 | dbPromise
93 | .then(function(db) {
94 | var tx = db.transaction("keyval", "readwrite")
95 | var keyValStore = tx.objectStore("keyval")
96 | keyValStore.put("bar", "foo")
97 | return tx.complete
98 | })
99 | .then(function() {
100 | console.log("Added foo:bar to keyval")
101 | })
102 | .catch(function(error) {
103 | console.error("Transaction failed:", error)
104 | })
105 | ```
106 |
107 | ### 3.03. Quiz: Getting Started with IDB
108 |
109 | Git
110 |
111 | - Checkout to new branch:
112 |
113 | ```shell
114 | $ git reset --hard
115 | $ git checkout origin/page-skeleton
116 | ```
117 |
118 | 
314 |
315 | - _public/js/main/IndexController.js_
316 | - The `IndexController._openSocket` method is called to open the Web Socket.
317 | - `IndexController._openSocket` listens for the message event, and passes data to the `IndexController._onSocketMessage` method.
318 | - `IndexController._onSocketMessage` parses JSON data and passes it to `IndexController._postsView.addPosts`.
319 |
320 | ### 3.06. Quiz: Using IDB Cache
321 |
322 | Git
323 |
324 | - Checkout to new branch:
325 |
326 | ```shell
327 | $ git reset --hard
328 | $ git checkout origin/task-idb-store
329 | ```
330 |
331 | Task
332 |
333 | > Your task is to return a Promise for a database called 'wittr' that has an object store called 'wittrs' that uses 'id' as its key and has an index called called 'by-date', which is sorted by the 'time' property.
334 | >
335 | > Once you've done that, you'll need to add messages to the database. Down in the IndexController.\_onSocketMessage method, the database has been fetched. Your task is to add each of the messages to the Wittr store. Note that we're not using the entries in the database yet - we'll do that in the next chapter.
336 |
337 | If the database gets messed up, run `indexedDB.deleteDatabase('wittr')` in DevTools to reset.
338 |
339 | 
533 |
534 | - Images will be stored in a separate cache from the other static content. This allows the photos to live on between different versions of the app.
535 | - We will be working with a responsive image. It has different sizes based on the viewport width.
536 | - Using responses multiple times: `response.json();` cannot be re-read with `response.blob();`. Once the data are read in as json, it disappears from memory. This applies to `event.respondWith(response);` as well. This is a problem for our photos. We want to open a cache, fetch from the network, and send the response both to the cache and the browser. To fix this, we clone the response with `response.clone()`. A clone goes to the cache, and the original response gets sent to the page.
537 |
538 | ### 3.10. Quiz: Cache Photos Quiz
539 |
540 | Git
541 |
542 | - Checkout to new branch:
543 |
544 | ```shell
545 | $ git reset --hard
546 | $ git checkout origin/task-cache-photos
547 | ```
548 |
549 | Code in _public/js/sw/index.js_ (the service worker script)
550 |
551 | 
692 | ```
693 |
694 | Git
695 |
696 | - Checkout to new branch:
697 |
698 | ```shell
699 | $ git reset --hard
700 | $ git checkout origin/task-cache-avatars
701 | ```
702 |
703 | Call and implement the `serveAvatar` function in _public/js/sw/index.js_ (the service worker script)
704 |
705 | 
773 |
774 | ## Lesson feedback
775 |
776 | Again, a very informative and helpful lesson. It would be nice to use Udacity's browser-based quiz system instead of all the git resets, but I understand that it would be difficult to demo the app without a local clone of the git repo.
777 |
778 | [Previous lesson](offline-2-sw.md)
779 |
780 | [(Back to top)](#top)
781 |
--------------------------------------------------------------------------------
/markdown-guide.md:
--------------------------------------------------------------------------------
1 | # Markdown guide
2 |
3 | Brendon Smith ([br3ndonland](https://github.com/br3ndonland))
4 |
5 | ## Table of Contents
6 |
7 | - [Markdown syntax](#markdown-syntax)
8 | - [Syntactic suggestions](#syntactic-suggestions)
9 | - [General Markdown resources](#general-markdown-resources)
10 | - [Markdown apps](#markdown-apps)
11 | - [Text editors](#text-editors)
12 | - [IDEs](#ides)
13 | - [Note apps](#note-apps)
14 | - [In-browser editors](#in-browser-editors)
15 | - [Social apps](#social-apps)
16 |
17 | **Markdown is a simplified HTML syntax.** It has most of the functionality of HTML while being much easier to read, and is very widely used (for example, READMEs on GitHub).
18 |
19 | Here's a comparison of the same code written in Markdown and HTML (using Sublime Text):
20 |
21 | 
22 |
23 | ## Markdown syntax
24 |
25 | ### Syntactic suggestions
26 |
27 | Suggestions for standardized Markdown formatting have been provided by [markdownlint](https://github.com/DavidAnson/markdownlint) and [Markdown Style Guide](http://www.cirosantilli.com/markdown-style-guide/). Here are a few personal pointers:
28 |
29 | #### File extensions
30 |
31 | - Several different extensions can be used, including .md, .mdown, and .markdown.
32 | - **I prefer to use .md for brevity and consistency.**
33 |
34 | #### Headers
35 |
36 | - Create headers with `#`. Each `#` increases header level (`##` is outline level two), up to six levels.
37 | - **For organization, I reserve H1 (`#`) for the title of the file at the top. Major headers begin with H2 (`##`).**
38 | - I use headers to create a **Table of Contents (TOC)** at the beginning of the file.
39 | - **I add `## Table of Contents` before the TOC for navigation.** I also include ``, which tells the VSCode Markdown All In One extension not to put the `## Table of Contents` header itself into the TOC.
40 | - **I include [(Back to top)](#top) links after each section for easy navigation back to the top of the page.** Simply write `[(Back to top)](#top)`.
41 | - I add and auto-update TOCs in vscode with the [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) extension.
42 | - [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one), JupyterLab and RStudio provide inline TOC displays ([see below](#jupyterlab)).
43 | - Prior to vscode, I was adding and updating TOCs with [DocToc](https://github.com/thlorenz/doctoc) from the command line.
44 |
45 | #### Text
46 |
47 | - **Bold text:** use **double star at beginning and end of text to bold.**
48 | - _Italics:_ use _underscores or single stars with no space before and after._
49 | - **I prefer to indent Markdown text with two spaces.** Four spaces can be read by some systems as code blocks.
50 |
51 | #### Lists
52 |
53 | - **Lists should be preceded by a blank line.**
54 | - Single `*`, `-`, or `+` at beginning of line, followed by tab or space.
55 | - Indent for next outline level
56 | - Like this
57 |
58 | 1. Ordered lists
59 | 2. Like this
60 | - And you can add in unordered lists within ordered lists like this.
61 | - Adding an unordered list within an ordered list requires two levels of indentation.
62 |
63 | #### Code
64 |
65 | You can include `inline code inside single backticks`
66 |
67 | ```text
68 | Fenced code blocks inside triple backticks
69 | ```
70 |
71 | - Code blocks can be indented to match your lists
72 |
73 | ```text
74 | like this
75 | ```
76 |
77 | - In GitHub-Flavored Markdown, you can specify the language next to the first set of triple backticks for syntax highlighting. Each language has a full name (like `python`), and an abbreviation (like `py`). The full list of supported languages can be found in [GitHub's Linguist repo](https://github.com/github/linguist), which is used to detect languages on GitHub. The _[languages.yml](https://github.com/github/linguist/blob/master/lib/linguist/languages.yml)_ contains a list of the available abbreviations (called "extensions" in the YAML) for each language.
78 |
79 | - Shell: `shell` or `sh`
80 |
81 | ```sh
82 | git status
83 | git commit
84 | ```
85 |
86 | - JavaScript _fizzbuzz.js_, ES6, formatted with [Prettier](https://prettier.io/): `javascript` or `js`
87 |
88 | ```js
89 | const fizzBuzz = () => {
90 | for (let i = 1; i <= 100; i++) {
91 | let out = ""
92 | if (i % 3 === 0) out += "Fizz"
93 | if (i % 5 === 0) out += "Buzz"
94 | console.log(out || i)
95 | }
96 | }
97 | ```
98 |
99 | - Python _fizzbuzz.py_, Python 3, formatted with [Black](https://black.readthedocs.io/en/stable/): `python` or `py`
100 |
101 | ```py
102 | def fizzbuzz():
103 | """Print 1-100
104 | Multiples of 3: Fizz
105 | Multiples of 5: Buzz
106 | Multiples of 3 and 5: FizzBuzz
107 | """
108 | for i in range(1, 101):
109 | out = ""
110 | if i % 3 == 0:
111 | out += "Fizz"
112 | if i % 5 == 0:
113 | out += "Buzz"
114 | print(out or i)
115 | ```
116 |
117 | #### Images
118 |
119 | ```text
120 | `
121 | ```
122 |
123 | **I still prefer to use HTML image tags, because they allow for more customization.** In particular, it's useful to set width on SVG.
124 |
125 | ```text
126 |
127 | ```
128 |
129 |
130 |
131 | [(Back to top)](#top)
132 |
133 | ### General Markdown resources
134 |
135 | - [MarkdownGuide](https://www.markdownguide.org/)
136 | - [markdownlint syntax suggestions](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
137 | - [Markdown Style Guide](http://www.cirosantilli.com/markdown-style-guide/)
138 | - [GitHub-Flavored Markdown](https://guides.github.com/features/mastering-markdown/)
139 | - [Dillinger](https://dillinger.io/) is a helpful online Markdown editor with live preview.
140 | - [Turndown](https://domchristie.github.io/turndown/) is an HTML to Markdown converter.
141 | - [Udacity README course](https://www.udacity.com/course/writing-readmes--ud777)
142 |
143 | [(Back to top)](#top)
144 |
145 | ## Markdown apps
146 |
147 | ### Text editors
148 |
149 | Most code editors have extensions for Markdown.
150 |
151 | #### Atom
152 |
153 | [Atom](https://atom.io/) has good Markdown support. See the [Flight Manual](https://flight-manual.atom.io/using-atom/sections/writing-in-atom/) for instructions.
154 |
155 | #### Sublime Text
156 |
157 | Here's how to set up Sublime Text for Markdown:
158 |
159 | - Install [Sublime Text](http://www.sublimetext.com/)
160 | - I like the Mariana color scheme and the Adaptive theme.
161 | - Install [Package Control](https://packagecontrol.io/)
162 | - Use Package Control from within Sublime Text to install:
163 | - MarkdownEditing
164 | - Markdown Preview
165 | - MarkdownLivePreview: Has some issues with lack of wrapping in the previews. See [GitHub Issue tracker](https://github.com/math2001/MarkdownLivePreview/issues/34).
166 |
167 | #### Visual Studio Code (vscode)
168 |
169 | **In my opinion, vscode is currently the best editor for working with Markdown.** Here's why:
170 |
171 | - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
172 | - Autoformatter for Markdown files
173 | - In addition to formatting Markdown itself, it actually formats source code inside fenced code blocks. Awesome feature.
174 | - [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
175 | - TOC auto-generation and update
176 | - Live TOC in explorer panel
177 | - Easier keyboard shortcuts than Sublime Text (with the exception of hyperlink insertion, which I added with a [keybinding](https://github.com/neilsustc/vscode-markdown/issues/20))
178 | - [markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
179 | - Lints Markdown files based on style recommendations for standardizing code.
180 | - Built in live preview
181 |
182 | My full vscode configuration is available in [my dotfiles repo](https://github.com/br3ndonland/dotfiles).
183 |
184 | See [Markdown and Visual Studio Code](https://code.visualstudio.com/Docs/languages/markdown) for more info.
185 |
186 | [(Back to top)](#top)
187 |
188 | ### IDEs
189 |
190 | IDE = Integrated Development Environment
191 |
192 | #### JupyterLab
193 |
194 | [JupyterLab](http://jupyterlab.readthedocs.io/en/latest/) is produced by [Project Jupyter](http://jupyter.org/). It is most widely used for scientific computing with Python, but supports many programming languages. It allows you to create "reproducible computational narratives," containing Markdown text interspersed with code chunks that you can run. JupyterLab has [some awesome features](https://blog.jupyter.org/jupyterlab-is-ready-for-users-5a6f039b8906) and was previously Jupyter notebook.
195 |
196 | I would suggest using [JupyterLab](https://jupyterlab.readthedocs.io/en/stable/) within a Pipenv virtual environment. I use the [Homebrew](https://brew.sh) package manager on macOS to install Python 3, the [Pipenv](https://pipenv.readthedocs.io/en/latest/) virtual environment tool, and [Jupyter](https://jupyter.org). Here are some setup instructions:
197 |
198 | - Install Homebrew from the command line as described on the [Homebrew website](https://brew.sh).
199 | - After installing Homebrew, install the necessary Homebrew packages from the command line:
200 |
201 | ```sh
202 | brew install python3
203 | brew install pipenv
204 | brew install jupyter
205 | ```
206 |
207 | - Once installation of Homebrew and its packages is complete, navigate to the desired directory, or [clone a repository from GitHub](https://help.github.com/articles/cloning-a-repository/).
208 |
209 | ```sh
210 | cd path/to/a/directory
211 | git clone repository
212 | ```
213 |
214 | - Finally, install the virtual environment with Pipenv, which includes [JupyterLab](https://jupyterlab.readthedocs.io/en/stable/getting_started/installation.html) and the other necessary packages, and launch JupyterLab to run the Jupyter Notebook.
215 |
216 | ```sh
217 | cd repository
218 | pipenv install
219 | pipenv shell
220 | # Install any JupyterLab extensions at this point
221 | (pipenv) $ jupyter labextension install @jupyterlab/toc
222 | # Launch JupyterLab
223 | (pipenv) $ jupyter lab
224 | ```
225 |
226 | I previously used [Anaconda](https://www.anaconda.com/) to manage my Python and R distributions, and now use Homebrew. I switched because Anaconda is not as flexible or general as Homebrew, not as important for virtual environments now that we have Pipenv, and is a very large installation that is difficult to manage and uninstall.
227 |
228 | For examples of how to use Jupyter Notebook/JupyterLab, you can check out my [Udacity Full Stack Web Developer Nanodegree program repo](https://github.com/br3ndonland/udacity-fsnd).
229 |
230 | #### RStudio
231 |
232 | - [RStudio](https://www.rstudio.com/) is an IDE for the R programming language, used mostly for statistics and data science.
233 | - Like JupyterLab, R Markdown documents contain Markdown text with functional R code chunks.
234 | - I have provided an example of scientific data analysis with R Markdown on [GitHub](https://github.com/br3ndonland/R-proteomics-Nrf1).
235 |
236 | [(Back to top)](#top)
237 |
238 | ### Note apps
239 |
240 | Also see [Notable's comparison table](https://notable.md/static/images/comparison.png).
241 |
242 | #### [Bear](https://bear.app/)
243 |
244 | ##### Bear pros
245 |
246 | - This is one of the best Markdown note apps.
247 | - Supports Markdown. Uses a modified syntax called Polar Bear.
248 | - Tags and subtags (nested tags)
249 | - Untagged notes easily identified
250 | - Themes
251 | - Syntax highlighting
252 | - Supports internal relative links, like `[[Note title]]`
253 | - Evernote migration and import (though not perfect-see cons below)
254 | - Writing tools, like word counts and read time
255 | - Note encryption (see [blog post announcing Bear 1.7](https://blog.bear.app/2019/09/bear-1-7-is-here-with-note-encryption-bear-lock-live-note-links-and-more/))
256 | - Password and FaceID lock
257 | - Reasonably-priced subscription plan
258 |
259 | ##### Bear cons
260 |
261 | - Apple only (macOS, iOS, iCloud), with [no plans to support Android](https://bear.app/faq/What%20about%20Bear%20for%20web,%20Android,%20or%20Windows/).
262 | - Collaboration features could be better. No shared notebooks.
263 | - Bear's "Markdown compatibility mode" is actually not standard or fully compatible with common tools like [Prettier](https://prettier.io/). The use of tabs for indentation and asterisks for bullets leads Prettier to mis-format Markdown documents exported from Bear.
264 | - Global search is painfully slow, and fires instantly, so it runs a search for each character you type.
265 | - Web clipper needs some work. Doesn't properly capture text on all sites. Search should have a delay, or require the user to hit enter, so it doesn’t immediately try to search while you’re typing.
266 | - Sync disrupts glide typing on iOS. This seems to be particularly problematic in notes containing large numbers of note links. It is very frustrating to constantly be interrupted in the middle of glide typing a word. Sync should wait until the keyboard is closed.
267 | - Can't search within notes on iOS. This is a major limitation that the Bear team has repeatedly overlooked.
268 | - Evernote import doesn't convert Evernote internal note links to Bear note links. Joplin also has this same issue, and it's a major barrier for switching from Evernote. If you would like to switch from Evernote to Bear, you can try running my [el2bl](https://github.com/br3ndonland/el2bl) script on your Evernote exports.
269 |
270 | #### [Day One](https://dayoneapp.com/)
271 |
272 | ##### Day One pros
273 |
274 | - Day One [supports Markdown](http://help.dayoneapp.com/tips-and-tutorials/markdown-guide).
275 |
276 | ##### Day One cons
277 |
278 | - Subscription service
279 | - Google Drive sync requires Google login, so you can't use it if you have [Advanced Protection](https://landing.google.com/advancedprotection/) enabled.
280 |
281 | #### [Dropbox Paper](https://www.dropbox.com/paper)
282 |
283 | ##### Dropbox Paper pros
284 |
285 | - Markdown export
286 | - Collaboration
287 | - Sync
288 | - Embedding works well
289 |
290 | ##### Dropbox Paper cons
291 |
292 | - Paper files don't show up in your regular Dropbox file structure
293 | - No tags
294 | - No themes
295 | - No internal linking
296 | - Only has H1-H2. H3 shows up as bold when downloading Markdown files.
297 | - PDFs embedded in Dropbox Paper documents don’t lead to the actual PDF when clicked, in the mobile apps.
298 | - PDF thumbnails are too large when inserted as single PDFs. When two or more files are inserted, the thumbnails are next to each other and the size is more reasonable. Needs a "view as attachment" option like Evernote.
299 |
300 | #### [iA Writer](https://ia.net/writer)
301 |
302 | iA = information Architects
303 |
304 | ##### iA Writer pros
305 |
306 | - Cross-platform (macOS, iOS, Windows)
307 | - Light/dark themes
308 | - Syntax highlighting: the grammatical syntax highlighting is interesting
309 | - Uses the same `#tag/subtag` nested tagging syntax from Bear
310 | - Currently just a one-time payment model, though that will probably change.
311 |
312 | ##### iA Writer cons
313 |
314 | - Lacks many of the features of Bear
315 | - No import from other apps. When manually importing notes exported from Bear as Markdown, it doesn't recognize the tags. Tags have to be manually typed out for iA Writer to recognize them.
316 | - Note links?
317 | - Tags are only recognized when they are typed in. If a tag is pasted in, or already present (for example, in a Markdown file that has been exported from Bear), the tags are not recognized.
318 | - Multimedia?
319 | - No Linux support
320 |
321 | #### [Inkdrop](https://www.inkdrop.info/)
322 |
323 | ##### Inkdrop pros
324 |
325 | - [Features](https://www.inkdrop.info/features):
326 | - Markdown
327 | - Themes
328 | - Encryption
329 | - Cross-platform. Seems to be like Bear, but cross-platform.
330 | - Check out the developer's [Medium blog](https://blog.inkdrop.info).
331 |
332 | ##### Inkdrop cons
333 |
334 | - Subscription plan
335 | - Android app has poor reviews (~3.3 rating)
336 |
337 | #### [Joplin](https://joplin.cozic.net/)
338 |
339 | ##### Joplin pros
340 |
341 | - Open-source
342 | - Desktop is Electron, mobile is React Native.
343 | - Flexible cloud sync
344 | - Markdown format
345 | - Evernote import
346 |
347 | ##### Joplin cons
348 |
349 | - Evernote to Joplin migration not ideal (see below).
350 | - Documentation on the website is okay, but [contributing guidelines](https://github.com/laurent22/joplin/blob/master/CONTRIBUTING.md) are not well delineated. The code and stack should be clearly explained so people can easily contribute. I should know roughly where I need to go in the codebase to add a feature.
351 | - Laurent Cozic only makes \$60/month on Patreon. Not sustainable.
352 |
353 | ##### Evernote to Joplin migration
354 |
355 | - Tried this on 201809
356 | - Export Evernote notebook to .enex.
357 | - Joplin -> Import -> ENEX
358 | - Images came through
359 | - Formatting generally came through well.
360 | - Updates needed
361 | - Critical
362 | - **Internal note links import as Evernote links, not Joplin links. This is a critical issue for me.**
363 | - Example:
364 | - Joplin internal note link: `:/cddf8681528148b9aad5077198e58a4a`
365 | - Evernote internal note link: `evernote:///view/6168869/s55/426ec3ae-6cad-48c7-aab3-b300845063ef/426ec3ae-6cad-48c7-aab3-b300845063ef/`
366 | - Links sometimes also just lead to the top note result in the notebook, rather than the specific note needed.
367 | - Note URL not yet available (issue #[427](https://github.com/laurent22/joplin/issues/427)). This will be important for clipped news articles.
368 | - Bold text comes through as big section breaks (see issue #[767](https://github.com/laurent22/joplin/issues/767))
369 | - I had to un-bold all the headers I put into my notes.
370 | - Enhancements
371 | - Evernote code blocks not transferring in as Markdown code blocks.
372 | - Markdown TOC (issue #[478](https://github.com/laurent22/joplin/issues/478))
373 | - Searching in notes: The search bar only searches notes, but doesn't reveal results within the note. See #[382](https://github.com/laurent22/joplin/issues/382).
374 |
375 | #### [Jottings](http://jottingsapp.com/)
376 |
377 | iOS-only note app with Markdown, tagging, and Dropbox sync.
378 |
379 | #### [Journey](https://2appstudio.com/journey/)
380 |
381 | ##### Journey pros
382 |
383 | - Encrypted
384 | - Cross-platform
385 | - Google Drive sync
386 | - Import from Day One, Evernote, etc
387 |
388 | ##### Journey cons
389 |
390 | - Forces Google login before allowing access to app on Mac. This is a problem because Google Drive sync is not allowed when [Google Advanced Protection Program](https://landing.google.com/advancedprotection/) is enabled.
391 | - Subscription options
392 | - Vague Evernote import capabilities
393 |
394 | #### [Laverna](https://laverna.cc/)
395 |
396 | ##### Laverna pros
397 |
398 | - Encrypted
399 | - Markdown
400 | - Multimedia
401 | - Internal linking
402 | - Make tags with #tag
403 | - Open source
404 | - Built with Electron
405 |
406 | ##### Laverna cons
407 |
408 | - Evernote import?
409 | - No Android app yet
410 | - No dark themes yet
411 | - No Markdown TOC
412 | - Development coming along slowly
413 |
414 | #### [Notable](https://notable.md/)
415 |
416 | Heard about Notable via the [Changelog weekly email #238](https://email.changelog.com/t/t-614770D9C810C3FD2540EF23F30FEDED).
417 |
418 | From the [README](https://github.com/notable/notable/blob/master/README.md):
419 |
420 | > The markdown-based note-taking app that doesn't suck.
421 | >
422 | > I couldn't find a note-taking app that ticked all the boxes I'm interested in: notes are written and rendered in GitHub-flavored Markdown, no WYSIWYG, no proprietary formats, I can run a search & replace across all notes, notes support attachments, the app isn't bloated, the app has a pretty interface, tags are indefinitely nestable and can import Evernote notes (because that's what I was using before).
423 | >
424 | > So I built my own.
425 |
426 | The developer has made extensive comparisons with other note apps. See [Notable's comparison table](https://notable.md/static/images/comparison.png).
427 |
428 | ##### Notable pros
429 |
430 | - Uses same Markdown editor as VSCode
431 | - Has an "open in default editor" button for easy transfer to a text editor
432 | - Handles nested code blocks (Bear doesn't)
433 |
434 | ##### Notable cons
435 |
436 | - No mobile app yet
437 | - [No longer open-source](https://github.com/notable/notable/blob/master/SOURCE_CODE.md).
438 | - No Bear import. The closest thread I could find was [this](https://www.reddit.com/r/Notable/comments/bsg1dn/just_moved_from_bear_nice_surprise/), but there's no migration script.
439 | - Metadata in YAML frontmatter: will require the `#tag/subtag` nested tags from Bear to be moved into an array in the frontmatter.
440 | - No searching within notes yet. Major shortcoming.
441 | - No tag autocompletion
442 | - Not sure if it automatically update note links when note titles change, like Bear does
443 | - Pipes are a problem. For example, I frequently title clipped articles like `[[Periodical | Date: Article title]]`. When I try to use this format in Notable, it treats the text to the left of the pipe as the link title, and the text to the right of the pipe as the note title.
444 | - Doesn't autocomplete lists like Markdown All in One in VSCode
445 | - [According to the developer](https://www.reddit.com/r/Notable/comments/g0vy8v/privacy_policy_why_notable_phones_home_who_else/), Notable collects analytics via [Amplitude](https://amplitude.com/).
446 |
447 | #### [Simplenote](https://simplenote.com/)
448 |
449 | From WordPress
450 |
451 | ##### Simplenote pros
452 |
453 | - Markdown support
454 |
455 | ##### Simplenote cons
456 |
457 | - Evernote import?
458 | - Multimedia?
459 |
460 | #### [Standard Notes](https://standardnotes.org/getting-started)
461 |
462 | ##### Standard Notes pros
463 |
464 | - Simple, dependable text note app
465 | - Note tagging
466 | - Themes like solarized and dark
467 | - Extensions to add features like Markdown
468 | - Encrypted
469 | - Backup to Dropbox and Google Drive
470 | - "Built to last"
471 |
472 | ##### Standard Notes cons
473 |
474 | - User interface is generally not intuitive.
475 | - The Account -> Encryption section says "8/8 notes and tags encrypted." Why would I want to combine the number of notes with the number of tags?
476 | - Very difficult to even figure out how to log in to my account online. Apparently there are separate accounts for the web app and premium? I think it's the [dashboard](https://dashboard.standardnotes.org/).
477 | - Extensions make it way too confusing.
478 | - I have to select different editors? I don't want a different editor for every task, I want to use one editor for all tasks.
479 | - Extensions used to only work on desktop and web (they now work on mobile apparently).
480 | - Attachments
481 | - Can't attach files from mobile devices.
482 | - Not great with multimedia. Tried to drag and drop a movie, and it just displayed the movie instead of my notes.
483 | - [Evernote import](https://standardnotes.org/evernote):
484 | - Formatting, images, and attachments will not be copied over.
485 | - Have to break up .enex into 250 MB segments.
486 | - Import is not intuitive. Importing anything goes through import backup, but most imports are not backups.
487 | - **Doesn't do a good job of Evernote HTML to Markdown conversion.** Loses file attachments and lists, doesn't recognize headers. The options are either retain HTML, or strip all formatting.
488 | - My response to email survey:
489 | > _Have you ever tried Standard Notes Extended?_
490 | > No. If I became a regular user, I would happily pay for Extended. I'm not regularly using Standard Notes because I'm heavily invested in Evernote. I've been using it for six years, and have a 4 GB database with ~4400 tagged notes. I would love to migrate from Evernote to another service, converting from rich text to Markdown and encrypting my data, while keeping my multimedia attachments. Bear is one example of this type of migration, but I don't use Bear because it's Apple-only.
491 |
492 | #### [Trilium Notes](https://github.com/zadam/trilium)
493 |
494 | Heard about Trilium via the [Changelog weekly email #237](https://email.changelog.com/t/t-2599C05F2D5B961E2540EF23F30FEDED).
495 |
496 | ##### Trilium pros
497 |
498 | - Evernote import: I haven't tried it yet, so I can't comment on import of formatting, internal links, etc.
499 | - Code editing with syntax highlighting
500 | - Also supports mind mapping
501 | - Encryption
502 |
503 | ##### Trilium cons
504 |
505 | - Work in progress
506 | - No mobile app yet
507 |
508 | #### [Turtl](https://turtlapp.com/)
509 |
510 | [Turtl blog on Tumblr](http://turtlapp.tumblr.com/)
511 |
512 | ##### Turtl pros
513 |
514 | - Promising encrypted Evernote alternative
515 | - Evernote import coming in 0.6.5
516 | - Markdown
517 | - Sharing
518 | - Some multimedia support
519 | - Android app
520 |
521 | ##### Turtl cons
522 |
523 | - Still needs more development, and development has been very slow.
524 | - Not sure how dependable this app will be. The developers don't even own a MacBook.
525 | - No dark themes yet
526 |
527 | #### [Typora](https://typora.io/)
528 |
529 | ##### Typora pros
530 |
531 | - File list panel, allowing you to use any cloud service to sync.
532 | - CSS configurable
533 | - Support for images
534 | - Document export
535 | - Footnote feature is cool
536 |
537 | ##### Typora cons
538 |
539 | - Feature-poor
540 | - Not for android
541 | - If it’s not for mobile and not multimedia, what’s the point beyond Sublime Text? Or Dillinger?
542 |
543 | #### [Ulysses](https://ulyssesapp.com/)
544 |
545 | ##### Ulysses pros
546 |
547 | - Nice interface
548 | - Markdown
549 | - Dark themes
550 | - Can also manage journal articles and research
551 |
552 | ##### Ulysses cons
553 |
554 | - Apple only (macOS/iOS)
555 | - Encryption?
556 | - Moved to subscription model
557 | - Maintains article tags as "keywords," a fatal flaw shared by other apps like [Papers](https://www.readcube.com/papers/). See my notes on citation managers in [my cite repo](https://github.com/br3ndonland/cite).
558 |
559 | ### In-browser editors
560 |
561 | - [Dillinger](https://dillinger.io/): In-browser Markdown editor with live preview.
562 | - [GitBook](https://www.gitbook.com/): Online platform for writing documentation. It combines and converts Markdown files into multimedia-enabled notebooks, like book chapters.
563 | - [Gnotes](https://notes.giggy.com/): Write Markdown, save to Dropbox, see in Evernote. One-way only.
564 | - [Markdown Here](https://markdown-here.com/index.html): Allows Markdown formatting for in-browser web apps like Gmail. See [GitHub](https://github.com/adam-p/markdown-here).
565 | - [Marxico](http://marxi.co/):
566 | - In-browser Markdown editor based on Dillinger.
567 | - Works with images.
568 | - Has live TOC.
569 | - Renders well on mobile browsers, but only selection capability available is "select all".
570 | - May not have seamless integration with Evernote. See [discussion on Evernote forums](https://discussion.evernote.com/topic/99861-native-markdown-support/?do=findComment&comment=448394).
571 | - [StackEdit](https://stackedit.io/): In-browser Markdown editor with live preview. Uses PageDown, the engine powering the Markdown capabilities of the Stack Exchange forums.
572 | - Udacity discussion forums: You can use Markdown formatting in your forum posts.
573 |
574 | [(Back to top)](#top)
575 |
576 | ### Social apps
577 |
578 | #### Gitter
579 |
580 | [Gitter](https://gitter.im/) uses Markdown formatting for chats. See their [Markdown basics](https://gitter.zendesk.com/hc/en-us/articles/200176682-Markdown-basics) support article.
581 |
582 | #### ~~Slack~~
583 |
584 | Slack uses a simplified pseudo-Markdown to format messages. I call it "slackdown." On the [Slack "Format your messages" page](https://get.slack.help/hc/en-us/articles/202288908-Format-your-messages), Slack states that it will not be building in full Markdown capabilities.
585 |
586 | [(Back to top)](#top)
587 |
--------------------------------------------------------------------------------
/offline-web-apps/offline-2-sw.md:
--------------------------------------------------------------------------------
1 | # An Overview of Service Worker
2 |
3 |
4 |
5 |
6 |
7 | [Offline Web Applications by Google course](https://www.udacity.com/course/offline-web-applications--ud899) lesson 2/3
8 |
9 | Udacity Google Mobile Web Specialist Nanodegree program part 2 lesson 17
10 |
11 | Udacity Grow with Google Scholarship challenge course lesson 03
12 |
13 | Brendon Smith
14 |
15 | br3ndonland
16 |
17 | ## Table of Contents
18 |
19 | - [Service Worker basics](#service-worker-basics)
20 | - [2.01. An Overview of Service Worker](#201-an-overview-of-service-worker)
21 | - [2.02. Quiz: Scoping Quiz](#202-quiz-scoping-quiz)
22 | - [2.03. Adding a Service Worker To the Project](#203-adding-a-service-worker-to-the-project)
23 | - [2.04. Quiz: Registering a Service Worker](#204-quiz-registering-a-service-worker)
24 | - [2.05. The Service Worker Lifecycle](#205-the-service-worker-lifecycle)
25 | - [2.06. Quiz: Enabling Service Worker Dev Tools](#206-quiz-enabling-service-worker-dev-tools)
26 | - [2.07. Quiz: Service Worker Dev Tools](#207-quiz-service-worker-dev-tools)
27 | - [2.08. Quiz: Service Worker Dev Tools 2](#208-quiz-service-worker-dev-tools-2)
28 | - [2.09. Service Worker Dev Tools Continued](#209-service-worker-dev-tools-continued)
29 | - [Service Worker and requests](#service-worker-and-requests)
30 | - [2.10. Hijacking Requests](#210-hijacking-requests)
31 | - [2.11. Quiz: Hijacking Requests 1 Quiz](#211-quiz-hijacking-requests-1-quiz)
32 | - [2.12. Hijacking Requests 2](#212-hijacking-requests-2)
33 | - [2.13. Quiz: Hijacking Requests 2 Quiz](#213-quiz-hijacking-requests-2-quiz)
34 | - [2.14. Hijacking Requests 3](#214-hijacking-requests-3)
35 | - [2.15. Quiz: Hijacking Requests 3 Quiz](#215-quiz-hijacking-requests-3-quiz)
36 | - [Service Worker and caching](#service-worker-and-caching)
37 | - [2.16. Caching and Serving Assets](#216-caching-and-serving-assets)
38 | - [2.17. Quiz: Install and Cache Quiz](#217-quiz-install-and-cache-quiz)
39 | - [2.18. Quiz: Cache Response Quiz](#218-quiz-cache-response-quiz)
40 | - [2.19. Updating the Static Cache](#219-updating-the-static-cache)
41 | - [2.20. Quiz: Update Your CSS Quiz](#220-quiz-update-your-css-quiz)
42 | - [2.21. Quiz: Update Your CSS 2](#221-quiz-update-your-css-2)
43 | - [2.22. Adding UX to the Update Process](#222-adding-ux-to-the-update-process)
44 | - [2.23. Quiz: Adding UX Quiz](#223-quiz-adding-ux-quiz)
45 | - [2.24. Triggering an Update](#224-triggering-an-update)
46 | - [2.25. Quiz: Triggering an Update Quiz](#225-quiz-triggering-an-update-quiz)
47 | - [2.26. Quiz: Caching the Page Skeleton](#226-quiz-caching-the-page-skeleton)
48 | - [Lesson feedback](#lesson-feedback)
49 |
50 | ## Service Worker basics
51 |
52 | ### 2.01. An Overview of Service Worker
53 |
54 | - **Service worker is a JavaScript file that sits between the browser and network requests.**
55 | - It returns a **promise**.
56 | - `navigator.serviceWorker.register('/sw.js')`
57 | - Jake made a website called [is serviceworker ready?](https://jakearchibald.github.io/isserviceworkerready/), to evaluate browser compatibility with different aspects of Service Worker.
58 |
59 | ### 2.02. Quiz: Scoping Quiz
60 |
61 | Got this on my first try.
62 |
63 | 66 | The scope defines the URLs to be handled. ServiceWorker will handle any deeper URL, but not shallower URLs. 67 |
68 |
5 |
6 |
7 | [ES6 - JavaScript Improved course](https://www.udacity.com/course/es6-javascript-improved--ud356) lesson 1/4
8 |
9 | Udacity Google Mobile Web Specialist Nanodegree program part 3 lesson 04
10 |
11 | Udacity Grow with Google Scholarship challenge course lesson 06
12 |
13 | Brendon Smith
14 |
15 | [br3ndonland](https://github.com/br3ndonland)
16 |
17 | ## Table of Contents
18 |
19 | - [Lesson plan](#lesson-plan)
20 | - [Lesson Part 1: Declaring Variables](#lesson-part-1-declaring-variables)
21 | - [1.01. Harmony, ES6, ES2015](#101-harmony-es6-es2015)
22 | - [1.02. Let and Const](#102-let-and-const)
23 | - [1.03. Quiz: Using Let and Const (1-1)](#103-quiz-using-let-and-const-1-1)
24 | - [1.04. Template Literals](#104-template-literals)
25 | - [1.05. Quiz: Build an HTML Fragment (1-2)](#105-quiz-build-an-html-fragment-1-2)
26 | - [1.06. Destructuring](#106-destructuring)
27 | - [1.07. Quiz: Destructuring Arrays (1-3)](#107-quiz-destructuring-arrays-1-3)
28 | - [1.08. Object Literal Shorthand](#108-object-literal-shorthand)
29 | - [1.09. Lesson 1 Checkup](#109-lesson-1-checkup)
30 | - [Lesson Part 2: Iteration](#lesson-part-2-iteration)
31 | - [1.10. Iteration](#110-iteration)
32 | - [1.11. Family of For Loops](#111-family-of-for-loops)
33 | - [1.12. For...of Loop](#112-forof-loop)
34 | - [1.13. Quiz: Writing a For...of Loop (1-4)](#113-quiz-writing-a-forof-loop-1-4)
35 | - [1.14. Spread... Operator](#114-spread-operator)
36 | - [1.15. ...Rest Parameter](#115-rest-parameter)
37 | - [1.16. Quiz: Using the Rest Parameter (1-5)](#116-quiz-using-the-rest-parameter-1-5)
38 | - [1.17. Lesson 1 Summary](#117-lesson-1-summary)
39 | - [Feedback on JavaScript ES6 lesson 1/4](#feedback-on-javascript-es6-lesson-14)
40 |
41 | ## Lesson plan
42 |
43 | 1. Syntax
44 | 2. Functions
45 | 3. Built-Ins
46 | 4. Developer-Fu
47 |
48 | ## Lesson Part 1: Declaring Variables
49 |
50 | ### 1.01. Harmony, ES6, ES2015
51 |
52 | > Welcome to the course on ES6! We're glad you're here! 👋
53 | >
54 | > This course is all about the new changes brought to the JavaScript programming language. We're expecting that you've worked with JavaScript for a couple of years and have an intermediate level of experience with the language.
55 | >
56 | > If you're new to the JavaScript language or would like a refresher, check out our [Intro to JavaScript course](https://www.udacity.com/course/intro-to-javascript--ud803).
57 | >
58 | > Follow us!
59 | >
60 | > - @parkesrjames
61 | > - @richardkalehoff
62 |
63 | ES6 brings some much-needed modernization to JavaScript. This is the biggest update to JavaScript ever.
64 |
65 | These lessons are part of the free [ES6 - JavaScript Improved course](https://www.udacity.com/course/es6-javascript-improved--ud356).
66 |
67 | The [ES6 spec](https://www.ecma-international.org/ecma-262/6.0/) came out in June 2015.
68 |
69 | ### 1.02. Let and Const
70 |
71 | #### Intro
72 |
73 | `let` and `const` are new keywords added to JavaScript.
74 |
75 | > There are now two new ways to declare variables in JavaScript: let and const.
76 | >
77 | > Up until now, the only way to declare a variable in JavaScript was to use the keyword var. To understand why let and const were added, it’s probably best to look at an example of when using var can get us into trouble.
78 | >
79 | > Take a look at the following code.
80 | >
81 | > **Question 1 of 3**
82 | >
83 | > What do you expect to be the output from running `getClothing(false)`?
84 |
85 | ```javascript
86 | function getClothing(isCold) {
87 | if (isCold) {
88 | var freezing = "Grab a jacket!"
89 | } else {
90 | var hot = "It’s a shorts kind of day."
91 | console.log(freezing)
92 | }
93 | }
94 | ```
95 |
96 | Answer: `undefined`. Got this on the first try.
97 |
98 | #### Hoisting
99 |
100 | > Hoisting is a result of how JavaScript is interpreted by your browser. Essentially, before any JavaScript code is executed, all variables are "hoisted", which means they're raised to the top of the function scope. So at run-time, the getClothing() function actually looks more like this:
101 |
102 | 
103 |
104 | #### let and const
105 |
106 | > Variables declared with `let` and `const` eliminate this specific issue of hoisting because they’re **scoped to the block, not to the function.** Previously, when you used `var`, variables were either scoped globally or locally to an entire function scope.
107 | >
108 | > If a variable is declared using `let` or `const` inside a block of code (denoted by curly braces `{ }`), then the variable is stuck in what is known as the **temporal dead zone** until the variable’s declaration is processed. This behavior prevents variables from being accessed only until after they’ve been declared.
109 | >
110 | > **Question 2 of 3**
111 | >
112 | > What do you expect to be the output from running `getClothing(false)`?
113 |
114 | ```javascript
115 | function getClothing(isCold) {
116 | if (isCold) {
117 | const freezing = "Grab a jacket!"
118 | } else {
119 | const hot = "It’s a shorts kind of day."
120 | console.log(freezing)
121 | }
122 | }
123 | ```
124 |
125 | Answer: `ReferenceError: freezing is not defined`.
126 |
127 | > Because freezing is not declared inside the else statement, the function scope, or the global scope, a ReferenceError is thrown.
128 |
129 | #### Rules for using let and const
130 |
131 | > `let` and `const` also have some other interesting properties.
132 | >
133 | > - Variables declared with `let` can be reassigned, but can’t be redeclared in the same scope.
134 | > - Variables declared with `const` must be assigned an initial value, but can’t be redeclared in the same scope, and can’t be reassigned.
135 | >
136 | > **Question 3 of 3**
137 | >
138 | > What do you expect to be output from running the following code?
139 |
140 | ```javascript
141 | let instructor = "James"
142 | instructor = "Richard"
143 | console.log(instructor)
144 | ```
145 |
146 | Answer: Richard. Got it on the first try.
147 |
148 | > This is the correct way to use `let`. Use `let` to declare variables when you plan on changing the value of a variable later in your code.
149 |
150 | #### Use cases
151 |
152 | > The big question is when should you use `let` and `const`? The general rule of thumb is as follows:
153 | >
154 | > - use `let` when you plan to reassign new values to a variable, and
155 | > - use `const` when you don’t plan on reassigning new values to a variable.
156 | >
157 | > Since `const` is the strictest way to declare a variable, we suggest that you always declare variables with `const` because it'll make your code easier to reason about since you know the identifiers won't change throughout the lifetime of your program. If you find that you need to update a variable or change it, then go back and switch it from `const` to `let`.
158 | >
159 | > That’s pretty straightforward, right? But what about `var`?
160 |
161 | #### What about var
162 |
163 | > **Is there any reason to use `var` anymore? Not really.**
164 | >
165 | > There are some arguments that can be made for using `var` in situations where you want to globally define variables, but this is often considered bad practice and should be avoided. From now on, we suggest ditching `var` in place of using `let` and `const`.
166 |
167 | ### 1.03. Quiz: Using Let and Const (1-1)
168 |
169 | Quiz
170 |
171 | Replace `var` with `let` or `const`
172 |
173 | ```javascript
174 | /*
175 | - Programming Quiz: Using Let and Const (1-1)
176 | */
177 |
178 | var CHARACTER_LIMIT = 255
179 | var posts = [
180 | "#DeepLearning transforms everything from self-driving cars to language translations. AND it's our new Nanodegree!",
181 | "Within your first week of the VR Developer Nanodegree Program, you'll make your own virtual reality app",
182 | "I just finished @udacity's Front-End Web Developer Nanodegree. Check it out!"
183 | ]
184 |
185 | // prints posts to the console
186 | function displayPosts() {
187 | for (var i = 0; i < posts.length; i++) {
188 | console.log(posts[i].slice(0, CHARACTER_LIMIT))
189 | }
190 | }
191 |
192 | displayPosts()
193 | ```
194 |
195 | 
' +
452 | '' + 454 | animal.fact + 455 | "
" + 456 | '' + 471 | animal.summary + 472 | "
" + 473 | "
507 | ${animal.fact}
509 |${animal.summary}
516 |