⇦ Back

WDX-180

Web Development X

Learning and Productivity Tips

“Truth flourishes where the student’s lamp has shone,
And there alone,”, W.B. Yeats

Study*

*from latin Studium, meaning zeal, painstaking application, dedication.

• When learning new concepts, ensure that you always accompany them with imagery. For example, when learning about closures in JavaScript, google for closure javascript and switch to Images search mode to find useful diagrams, images, charts or any other type of imagery that will help you “connect” with the concept you are trying to learn and get a visual representation that will help you build a strong mental model behind each concept. There is a great deal of scientific research and studies that confirm the important role of visual input in processing and retaining information.

(A quick Google image search for “closure javascript” results in this nice visual diagram by Edward Huangabout)

• YouTube Videos:

  • Switch to a different playback speed: if you feel the default speed (1x) is either too fast or too slow for you. You can configure the playback speed by clicking the Settings icon and then selecting a Playback Speed. Speeds over 1 (1.25, 1.5, etc.) will accelerate the playback rate, while speed values under 0 (0.75, 0.5, etc.) will slow down the video and audio.

  • Use an AdBlocker: you are probably going to need an AdBlocker while watching YouTube videos, as it can become really distracting (not to mention annoying and time consuming) watching ads popping up all of the time. You can install something like Adblock Plus - free ad blocker for Chrome.

  • Check the comments section: for additional feedback, outdated content, errata and extra information that might be helpful. Look for comments that mention that the content is outdated or contains misleading information. Tip: you can install the Chrome extension SummifyYT which does a pretty good job reading all the comments and summarizing the overall feedback (see screenshot below).

  

Where to look for information

• The Mozilla Developer Network website (probably one of the best sites to look for information related to web technologies)

• Wikipedia

• YouTube

• StackOverflow

• JavaScript Info (for JS related concepts)

• The PCMag Encyclopedia

• The Kopec Explains Software Podcast

How to draw to remember more

How to draw to remember more | Graham Shaw | TEDxVienna YouTube video, 17min

---

Browser

• You can always click and open any link on any website in a new Tab, by holding down the Ctrl (Windows) or the Command (Mac) keys while clicking. This will help you stay on the page that you are studying, while temporarily opening up any interesting links in a new Tab.

• Create and save Chrome tab groups

ChatGPT

Use ChatGPT with extreme caution!

When ChatGPT is confidently wrong YouTube video, 8min

---

Visual Studio Code

Here you can find tips for getting the most out of this awesome IDE and its numerous extensions!

RainbowCSV

Apart from the beautiful colors the extension adds to our CSV file, it offers a great consistency checker!

How to use it

At the bottom of you VSCode when there is an editor open with a CSV file, there is a button named CSVLint. Click on it to check your file’s validity. After the process is finished, the button is colored:

• Green: Everything looks fine!
• Red: The errors are displayed on hover

As per creator’s documentation:

• The linter checks the following:
  • Consistency of double quotes usage in CSV rows.
  • Consistency of number of fields per CSV row.

---

Tools

• Excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams
• Adblock Plus - free ad blocker
• Youtube Playlist Duration Calculator: An extension to calculate & display the total duration of a youtube playlist.

• Screenshot YouTube: Take a screenshot of any YouTube video with one click
• SummifyYT: Summarize YouTube Comments (Chrome Extension)
• Wikiwand: Wikipedia Modernized
• Just Read Chrome Extension for Read articles in a customizable, simplified format - like a read mode but better!
  • Click here to see a comparison between an old web page and the Just Read version.
• CodeGrepper: The Query & Answer System for the Coder Community
• Git Bash. List of available commands:
  • ping / cURL / ftp / nslookup.exe / vim / python (not available. Will launch the installer)
• WSL: Windows Subsystem for Linux. List of available commands:
  • ping / cURL / ftp / telnet / rsync / tracepath / python / vim / nslookup / nc

---

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham