#Fragments x http x SEO x OG Images

Recently i’ve learned fragments are not sent to backend server nor parsed by social media crawlers (for seo/og image) in a hard way…

In this site /bytes url now looks like /bytes/communication-protocols.

In the tried and reverted back version, i had the url look like /bytes#communication-protocols where the OG image is being replaced for every section id.

<h2 id="communication-protocols">
  <a href="#communication-protocols">test</a>
</h2>

guess what.. social media (like twitter card, linkedin) and SEO crawlers don’t wait for the script (javascript that updates the OG Image url based on #fragments). Search engine doesn’t crawl the page based on fragments either, thus no indexing for SEO.

if you make request from http://example.com/test#test to the backend, the request doesn’t include the fragments. This behaviour is designed by http 1.1 spec even from the starting spec where request uri should not include fragments due to security considerations.

It is meant for client side navigation only, not for server side (including crawling servers).

first http 1.1 spec Disclosure of Fragment after Redirects

To add fallback for styles in iOS devices - mobile

@supports (-webkit-overflow-scrolling: touch) {
  /* css classes/selectors */
}

For example: background-attachment: fixed don’t work in safari mobile, add fallback for mobile iOS like

@supports (-webkit-overflow-scrolling: touch) {
  body {
    /*switch to scroll which is default - iOS mobile*/
    background-attachment: scroll;
  }
}

Listed down the number of ways to transmit/exchange data between server and browser, we might use:

• traditional way (http request/response)
• chunked-response (streams data)
• SSE (streams - text only, base64)
• Web Sockets (streams)
• grpc web (needs proxy)
• Web Transport (alternative to web sockets BUT major browser support is lacking - as of 2024)
• WebRTC (to send audio/video/text-blob) - designed for p2p but can be extended to client-to-server by treating server as its peer connection

send/recv data between browser to browser itself (new tab/window/browser/remote browser)

• Broadcast Channel
• Webrtc Data Channel (text/blob), Webrtc Media stream (audio/video/screen sharing) - p2p connection
• MessageChannel (iframe to main, main thread to workers, tabs, window and vice versa)
• PostMessage (iframe to main, main thread to workers, tabs, window and vice versa)

There are two types of concurrency in general.

1. co-operative
2. non-co-operative

co-operative

Co-operative since the functions decides when they willingly to pause by the using “await” and execute further instead of executing at some arbitarty point (ie: flow would be disturbed if it executes next lines of the code which depends on the result of the network call arbitrarily instead of waiting on the network call)

• more like “concurrency on controlled manner”
• explicit yielding since we are explicitly using await keyword to pause

Non co-operative

There’s non co-operative concurrency where context switch happens arbitrary implicit yielding instead of explicitly yielding to execute (usage of await keyword means explicit yielding).

implicit yielding would be os threads/go routines where runtime scheduler handles the yielding internally without needing to await explicitly to control the concurrency ..

• more like “concurrency on unhinged manner”
• implicit yielding since it depends on how os system thread scheduling/go-routine handles it.

Concurrency is illusion of parallelism. parallelism comes under concurrency techniques but it may execute concurrently but not necessarily in parallel. The actual execution (concurrent or parallel) depends on single-core or multi-core, os ability to manage threads etc. In conclusion, all parallel programs are concurrent but not all concurrent programs are parallel..

I was tired of seeing some unrelated examples when it comes to explaining design patterns like cars, students etc. And looked for a technical explanation which I couldn’t find it all in a single place. And below are the list of examples for the design pattern that I have seen/used so far in the modern software/web

• Singleton - Initializing DB, Redis, firebase instance
• Factory - Initializing like with options createConfig() for dev/prod/staging env
• Builder - constructor with many params to use builder pattern. In Jest, we use builder pattern via expect().toBe();
• Abstract Factory - For example we are writing a application for both online/offline we can define a factory like this: Connectivity -> ConnectivityLocal or Remote
• Bridge Pattern - Capacitor Plugin For Android/IOS/Web (Platform Independent)
• Prototype - cloned object instead of creating new
• Adapter - In modern web dev, if you want to deploy to different hosting sites like cloudflare/vercel, you will use the adapter as target in vite that converts your build to appropriate api of the hosting environment.
• Proxy - new Proxy() in js to change the few language features of js (get/set) etc.
• Decorator - python has @decorator; Decorators dynamically alter the functionality of a function, method, or class without having to directly use subclasses or change the source code of the function being decorated
• Observer(like pub/sub) + Iterator (Rxjs)
• Strategy - It may prove useful for specifying policies in framework design. Using STRATEGY, clients may parameterize the implementation. For example, error-handling is typically delegated to the application. Such a design may be realized by letting the client provide a strategy to be invoked upon an error. By those means, the error may be handled in an application specific manner, which may stretch between simply ignoring the error to logging it or even reboot the system (Patterns in C book)
• Mediator - Middleware (Auth, CORS etc)

For <form>,

• use semantic html tags like <label>, <input> with appropriate type, <select> rather than div all around
• <fieldset> and <legend> to group elements
• to group/associate label and input, use for and id attributes on it
• to handle error in the forms use (aria-invalid, aria-describedBy with appropriate id)
• to navigate to the next form element, use enterkeyhint (look up on MDN), it will improve UX when using virtual keyboard (for example: mobile keyboard) along with event listeners for handling keydown events.
• make sure to handle events (keyboard events) (for example: if used <div> to create checkbox, ensure keydown space/enter is handled, aria-checked, role, focusable).. ie: if creating custom components, make sure to add appropriate role, aria attributes, handle aria states, events, label, focusable.
• Test using NVDA / TalkBack
• Remember Placeholder text is not a replacement for labels