DEV Community: Hannah Ong

Easiest Chrome Floating Video Player Ever!

Hannah Ong — Mon, 16 Nov 2020 13:57:32 +0000

Woah! I've been enlightened by my husband a neat little trick to get a floating video player off any website that will stay on top of all your windows while you're interacting with other sites, applications, etc. No more resizing my windows, no more playing videos on a separate monitor/device. Just a simple click to pop out the video and continue my work.

Setup & Usage

For everyone who wants this now, here's how:

In Chrome, open up a video, like this YouTube video 😉 and replace the URL with javascript:document.getElementsByTagName('video')[0].requestPictureInPicture(); Once the video pops out, you can move it, resize it, etc!

But remembering that bit of code and typing it into your URL bar every time seems a bit annoying right? So let's save it as a bookmarklet.

In Chrome, make a new bookmark. (Ctrl + Shift + O, then click on the three dots in the upper-righthand corner and click "Add New Bookmark").
Add a name (like "Floating Player") and set the URL to javascript:document.getElementsByTagName('video')[0].requestPictureInPicture();
Great! Now back to the video 😉. This time click on your bookmarklet to pop the video out!

So How Does it Work?

Essentially, we'll are executing the JavaScript directly in your browser to look for any <video> elements and then on the first <video> element, we're leveraging the Picture-in-Picture API that allows websites to create a floating video window that stays on top of other windows and applications. Up until yesterday, I haven't heard of running JavaScript directly in the URL bar or the Picture-in-Picture API, so let's break it down together.

1. `javascript:`

As I mentioned, you can use the javascript: prefix in a URL to tell the browser to execute the following code as JavaScript instead of navigating to the web address.

Let's try it out. In the URL bar, type javascript:console.log('hello world') and then inspect the page to see it in your console log. Neat right?

2. `document.getElementsByTagName('video')[0]`

Now that we're requesting to execute JavaScript, let's run the getElementsByTagName('video') method on the document to get an HTMLCollection of the elements with a <video> tag. Since it will return an array-like object, we will use bracket notation [0] to target the first <video> returned by the DOM (Document Object Model) API.

3. `requestPictureInPicture()`

Great now that we have the video element, you can add the requestPictureInPicture() method to request the display the video in picture-in-picture mode, which we've seen will return a floating player that stays on top of websites and applications.

4. Bookmarklets

Although we've ran everything so far in this example in the URL bar, as we've done earlier in the setup/usage, we can set the snippet as a bookmark to execute to execute JavaScript making it a bookmarklet.

And that's it! Anyways go forth and enjoy!

References

How to Speak like a Web Developer

Hannah Ong — Sat, 14 Nov 2020 16:44:53 +0000

After building my career in HRIS, I've really taken for granted all the terminology I've gained through industry experience. What once felt easy to explain my thoughts and reasonings, now feels like pulling teeth as I struggle like a toddler grasping for the right words to clearly and effectively communicate to other web developers. Exasperated, I turned to my husband, a long time coder, and asked, "How do I learn to talk 'tech'?" And so I've created this post, a collection of his response with what I've found helpful up until now, as a hopefully useful guide for others who want to learn how to speak like a web developer.

Reading Level: "Elementary" (Tutorials)

We'll try to distill the process of learning to speak like a web developer into the analogy of learning how to speak a language. When you learn a new language, you rarely start by picking up something advanced like the Lord of the Rings (although more power to you, if you do). Anyways, you're much more likely to begin the process by learning your ABCs and reading a children's book like My Hungry Caterpillar. So what is the equivalent of a children's picture book in web development? It's online tutorials. Tutorials are made with the beginner in mind and the content is going to be presented in the most digestible way possible. There will be a good amount of new terminology, but most tutorials will take the time to explain there new concepts and words in layman's terms to help the learning process.

Supplement Reading with Writing (Comments & READMEs)

Before we move on to the next reading level, let's talk about a fairly standard way to supplement reading: writing. Similarly, you can supplement your tutorials and coding projects with writing in two easy ways:

