WDX-180
Web Development X
Week 27 | More Web APIs
Week 27 - Day 1 | Drag and Drop API
Schedule
- Watch the lectures
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Your instructor will share the video lectures with you. Here are the topics covered:
- Drag and Drop API
You can find the lecture code here
References & Resources:
- Slides (contains code and resources at the end)
- DataTransfer
- HTMLImageElement
- HTMLImageElement.complete property
Exercises
- Make the draggable element paint the drop target with its background color
- Explore and recreate the DnD List
- Explore and recreate the DnD Game
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week27/progress/progress.draft.w27.d01.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Week 27 - Day 2 | Drag and Drop A11y
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Today you should spend some time on ♿ accessibility, because Drag-n-Drop can become a problem, not a feature when A11y is not properly taken care of. Here are some recommended articles to read and some code to study and explore:
Week 27 - Day 3 | Solving Software Challenges
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
“Please build ‘this’ thing!”
How do you approach a new software challenge? How do you solve a novel problem? Here are some tips and resources for solving software challenges/problems:
- Break/split the problem into smaller problems/tasks
- Work on a simpler version of a problem
- This rule applies both to the original problem and the sub-problems
- Stop and think whether the code that you wrote will scale and work equally well with a more advanced version of the problem
- Plan & design
- Use diagrams
- Use pen and paper
- Think outside the code
- Whenever you are working on a challenge that involves something that will be displayed to the user(s), you can begin by working out the problem of displaying the app
- For displaying things, Frontend devs have a lot of opportunities and lots of different technologies at their hand:
- SVG (XML-based Vector graphics)
- HTML + CSS
- Canvas API
- Images (bitmap)
- Media such as
<video />,<audio /> - WebGL (?)
- For displaying things, Frontend devs have a lot of opportunities and lots of different technologies at their hand:
Study: How to Solve Problems
Week 27 - Day 4 | FileReader API
Schedule
- Watch the lectures
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Your instructor will share the video lectures with you. Here are the topics covered:
- FileReader API
You can find the lecture code here
References & Resources:
- Drag-n-Drop in the real world
- VSCode User Snippets
- Preferences > Configure User Snippets
- FileReader: “The FileReader object lets web applications asynchronously read the contents of files from the users’ computer.”
- FileList: “…used for a list of files”
- The prototype of FileList uncovers this property: Symbol(Symbol.iterator):ƒ values()
- This gives an object the ability to iterate (loop) over its values through […object] or for..of loop.
- File: “The File interface provides information about files and allows JavaScript in a web page to access their content.”
- The prototype of FileList uncovers this property: Symbol(Symbol.iterator):ƒ values()
- FileList: “…used for a list of files”
<input type=”file” />- Limit file types: accept=”image/jpeg, image/png”
- DataTransfer: “The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation.”
- ElectronJS: Turn any website or web app into a cross-platform Desktop application
- Base64:
<img src="file.jpeg" \>- Base64/DataURL => file.jpeg => Read the contents => Convert them into a String
<img src="base64:AAAAAAAAAABBBBBBBBCCCCC" \>
- Online Base64 Encoder/Decoder
- FileReader
- https://javascript.info/file
- File API
Student Questions:
- Q: “Can we store the files in some way? (think Storage APIs)”
- A: You can read/encode files as Base64 strings and store them on the localStorage
- Q: “Can we read files from a directory or read a directory or read a hard drive?”
- A: You can explore (with caution) the File System API
- SO: Is it possible to read files from a directory using javascript?
Exercises
Build on the examples we’ve worked on and share any questions or apps that you’ve built.
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week27/progress/progress.draft.w27.d04.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Week 27 - Day 5 | Games using Canvas API
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
It’s a great idea to study some tutorial videos on building games that are based on the Canvas API and grab some ideas and good practices such as using the prototype and more.
Here are two fantastic videos to study and replicate:
Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!