![\"concurrent-diagram\"](\"/4da086c176314fb8e41d4bf512857493/concurrent-diagram.webp\")
There is an advanced feature of React that it can write renderers for multiple different env. Let discuss a few of them.
\nThis is a Renderer for Figma. It can use React components as a design source.
\nSample code with react-figma:
\nimport * as React from 'react';\nimport { Page, View, Text } from 'react-figma';\n\nexport const App = () => {\n return (\n <Page name="My Resume" isCurrent>\n <View>\n <View style={{ width: 200, height: 100, backgroundColor: '#dd423a' }} /> <Text style={{ color: 'white' }}>Hi, There</Text>\n </View>\n </Page>\n );\n};Nowadays, Figma is the most popular design tool, similar renderers available as well: react-sketchapp for Sketch, react-xd for Adobe XD.
A device like Arduino can be operated by React components.
\nLet's checkout demo code :
\nimport React from 'react';\nimport ReactHardware, {Led} from 'react-hardware';\n\nconst App = () => {\n const [ledStage, setLedStage] = useState(false);\n\n useEffect(() => {\n setInterval(() => {\n setLedStage(prev => !prev);\n }, 2000);\n }, []);\n\n return <Led pin={13} value={ledStage ? 255 : 0} />\n}\nconst PORT = 'dev/tty.usbmodem1411';\nReactHardware.render(<App />, PORT);Another React solution for CLIs. It allows you to run, build and test your CLI output through components:
\nThe code of the demo:
\nconst Raiser = () => {\n const [i, setI] = useState(0);\n\n useEffect(() => {\n setInterval(() => {\n setI(prev => prev + 1);\n }, 200);\n }, []);\n\n return <Color>\n Increased by {i} \n\t</Color>;\n}Ink is a popular one that is used by libraries such a Gatsby, Parcel, Yarn 2, etc.\nreact-blessed is one of the similar libraries.
This is a great React renderer for threejs on the react-native and web.
\nLet's see a sample code:
\nimport ReactDOM from 'react-dom'\nimport React, { useRef, useState } from 'react'\nimport { Canvas, useFrame } from 'react-three-fiber'\n\nfunction MyFrame(props) {\n const Ref = useRef()\n const [hover, setOnHover] = useState(false)\n const [enable, setEnable] = useState(false)\n\n useFrame(() => (Ref.current.rotation.x = Ref.current.rotation.y += 0.01))\n\n return (\n <Ref\n {...props}\n ref={Ref}\n scale={enable ? [1.5, 1.5, 1.5] : [1, 1, 1]}\n onClick={(e) => setEnable(!enable)}\n onPointerOver={(e) => setOnHover(true)}\n onPointerOut={(e) => setOnHover(false)}>\n <boxBufferGeometry args={[1, 1, 1]} />\n <meshStandardMaterial color={hover ? 'hotpink' : 'orange'} />\n </Ref>\n )\n}\n\nReactDOM.render(\n <Canvas>\n <pointLight position={[10, 10, 10]} />\n <MyFrame position={[-3.2, 0, 0]} />\n <MyFrame position={[2.2, 0, 0]} />\n </Canvas>,\n document.getElementById('root')\n)The library has a great ecosystem along with packages such as react-three-flex ,react-xr, react-postprocessing , etc.
A renderer for React that render nothing.
\nimport React, { useState, useEffect } from "react"\nimport { render } from "react-nil"\nfunction MyComponent() {\n const [active, set] = useState(false)\n useEffect(() => void setInterval(() => set((active) => !active), 1000), [])\n return null\n}\n\nrender(<MyComponent />)It provides you kind of high-level abstraction to Node.
\nAnother reconciler for DOCX.js.
\nLet's understand with a sample code:
\nrenderAsyncDocument(\n <section>\n <paragraph heading={Docx.HeadingLevel.HEADING_1}>\n This is a sample paragraph with paragraph tag\n </paragraph>\n <p> This is a sample paragraph with P tag</p>\n <p>\n <t>this is for textrun</t>\n </p>\n <p>\n <img\n src="base64...."\n width={200}\n height={200}\n />\n <href\n src="http://localhost:8080"\n label={"image n links label"}\n />\n </p>\n <Component text="can try componets in this way of course, like react!">\n </Component>\n </section>\n).then((doc) => console.log(doc));Also, you can checkout react-pdf and redocx for a similar purpose.
Can visit this Github Repo for a curated list of react renderers.
\n","frontmatter":{"date":"June 23, 2021","updated_date":null,"title":"React renderers, react everywhere?","tags":["JavaScript","React","Renderer"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c78e466846f6ee90e75611967e696733/58556/react.webp","srcSet":"/static/c78e466846f6ee90e75611967e696733/61e93/react.webp 200w,\n/static/c78e466846f6ee90e75611967e696733/1f5c5/react.webp 400w,\n/static/c78e466846f6ee90e75611967e696733/58556/react.webp 800w,\n/static/c78e466846f6ee90e75611967e696733/99238/react.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-error-boundaries/"},"html":"When we develop a project in a react application, we encounter errors such as server-related errors, component/function errors, and so on, which break the application and result in a blank web page, which is not ideal. To resolve this, many methods are created that handle these errors and improve the user and developer experience.
\nIn React, Error Boundaries comes in the picture, which was introduced in React v16 that catch the javascript errors found in UI and handle them efficiently.
\nReact Error Boundaries are React components that catch tricky javascript errors, log those errors and render them into a fallback UI instead of crashing the whole application.
\nNow let's understand the concept with the code.
\nclass UpdateCount extends Component {\n state = {\n count: 0\n };\n handleClick = () => {\n this.setState({\n count: this.state.count + 1\n });\n }\n render() {\n const {count} = this.state;\n if (count === 4) {\n // Imitate an error!\n throw new Error('Application crashed!');\n }\n return (\n <div>\n <h1>{count}</h1>\n <button onClick={this.handleClick}>+</button>\n </div>\n );\n }\n};When an application encounters an error, the component unmounts completely, leaving the user/developer with a blank web page and no idea what to do next.
\nReact Error Boundaries provides a method to handle these errors efficiently!
\nFirst, let's make an error boundary component. Here is an example:
\nclass ErrorBoundary extends Component {\n state = {\n error: ''\n }\n static getDerivedStateFromError(error) { \n // will update the state \n return {error: error.toString()}\n }\n \n render() {\n const {error} = this.state;\n if (error) {\n return (\n <div>\n <p>Looks like an error occurred!</p>\n <p>\n {error}\n </p>\n <div>\n )\n }\n return <div>{this.props.children}</div>\n }\n}In the above example code, you will see a static method getDerivedStateFromError(error). This method is a lifecycle method in which we catch the error and see it as the state. If an error occurs, the state is updated, and instead of a blank web page, a human-friendly error message appears in rendering; if no error occurs, the control is returned to the original element.
Now let’s see how we can use this
function App() { \n return ( \n <div> \n <p><b>Error Boundary Example code</b></p> \n <hr /> \n <ErrorBoundary> \n <p>Two updatecounts component use same error boundary component.</p> \n <UpdateCount /> \n <UpdateCount /> \n </ErrorBoundary> \n <hr /> \n <p>Two updatecounts component use their own error boundary component.</p> \n <ErrorBoundary><UpdateCount /></ErrorBoundary> \n <ErrorBoundary><UpdateCount /></ErrorBoundary> \n </div> \n ); \n} \nexport default App In the above code, when we click on the plus (+) button, it increases the count. The program is programmed to throw an error when the count reaches 4. It simulates a JavaScript error in a component. Here, we have used the error boundary in two ways, which are given below.
\nFirst, these two updatecounts are within the same error boundary. If one of the updateCount components crashes, then the error boundary will replace them both.\nSecond, these two updatecounts are within their individual error limits. So if one crashes, the other component is not affected because both have their own error boundary component.
\nReact Error boundary is a really nice feature in React, and it is comparatively less used.\nThere are a lot of nice error boundary packages out there; you should look into them. Here is a link react-error-boundary
\n","frontmatter":{"date":"May 20, 2021","updated_date":null,"title":"React Error Boundaries","tags":["React","Error Handling","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/fbbddc79e1423b5aad77631cb84f527d/58556/error_boundary_cover.webp","srcSet":"/static/fbbddc79e1423b5aad77631cb84f527d/61e93/error_boundary_cover.webp 200w,\n/static/fbbddc79e1423b5aad77631cb84f527d/1f5c5/error_boundary_cover.webp 400w,\n/static/fbbddc79e1423b5aad77631cb84f527d/58556/error_boundary_cover.webp 800w,\n/static/fbbddc79e1423b5aad77631cb84f527d/99238/error_boundary_cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/recoiling-the-react/"},"html":"Recoil js is another state management library for React.
\nThough we already have Redux. Mobx, Context, but here we got a new light entry in the community.
\nWhy I am saying light you will figure it out at the end of this blog.
There are two major concepts:
\nSomething new? Don't worry will understand this quickly.
\n This is similar to how we use the useState hook in react. If you are new to react hooks, checkout react hooks guide.
e.g.:
\n const [age, setAge] = useState(0);age : this will be used for state variable declaration.\nsetAge :this will be used for state variable updations.
\nNow you need to make a few alterations in your app's root level, like the below snippet.
\nRecoilRoot will behave like a global context provider that will share the global state to your app tree.
Now update your older code snippet.
\nReactDOM.render( <AppPage />, document.getElementById("root"))to
\nimport { RecoilRoot } from "recoil";\n\nReactDOM.render( \n <RecoilRoot>\n <AppPage />\n </RecoilRoot>, document.getElementById("root"))Recoil calls this part as atom, where we set the global key, value.
\nimport { atom } from "recoil";\n\nconst age = atom({\n key: "age", \n default: 0 // default global value for age key\n});Now this atom will be accessible throughout the app.
\nNow update your older code snippet.
\n const [age, setAge] = useState(0);to
\nimport { useRecoilState } from 'recoil'\nconst [ageState, setAge] = useRecoilState(age);For a Larger view, here is Full Code
\nimport { atom,useRecoilState } from 'recoil'\n\nconst age = atom({\n key: "age", \n default: 0 // default global value for age key\n});\n\nexport const AgeCalculator = () => {\nconst [ageState, setAge] = useRecoilState(age);\n}Quite easy. Isn't it?\nNow let's move to another part selectors.
\nThis is similar to how Redux manages states.
\nif a value can be derived/computed from the state, then we can skip re initialize of an another separate state key, for that use selectors.
\nIn the below example, we are getting isChild value from age key, then we can directly use selector instead of adding a new key or atom.
import {selector} from 'recoil'\n\nconst isChild = selector({\n key: "childage",\n get: ({ get }) => {\n const state = get(age);\n return state < 10 ;\n }\n});Now will use the above-mentioned selector.
\nbelow code snippet use age value to isChild.
const [ageState, setAge] = useRecoilState(age);\n\n const value = useRecoilValue(isChild);For a larger view, here is Full Code
\nimport {selector, useRecoilState} from 'recoil' \n\nconst isChild = selector({\n key: "childage",\n get: ({ get }) => {\n const state = get(age);\n return state < 10 ;\n }\n});\n\nexport const AgeCalculator = () => {\n const [ageState, setAge] = useRecoilState(age);\n const value = useRecoilValue(isChild);\n}That's all, Milord.
\nI hope you got why I am saying this as light.
Recoil is looking relatively easy, promising, and early-stage, but again this is the next generation, and it will take time to get the own space in the community.
\n","frontmatter":{"date":"April 30, 2021","updated_date":null,"title":"What is recoil.js and how it is managing in react?","tags":["JavaScript","React","Recoil"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/208ac01a1815902a049ffe0d62ef3730/58556/react.webp","srcSet":"/static/208ac01a1815902a049ffe0d62ef3730/61e93/react.webp 200w,\n/static/208ac01a1815902a049ffe0d62ef3730/1f5c5/react.webp 400w,\n/static/208ac01a1815902a049ffe0d62ef3730/58556/react.webp 800w,\n/static/208ac01a1815902a049ffe0d62ef3730/99238/react.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Abhimanyu Singh Rathore","github":"abhir9","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/concurrency-vs-parallelism/"},"html":"Whenever we talk about asynchronous programming in JavaScript, there is sometimes confusion in how it can be asynchronous if it is single-threaded. To answer this correctly, I think it's a good thing first to understand the difference between concurrency and parallelism, two terms that are commonly brought up with multithreading.
\nConcurrency describes independent parts of a program to run in an arbitrary order without affecting the outcome. A concurrent application can execute multiple tasks over an overlapping period. This means that while we can start new tasks before the previous one is complete, we cannot perform work on each task simultaneously.
\n
You can think of a concurrent execution model as a single chef preparing a meal. Any chef worth their salt can work on multiple dishes (or various parts of a dish) at once. They might chop the vegetables for their stir-fry while the rice is steamed in the rice cooker or leave the vegetables to fry in the pan while cleaning up their workspace. In this scenario, the chef can perform multiple tasks at once; however, at any given time, he is only able to work on a particular unit of work at a given time.
\nYou might point out that the chef can perform other actions in this example scenario while something like the rice is steaming, which is technically work still being done. However, the concurrency in this scenario only applies to the chef's context, who is not actively working on the rice as it is being steamed.
\nSimilarly, the JavaScript Event Loop allows your scripts (the chef) to hand off tasks like HTTP requests and timeouts to the browser Web API (rice cooker), allowing the script to execute other code portions while waiting for a response. Once the Web API task is complete, it is pushed back into the Event Loop call stack. While the Web API acts as a separate thread where it can complete certain tasks outside the main thread's scope, your actual JavaScript code is still executed on a single thread concurrently.
\nParallelism describes the ability for independent parts of a program to be physically executed at the same time. A parallel application can distribute its tasks to independent processors (such as different cores or threads of a CPU) to be executed simultaneously.
\n![\"parallel-diagram\"](\"/673e8d6bccb42949459d15d8adc0dc32/parallel-diagram.webp\")
You can think of a parallel execution model as multiple chefs individually each preparing a meal. These individual chefs may be preparing their dishes in a concurrent manner (like the above) or a sequential one; either way, the result is that rather than producing a single meal, the kitchen has prepared multiple meals over a unit of time.
\nModern browsers allow you to program parallelly by using Web Workers. These spawn separate threads to execute JavaScript independently from the main thread.
\nSo we've established that multiple chefs can get a kitchen to produce multiple dishes in the same amount of time as a single dish from a kitchen with a single chef. Modern hardware almost always has multiple threads, so why isn't all code run in parallel? If it takes one chef 10 minutes to prepare one stir-fry and five chefs 10 minutes to prepare five stir-fries, can five chefs produce one stir-fry in 2 minutes? This is where parallel computation can get difficult.
\nTasks can speed up by distributing the workload onto multiple threads. However, this requires splitting up the workload in a way that can work independently and effectively. Think of how five chefs would prepare a single stir fry together:
\nSimilarly, on the computing side, parallel programming solutions are generally harder to implement and debug. Depending on the task, they can sometimes even perform worse than serially run counterparts due to the various costs of overhead (transferring data between threads, creating and destroying threads, synchronization of work, etc.).
\nTo conclude this post, neither are inherently superior to the other. Both execution models are useful tools for producing efficient and reliable solutions and are used together in many cases. I hope this helps to clear up the differences between the two, or if not, at least provided a mildly entertaining analogy to illustrate each.
\n","frontmatter":{"date":"February 19, 2021","updated_date":null,"title":"Concurrency vs Parallelism: What's the Difference?","tags":["Concurrency","Parallelism","Multithreading","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/c1592330a691b94decfefeb2601f55b9/58556/unsplash.webp","srcSet":"/static/c1592330a691b94decfefeb2601f55b9/61e93/unsplash.webp 200w,\n/static/c1592330a691b94decfefeb2601f55b9/1f5c5/unsplash.webp 400w,\n/static/c1592330a691b94decfefeb2601f55b9/58556/unsplash.webp 800w,\n/static/c1592330a691b94decfefeb2601f55b9/99238/unsplash.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nick Chim","github":"nickc95","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/progressive-app-vs-native-app/"},"html":"At the dawn of \"smartphones\" in late 2007, when Apple released the iPhone, there were native apps. Apple's app framework included a native app SDK that allows developers to take advantage of all the physical device features and topped it off with an app store that allows for distribution and monetization of the finished applications. When Google released Android in competition, they also embraced this approach with their app store and SDK, which also leveraged the entire Google platform and its services.
\nDevelopers could tap into Google's search and maps services, as well as email, etc. Native applications served their purpose superbly and became the primo factor that propelled Android and iOS as the big two phone operating systems at the time, until the present day.
\nNative smartphone applications were so common that Apple coined the tagline \"There is an app for that\" and copyrighted it in 2009.
\nHowever, come the 2010s. Web technologies saw increasingly rapid growth. Server-side rendered web pages allow for the creation of full-fledged web applications that could offer business values beyond static information. The responsive design movement also enhances accessibility for these web apps across all platforms. It was also during this time that mobile applications became stagnant. Your phone started to have too many applications, and not all of them were equally useful. Some are thin clients to web services, which you could access using your mobile web browser instead.
\nRecognizing this, Progressive Web Applications, or PWA, came in to bridge the gap between native and web applications.
\nFirst and foremost, PWAs are web applications. They run in web browsers, but also usually in webviews on smartphones. Compared to traditional websites that you would visit with a conventional web browser, progressive apps tend to be a little more low key.
\nYou may see one through a direct URL, but more commonly through a desktop/home screen icon on your phone, which takes you to a webview hosting the application. By extension, PWAs are now also distributed through app stores, standing alongside native apps.
\nThe webview itself may also be without or with minimal menu bars to provide an impression close to navigating a native application. Furthermore, progressive applications usually come with some offline viewing capabilities, allowing you to interact with the app even when you are offline or in limited network availability. This is implemented using service workers that stand in between network requests and the user and handle caching as well as push notifications, providing a user experience similar to native app caching.
\nWith that in mind, the idea behind PWA is to create applications that would be most accessible, through the web, that also offers an experience as close to native applications as possible.
\nSuppose you are a new company looking to create a mobile application for your product. If you would like to distribute your app on all major mobile platforms - namely both iOS and Android - you would then have to go through the development and distribution process for both. First off, you will need to learn the language to develop Android applications (Java, Kotlin) and then iOS (Objective-C, Swift), have the correct hardware to test and develop.
\nThis process will have you relearn everything about one platform on the other. Once you finish the initial product, you will have to maintain both codebases moving forward to complete this.
\nWith a progressive app, the process becomes a lot simpler. Your application lives within a browser, and hence only needs to be supported by the browser standards. As of now, support for PWAs is available across major browsers: Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, and Firefox (for Android).
\nYour language is the language of the web: JavaScript. The choice is also yours to leverage the JavaScript platform you are most familiar with, be it React, Angular, or something completely different. The JavaScript codebase will then become the only codebase you need to maintain for the app.
\nAlongside this, you also gain the advantage in the availability of the application. With PWA, your app will be available on the web, accessible by users across many platforms, including all mobile devices that have browser support.
\nPWAs live on the web; this means you do not need to download and store many executables and assets on your device, saving you precious storage space if you are using the app on your phone. This is especially useful when the native version of the application is simply a portal to a web service, which serves to make API calls and present data based on the user data on the server only, without performing any device-specific actions. The functionality of these applications is not inhibited by the browser's sandbox and thus make for perfect PWA candidates.
\nPWAs are designed to be responsive. Even though this depends largely on the individual developer of the application, a well designed and developed PWA should, in theory, provide a consistent experience across devices. With native apps, a lot of effort will be required to ensure that the user experience is uniform across multiple platforms. And even then, certain platforms will impose their own set of requirements on the UI look-and-feel, as well as the functionality of the app.
\nProgressive apps are a creative solution to smooth out the differences between a native app and the web, but not necessarily replace native apps. While it inherits all the advantages and features of the web, there are still certain disadvantages that need to be considered when deciding between a progressive app or a traditional native app.
\nFor one thing, progressive apps are designed to be uniform across devices. This means it is not the technology's focus to make use of specialized features that are available only on select devices. Its feature set will be the lowest common denominator of the range of devices that it supports. With how diverse the feature sets are on modern devices like smartphones and tablets, with high-resolution cameras or fingerprint sensors, to name a few, it would be amiss for applications not to take advantage of these features. It follows that progressive apps are not ideal for specialized workflows, while their strength is in general purpose applications.
\nCompatibility is another big-ticket item. At a baseline level, PWA should be supported by all major browsers. However, platform differences still exist, where specific features are supported by one browser but not another, which will cause inconsistencies in behavior when the user switches from one device/platform to another. A prominent example of this being push notification support on iOS, which requires jumping through some hoops to make it work, as Apple does not support this directly. With that in mind, the subtle differences between browser support become a limitation similar to the difference between native app platforms itself.
\nFor applications to reach the hands of the users, it needs a distribution platform. For native applications, the answer to this is straightforward: Apps are distributed through the native app store, be it Google Play Store or iOS App Store. However, for PWAs, it is more complicated. Distribution can be as simplistic as passing around the application's URL, and anyone who knows the link can access the app. This method has the added advantage due to Google and other search engines/web crawlers naturally picking up the app URL and returning it as a search result.
\nHowever, this method is passive and requires the user to know the application beforehand. Developers might prefer the more traditional way of having the app listed in an app store, which is possible but requires them to jump through the same hoops as native applications, following all of the distributor guidelines, which removes its advantage compared to traditional apps.
\nSo with everything considered, should you go the route of the progressive app? We do not aim to give a concrete answer, but instead a suggestion: If your application can be made a PWA, it is a good idea to do so. At the current moment, progressive apps are an evolution of web apps. Compared to the feature set that users are already familiar with in native apps, progressive apps still trail behind.
\nThis means that if the scope of the application is complex enough, PWA may not provide you with enough tools to do the job. With that said, if your application can be fully implemented with the set of tools that PWA provides, then going this route may net you added benefits that are unique to progressive apps. Are progressive apps the future? It definitely has the potential, but a large part of that answer depends on whether we can leverage its platform to build productive solutions with it today.
\n","frontmatter":{"date":"February 04, 2021","updated_date":null,"title":"PWA vs Native App: Which one is Better for you?","tags":["Progressive App","PWA","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/fd52b7dab79665e5aa8e0074faec8e6c/58556/index.webp","srcSet":"/static/fd52b7dab79665e5aa8e0074faec8e6c/61e93/index.webp 200w,\n/static/fd52b7dab79665e5aa8e0074faec8e6c/1f5c5/index.webp 400w,\n/static/fd52b7dab79665e5aa8e0074faec8e6c/58556/index.webp 800w,\n/static/fd52b7dab79665e5aa8e0074faec8e6c/99238/index.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-constructor-get-initial-state/"},"html":"One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s constructor and the built in method getInitialState. While the simple answer to this question is indeed simple: “getInitialState is the ES5 friendly method to define the initial state of a React component,” there are a couple more details around getInitialState as well as React’s ES5 support that are interesting and useful to highlight.
One of the fundamental differences between ES5 and ES6 in regards to React implementation is the new class keyword. It allows definition of React components as classes, which is a familiar data structure for anyone who has had experience with more traditional object-oriented languages such as Java or C++. The class structure also allows for natural organization of the component’s elements like state, props, lifecycle methods and member functions. However, ES5 did not provide the same convenience. So instead of defining a React component as a class:
class HelloWorld extends React.Component {\n render() {\n return <span>Hello World</span>;\n }\n}You would rely on a helper module called create-react-class:
var createReactClass = require('create-react-class');\nvar HelloWorld = createReactClass({\n render: function() {\n return <span>Hello World</span>;\n }\n});And it is within the object passed into create-react-class that you could define an initial state by populating the getInitialState attribute:
var HelloWorld = createReactClass({\n getInitialState: function() {\n return {name: this.props.name};\n },\n render: function() {\n return <span>Hello {this.state.name}</span>;\n }\n});Which, in ES6 implementation would be the equivalent of:
\nclass HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name\n }\n }\n render() {\n return <span>Hello {this.state.name}</span>;\n }\n}One difference worth noting is that the create-react-class method automatically binds this to every attribute method. This no longer holds true if you define React components using the common ES6 class syntax, making it so that you have to manually bind this to internal methods:
class HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name\n }\n\n this.changeName = this.changeName.bind(this);\n }\n changeName() {\n this.setState({ name: "World" });\n }\n ...\n}Or otherwise use the “arrow function” shorthand which takes care of binding:
\nclass HelloWorld extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: props.name\n }\n }\n changeName = () => {\n this.setState({ name: "World" });\n }\n ...\n}Since the update to ES6, there have been multiple new React iterations. You could now forgo the constructor declaration altogether and just declare state inline as a class member, or utilize React Hooks as a new way to initialize states. However, the ES5 support remains useful for legacy systems and adds to the overall flexibility of React as a toolset.
You can read more about React's ES5 support in the official doc entry here, and the v0.13.0 beta release blog entry here, for the respective ES6 changes.
\n","frontmatter":{"date":"January 05, 2021","updated_date":null,"title":"Constructor vs getInitialState in React","tags":["JavaScript","React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d152aa4ad7b599edbdd9b6465d8f014b/58556/index.webp","srcSet":"/static/d152aa4ad7b599edbdd9b6465d8f014b/61e93/index.webp 200w,\n/static/d152aa4ad7b599edbdd9b6465d8f014b/1f5c5/index.webp 400w,\n/static/d152aa4ad7b599edbdd9b6465d8f014b/58556/index.webp 800w,\n/static/d152aa4ad7b599edbdd9b6465d8f014b/2eb2f/index.webp 865w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/node-http-module-server/"},"html":"In this blog, I will show you how to create a NodeJS server using core http module. We will create a simple server that will serve static assets and a simple API to return some JSON data.
\nIn the process, you will also learn about the request and response objects provided by NodeJS, which are used by every other framework built on top of NodeJS like ExpressJS etc.
\nWith that in mind, let's begin.
\nCreate a folder by any name and initialize a node project in it using npm init -y
package.json file in your directory.server.js in your directory.public at the root of your project.Add a file named index.html with the following content\nindex.html
<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>Demo</title>\n</head>\n<body>\n <h1>Coming from the Root </h1>\n</body>\n</html>Now we will create a node server that will serve our index.html file when a request is sent to /.
server.js
const http = require('http');\n const path = require('path');\n const fs = require('fs');\n const PORT = 3000;\n const hostname = 'localhost';\n\n // createServer is the http method used to create a web server that takes a callback.\n const server = http.createServer(serverHandler);\n\n // callback function definition\n function serverHandler(req, res) => {\n if(req.method === 'GET' && req.url === '/') {\n let filePath = path.resolve(__dirname, 'public/index.html')\n let fileExists = fs.existsSync(filePath);\n if (!fileExists) {\n res.statusCode = 404;\n res.setHeader('Content-Type', 'text/html');\n res.end(`\n <html>\n <body>\n <h3>Page not found</h3>\n </body>\n </html>`)\n } else {\n res.statusCode = 200;\n res.setHeader('Content-Type', 'text/html');\n fs.createReadStream(filePath).pipe(res);\n }\n }\n }\n\n server.listen(PORT, hostname, () => {\n console.log(`Server running at ${hostname}:${PORT}`); \n })Let's understand what just happened in the above code snippet:
\ncreateServer method provided by node http module. createServer takes a callback which will be called when there is an incoming request with req and res parameters.serverHandler, we have used an if block to check if the incoming request is a GET request and the request url is / then code inside if statement will be executed.index.html which we want to serve exists or not in our public directory using existsSync, which synchronously checks for the file at the given path and returns true if the file exists.createReadStream method from fs module and pipe it into res object which sends it to the browser.server.listen to start our server on the PORT 3000.Now it's time to test our server. Run node server.js at the root of the project, and you will see the server running on PORT 3000.\nOpen your browser and enter localhost:3000 in the address bar, and you will get the HTML response.
Now we will expand our callback, which we passed to createServer to handle one more GET request at /notes, which will return an array of notes to the browser.
Update the serverHandler function with the following code snippet in your server.js file
server.js
...\n function serverHandler(req, res) {\n if(req.method === 'GET' && req.url === '/') {\n let filePath = path.resolve(__dirname, 'public/index.html')\n let fileExists = fs.existsSync(filePath);\n if (!fileExists) {\n res.statusCode = 404;\n res.setHeader('Content-Type', 'text/html');\n res.end(`\n <html>\n <body>\n <h3>Page not found</h3>\n </body>\n </html>`)\n } else {\n res.statusCode = 200;\n res.setHeader('Content-Type', 'text/html');\n fs.createReadStream(filePath).pipe(res);\n }\n }\n // Newly added code \n if (req.method === 'GET' && req.url === "/notes") {\n const notes = [\n {\n id: 1,\n title: "Demo Note"\n },\n {\n id: 2,\n title: "Another Note"\n }\n ]\n\n res.statusCode = 200;\n res.setHeader('Content-Type', 'application/json');\n res.end(JSON.stringify(notes));\n } else {\n res.setHeader('Content-Type', 'application/json')\n res.end(JSON.stringify({message: `${req.method} is not supported for ${req.url}`}))\n } \n }\n ...if statement to handle the request coming at /notes .application/json for the browser to process it accordingly.With that, we have created a simple node server to serve static content as well a simple API to return JSON data.
\nWe saw how we had to handle each request with its method and the URL. With an increasing number of routes, such things become hard to manage as we will have to add multiple if statements. And that's why frameworks like ExpressJS, HapiJS exist, which makes creating servers in NodeJS very easy. But it's important to know what happens under the hood as there is no magic happening in those frameworks.
\nThe complete code for this blog can be found at Github Repo.
\n","frontmatter":{"date":"November 27, 2020","updated_date":null,"title":"NodeJS Server using Core HTTP Module","tags":["NodeJs","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/8d8c41d9ba7fce1f1b5c6d72e0982463/58556/coverImage.webp","srcSet":"/static/8d8c41d9ba7fce1f1b5c6d72e0982463/61e93/coverImage.webp 200w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/1f5c5/coverImage.webp 400w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/58556/coverImage.webp 800w,\n/static/8d8c41d9ba7fce1f1b5c6d72e0982463/99238/coverImage.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/react-router-basics/"},"html":"React thrives on being one of the premier tools to build single-page applications, which used to be a fairly foreign concept when I started building my first React app. Back then, I was used to the concept of serving separate web pages whenever the user redirects from an URL path to another, and it was rather challenging at first to wrap my head around how React handles navigation.
\nWith that in mind, this blog post aims to lay down and explain the basic aspects of navigation using React Router, one of the most, if not the most, popular solutions for navigation within a React app.
\nThroughout the first section below, please reference this CodePen example.
\nAs hinted at in the preface of this writing, routing in React does not involve replacing the HTML, CSS or JavaScript resources currently being served or reloading the browser content. Instead, using libraries like react-router allows containers to be swapped in and out dynamically based on the current URL location, and this all happens client-side. With that in mind, React Router can more generally be understood as a wrapper that handles conditional rendering based on URL path.
To accomplish this, the basic building blocks that developers get to play with are <Route>, <Switch> and <Link>. Let us look at a basic example making use of these 3 components:
First off, let’s create some simple text components. These components are stand-ins for actual components to be swapped in and out in navigation. HelloBanner will be a div containing the simple message “Hello”, and WorldBanner containing “World!”:
\nconst HelloBanner: React.FunctionComponent = () => {\n return (\n <div id="banner_hello" className="banner">\n <span>Hello Banner is currently displayed. We are currently in path "/hello"</span>\n </div>\n ) \n}\n\nconst WorldBanner: React.FunctionComponent = () => {\n return (\n <div id="banner_world" className="banner">\n <span>Hello Banner is currently displayed. We are currently in path "/world"</span>\n </div>\n ) \n}Now let’s imagine the layout of a conventional web application with a top navigation bar. The navigation bar contains links to each section of the app and the body would show the content of the current webpage. The skeleton code for that container would look something like this in React:
\nclass AppContainer extends Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n <div id="div_app_container" className="app-container">\n <div id="div_nav" className="nav-bar">\n <span>Navigation bar</span>\n <Link to="/hello">\n <span>Link to /hello</span>\n </Link>\n <Link to="/world">\n <span>Link to /world</span>\n </Link>\n <Link to="/clearlyinvalidpath">\n <span>Link to a clearly invalid path.</span>\n </Link>\n </div>\n <div id="main_container" className="main-container">\n <span>Main Container</span>\n <Switch>\n <Route exact path="/">\n <div>\n <span>\n Default container. We are in root path\n </span>\n </div>\n </Route>\n <Route path="/hello" component={HelloBanner} />\n <Route path="/world">\n <WorldBanner />\n </Route>\n <Redirect to="/" />\n </Switch>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <BrowserRouter>\n <AppContainer />\n </BrowserRouter>,\n document.getElementById("app")\n);If you are currently looking at the render of this structure from the CodePen, you would see this very simple UI:
\n![\"Example](\"/a0ae6207fefc74ee8f42e98d08082ff6/image1.webp\")
Clicking on the <Link>’s in the navigation bar will “navigate” you to the corresponding paths. In effect, what this does is twofold:
<Route> components to rerender according to the current path.This is demonstrated through the example app. Once you click the links to /hello or to /world, the corresponding component will be swapped in under the <Switch> container.
A couple of noteworthy things from the code example:
\n<Switch> component allows swapping between <Route>’s and render the correct component with a given URL path. However, <Route> components do not have to be wrapped inside a <Switch>. While standalone, a <Route> will simply render when the URL path matches its own path prop.<Redirect> component at the end acts as the default route. In case none of the other routes match with the current URL path, it simply redirects the user back to root.The workflow described above is intuitive from the end user’s point of view. However, there are times when the application’s internal logic demands a redirection to be performed following app events. In these occasions, React Router leverages the history object to allow for programmatic redirection:
For a traditional setup, the history object can be accessed through a component’s props through the user of the withRouter higher order component:
import * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface SampleComponentProps extends RouteComponentProps {\n // props go here\n}\nexport interface SampleComponentStateState {\n // states go here\n}\n\nclass SampleComponent extends React.Component<SampleComponentProps, SampleComponentStateState> {\n constructor(props: any) {\n super(props);\n }\n\n performRedirect = () => {\n const { history } = this.props;\n\n history.push("/desired-pathname")\n }\n\n render() {\n return <div/>\n }\n}\n\nexport default withRouter<SampleComponentProps>(SampleComponent);In the example above, you can see all the components required to extract the history object, as well as the history.push() call to perform the redirection.
For a more updated approach, React Router introduced the hook useHistory, which should blend in more naturally when programming with a React Hooks intensive workflow.
Certain redirects are unique in nature, and/or contain certain information about the previous user activity that you might want to pass on to the new component. In this case, the information can be passed through history states into the new component, which will then perform custom behavior based on these states:
\nWhen using <Link> component redirect, populate the to prop with an object that contains the new path as well as states, instead of just the string for pathname:
<Link\n to={{\n pathname: "/desired-pathname",\n state: {\n stateName: "state to be passed."\n }\n }}\n>\n Link text here.\n</Link>The same object can be used as argument to the history.push() call to achieve similar results:
history.push({\n pathname: "/desired-pathname",\n state: {\n stateName: "state to be passed."\n }\n})Once the state has been included with the redirection, on the receiving end, you can extract the state from the history.location.state object:
import * as React from "react";\nimport { RouteComponentProps, withRouter } from "react-router-dom";\n\nexport interface ReceivingComponentProps extends RouteComponentProps {\n // props go here\n}\nexport interface ReceivingComponentStateState {\n // states go here\n}\n\nclass ReceivingComponent extends React.Component<ReceivingComponentProps, ReceivingComponentStateState> {\n constructor(props: any) {\n super(props);\n }\n\n componentDidMount() {\n const { history } = this.props;\n if (history.location.state && history.location.state.stateName) {\n // stateName can be accessed here if it is passed in from a previous redirect action.\n console.log(history.location.state.stateName);\n }\n }\n\n render() {\n return <div/>\n }\n}\n\nexport default withRouter<ReceivingComponentProps>(ReceivingComponent);The state access is in componentDidMount in the example above.
At this point, hopefully, we have covered all the big bullet points to help you get started with navigation using React Router. I hope this write-up has been informative and helpful to your understanding of navigation in React, as well as helping you build your next React application.
\n","frontmatter":{"date":"November 20, 2020","updated_date":null,"title":"React Router Basics: Routing in a Single-page Application","tags":["JavaScript","Node","React","React Router"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4bcd64f320b4486ea6ddb7147ff85a96/58556/index.webp","srcSet":"/static/4bcd64f320b4486ea6ddb7147ff85a96/61e93/index.webp 200w,\n/static/4bcd64f320b4486ea6ddb7147ff85a96/1f5c5/index.webp 400w,\n/static/4bcd64f320b4486ea6ddb7147ff85a96/58556/index.webp 800w,\n/static/4bcd64f320b4486ea6ddb7147ff85a96/99238/index.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/visualizing-data-using-leaflet-and-netlify/"},"html":"Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data better and derive better insights.
\nDifferent map visualizations can highlight different aspects of a dataset. Heatmaps, Choropleth maps and Clustering maps are frequently used for this purpose.
\nIn this blog, I shall go over using a powerful JavaScript library to build a web map and deploy it on Netlify.
\nThe Leaflet is a great library for implementing interactive web maps as it provides many UI features, like smooth canvas panning, zooming, mouse events, and all the involved work in animations, which one would otherwise have to implement from scratch.
\n\n\nLeaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.
\nsource: leafletjs.com
\n
![\"Leaflet](\"/7efc920eb3f4c7321711cf133a19b18c/leaflet.webp\")
We can include Leaflet in our application by including the CSS stylesheet and the JS file from the unpkg CDN. Let's start building the application by starting with the following code at the project root. Create a file named index.html and put the following markup in it. The map shall be rendered in div#mapid.
<!--index.html-->\n<!DOCTYPE html>\n<html lang="en">\n\n <head>\n <meta charset="UTF-8">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <title>MapViz</title>\n <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />\n <style>\n #mapid {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n </style>\n </head>\n\n <body>\n <div id="mapid"></div>\n <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n </body>\n\n</html>Now, we gather a link to the GeoJSON file for metro stations in Washington D.C., that we shall be visualizing, from the MapBox documentation. It should look similar to the following:
\nhttps://docs.mapbox.com/help/data/stations.geojsonCreate a new JavaScript file named script.js in the same directory as the HTML file. Include this file in the web page by adding the following line to it.
<!--index.html-->\n ...\n <body>\n ...\n <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n <script src="script.js"></script>\n </body>\n ...In script.js, we can use the Fetch API to make an AJAX request and get the data as a response to a GET request using promises and take a look at what we are dealing with.
// script.js\nlet data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nfetch(dataUrl)\n .then(response => response.json())\n .then(data => console.log(data))\n .catch(err => console.error(err));We can take a look at the data in the Developer Console. We observe that it is a JavaScript object. The various properties associated with the data can be viewed by checking the individual features.
\n{\n "type": "FeatureCollection",\n "features": [\n ...\n {\n "geometry": {\n "type": "Point",\n "coordinates": [-76.9750541388, 38.8410857803]\n },\n "type": "Feature",\n "properties": {\n "description": "Southern Ave",\n "marker-symbol": "rail-metro",\n "title": "Southern Ave",\n "url": "http://www.wmata.com/rider_tools/pids/showpid.cfm?station_id=107",\n "lines": ["Green"],\n "address": "1411 Southern Avenue, Temple Hills, MD 20748"\n }\n },\n ...\n ]\n}Before we begin adding the layers to our map, we need to instantiate a Leaflet map object with the DOM ID of the map container and center it on our point of interest at a specified initial zoom level.
const map = L.map('mapid').setView([38.8977, -77.0365], 15);As we need a base map (the base layer) for our map, we can use one that is provided by Mapbox. In order to use that, you need a Mapbox API access token that you can create on their portal.
\nThe following snippet instantiates a tileLayer object and adds it to our map:
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n maxZoom: 18,\n id: 'mapbox/streets-v11',\n tileSize: 512,\n zoomOffset: -1,\n accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);We can use the following snippet to parse the GeoJSON and add it to the map.
\nL.geoJSON(data).addTo(map);Replace the code in script.js with the following, and refresh the web page:
let data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nconst map = L.map('mapid').setView([38.8977, -77.0365], 15);\n\nL.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n maxZoom: 18,\n id: 'mapbox/streets-v11',\n tileSize: 512,\n zoomOffset: -1,\n accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);\n\nfetch(dataUrl)\n .then(response => response.json())\n .then(data => {\n L.geoJSON(data).addTo(map);\n })\n .catch(err => console.error(err));As the dataset contains Point features, markers will be added at the respective coordinates. Our web page will now look like the following:
![\"Map](\"/c9f8918ca84e4084cdde9b01eb30f2ad/mapInitial.webp\")
We can show tooltips upon clicking on the markers by modifying the code as follows, to include some custom HTML using the properties in the feature, in the popup:
\n// script.js\n ...\n fetch(dataUrl)\n .then(response => response.json())\n .then(data => {\n L.geoJSON(data, {\n onEachFeature: function (feature, layer) {\n layer.bindPopup(\n '<h4>'\n + feature.properties.title\n + '</h4>'\n + '<p>' \n + feature.properties.address\n + '</p>'\n );\n }\n }).addTo(map);\n })\n .catch(err => console.error(err));\n ...Uupon clicking any marker, we will now see the following popup:
\n![\"Map](\"/d9a6e0e68d17fb7cdd0e12d87710ef35/mapPopup.webp\")
We can also customize the marker icon using the pointToLayer option of the geoJSON constructor as follows:
// scripts.js\n ...\n L.geoJSON(data, {\n pointToLayer: function (feature, coords) {\n return L.marker(coords, {\n icon: new L.Icon({\n iconSize: [30, 30],\n iconAnchor: [15, 15],\n popupAnchor: [1, -24],\n iconUrl: 'https://cdn.iconscout.com/icon/free/png-256/metro-subway-underground-train-railway-engine-emoj-symbol-30744.webp'\n })\n });\n },\n onEachFeature: function (feature, layer) {\n layer.bindPopup(\n '<h4>'\n + feature.properties.title\n + '</h4>'\n + '<p>'\n + feature.properties.address\n + '</p>'\n );\n }\n }).addTo(map);\n ...Our updated web page will now look like the following:
\n![\"Map](\"/d40f991754a9a42ad009adce6c048fe1/mapIcon.webp\")
Now, we can move on to deploy this web page on Netlify.
\nNetlify is an awesome platform to host your web applications. It also offers many other features such as serverless functions.
\n![\"Netlify](\"/ff0c5f52e4df420ed6d72e2e1aadcc07/netlify.webp\")
Once you have pushed your web page to a Git repository, hosted either on GitHub, GitLab or BitBucket, navigate to Netlify and click on the New Site from Git button.
\n![\"Starting](\"/0a99824fbd69eb99c04d16316448f05b/netlifySigningUp.webp\")
Next, select your Git provider and your repository:
\n![\"Git](\"/cd777ecec352e4ac8c0aa3849788b084/gitRepo.webp\")
![\"Git](\"/9b6e31356e117401e9c79c2d54e36047/repoSelection.webp\")
Go ahead with the defaults, and now your site shall be published on Netlify, and all future pushes should result in a Netlify deployment:
\n![\"Netlify](\"/9875f707227b97720d89714f152c4b92/deployment.webp\")
Nice! Now we have a web map, even though a very basic one, live! Check out the Leaflet documentation for more!
\nDemonstration: Priceless Poincare
\nGitHub: leaflet netlify starter
\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"title":"Visualizing Data using Leaflet and Netlify","tags":["GIS","Serverless","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0618556701030926,"src":"/static/f09ca52cdb62e663db2958fa17ee7f4a/58556/map.webp","srcSet":"/static/f09ca52cdb62e663db2958fa17ee7f4a/61e93/map.webp 200w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/1f5c5/map.webp 400w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/58556/map.webp 800w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/99238/map.webp 1200w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/42314/map.webp 1366w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudipto Ghosh","github":"sudiptog81","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/breaking-down-this-keyword-in-javascript/"},"html":"The this keyword is, without doubt one of the most difficult Javascript concepts to understand. However, understanding it is key to being a great developer because it is an extremely common part of Javascript code.\nIn simple terms, this refers to the object it belongs to. It can also be defined as a property of an execution context, which is always a reference to an object when not in strict mode. It is worthy to note that the 'this' keyword finds usage mostly in the context of object oriented programming. With that in mind, the 'this' keyword will refer to the object to which it belongs; This is true most of the times. Let us use an example to explain this better.
let bellBoy = {\n firstName: "Andrew",\n lastName: "Mike",\n gender: "Male",\n age: 18,\n greet: function () {\n return (\n "Hi! I am " +\n this.firstName +\n " " +\n this.lastName +\n ", a bell boy and I am at your service"\n )\n },\n}\nconsole.log(bellBoy.greet())In the example above, there exists a bellBoy Object which consists of four properties and a greet method. When the greet method of the bellBoy object is called, can you figure out what will be returned? The console.log will print the following string: Hi! I am Andrew Mike, a bell boy, and I am at your service.
\nHow did 'this.firstName' and 'this.lastName' translate to Andrew and Mike respectively? Well, to answer that, let us go back to the definition of the 'this' keyword. It was said earlier, that it refers to the object it belongs to. So, in the example above, the 'this' keyword refers to the bellBoy object, which is the owner of the greet() method. The dot(.) operator can be used to access members of the object as defined by the 'this' keyword. In the current console.log(), we are using the dot(.) operator to call or access the greet() method. In the same vein, we can use the dot(.) operator to access the properties method of the bellBoy object like the gender and the age.
\nThe definition of this as the property of an execution context is much more accurate because depending on how it is called at runtime, 'this' can refer to many things. Let's dive deeper.
\nthis in the method of an objectFirst, a method is used to refer to a function that is a member of an object. All methods are functions, but not all functions are methods. Now, when the 'this' keyword is used inside a method, it refers to the owner of the method it is used in. Let's use the example defined above to take a deeper look at 'this' in this context.
\ngreet : function() {\nreturn "Hi! I am " + this.firstName + " " + this. lastName + ", a bell boy and I am at your service";\n}In this example, this which is used inside the greet() method refers to the bellBoy object, which is the owner of that greet() method.
this in the Global ContextWhen the 'this' keyword is used alone, not inside any function or better referred to as being used in the global context, the keyword refers to the global object. The global object refers to the owner of the 'this' keyword in this case. When it is in a browser window, this global object refers to the window object.
\nlet y = this\nconsole.log(y)![\"this](\"/dd362bb8f31d8c29260c56a36e37d91c/global-context.webp\")
.
Since that is true, if you make a strict comparison between the value of this and the window object, we get the boolean value of true.
\nIf you run this javascript file inside your computer using a tool like node, this keyword refers to an object of type of object, like so......
\n![\"system\"](\"/c0ca517e87898709c37d97cd70da3d1e/system.webp\")
this in a functionNote, we are talking about what the keyword 'this' refers to when it is used in an ordinary function, one not affiliated with any object. Just a function is standing on its own.\nIn such a javascript object, the default value of 'this' is the owner of the function. If the code is not in strict mode and it is not been set to a member of an object, then this defaults to the global object.
function function1() {\nreturn this\n}\nfunction1() === windowIn the example above, the value of the this keyword as used inside this function refers to the window object. This is why the output of the string comparison between funtion1 and the window object will equal to true because they hold the exact same value.
this in a funtion (Strict Mode)When in strict mode however, Javascript does not permit default binding, and because of that, it is undefined. Put simply strict mode prevents sloppy code. Thinking it from a programmers' point of view, there is most likely no good reason to want to access the value of this in a function since it will return the window object. In most cases, we access the this keyword because we want to get some other properties from its owner. Strict mode enforces this. So when in this mode, 'this' is undefined.
"use strict"\nfunction function1() {\nreturn this\n}\nfunction1() === windowAs can be seen in the above example, in the strict mode, the value of this inside a function is undefined.
this when used inside Event HandlersAn event handler is an action carried out when an event is perceived to have happened. For example, when a button is clicked, we as programmers might decide hide the button. To achieve that the click event must be listened for, and an event handler must be thrown to take the action when that event is triggered. In the case of event handlers, the this keyword refers to the element that received the event, like this:
window.addEventListener("keydown", function (event) {\n// `this` will point to `element`, in this case the window object\nconsole.log(this.event.key)\n})In the example above, an event listener of keydown is being listened for by the window object, and once that event is perceived, a function that takes in the event will be run. The job of that function is to console.log this.event.key. If you try to run this code on the browser, you will get back whichever key the user pressed. Hence, in this case, this refers to the window object which is the one receiving the object, and as with all other objects, its properties can be accessed using the dot(.) operator. The value of this when used in an event handler will refer to the receiver of the event, which can be the window object in this case or any other local HTML elements we might create.
this in an inline Event Handler<button onclick="alert(this.tagName.toLowerCase());">\nI am a this\n</button>It is a little bit different when 'this' is used in an inline event handler. In this case, its value is set to the DOM element on which the listener is placed. In the example above, the button is returned because the onClick event is being accepted by the DOM element whose tag name is returned in the alert method.
\nAnd many more. For a full description of this keyword, check out these links:
It might be a good idea to run the snippets of code to be sure that you understand how they work. To do this, use the free webmaker or the codeplay code playgrounds.
\n","frontmatter":{"date":"October 06, 2020","updated_date":null,"title":"Breaking down the 'this' keyword in Javascript","tags":["JavaScript","JSConcepts"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/05cffb8f923dacd05e1e932759a0028e/58556/this-image.webp","srcSet":"/static/05cffb8f923dacd05e1e932759a0028e/61e93/this-image.webp 200w,\n/static/05cffb8f923dacd05e1e932759a0028e/1f5c5/this-image.webp 400w,\n/static/05cffb8f923dacd05e1e932759a0028e/58556/this-image.webp 800w,\n/static/05cffb8f923dacd05e1e932759a0028e/99238/this-image.webp 1200w,\n/static/05cffb8f923dacd05e1e932759a0028e/7c22d/this-image.webp 1600w,\n/static/05cffb8f923dacd05e1e932759a0028e/25f09/this-image.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Efereyan Karen","github":"KarenEfereyan","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/ajax-and-xhr-using-plain-javascript/"},"html":"Ajax stands for Asynchronous Javascript and XML. Ajax is a programming technique that allows us to create dynamic, complex, and asynchronous web applications. Ajax allows us to send and receive data from the webserver asynchronously without interfering with the current state or behavior of the web page or application.
\nXHR is the XMLHttpRequest Object which interacts with the server. Ajax technique in the nutshell leverages the XHR request to send and receive data from the webserver. This object is provided by the browser’s javascript environment. It transfers the data between the web browser and server.
\n![\"Ajax](\"/1513d4dbffc972d8a7d67063cf7d9886/ajax.webp\")
Dynamic content modification of web page: Using Ajax reloading of a web page is not required. The content of a web page can be modified dynamically by calling the XHR request in the background and changing the content using DOM Modification.
\nTo send and receive data from the server and implement the Ajax simple steps are explained below:
\nvar xhrobj = new XMLHttpRequest();xhrobj.open('GET','example.com/get');\nxhrobj.send();| \n | \n |
|---|---|
| open(method, url[, async[, user[, password]]]) | \nIt initializes the request. | \n
method | \nrequest type such as GET,POST etc | \n
url | \nRequest URL | \n
Async | \ntrue or false | \n
user | \nUsername for basic authentication | \n
password | \nPassword for basic authentication | \n
| send(body) | \nIt sends the request to the server body : it is optional to send body of data with request. | \n
In case of sending POST request :
\n xhrobj.open("POST", 'example.com/post', true);\n xhrobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");\n xhrobj.send("username=john");| \n | \n |
|---|---|
setRequestHeader(header,value) | \nIt sets the header for the HTTP request. | \n
header | \nname of header parameter | \n
Value | \nvalue of the parameter | \n
On completion of the request, the server sends the response to the request.
\nxhrobj.onreadystatechange = function () {\n if (this.readyState == 4 && this.status == 200) {\n document.getElementById("response").innerHTML = xhrobj.responseText;\n }\n}| \n | \n |
|---|---|
onreadystatechange = callback() | \nIt is a EventHandler called when the readyState attribute changes. | \n
readyState attribute | \nIt is an attribute that returns the current state of XMLHttpRequest object | \n
status attribute | \nIt is an attribute that returns the status code to the HTTP XHR request. | \n
responseText attribute | \nIt is an attribute that returns the DOMstring response as the text. | \n
Implementing the Ajax technique by using the XHR in javascript instead of going with using other javascript library functions like jQuery.ajax has advantages as well. For example, it gives you the freedom to embed your application or script with other applications or platform even if the particular library is not used by other applications. Thus it also helps in code reusability.
\n","frontmatter":{"date":"September 22, 2020","updated_date":null,"title":"Ajax and XHR using plain JS","tags":["XHR","JavaScript","AJAX"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/c19cc11ae05c7a1224ef47b974bbf68f/58556/index.webp","srcSet":"/static/c19cc11ae05c7a1224ef47b974bbf68f/61e93/index.webp 200w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/1f5c5/index.webp 400w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/58556/index.webp 800w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/99238/index.webp 1200w,\n/static/c19cc11ae05c7a1224ef47b974bbf68f/135cd/index.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Apeksha Gupta","github":"ApekshaAgarwal","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/understanding-event-loop/"},"html":"We often hear that JavaScript is a single-threaded programming language, which means it executes all of the instructions line by line in a synchronous manner. Thus since everything works on the main thread, there seems to be no possibility of executing parallel processes in JavaScript.
\nBut now let's assume that we have a function which is taking some time to execute, for example in the below function which is having a loop over 10k times, the console.log() would be executed once the loop is over and in the meantime, our UI interaction with the browser would be interrupted.
function someTimeTakingFunc() {\n for(var i = 0; i < 10000; i++) {\n\n }\n console.log("Loop has been executed")\n}The above scenario seems to be impractical, but there might be cases where any function can take an indeterminate amount of time and our main thread would be blocked, for example calling an API for fetching data from the server-side. And this is the practical use case we are dealing with in development every day. So how JavaScript handles this and where does the event loop come into the picture? We will surely get to know this, but before moving further, let's understand the basic memory architecture in JavaScript.
\nThe Javascript Engine consists of two main components:
\nCall stack is a LIFO (last in first out) data structure. All of the function calls are pushed into this call stack and are said to be a frame. In short function, a stack is nothing but the simple stack data structure which keeps track of the function currently being executed.
\nLet's understand the above concept with the example of the following code snippet:
\n function square(b) {\n return b * b ; \n }\n\n function cube(x) {\n return x * square(x)\n }\n\n console.log(cube(8));The above snippet is an example of defining a cube function, which is calling a square function, to find the cube of a number passed in the argument. But how does this work in call stack? Let's understand step by step:
console.log() line, this code/function is pushed into the call stack. console.log() function is called the cube function, hence this function is pushed into the stack. cube function is calling the square function, and now this would be pushed into the stack. square function is executed, and the result is returned, then the square function is popped out of the stack. square function result, so cube function would be executed and popped out of the call stack. console.log() would be executed and this function would be popped out of the stack and the stack would now be empty.![\"Call](\"/504d2520aed0a4833e4f7642bd8b5ccd/call_stack.webp\")
Now since we have understood that call stacks are possible to execute the function in a step by step manner, there seems to be no possibility of keeping something into parallel. But there is something called \"WEB APIs\" in the browser environment, which is some additional capabilities provided by browsers in addition to JavaScript Engine.
\nThese are the additional functionality, that helps us perform some additional tasks which cannot be run using the main thread. However, since our JavaScript runtime is single-threaded, it can export some tasks to the WEB APIs which helps us to respond to multiple threads. Example of some web APIs are:
\nFor instance, setTimeout() is called, the browser delegates the task to a different thread to calculate the time interval specified in the argument of the setTimeout() method, and once done this tread would then call the desired function in callback stack.
Since JavaScript is single-threaded, the browser has the capability of delegating the task in multiple threads. But how does the event loop help in these executions? But now we are good to go ahead with Event Loop.
\nSince we know that Web APIs delegate some of the tasks to different threads, on completion of these tasks, how the main or desired functions are sent to the call stack.
\nEvent Queue is a special queue, which keeps track of all the functions queues, which are needed to be pushed into the call stack.\nThe event queue is responsible for sending new functions to the track for processing. The queue data structure is required to maintain the correct sequence in which all operations should be sent for execution.
\nLet's take an example, in the following example, we are using a setTimeout function, which will log the \"executed\" string after 2000 milliseconds.
\n setTimeout(function(){\n console.log("Executed";)\n }, 2000);Now when a setTimeout operation is processed in the call stack. On its execution, it calls a web API which fires a timer for 2000 milliseconds. After 2000 milliseconds has been elapsed, the web API, place the callback function of setTimeout in the event queue.
Here need to mention that, just placing our function does not necessarily imply that the function will get executed. This function has to be pushed into the call stack for execution and here the event loop comes into the picture. The event loop waits for the function stack to be empty, once the call stack is empty this will push the first function from the event queue to the call stack, and in this way, the desired function will be called.
\n![\"Event](\"/fedd28728cea8794363a7aa0efaafb58/event_loop_illustration.webp\")
Thus event loop works in a cyclic manner, where it continually checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.
\n","frontmatter":{"date":"September 19, 2020","updated_date":null,"title":"Understanding event loop in JavaScript","tags":["JavaScript","event-loop","call stack","event queue","multi-threaded"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a6f240c6e67891e816aa9b6541eeb62b/58556/index.webp","srcSet":"/static/a6f240c6e67891e816aa9b6541eeb62b/61e93/index.webp 200w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/1f5c5/index.webp 400w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/58556/index.webp 800w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/99238/index.webp 1200w,\n/static/a6f240c6e67891e816aa9b6541eeb62b/135cd/index.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/adding-multi-threading-to-javascript-using-web-workers/"},"html":"In JavaScript, web workers allow developers to benefit from parallel programming. Parallel programming enables various computations to be performed at the same time by applications. It is helpful to consider the importance of web staff as an example of how humans benefit from parallel tasks.
\nWeb workers give us the ability to write multi-threaded Javascript that doesn't block the DOM. To some extent, even asynchronous operations block the DOM. On the other hand, Web employees help us solve this problem, escape from the single-threaded world, and achieve higher performance on our web pages.
\nWeb Workers are a simple means of running scripts in background threads for web content. Without interfering with the user interface, the worker thread may perform tasks.
\nFurthermore, they can use XMLHttpRequest to perform I/O (although the responseXML and channel attributes are always null) or fetch (with no such restrictions). Once created, by posting messages to an event handler defined by that code, a worker can send messages to the JavaScript code that made it (and vice versa).
\nWeb workers let you build background threads separate from the main execution thread, where the logic of the user interface is usually executed.
\nThe key benefit of this separation of workload is that inside an isolated thread and without interrupting or impacting the main thread's responsiveness and usability, you can perform costly operations.
\nWhen the background thread completes its mission, the main thread is informed of the results seamlessly via an event handled by standard JavaScript event handling.
\n<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Club JavaScripters</title>\n </head>\n <body>\n <button>Can you click me?</button>\n <h2>Let's do the party. 👯♂️</h2>\n <ul id="club"></ul>\n <script src="./main.js"></script>\n </body>\n</html>We just created a simple HTML page with a link to our javascript file which we will create in a moment.
\nmain.js and worker.js in the same folder.main.js
const persons = [\n {\n name: "Hriday",\n isMember: true,\n },\n {\n name: "Hridayesh",\n isMember: false,\n },\n {\n name: "Bob",\n isMember: true,\n },\n {\n name: "Daisy",\n isMember: true,\n },\n]\n\n// Our club container\nconst club = document.getElementById("club")\nlet worker\n\n/**\n * Function entry allows entry to people coming to our club\n */\nfunction entry(persons) {\n persons.forEach(person => {\n const { isMember, name } = person\n const listItem = document.createElement("li")\n listItem.textContent = name\n // if a person is not registered, register them first\n if (!isMember) {\n // create a new worker thread\n worker = new Worker("worker.js")\n // pass data to worker thread\n worker.postMessage(name)\n // listen to any data passed from worker thread\n worker.addEventListener("message", event => {\n if (event.data) {\n club.appendChild(listItem)\n }\n })\n } else {\n // if they are registered let them in\n club.appendChild(listItem)\n }\n })\n}\n\nentry(persons)worker.js
// addEventListener is directly accessible in worker file\naddEventListener("message", event => {\n // extract person passed from main thread from event object\n let person = event.data\n registerMember(person)\n})\n\nfunction registerMember(member) {\n // generating membership card takes some amount of time\n let i = 0\n while (i < Math.pow(10, 10)) {\n i++\n }\n // send result back to the main thread\n postMessage(true)\n close()\n}Now, the problem I faced when I went to the club with Hriday was that I (and everyone else after me) had to wait for my registration process to complete. We don't want that to happen to our virtual club and therefore we added one more person (thread) who is in charge of the whole registration process. Once registration is done, he will tell the main guy(thread) to let the new person in.
\nnew Worker('path to worker code') and pass that person to the worker thread using worker.postMessage() and add the person as a member after registering them.while loop. In real life this could be some cryptographic code, image processing or anything that is CPU intensive and might block the main thread and make the page unresponsive.postMessage and the main thread listens for it using onmessage handler and lets the person in the club i.e add to DOM.close().They talk to each other by message passing. Both workers and the main thread use postMessage to send data to each other and onmessage event handler to get data. The data is available inside the event's data property.\nYou can only pass one argument to postMessage. If you wish to pass multiple arguments use an object instead.
No you can not update DOM in a worker thread as worker threads run in a separate context from the main window and don't have access to window object and document object but they do have access to some of the window object's capabilities like Websockets and indexedDB.
It's important that the worker code must be in a separate file, which we can use to create a separate worker thread by using the Worker constructor and passing it the path of the file.
You were able to click that button because we did not block the main thread.\nTo see the difference add the following code to main.js and see the difference.
const persons = [\n {\n name: "Joe",\n isMember: true,\n },\n {\n name: "Hriday",\n isMember: true,\n },\n {\n name: "Hridayesh",\n isMember: false,\n },\n {\n name: "Bob",\n isMember: true,\n },\n {\n name: "Daisy",\n isMember: true,\n },\n]\n\n// Our club container\nconst club = document.getElementById("club")\nlet worker\n\nfunction entry() {\n persons.forEach(person => {\n const { isMember, name } = person\n const listItem = document.createElement("li")\n listItem.textContent = name\n if (!isMember) {\n let memeberAdded = registerMember(person)\n if (memeberAdded) club.appendChild(listItem)\n } else {\n club.appendChild(listItem)\n }\n })\n}\n\nentry()\n\nfunction registerMember(member) {\n let i = 0\n while (i < Math.pow(10, 10)) {\n i++\n }\n return true\n close()\n}You can share that answer in the comment section 😉 To get the full code you can visit to Github Repo
\nWe introduced web workers in this article, a technology that helps the web industry keep up with demanding web applications. This is achieved by providing web apps with a way to exploit multiprocessor and multi-threaded machines by granting JavaScript some multi-threaded superpowers.
\nDo you have any tips on web workers and the web as a forum for programming? Let us know in the comment section below.
\n","frontmatter":{"date":"September 09, 2020","updated_date":null,"title":"Web Workers: How to add multi-threading in JS","tags":["JavaScript","Web"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp","srcSet":"/static/2e0bb83a49cc5eb5b04a62c51cf495bb/61e93/cover.webp 200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/1f5c5/cover.webp 400w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/58556/cover.webp 800w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/99238/cover.webp 1200w,\n/static/2e0bb83a49cc5eb5b04a62c51cf495bb/135cd/cover.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/write-a-javascript-library-using-webpack-and-babel/"},"html":"In this blog we will learn how to create our own webpack configuration to bundle a small JavaScript utility library using webpack and babel.
\nLet's create the source code for our library. For that we will be create two utility functions into two separate files in our source folder.
\ndemo and run following command in it. $ npm init -yThe above command will create a package.json in your project root. I am using a --y to initialize it with default options.
Directory Structure
\ndemo\n |-- src/\n |-- package.jsonLet's add our source code into src directory:
src\n |--index.js\n |--capital.js\n |--addDOMContent.jsOur utility library contains two functions capital, to capitalize a string and addDOMContent, to add content to a web page, each in it's own module.
capital.js
function capital(string) {\n const capitalizedString =\n string.substring(0, 1).toUpperCase() + string.substring(1)\n return capitalizedString\n}\n\nexport default capitaladdDOMContent.js
function addDOMContent(content) {\n const node = document.createElement("h1")\n node.innerText = content\n document.body.appendChild(node)\n}\n\nexport default addDOMContentInside our index.js, we will import these two functions.
index.js
import capital from "./capital"\nimport addDOMContent from "./addDOMContent"\n\nexport { capital, addDOMContent }So far we got the source code ready but we still need to bundle it so that the browsers can understand and oh boy!, we need to support some older browsers too 🙄. Anyway, being responsible developers we are going to do that 😎.
\n $ npm i --save-dev webpack webpack-cli @babel/core @babel/preset-env babel-loaderWe need webpack to bundle our code and webpack-cli is a command-line tool that uses webpack to do the same. Also webpack requires babel-loader to transpile our ES6 code to ES5 before bundling (Remember, what I said about being responsible developers 😃).
4.1. Create a webpack.config.js at the root of the project.
webpack.config.js
const path = require("path")\n\nmodule.exports = {\n entry: path.resolve(__dirname, "src/index.js"),\n output: {\n path: path.resolve(__dirname, "dist"),\n filename: "index_bundle.js",\n library: "$",\n libraryTarget: "umd",\n },\n module: {\n rules: [\n {\n test: /\\.(js)$/,\n exclude: /node_modules/,\n use: "babel-loader",\n },\n ],\n },\n mode: "development",\n}There are a couple of things we need to understand about webpack configuration. Stay with me for a couple more minutes.
\nentry: In order for webpack to know where to start with, it needs to know the entry point to our app.module.rules: Each file in Node is treated like a module. Webpack itself understands only Javascript and JSON modules. Since we want to transpile ES6, we need babel-loader and webpack needs to know the rules on how to process the Javascript using the given loader.output: After creating the bundle, webpack needs to know what name to give it and where to put it.library and libraryTarget are used to expose our library where library being the name,$ here and libraryTarget is the property to configure, how the library will be exposed. Here we will be using UMD. UMD is a module system capable of working everywhere, be it in the client, on the server or elsewhere.mode: Webpack bundles code into either development mode (unminified) or in production(minified) mode. I am using a hard coded value here for the demo. You can set it using environment variables too.
\n4.2. Create a .babelrc file at the root of the project.
.babelrc
{\n presets: ["@babel/preset-env"]\n}@babel/preset-env let's us use the latest Javascript without any polyfills and syntax transforms.babel-loader uses babel under the hood.
By Now our Project Structure should look like this:
\ndemo\n|-- src\n| |-- index.js\n| |-- capital.js\n| |-- addDOMContent.js\n|-- webpack.config.js\n|-- .babelrc\n|-- package.json\n|-- node_modulesWe have added our source files, now let's add an npm script to build final code using webpack and modify the main property inside our package.json to point it to our bundled code.
package.json
{\n "name": "demo",\n "version": "1.0.0",\n "description": "",\n+ "main": "dist/index_bundle.js",\n+ "scripts": {\n+ "build": "webpack"\n+ },\n "keywords": [],\n "author": "Hridayesh Sharma",\n "license": "ISC",\n "dependencies": {},\n "devDependencies": {\n "@babel/core": "^7.10.4",\n "@babel/preset-env": "^7.11.0",\n "babel-loader": "^8.1.0",\n "webpack": "^4.44.1",\n "webpack-cli": "^3.3.12",\n }\n}In package.json the main property is a direction to the entry point of the module that the package.json is describing.
Run $npm run build to generate the bundled code and use it in the next step.
index.html
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Demo</title>\n </head>\n <body>\n <script src="dist/index_bundle.js"></script>\n <script>\n console.log($)\n alert($.capital("hridayesh"))\n $.addDOMContent("Well It Works Fine!!!")\n </script>\n </body>\n</html>Save it and run it in your browser. You will see the name capitalized.
\nThe complete code is available at LoginRadius Engineering Blog Sample Repo
\nThanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:
\n\n","frontmatter":{"date":"August 18, 2020","updated_date":null,"title":"Let's Write a JavaScript Library in ES6 using Webpack and Babel","tags":["JavaScript","Webpack","NodeJs"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b9b74a766ec8c0c06733b438fefae5ae/58556/cover.webp","srcSet":"/static/b9b74a766ec8c0c06733b438fefae5ae/61e93/cover.webp 200w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/1f5c5/cover.webp 400w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/58556/cover.webp 800w,\n/static/b9b74a766ec8c0c06733b438fefae5ae/cc834/cover.webp 1024w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Hridayesh Sharma","github":"vyasriday","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/build-pwa-using-vanilla-javascript/"},"html":"Today we will learn about the progressive web app, a very interesting and trending topic in current times, We will start with the basic steps first on how Progressive Web App works with vanilla js. Also, we’ll cover the concept of PWAS without using any of the frameworks, it's just a plain vanillaJS.
A Progressive Web app is an application which is built on top of HTML, JS and CSS with some extra features like service worker and manifest.json file. These extra features will give the ability to run the web application offline.
Various big companies are moving towards the progressive web app instead of native apps, as it gives some much flexibility to end-users. In some websites you can find the + icon at the right side of the address bar, those are progressive web apps.
\nWe will be using npm to start our project, so firstly create a root folder using this command mkdir first-pwa-app or another name of your choice then go to that directory by using this command cd first-pwa-app. Run npm init
npm init\n\npackage name: (first-pwa-app)\nversion: (1.0.0)\ndescription: This is the first PWA example\nentry point: (index.js): index.html\ntest command:\ngit repository:\nkeywords:\nauthor: Mohammed Modi\nlicense: (ISC)Once you fill up those details your final output of the package.json file will be below
{\n "name": "first-pwa-app",\n "version": "1.0.0",\n "description": "This is the first PWA example",\n "main": "index.html",\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1"\n },\n "author": "Mohammed Modi",\n "license": "ISC"\n}After that, we need to install the serve dependency to serve the application in localhost so install it using npm npm i serve --save. And then add a script in the package.json file.
{\n ...\n "scripts": {\n "test": "echo \\"Error: no test specified\\" && exit 1",\n "serve": "serve ."\n },\n ...\n}So finally our application is ready to serve in localhost. Now let's add some html and css
Create a directory for the app and add js, css, and images subdirectories. It should look like this when you’re finished:
\n/first-pwa-app # Project Folder\n /css # Stylesheets\n /js # Javascript\n /images # Image files.\n package.json\n package-lock.json\n index.html\n manifest.json\n sw.jsYou will understand the use of manifest.json and sw.js files once we move ahead in this tutorial.
When writing the code for Progressive Web Application we need to keep in mind two requirements
\nFor this app, to handle the first requirement we will add the static text in the Html page and for the second requirement, we will use the viewport.
\nSo let's add this code inside the index.html file.
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <title>My First PWA</title>\n <link rel="stylesheet" href="css/style.css" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n </head>\n <body class="fullscreen">\n <div class="container">\n <h1 class="title">My First PWA!</h1>\n </div>\n </body>\n</html>Next, we need to create a file css/style.css and paste this code inside this
body {\n font-family: sans-serif;\n}\n\n/* Make content area fill the entire browser window */\n/* Make content area fill the entire browser window */\nhtml,\n.fullscreen {\n display: flex;\n height: 100%;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n/* Center the content in the browser window */\n.container {\n margin: auto;\n}\n\n.title {\n font-size: 3rem;\n}Once you add the code save all the files and run the script npm run serve which will start your application in http://localhost:5000/
![\"First](\"/d45aabc5af10728bee3cc83c94921028/1.webp\")
As we can see our application is running in the browser, let test it using the LightHouse Extension in Google Chrome browser. For the best result, I recommend testing in an incognito tab of google chrome.
\n![\"First](\"/b371425d18bfe6a98cbc80f27e3d16ef/2.webp\")
As you can see we have green signals for both of our above requirement:
\nBut still, there is lots of work to do, so let's start with the first feature of PWA's.
\nLet's create a new file called manifest.json in the root of our application. To understand more about the manifest file check out [this doc]
{\n "name": "My First Progressive Web app",\n "short_name": "First PWA",\n "lang": "en-US",\n "start_url": "/index.html",\n "display": "standalone",\n "background_color": "white",\n "theme_color": "white"\n}Now update the index.html head tag by adding the manifest.json file as a link
<head>\n ...\n <link rel="manifest" href="/manifest.json" />\n ...\n</head>We should also declare the theme colour which should match with your manifest.json file as meta tag.
<head>\n ...\n <meta name="theme-color" content="white" />\n ...\n</head>Once you run the lighthouse test again you can see we got green signals in some points like
\n![\"Improving](\"/f3c402b3b411ef9ff23a4a52cf37c143/3.webp\")
Still, we need to add more attributes to our manifest.json files like icons so let's add the icons inside the images folder, I have used to icons pwa-icon-256.webp and pwa-icon-256.webp for this demo you can find in this repo. You can use various sizes in it. And finally, add the favicon.webp in the root of the project.
So let's add the icons attribute after the short-name
{\n "name": "My First Progressive Web app",\n "short_name": "First PWA",\n "icons": [\n {\n "src": ".images/pwa-icon-256.webp",\n "sizes": "256x256",\n "type": "image/png"\n },\n {\n "src": ".images/pwa-icon-512.webp",\n "sizes": "512x512",\n "type": "image/png"\n }\n ],\n "lang": "en-US",\n "start_url": "/index.html",\n "display": "standalone",\n "background_color": "white",\n "theme_color": "white"\n}And the index.html will head can will look like
\n<head>\n ...\n <link rel="apple-touch-icon" href="images/pwa-icon-256.webp" />\n ...\n</head>You can also verify the manifest.json file by opening Chrome DevTools, in the Application Tab, the first tab in the sidebar manifest
![\"Application](\"/9dd3daf070045ba6f6cd2b03d5fabd2b/5.webp\")
After running the test again, we can see all the manifest.json related issues are solved, The remaining issues can be resolved by adding the service worker.
The next requirement of our app will be the service worker. The service worker is a script that runs in the background without any user interaction.
\nThe task of service worker will be to download and cache our content and then serve it when the user is offline. To understand more on service workers you can check this doc from mozilla.
\nTo integrate service workers we need to create a file called sw.js in the root of our project.
\n\nNote: Service worker will only have the access to the files of the current and sub-directories hence we need to place it in the root of our project
\n
let cacheName = "my-first-pwa";\nlet filesToCache = ["/", "/index.html", "/css/style.css", "/js/main.js"];\n\n/* Start the service worker and cache all of the app's content */\nself.addEventListener("install", (e) => {\n e.waitUntil(\n caches.open(cacheName).then(function (cache) {\n return cache.addAll(filesToCache);\n })\n );\n});\n\n/* Serve cached content when offline */\nself.addEventListener("fetch", (e) => {\n e.respondWith(\n caches.match(e.request).then((response) => {\n return response || fetch(e.request);\n })\n );\n});The first 2 variables cacheName and filesToCache are used to create an offline cache in the browser. cacheName is used to create a cache of specific name and filesToCache will be the list of files that we need to cache, / will store the root files that is index.html even if the user does not specify the file name in the URL and then all other files specified in the array.
\n\nNote: Here I have used the
\nfilesToCachearray as a list of static files just to demonstrate the purpose of PWA, it will stop working in production if even one file fails to load.
Finally, we will load our service worker, for that create js/main.js file and copy the below code.
window.onload = () => {\n "use strict";\n\n if ("serviceWorker" in navigator) {\n navigator.serviceWorker.register("./sw.js");\n }\n};And add this script in the index.html file.
...\n<script src="js/main.js"></script>So the final version of our index.html file will look like:
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="utf-8" />\n <title>Hello World</title>\n <link rel="apple-touch-icon" href="images/pwa-icon-256.webp" />\n <link rel="stylesheet" href="css/style.css" />\n <link rel="manifest" href="/manifest.json" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <meta name="theme-color" content="white" />\n </head>\n <body class="fullscreen">\n <div class="container">\n <h1 class="title">Hello World!</h1>\n </div>\n <script src="js/main.js"></script>\n </body>\n</html>Now our application is made as fully PWA supported, you can verify it by running the lighthouse test.
\n![\"Full](\"/c791b96c049bd3429260884230620b4d/6.webp\")
We are done with the code, now the last thing remaining in to host it in any of the https domain. As the PWA will be required to run in the secure domain.
You can get the full source code of this example in this Github repo
\nI hope you enjoyed the progressive web apps using vanilla js tutorial and found it useful. Please let me know what you think in the comments below.
\n","frontmatter":{"date":"June 26, 2020","updated_date":null,"title":"How to Build a PWA in Vanilla JS","tags":["PWA","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/59164c7de73786d49d2361d64689b1c7/58556/cover.webp","srcSet":"/static/59164c7de73786d49d2361d64689b1c7/61e93/cover.webp 200w,\n/static/59164c7de73786d49d2361d64689b1c7/1f5c5/cover.webp 400w,\n/static/59164c7de73786d49d2361d64689b1c7/58556/cover.webp 800w,\n/static/59164c7de73786d49d2361d64689b1c7/99238/cover.webp 1200w,\n/static/59164c7de73786d49d2361d64689b1c7/135cd/cover.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/checking-for-nan-in-javascript/"},"html":"You'll learn about JavasScript NaN in this tutorial, how to check whether a value is NaN, and how to effectively handle NaN.
\nNaN, in JavaScript, can be many things. In fact, it can be almost anything, so long as it is Not a Number. Its type is technically “number” (when evaluated with “typeof”), although it stands for Not a Number.
\nValues can become NaN through a variety of means, which usually involve erroneous math calculations (such as 0/0), or as a result of type coercion, either implicit or explicit.
\nA common example is when you run parseInt on a string that starts with an alphabetical character. This isn’t exclusive to parseInt, as it also applies when using explicit coercion with Number(), or with the unary “+” operator.
\nBefore selecting a method for checking for NaN, how should you not check for NaN?
\nNaN is a bizarre value in JavaScript, as it does not equal itself when compared, either with the loose equality (==) or strict equality (===) operator. NaN is the only value in the entire language which behaves in this manner with regards to comparisons.
\nFor example, if parseInt(“a”) returns NaN, then parseInt(“a”) === NaN will return false. This may seem strange, but it makes perfect sense after thinking about what NaN really is.
\nNaN doesn’t tell you what something is, it tells you what it isn’t.
\nThese two different strings being passed to parseInt() will both return NaN.
\nparseInt(“abc”) // NaN\nparseInt(“def”) // NaNBoth statements return NaN, but are they really the same? Maybe, but it certainly makes sense why JavaScript would disagree, given that they are derived from different string arguments.
\nHere are a few examples of strict inequality comparisons, which demonstrate the inconsistency of NaN.
\n2 !== 2 // false\ntrue !== true // false\n“abc” !== “abc” // false\n...\nNaN !== NaN // trueJavaScript has a built-in method, appropriately named “isNaN,” which checks for NaN. There is a newer function called Number.isNaN, which is included in the ES2015 spec.
\nThe difference between isNaN and Number.isNaN is that isNaN coerces the argument into a number type. To avoid complicated and unexpected outcomes, it is often advised to use the newer, more robust Number.isNaN to avoid these side effects.
\nNumber.isNaN does not perform any forcible type conversion, so it simply returns the boolean based on the parameter.
\nHere is an example of the difference between the two methods:
\nisNaN(undefined) // true\nNumber.isNaN(undefined) // falseisNaN, when passed undefined, returns true because undefined becomes NaN after number coercion. You can test this yourself by running Number(undefined). You will find that it returns NaN.
\nNumber.isNaN, on the other hand, returns false. This is because no coercion takes place, and undefined is not NaN, it is simply undefined.
\nIt is also important to note that Number.isNaN is a newer (ES2015) method in JavaScript, so browser support for Number.isNaN is not as stable as isNaN, which has been around since ES1 (1997).
\nObject.is is a JavaScript method which checks for sameness. It generally performs the same evaluations as a strict equality operator (===), although it treats NaN differently from strict equality.
Object.is(0, -0) will return false, while 0 === -0 will return true. Comparisons of 0 and -0 differ, as do comparisons of NaN. This concept is called “Same-value-zero equality.”
NaN === NaN // false\nObject.is(NaN, NaN) // trueObject.is(NaN, NaN) will in fact return true, while we already know that NaN === NaN returns false. That makes this yet another valid way to check if something is not a number.
Between the given methods of checking for NaN, the most common is to use the global isNaN function, or the ES2015 Number.isNaN method. While method #2 is valid, most people will typically use isNaN or Number.isNaN, which were created specifically for checking for NaN.
\n","frontmatter":{"date":"November 22, 2019","updated_date":null,"title":"NaN in JavaScript: An Essential Guide","tags":["JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/64b659badd7a09c3d955b9c49a7f271f/1f5c5/numbers-1.webp","srcSet":"/static/64b659badd7a09c3d955b9c49a7f271f/61e93/numbers-1.webp 200w,\n/static/64b659badd7a09c3d955b9c49a7f271f/1f5c5/numbers-1.webp 400w","sizes":"(max-width: 400px) 100vw, 400px"}}},"author":{"id":"Greg Sakai","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/javascript-events-bubbling-capturing-and-propagation/"},"html":"A basic example of a JavaScript event
\nEvents, in JavaScript, are occurrences that can trigger certain functionality, and can result in certain behaviour. A common example of an event, is a “click”, or a “hover”. You can set listeners to watch for these events that will trigger your desired functionality.
\nWhat is “propagation”?
\nPropagation refers to how events travel through the Document Object Model (DOM) tree. The DOM tree is the structure which contains parent/child/sibling elements in relation to each other. You can think of propagation as electricity running through a wire, until it reaches its destination. The event needs to pass through every node on the DOM until it reaches the end, or if it is forcibly stopped.
\nEvent Bubbling and Capturing
\nBubbling and Capturing are the two phases of propagation. In their simplest definitions, bubbling travels from the target to the root, and capturing travels from the root to the target. However, that doesn’t make much sense without first defining what a target and a root is.
\nThe target is the DOM node on which you click, or trigger with any other event.
\nFor example, a button with a click event would be the event target.
\nThe root is the highest-level parent of the target. This is usually the document, which is a parent of the , which is a (possibly distant) parent of your target element.
\nCapturing is not used nearly as commonly as bubbling, so our examples will revolve around the bubbling phase. As an option though, EventTarget.addEventListener() has an optional third parameter - which takes its argument as a boolean - which controls the phase of the propagation. The parameter is called useCapture, and passing true will cause the listener to be on the capturing phase. The default is false, which will apply it to the bubbling phase.
\nOnce you trigger the event, it will propagate up to the root, and it will trigger every single event handler which is associated with the same type. For example, if your button has a click event, during the bubbling phase, it will bubble up to the root, and trigger every click event along the way.
\nThis kind of behaviour might not sound desirable - and it often isn’t - but there’s an easy workaround...
\nEvent.stopPropagation()
\nThese two methods are used for solving the previously mentioned problem regarding event propagation. Calling Event.stopPropagation() will prevent further propagation through the DOM tree, and only run the event handler from which it was called.
\n<!--Try it-->function first() {\n console.log(1);\n}\nfunction second() {\n console.log(2);\n}\nvar button = document.getElementById("button");\nvar container = document.getElementById("container");\nbutton.addEventListener("click", first);\ncontainer.addEventListener("click", second);In this example, clicking the button will cause the console to print 1, 2. If we wanted to modify this so that only the button’s click event is triggered, we could use Event.stopPropagation() to immediately stop the event from bubbling to its parent.
\nfunction first(event) {\n event.stopPropagation();\n console.log(1);\n}This modification will allow the console to print 1, but it will end the event chain right away, preventing it from reaching 2.
\nHow does this differ from Event.stopImmediatePropagation()? When would you use either?
<!--Try it-->function first(event) {\n console.log(1);\n}\nfunction second() {\n console.log(2);\n}\nfunction third() {\n console.log(3);\n}\nvar button = document.getElementById("button");\nvar container = document.getElementById("container");\nbutton.addEventListener("click", first);\nbutton.addEventListener("click", second);\ncontainer.addEventListener("click", third);Let’s suppose we wanted to add a third function, which prints 3 to the console. In this scenario, we will also move the second function to also be on the button. We will apply third to the container now.
\nLong story short: we have two event handlers on the button, and clicking <div#container> will now print 3.
\nWhat will happen now? This will behave the same as before, and it will propagate through the DOM tree, and print 1, 2, 3, in that order.
\nHow does this tie in to Event.stopPropagation() and Event.stopImmediatePropagation()?
Adding Event.stopPropagation() to the first function, like so, will print 1, 2 to the console.
\nfunction first(event) {\n event.stopPropagation();\n console.log(1);\n}This is because Event.stopPropagation() will immediately prevent all click events on the parent from being triggered, but it does not stop any other event handlers from being called.
\nAs you can see in our example, our button has two click handlers, and it did stop the propagation to its parents. If you wanted to stop all event handlers after the first, that’s where Event.stopImmediatePropagation() comes in.
\nfunction first(event) {\n event.stopImmediatePropagation();\n console.log(1);\n}Now, the first function really will stop the parent click handlers, and all other click handlers. The console will now print just 1, whereas if we simply used Event.stopPropagation(), it would print 1, 2, and not including either would print 1, 2, 3 .
\n","frontmatter":{"date":"July 22, 2019","updated_date":null,"title":"JavaScript Events: Bubbling, Capturing, and Propagation","tags":["JavaScript","JavaScript Events"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3333333333333333,"src":"/static/53a3895e9c38870937a9136813ac9e10/0ce14/bubbles.webp","srcSet":"/static/53a3895e9c38870937a9136813ac9e10/61e93/bubbles.webp 200w,\n/static/53a3895e9c38870937a9136813ac9e10/1f5c5/bubbles.webp 400w,\n/static/53a3895e9c38870937a9136813ac9e10/0ce14/bubbles.webp 772w","sizes":"(max-width: 772px) 100vw, 772px"}}},"author":{"id":"Greg Sakai","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/understanding-jsonp/"},"html":"Nowadays, many API providers support JSONP requests. One reason for this is that most web browsers disable cross-domain requests when using basic Ajax.
\nFor example, if your website has the domain \"a.com\", it will use JavaScript hosted on a.com. When the a.com JavaScript makes an Ajax call to make a request on b.com, most web browsers would automatically deem the Ajax call as insecure and disable it. This is called the Same-Origin Policy and web browsers have this to prevent malicious scripts from sending off information to a different domain. Because you need the a.com JavaScript to access b.com to provide your service, this seems to pose a pretty big issue … JSONP to the rescue!
\nBefore understanding JSONP, we already know JSON is an object notation of JavaScript. The \"P\" stands for padding. So it’s a padded JSON, and, to be more specific, the JSON object is padded with a JavaScript function! It looks like this:
\njsFunction({"name" : "Ash Ketchum", "role" : "Pokemon trainer"});Thus, technically, any call that retrieves JSONP, sends off an executable JavaScript line, if and only if your page has a JavaScript function that has the same function name that’s returned in the JSONP!
\nLet’s look at an example: say the user is on a.com and the browser is using JavaScript hosted on a.com. Then I shouldn't have any issues making Ajax calls to a.com. Ajax GET requests to b.com however, would fail. To avoid this, I first create a method in the JavaScript code that's located on a.com with the following signature
\nfunction getData(data){\n// use this data\n}With this, an Ajax call using JSONP will pass through fine and return this data:
\ngetData({"name" : "test", "value" : "test Value"});After processing the request, the web browser will call the \"getData\" function because whenever a JavaScript tag is loaded, it gets executed.
\nNow, the JSON object will get passed as an argument to the getData function as the data parameter. So, you can think of the getData as a callback method of the request.
\nYou can see the below code clearly
\nfunction addJavascriptFile = function (url, context) {\ncontext = context || document;\nvar head = context.getElementsByTagName('head')\\[0\\];\nvar js = context.createElement('script');\njs.src = url;\njs.type = "text/JavaScript";\nhead.appendChild(js);\nreturn js;\n}\n\nfunction getJsonp = function (url, handle) {\n\n//creating random name of function as to not conflict with others\nvar func = 'jsonpCallback' + Math.floor((Math.random() \\* 1000000000000000000) + 1);\n\n//adding randomly created function to global window object\nwindow\\[func\\] = function (data) {\n\n//calling handle\nhandle(data);\n\n//removing random named declared function\nwindow\\[func\\] = function () {};\n\n//removing added js\ndocument.head.removeChild(js);\n}\n\n//manipulating and adding js file to head\nvar endurl = url.indexOf('?') != -1 ? url + '&callback=' + func : url + '?callback=' + func;\nvar js = addJavascriptFile(endurl);\n}The above code is not doing any magic, it will accept the URL of the API and add a parameter callback with a random name, and also create a global method with this same random name. It will then create a script tag and add the complete URL to src of this tag.
\nThe API will read the callback parameter from the query string and, if the callback parameter has the value \"jsonCallback\", the response will be as follows:
\njsonpCallback({"name" : "test", "value" : "test Value"});JavaScript or JS helps implement complex things on web pages. Many of the developers know the importance of an minified Javascript file but few are aware of an Optimized Javascript code.
\nAn optimized code is a combination of smartly programmed logics and small hacks to optimize performance, speed and save time.
\nHere are sweet 16 JS hacks and tips for developers for optimizing Javascript to improve JS performance and improve execution time without affecting server resources.
\nIt is a small hack to filter out bucket of elements from the array pool. This method creates an array filled with all array elements that pass a test (provided as a function). According to requirement create a callback function for non-required elements.
\nIn below example the bucket elements are null and are ready to get filtered out.
\nExample:
\nschema = ["hi","ihaveboyfriend",null, null, "goodbye"]\nschema = schema.filter(function(n) {\n return n\n });Output: ["hi","ihaveboyfriend", "goodbye"]This hack will save some time and lines of codes for developers.
\nThe String.replace() function allows you to replace strings using String and Regex.
\nBasically this function replaces the string at its first occurrence. But to replace all using replaceAll() function, use /g at the end of a Regex:
\nExample:
\nvar string = "login login"; \nconsole.log(string.replace("in", "out")); // "logout login" \nconsole.log(string.replace(/in/g, "out")); //"logout logout"With the help of breakpoints or debugging points you can set multiple barriers to rectify source of error at every barrier.
\n![\"Use](\"/992c71b11d837822cbd06b34a3aa6a64/Use-breakpoints-and-Console-for-Debugging-1.webp\")
Press F11 for next call function and f8 to resume script execution.
\n![\"Use](\"/b8654e35d670696359fad0c72a2cc5e2/Use-breakpoints-and-Console-for-Debugging-2.webp\")
You can also check what dynamic values are generated by a function, using console and can check output on different values.
\nOften we use math.floor, math.ceil and math.round for eliminating decimals. Instead of using them use “~~” to eliminate decimals for a value.
\nIt is also helpful in increasing performance when it comes to micro optimizations in a code.
\nExample:
\nUse\n\n~~ (math.random*100)\n\nInstead of\n\nmath.round(math.random*100)This technique will help you in resizing and emptying an array.
\nFor deleting n elements in an Array, use array.length.
\n array.length = n\n\nSee this example:\n\nvar array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.length); // 6 \narray.length = 3; \nconsole.log(array.length); // 3 \nconsole.log(array); // [1,2,3]\n\nFor **emptying array** use\n\narray.length = 0;.Example:
\nvar array = [1, 2, 3, 4, 5, 6]; \narray.length = 0; \nconsole.log(array.length); // 0 \nconsole.log(array); // []This technique is mostly preferred over any other methods to resize/unset the array elements and is one of the best javascript practices most of the developers follow.
\nIf your requirement is of merging two arrays, use Array.concat() function
\nFor merging two arrays:
\nvar array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.concat(array2)); // [1,2,3,4,5,6]; This function works best for small arrays.
\nTo merge large arrays we use
\nArray.push.apply(arr1, arr2)Reason is using Array.concat() function on large arrays will consume lot of memory while creating a separate new array.
\nIn this case, you can use Array.push.apply(arr1, arr2) which instead will merge the second array in the first one, hence reducing the memory usage.
\nExample:
\nvar array1 = [1, 2, 3]; \nvar array2 = [4, 5, 6]; \nconsole.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];It will also optimize the performance of your Javascript code irrespective of size of array.
\nThis is probably the one of the best optimization tips for javascript. It optimizes speed of your JS code.
\nUsing splice instead of delete is a good practice, it will save some”null/undefined space” in your code.
\nThe downside of using delete is it will delete the object property, but will not reindex the array or update its length, leaving undefined values. Also it consumes a-lot of time in execution.
\nUsing splice
\nExample
\nmyArray = ["a", "b", "c", "d"] \nmyArray.splice(0, 2) ["a", "b"]\n\nResult: myArray ["c", "d"]To check whether an object is empty or not, use
\nObject.keys(YOUR\\_OBJECT).length \n\n// 0 returns if object is emptyFollowing code return the number of elements in an Object.
\nCaching the variable tremendously increase javascript performance.
\nEverytime we use document.getElementById() or getElementsByClassName(), JS travels through all elements repeatedly upon each similar element request.
\nIn Order to boost performance, cache your selections to some variable (if using the same selection multiple times).
\nExample:
\nvar cached = document.getElementById('someElement');\ncached.addClass('cached-element');It is a simple optimization tip with drastic impact on performance, recommended for processing large arrays in loop(s).
\nCheck this link for performance results.
\nGenerally switch cases are used over if/else statements to perform almost the same tasks.
\nThe fact that in switch statements expression to test is only evaluated once, execution time becomes less for the script compared to if/else where for every if , it has to be evaluated.
\nShort circuiting is when a logical operator doesn't evaluate all its arguments.
\nThe code
\nif (loggedin) { \nwelcome\\_messege();\n }Make it short by using combination of a verified variable and a function using && (AND operator) in between both.
\nNow above code can be made in one line
\nloggedin && welcome\\_messege();Array.prototype.slice(begin, end) is used to cut arrays when you set the start and end arguments. But if you don't set the end argument, this function will automatically set the max value for the array.
\nA smart hack is it can also accept negative values and by setting a negative number as begin argument, you will get the last elements from the array.
\nvar array = [1, 2, 3, 4, 5, 6]; \nconsole.log(array.slice(-1)); // [6] \nconsole.log(array.slice(-2)); // [5,6] \nconsole.log(array.slice(-3)); // [4,5,6]In JS there is a basic rule of having a default value otherwise process will halt at undefined values.
\nTo provide default value in a variable use || to stay away from this most common issue.
\nvar a = a || 'hello'The developer must check whether there are any conflicting values that might be passed to the function to avoid Bugs.
\nFor beautifying your Javascript code use jsbeautifier. It formats a clumsy JS code into well structured code.
\nCode before Beautifying
\n![\"Beautifying](\"/ffb7a1c2536dd770e56424c03482dcb5/Beautifying-JS-code-2.webp\")
Code after Beautifying
\n![\"Beautifying](\"/e10fa72828d50c5d23c2b68009ba432e/Beautifying-JS-code-1.webp\")
To check how well a Javascript code is performing and share results use jsperf. It is easiest way to create and share testcases.
\nJsfiddle and jsbin is a tool for experimenting with your Javascript code and other web languages.
\nIt is also a code sharing site. As you type into one of the editor panels the output is generated in real-time in the output panel.
\nThese are some useful hacks and tips for optimizing javascript performance. It is not mandatory to use them all the time because cases and conditions will vary. If you have tricks other than these, do share with us in comment section.
\n","frontmatter":{"date":"April 07, 2017","updated_date":null,"title":"Javascript tips and tricks to Optimize Performance","tags":["Engineering","JavaScript","Hacks","Array"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.3793103448275863,"src":"/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp","srcSet":"/static/0d6472e55ba0b111b3dfa895ec2dec57/61e93/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 200w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/1f5c5/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 400w,\n/static/0d6472e55ba0b111b3dfa895ec2dec57/7f8e9/16-JavaScript-Hacks-to-save-time-and-boost-productivity-768x555.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/be-more-manipulative-with-underscore-js/"},"html":"Manipulating collections like arrays and objects can be a hassle with vanilla JS. Thankfully there are libraries like Underscore which offer some extremely useful low level utility functions.
\nUnderscore JS provides much of the array/collection/object manipulating functionality similar to what you may have seen in other languages such as Ruby. As for calling the methods if you're familiar with JQuery, Underscore is identical except instead of \"$\" we use the library's namesake \"_\" to access the methods.
\nUnderscore has over 100 functions that can be used on collections, arrays, objects and functions (you read that right, function functions). I'm going to be discussing a few of the functions that work on collections, but definitely check out what else Underscore has to offer.
\nOnce you know how to re-create the same output with Underscore syntax, you'll never want to go back to plain old JS and using nested for loops. One of the most helpful tools Underscore provides for accomplishing this is...
\nThe _each method does exactly what it sounds like. It works on collections (arrays or objects), and will iterate over each element in the collection invoking the function you specified with 3 arguments (value, index, list) with index being replaced by key if used on an object. It's also worth noting _.each returns the list if you want chain some more manipulation after calling _.each.
\nHere's a quick example showing how it can be used and what's available to you when you call it.
\nvar someArray = ["a", "b", "c"];\n \n_.each(someArray, function (element, index, list) {\n console.log("value: " + element + " index: " + index + " list: " + list)\n});\n \n// outputs\nvalue: a index: 0 list: a,b,c\nvalue: b index: 1 list: a,b,c\nvalue: c index: 2 list: a,b,cWith that out of the way, let's think about what this means in terms of cleaning up our code. To do the above normally we would write a little for loop like this.
\nfor ( var i = 0; i < someArray.length; i++) {\n console.log("value: " + someArray[i] + " index: " + i + " list: " + someArray);\n}Admittedly these two aren't all that different, but let's imagine we have a function defined elsewhere that will deal with handling the arguments passed in on each iteration. We can replace that same functionality with a significantly less verbose solution.
\n_.each(someArray, doStuff);To quote Antoine de Saint Exupéry: \"It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.\" While it may not be perfection, there are certainly arguments to be made about performance, I think you would be hard pressed to find anything further simplify this code.
\nWhile _.each will return the original list you input, _.map will allow you to manipulate or otherwise transform the input as you please and then returns the new array. Map needs a minimum of 2 arguments, first the collection and then the function to be executed on each iteratee and also accepts a third argument which dictates the context for the iterating function.
\nvar numbersObject = {1:1, 2:4, 3:9};\n \nvar productArray = _.map(numbersObject, function(value, key) {\n return value * key;\n});\n \n//proudctArray is now\n[1, 8, 27]Before you go writing some functions to pass as an argument to _.map be sure to take a peek at the other methods available in Underscore. Map is a little bit like having the Lego blocks to build whatever you want, but if you already have a pre-packaged Batcave available, it might not be the best use of your time building it from scratch.
\nTo illustrate my childhood toy analogy let's talk about _.pluck. Pluck is basically just a refined version of _.map made for a specific use case. That's not to say there aren't ways of combining the two to achieve something a little more complex, but if standard _.pluck behaviour is all you're after then don't go re-inventing the wheel.
\nOften with data objects we're interested in the values of a specific key, for example let's say we have an array of movies.
\nvar movies = [\n {title: "Dracula", genre: "Horror", star: "Nosferatu"},\n {title: "Cast Away", genre: "Drama", star: "Wilson"},\n {title: "Airplane", genre: "Comedy", star: "Leslie Nielsen"}\n];Now we want to just have an array of the titles of these movies.
\nvar titlesArray = _.pluck(movies, 'title');\n \n//titlesArray is now\n["Dracula", "Cast Away", "Airplane"]Not much else to say about it, it works on collections and is extremely handy for a very common task.
\nAnother example of a more refined _.map function that comes in handy often enough. Aptly named this method will return an array of only the things that make it through your test.
\nvar numbers = [1,33,6,24,8,21,11,22];\n \nvar lessThanTen = _.filter(numbers, function(number) {\n return number < 10;\n});\n \n//lessThanTen is now\n[1, 6, 8]Works on collections and kitchen sink faucets.
\nJust kidding there's no _.conclusion method.
\nI hope by now that you get the idea that if what you need to do isn't already a method, Underscore's _.map is a powerful tool for accomplishing whatever obscure collection manipulation your heart desires.
\nSo get out there, take a look through Underscore JS and start writing less obfuscated (nested) for loops with the help of _.each.
\n","frontmatter":{"date":"February 16, 2016","updated_date":null,"title":"Be More Manipulative with Underscore JS","tags":["JavaScript","UnderscoreJs"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a0908f5af6a6436a7da16f3b91888bed/58556/underscore.webp","srcSet":"/static/a0908f5af6a6436a7da16f3b91888bed/61e93/underscore.webp 200w,\n/static/a0908f5af6a6436a7da16f3b91888bed/1f5c5/underscore.webp 400w,\n/static/a0908f5af6a6436a7da16f3b91888bed/58556/underscore.webp 800w,\n/static/a0908f5af6a6436a7da16f3b91888bed/99238/underscore.webp 1200w,\n/static/a0908f5af6a6436a7da16f3b91888bed/135cd/underscore.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/how-to-promise/"},"html":"As a front-end developer, if you haven't heard about Promise in Javascript, well ...
\nAt least you have heard about it now! And it is truly amazing.
Promise is a the standard way of handling asynchronous operations, such as calling APIs. It is comprehensive but elegant, espeically with a series of Async operations and handling the errors from them.
\nIt has been widely supported by mordern browsers. But of course IE is not one of the modern ones, so do not forget to find a promise-polyfill for your IE users.
Can I use Promise
\nPolyfill for IE
In this blog I will cover the basic usages for Promise, let's get started.
\nA promise function would look like this
new Promise(function (resolve, reject) {\n var data = asyncCall(); // could be API calls\n if( data ) {\n resolve(data); // success\n } else {\n reject(data); // fail\n }\n});First we need to declare it is a `new` Promise, inside you can put your async calls and let promise know how to deal with the response with `resolve` and `reject`. You can treat `resolve` and `reject` as two callback functions, `resolve` when you are confirmed that you have got what you expect, and reject if anything bad happened.
\nHere is a brief example, Fiddle it here
\nvar aync1 = function() {\n return new Promise(function(resolve, reject){\n // Wait 1s and alert\n setTimeout(function(){\n resolve("Hello Promise");\n }, 1000);\n });\n}\n\naync1().then(function (resp) {\n alert(resp);\n});If something is going wrong, you want to catch and handle it, Fiddle it here.
\nvar aync2 = function() {\n return new Promise(function(resolve, reject){\n // Wait 2s and alert\n setTimeout(function(){\n // pretend we got something wrong.\n reject("error");\n }, 1000);\n });\n}\n \naync2().then(function (resp) {\n alert("This will not be called");\n}).catch(function(err){\n alert(err);\n});Here I have quickly demonstrated the basic usage of Promise, you may think \"Oh callbacks can do the same thing as well\". You are not wrong, but in next blog I will show the real power of Promise, thanks for reading.
\n","frontmatter":{"date":"January 05, 2016","updated_date":null,"title":"How to Promise","tags":["JavaScript","Promise"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/0391ea10a372dcec2e9e04aa7ed59ec0/403a4/promise-300x300.webp","srcSet":"/static/0391ea10a372dcec2e9e04aa7ed59ec0/61e93/promise-300x300.webp 200w,\n/static/0391ea10a372dcec2e9e04aa7ed59ec0/403a4/promise-300x300.webp 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Solomon Yu","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/delete-a-node-is-same-tree-move-zeroes/"},"html":"Click to View the Orginal Question
\nTo remove the given node，which means whoever is asking the value for this node should get the value of the next node. Plus, the next node of this removing one should be the next next node.
\nIn diagram, with the following node list, we want to remove node 2.
\n1 -> 2 -> 3 -> 4
\nWe update original Node 2 to Node 3 and skip the original Node 3, which gives out the list after removing node 2.
\n1 -> 3 ------> 4
\n/**\n* Definition for singly-linked list.\n* function ListNode(val) {\n* this.val = val;\n* this.next = null;\n* }\n*/\n/**\n* @param {ListNode} node\n* @return {void} Do not return anything, modify node in-place instead.\n*/\nvar deleteNode = function(node) {\n node.val = node.next.val;\n node.next = node.next.next;\n};Click to View the Original Question
\nNote: My solution is not efficient enough based on the performance, but I think it's fairly clean.
\nI use recursion to solve the problem, first to define the basic cases, and recursively loop through both trees from left to right. If it hits one false, the whole result will be false.
/**\n* Definition for a binary tree node.\n* function TreeNode(val) {\n* this.val = val;\n* this.left = this.right = null;\n* }\n*/\n/**\n* @param {TreeNode} p\n* @param {TreeNode} q\n* @return {boolean}\n*/\n \nvar isSameTree = function(p, q) {\n if( p === q ) return true;\n if(!p || !q || p.val !== q.val) return false;\n return isSameTree(p.left, q.left) ? isSameTree(p.right, q.right) : false;\n};Click to View the Original Question
\nHere I have create two indices one called z to index the position for zeroes, another is i to loop through the nums array. They both increment by one when they see a non-zero value, but when it is zero, z stays at position and get ready to swap the position with next non-zero value i meets. By keep doing it, it will fill a consecutive row of zeroes, till the end.
<!--/**\n* @param {number[]} nums\n* @return {void} Do not return anything, modify nums in-place instead.\n*/\nvar moveZeroes = function(nums) {\n var z = 0;\n for(var i = 0; i Click to View Original Question
\nThis question is very easy once you figure out the trick behind the game.\nSince each time you can only pick 3 stones at most, if there are 4 stones originally on the table, no matter how many you take ... your hopefully non-stupid friend can easily beat you. The same logic also applies when the number of stones is more than 4.
\n/**\n* @param {number} n\n* @return {boolean}\n*/\nvar canWinNim = function(n) {\n return n % 4 === 0 ? false : true;\n};2. Add Digits
\nClick to View Original Question
\nThis is a tricky question, the key is trying to find the repetitive pattern of the Digits Sum. If you can't get the pattern by observation then we can do some math to find the pattern.
\nSo assume we have a 4 digit number \"abcd\" or 1234, and we want to find out the sum of the digits which in expression is:
\nvar digitSum = a + b + c + d
\nWe still can't figure out the answer from this alone, so we need to find something else to help us to get the value. Then we can consider the actual value of \"abcd\" = 1000a + 100b + 10c + d.
\n- If you're familiar with Ring Theory (pretty sure it's Ring Theory.. I could be wrong..) then perfect! Under Ring 9, the actual value of abcd === a + b + c + d.\n- And if you don't know about Ring Theory, think of this as getting the remainder of \"abcd\" divided by 9
\n> (1000a + 100b + 10c + d) % 9 => (999a + a + 99b + b + 9c + c + d) % 9 => a + b + c + d
\nSo whatever the reminder is equals to the sum of the digits and that is more than enough information to solve the question.
\nBe careful with the number 0 !!
\n/**\n* @param {number} num\n* @return {number}\n*/\nvar addDigits = function(num) {\n if (num === 0) return num;\n return num % 9 === 0 ? 9 : num % 9;\n};3. Maximum Depth of Binary Tree
\nClick to View Original Question
\nThis is very typical of recursion problems, and recursion is always hard to explain in words
\n(╯‵□′)╯︵┻━┻
\nRegardless I will try my very best to describe it.
\n1. You have a tree node, and check if it is an empty tree, if so return 0\n2. If it is not empty, use recursion to find the value\n3. The recursion will start with the left node of root, and iterate through the tree, and keep checking the depth of each node till reaching out to the leaves. Each node (small root) records its maximum depth value by a record count called \"\"currentLength\"\".\n4. Until the whole tree is traversed, the root will compare its leftLength and rightLength and return the answer!
\n rightLength ? leftLength : rightLength;\n return rootLength;\n}-->