Frontend Fundamentals 3/20

1. What's the difference between a relative, fixed, absolute, sticky and static-ally positioned element?

This was easy to understand from the YouTube video but I still have a bit of problems between absolute and fixed. I think the former means it will disappear if scrolled-away from, but the latter remains in that position on the viewport of the user.

2. What's the difference between block, inline, and inline-block?

3. What is the CSS display property and can you give a few examples of its use?

This video helps to explain some of the more commonly used properties

4. What are the differences between JavaScript variables created using let, var or const?

After some reviews I got this finally. The thing that was troubling me was the scope of declaration.

5. Designing a News Feed

My attempt at an answer (p.s I tried the algorithmic coding steps REACTO), things I missed labelled with 🚨:
Requirements - Example - Algorithm - Code - Test - Optimisation

🚨 Data structure / interface
🚨 High-level diagram

1. Requirements

   1. scrollable
   2. support different formats (video, text)
   3. refresh F5 to update
   4. interactivity (comment / reply, like, share)
   5. creating new posts 🚨

2. Example

   1. (FB) notification when there are new updates
   2. (Insta) inform when you’re all caught up
   3. (Twitter) data management strategies for celebrities
   4. (FB) offsetPosition always squares the post on screen
   5. (Insta) incrementally-improving resolution render
   6. (FB) lazy loading of list 🚨 offset-based / cursor-based
   7. (all) recommendations

3. Algorithm / Code
   [UI/UX]

   1. lazy loading so only load the first 10 items then append the rest to list. Use something like an updating pointer, or just update the state of React component to fetch (indexStart, count] number of posts.
   2. interactivity should be relatively quick. Some loading icon to show that it’s saving to DB, or an optimistic lock to update the, for example, like icon to show that user has liked it. But that has the potential downside of the server being down and then user returns to see it not “liked” and feels bad.
   3. error messages should be clear such as a toast, but at the same time not too disruptive to the scrolling UX. I imagine revenue to be driven largely by ads, which are proportionally shown relative to how much the user scrolls (i.e for 10 posts there is 1 ad)
   4. if user is offline, can afford to cache some of the latest so they have something to interact with, than just a blank page.
   5. cross-platform utility. React Native to support all mobile devices is pretty steady, disabling or fixing viewport size on other mobile device like tablet can be helpful to keep the code simple. Should there be a need to create a webpage, that will incur a lot of complexity because different devices have different layout (width / height). It really depends on what we expect users to use. For example, if we think of LinkedIn, many people use it to search for jobs and will thus be on a PC platform, so we cannot create an exclusive mobile app with no web page support.

[Security]

1. standard HTTPS / TLS encryption for all data transmission is important for a basic level
2. have periodic checks on SNYK for dependency libraries to make sure none of them have security vulnerabilities. If there is, patch them. Usually there is no need to switch to a different library, the library maintainers itself would have fixed the issue in a later release, so just upgrade to that version and ensure it doesn’t break existing features. This is where unit tests can help, especially snapshot tests to verify layout

[Code maintainability]

1. Unit tests, for reason in Security (b) mentioned above is important. Also as the feed grows increasingly complex there can be new features that might break old features. This one requires unit tests to ensure old features don’t break, especially if there are new members on the team that aren’t too sure how existing functionality could be affected.
2. If app, force updates, if done frequently, can be friction for users. Avoid that by planning well in advance what features are needed, and build, as much as possible in a backward-compatible way.
3. Consequently, DB considerations for popular artistes need to be stored differently from regular folk. A tweet by Ariana Grande might show up in many many people’s recommendations, and having to query the object {content, likes, comments} each time is heavy on the backend. Saving the {likes, comments} to a separate table and linking it to original content with a uniqueId can help reduce the load on querying Ariana Grande’s post DB.