Comments: You can add comments to describe difficult code to yourself. I know there's a bit of controversy around code being polluted with "too many comments", as a beginner these comments are a great way to learn how to communicate your code and thought processes. (And as you get more familiar with coding, you can always write less comments!) Try out the VSCode extension Better Comments
READMEs: Make yourself a README that helps to outline each of your projects. It's a great way to help you (and others) understand the code, the decisions, and the usages. Don't know where to start? Try a template like this one (You can even pretty it up with GitHub emojis!) (Additionally I use Joplin so that I can see my markdown output as I'm editing)

Reading Level: "Middle School" (MDN)

The next step is to start reading from Mozilla Developer Network Web Docs (MDN). Please note that I say MDN and not W3Schools because unlike W3Schools, W3C has partnered with Mozilla, Microsoft, Google, and Samsung to support MDN Web Docs Essentially, MDN is directly affiliated with W3C and is a reliable source we should refer for web standards. Many of the pages will have great examples and code sandboxes for you to play around with code. As you're going through it, you'll actually notice that a lot of the content is pretty much identical to the tutorials you've gone through (I remember that a few tutorials I had seen on YouTube were the exact same as some of the examples provided from MDN!) The main difference you'll notice is that the tutorials may have been presented in a more beginner friendly manner.

Reading Level: "High School" (W3C/ECMAScript)

So, you're doing great and you feel like you're ready to "graduate" from MDN. You may have noticed that I referred to W3C a few times in the section above. That's because W3C (or World Wide Web Consortium) is the official organization that develops the standards for the World Wide Web (ECMAScript for the JavaScript standard to ensure interoperability of Web pages across different Web browsers). That's right, W3C and ECMAScript are as authoritative as it gets in term of web development documentation as they are the ones setting those standards. These sources are literally what MDN is referring to when they write their own documentation for HTML, CSS, and JavaScript. In fact, while you were on MDN, you may have noticed near the bottom of many pages there is a "Specifications" section.
Here's an example for MDN's HTML Header:

An example for MDN's CSS Color:

Lastly an example for MDN's JavaScript Array:

If you click on the links under "Specifications", they will take you to the W3C (or ECMA International for JavaScript pages) for which their documentation is based on. Therefore, if you want to learn exactly how a feature should behave on the browser, W3C and ECMA International are going to be your best bet.

Reading Level: "College"+ (Mailing Lists, Discussions, Contributions)

Alrighty smarty pants, you're feeling like a total pro, what's next? Well, you can start participating and contributing back to the community, and here's three ways on how:

Join Groups/Mailing Lists: W3C, ECMA International, and MDN all have groups/mail lists. You can join these communities and have meaningful discussions on your desired topics.
Follow Editors & Contributors: You'll notice that a lot of the documentation on W3C, ECMA, and MDN have editors/contributors. Do a little digging and follow people of interest to you on Twitter, their blogs, etc. A lot of the time, it's a way to gain insights to their decisions or general thought processes.
Join Discussions: Whether it's on W3C, ECMA International, MDN, Twitter, personal blogs, so on and so forth, start joining in on discussions and share your thoughts!

Summary

This post was written for developers like myself, starting out with web development and realizing that we're running into questions we can't answer, or processes we can't explain to the degree of specificity or clarity that we'd like to because we currently lack the proper terminology. There's no shortcut to learning how to effectively speak "tech", but with a guided approach, I hope this is helpful in getting people started/moving in the right direction.

I'd like to end this post by saying that this is by no means a comprehensive list of all the ways you can learn to "speak" like a web developer, nor is it the only way. Although I categorize these into "levels", anyone can start anywhere (just because you started learning recently, doesn't mean you can't join discussions, or read documentation straight from the source!). Anyways, I'd love to open it up to discussion below where people can provide comments, suggestions, and ways in which they've learned to "speak" like a web developer!

Resources:

A Comprehensive List I'd Like to Give my Past Self

Hannah Ong — Thu, 20 Aug 2020 15:36:28 +0000

I'm incredibly lucky to be starting my path in a generation where there are so many good (and free) learning resources! However, that's what makes it a bit daunting to get started, because we sometimes don't know what will work best for us as individuals.

I've recently shipped my first project, and I wanted to write a post to others in case my journey may be helpful for them.

If I could rewind time, I'd tell my past self to start here:

FreeCodeCamp - It's literally a free code camp. This is a great resource that got me kick-started with HTML, CSS, and vanilla JavaScript. Everything is there for you in the browser, so you don't even need to download a code editor to get started. They have a YouTube channel as well that goes through the exercises if you want someone to help "instruct" you virtually.
Eloquent JavaScript - I found JavaScript hard to pick up (still do!) I'm still going through this book and rereading chapters over again, but this was really helpful in getting a deeper understanding of JavaScript, and the online version is free!
JavaScript in 30 days - Essentially 30 days of small JavaScript projects that are pretty cool to help you get more experience understanding DOM and vanilla JavaScript. What I liked best about this resource was that I could see some better ways to organize or write my code as it comes with an answer key and each lesson has a walk-through video. However, you're going to need to download VS Code or some code editor, and you're going to have to learn how to use GitHub and CLI commands to get started.
My free trial of bootcamp - Bootcamp isn't for everyone, and I found out that it wasn't for me. But one of the days were extremely valuable as it got me quickly familiar with git bash, GitHub, and workflows. However, if I were to go back in time, I'd take back the few weeks I spent here and learned how to use version control via documentation or youtube videos.

I'm ready to start coding my first project! What do I need to get started?

VS Code or any code editor. For VS Code, after you get it, search on YouTube for a few VS Code extensions people recommend for Web Dev and download those. You can always remove any you don't like later!
Git Bash - This looks scary! But you'll need to learn it so that you can use commands in the git bash terminal to get your workflow up and running. This CLI cheatsheet will help you.
GitHub - Make a GitHub account and get started by learning about git commands and how git works. Essentially this is how you work on code with others via version control. Think of it kinda like how google docs work, kinda.

Cool! I've done the JavaScript in 30 days and I've done a few small projects. I want to learn how to do things more efficiently now! What tools should I use?

Sass (or Less) - It lets you write your CSS in a more efficient way which then preprocesses into CSS. You can nest your CSS, use mixins, functions, and do so much more.
React (or Vue or Angular) - These are frameworks/libraries that help structure your JavaScript. I went with React because it's been around awhile and so there's a lot of resources around it, and it's currently the most widely used. MDN has a great tutorial for learning this.
Material UI (or Blueprint.js or some other React toolkit) - Never make components again! Need a button or a tag? Grab it from the toolkit and override any CSS as needed. Spend your time coding, not designing from scratch.
TypeScript - This is so helpful as it really helps to give you errors that are more descriptive so that you can debug quickly. It's a bit painful for me sometimes since I'm still learning how to use it and I don't understand what all the errors mean, but I can already feel the value!
Jest - Test, test test! It's important to write test scripts for your code! It's something I'll be working on in the coming weeks so that when I make changes, I can see the downstream impact.

Youtube sites that are worth taking a look at when you just want someone to show you something because you're tired of reading documentation:

Other sites worth mentioning:

MDN - the place to go for documentation around web dev. Don't forget to sign up for their emails!
CSS Tricks - As the name implies, a great resource to see how to use CSS in fun/creative ways.
GFonts - a place to get fonts for your website
Unsplash - free photos for your website
unDraw - free vector/svg illustrations for your website (we used them for more eyes, plz!)
favicon.io - create a custom favicon (that icon/image on the webpage's window tab)
Font Awesome - so that you can use icons
Vim - download Vim as an extension on VS Code and use keyboard shortcuts. Never touch your mouse again
Normalize.css and CSS Reset - a ways to get your CSS to render all elements more consistently

General Tips:

Code everyday!! Even if that means doing a few HackerRank or Edabit problems.
Don't fear the documentation! It's the best place to read first to solve your problem. Don't guess and check, read the source documentation and then google for additional help.
Reiterate your code! The first time is almost never going to be your best code. It's going to have some bandages as you try to fix it up because of some oversight. Clean it up and look for ways to make your code more readable.

Took a leap of faith this year to pursue a career in programming. Shipped my first thing recently, here's my experience.

Hannah Ong — Thu, 20 Aug 2020 15:13:40 +0000

I wanted to share some of my experiences learning to code as a former HR professional. I wanted to pursue engineering as a means to gain more autonomy and hopefully grow into a career that would constantly challenge me and stay "interesting." Deciding to finally make the move was a daunting decision that I agonized over for months. I finally took the "leap" a few months ago and have been more or less cramming coding material and coding (to the best of my abilities) since then.

Initially, I opted to enroll in a bootcamp, as I felt the structure afforded by such a program would keep me honest and guide my learning. While this was true to an extent, I left because I felt the information and instruction was not the quality I had hoped for. In order to cram all the material advertised in the curriculum into a few short months, the coverage felt superficial and rushed. I found myself often asking "why" something was done a particular way, and more often than not, the teaching assistants seemed either not to know, or not to think it was important. I should mention, I am fortunate enough to be married to an engineer, and my husband was more than up to the task of coaching me along the way. As such, the prospect of learning outside a classroom was a bit easier to stomach.

The main things I've learned so far is that actually trying to build a "thing" has taught me far more than either exercises, or imitating an existing project that is structured a particular way. Learning by example was definitely the fastest way to get started, but I really picked up steam once I overcame the "fear of the blank canvas" and just learned to rely heavily on legitimate documentation (e.g. MDN) instead of trying to learn from random code snippets/tutorials online. So far, I've picked up just HTML, CSS, React, JavaScript, and now a little TypeScript. I'm constantly blown away with how much you can create without knowing a lot, if you're able to just combine what you already know creatively. So don't be intimidated if much of the material out there seems foreign and "scary" (as a lot of it still does for me). I'm convinced that someone new would be able to create what I've recently made with far less knowledge than you would think. Sure it may not be "optimal" or "perfect," but that's what iteration is for, right? :)

As for the thing I "shipped," it's really early stages (and probably has a lot of things I can improve on), but I built it with people like myself in mind and hope others might benefit from it. The site is https://moreeyesplz.com/ (note: my husband built the backend, but I did the frontend, I swear!). As for what it is, it's a simple way to crowdsource feedback on commits you commit to GitHub. We actually created it for the Dev.to GitHub actions hackathon project, but felt it might be worth sharing as it's also my first shipped project. It's free as in beer (that's free), and we honestly have no idea if others in the community will even take to it. That said, my husband has offered to give as much feedback/mentorship as he has time available there (and I think people should take him up on it!).