Front-End Learning for Programmer

If you are an existing programmer (fluent in one common programming language) and want to learn Front-End (HTML+CSS+JS), I would recommend using freeCodeCamp and picking only the modules you need. If you want to learn just enough to work on modern front-end projects or start a new project with Create React App, below is what modules I think you should learn on freeCodeCamp.

“✔️” means you should learn it. “❌” means you could skip it. “❗” means you could skip if you are in a hurry but you should learn if you have time.

• Responsive Web Design
  • ✔️ Basic HTML and HTML5
  • ✔️ Basic CSS
  • ✔️ Applied Visual Design
  • ❌ Applied Accessibility
  • ❌ Responsive Web Design Principles
  • ✔️ CSS Flexbox
  • ❌ CSS Grid
  • ✔️ Responsive Web Design Projects
• JavaScript Algorithms and Data Structures
  • ✔️ Basic JavaScript
  • ✔️ ES6
  • ❌ Regular Expressions
  • ✔️ Debugging
  • ✔️ Basic Data Structures
  • ❗ Basic Algorithm Scripting
    • (Use it as a practice to write more JavaScript code.)
  • ✔️ Object Oriented Programming
  • ✔️ Functional Programming
  • ❗ Intermediate Algorithm Scripting
    • (Use it as a practice to write more JavaScript code.)
  • ❗ JavaScript Algorithms and Data Structures Projects
    • (Use it as a practice to write more JavaScript code.)
• Front End Libraries
  • ✔️ Bootstrap
  • ❌ jQuery
  • ❌ Sass
  • ✔️ React
  • ✔️ Redux
  • ✔️ React and Redux
  • ✔️ Front End Libraries Projects

Progressive Web App as Share Target on Android

I built a PWA (Progressive Web App) to trace shortened URL back to its original URL. (You can find it here.) I don’t want to copy a URL and paste it into my app. I want to use the Android’s sharesheet to send any link in Chrome straight to my app. How do I do that?

Google provides good documentation on this. We need to add a share_target section in manifest.json and then declare that our PWA can act as a share target. Most of the properties in this section can be thought of as attributes on a <form> element with the same name. For example, { "action": "/share", "method": "POST" } is like <form action="/share" method="POST">.

params subsection let us change parameter names if we already have a convension of naming search parameters in GET requests or form fields in POST requests. Otherwise, we can keep them in their original names. One caveat is Android doesn’t use url parameter so when sharing a URL it comes through the text parameter. In my app I need to coalesce these two parameters to get the input from the user.

Is there more? Yes! Twitter makes a great PWA and we can check their manifest.json. Here’s the beautified version of the share_target section:

"share_target": {
  "action": "compose/tweet",
  "enctype": "multipart/form-data",
  "method": "POST",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url",
    "files": [
      {
        "name": "externalMedia",
        "accept": [
          "image/jpeg",
          "image/png",
          "image/gif",
          "video/quicktime",
          "video/mp4"
        ]
      }
    ]
  }
}

It has a files subsection under the params section. This is part of the Web Share Target Level 2. We can accept files from sharesheet and we can assign a file to different parameter name based on MIME type or file extension. My app doesn’t need this capability but it’s good to know what’s possible.

If you like my post, you can subscribe through email or RSS/Atom. That makes sure you won’t miss my future posts.

Batch Sending Email with Attachments through AppleScript

I want to learn a little bit of AppleScript. I need to help a friend send out emails to welcome new students to the school. The requirements are:

1. addressing each recipient by their name in email content;
2. attaching the same file in all emails.

After some research and tinkering I have a script to send emails:

theRecipients is the list of recipient names and email addresses. This is for requirement #1. theAttachment isn’t hardcoded to any file path. It will prompt and let me choose a file when I run the AppleScript.

The trickiest part is the delay 1. Without this line, emails will be sent without the attachment. It’s a hack to make sure each email has the attachment. I don’t know why it works and I can’t find an explanation online.

After building this AppleScript, I learn that Google App Script is another great way to automate sending emails through Gmail (or GSuite). I will learn App Script and write a post about that next time. If you like this kind of posts, you can subscribe through email or RSS/Atom.