{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/22","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"What is JAMstack JAMstack is not a specific set of tools or any language. Still, it's a new and modern way of building apps and sites that…","fields":{"slug":"/engineering/jamstack-introduction/"},"html":"

What is JAMstack

\n

JAMstack is not a specific set of tools or any language. Still, it's a new and modern way of building apps and sites that deliver better performance, higher security, lower scaling cost, and better developer experience. It achieves this by retaining most of the client-side functionality and abstracting all other functionality to the third-party API. APIs do all the heavy lifting. It is based on the client-side, and it doesn't depend on the backend server.

\n

JAM stands for JavaScript, APIs & Markup.

\n

JavaScript: Any dynamic programming during the request/response cycle is handled by the JS, running entirely on the client-side. It can be any front-end framework or library or even vanilla JavaScript.\nAPIs: All server-side processes or database actions are contained in reusable APIs, accessed over HTTPS with JavaScript. These can be custom-made or leveraged third party services.\nMarkup: Template markup must be pre-built at the time of deployment, usually using a site generator for content sites or a build tool for web applications.

\n
\n

Modern web development architecture based on client-side JavaScript, reusable APIs, and pre-built Markup.

\n
\n

The term was introduced by Mathias Biilmann, co-founder of Netlify.

\n

With the JAMstack, we have no longer talk about specific technologies such as web servers, programming languages, or databases.

\n

Check the following best practices defining a JAMstack project:

\n\n

Value of JamStack

\n

We can easily understand the JAMstack value when comparing it with a monolithic architecture, today's most common practice in Web development. In a monolithic project, the frontend is closely coupled with a backend server, e.g., node js. Each page request to backend server which pulls data from database renders into Html and then send it across the network. A single page gets regenerated every time the server receives a request for that URL.\nIn a JAMstack architecture, the page request does not go to the server for Html because it directly fetches Html from CDN, where the Html file has been pre-built, and it's ready to be downloaded; that's why no server is involved here.

\n

Workflow comparison (JAMstack vs. traditional)

\n

\"jamstack-vs-traditional-workflow\"

\n

Traditional workflow

\n

→ Building and hosting are closely coupled.
\n→ Whenever a user requests a page, The file request to the back end and interacts with a database, back-end code, server, browser, and caching layers.
\n→ Updated code is pushed to servers often through FTP. The database must be updated again.\n→ Updated content is also pushed through CMS like WordPress, Joomla, or drupal.

\n

JAMstack workflow

\n

→ Building and hosting are loosely coupled.
\n→ Whenever a user requests a page, The file is already pre-built and directly served to the browser from a CDN.
\n→ Updated code is pushed through Git; Modern tools like static site generators easily re-built the entire site.\n→ Updated content is also pushed through GIt or static site CMS.

\n

Why the JAMstack?

\n

A JAMstack architecture can bring all sorts of benefits to the sites and project workflows. Some of the key benefits are:

\n

Faster performance: Building JAMstack helps to get pages generated at deploy time since they are mainly stored as Markup and can be served over a CDN.\nHigher security: JAMstack websites reduce server and database, so we don't need to worry about vulnerabilities anymore.\nLower cost: It uses fewer resources, so comparably, it's lower than Others.\nBetter developer experience Frontend developer can focus on frontend development without tied to monolithic architecture. Static site generators remove the need to maintain a separate stack for content and marketing.

\n

That's A Wrap!

\n

In a JAMStack architecture, however, the frontend and backend are decoupled. A frontend consists of JavaScript, HTML, and CSS. SSG generates these files during the build process and sends it over a CDN.

\n

A JAMStack backend is a content API that returns JSON/XML. This API can be a hosted datastore, a headless CMS, serverless functions, or a custom application.

\n

Useful resources

\n\n","frontmatter":{"date":"October 29, 2020","updated_date":null,"description":"You may have heard the term JAMstack before, but you may not have understood what it means. In this article, We will introduce you to JAMstack as to why you need, best practice, and value.","title":"Introduction to JAMstack","tags":["Jamstack","Web"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/974b16bfa06f1616aaee042b80b7a90c/58556/jamstack_cover.webp","srcSet":"/static/974b16bfa06f1616aaee042b80b7a90c/61e93/jamstack_cover.webp 200w,\n/static/974b16bfa06f1616aaee042b80b7a90c/1f5c5/jamstack_cover.webp 400w,\n/static/974b16bfa06f1616aaee042b80b7a90c/58556/jamstack_cover.webp 800w,\n/static/974b16bfa06f1616aaee042b80b7a90c/99238/jamstack_cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","avatar":null}}}},{"node":{"excerpt":"Overview React Speech Recognition is a react hook that accesses the Web Speech API to convert speech from the machine’s microphone to the…","fields":{"slug":"/engineering/quick-look-at-react-speech-recognition/"},"html":"

Overview

\n

React Speech Recognition is a react hook that accesses the Web Speech API to convert speech from the machine’s microphone to the app’s React components.

\n

There are two hooks in this framework:

\n\n

Prerequisites

\n

This version requires React 16.8 so that React hooks can be used; please see the full framework README here for more information.

\n

Note: This framework uses WebSpeech API. Browser support for this API is currently limited, with Chrome having the best experience. As of June 2020 these browsers support the API:

\n\n

What We’ll Make

\n

I will be making a simple voice memo app with basic voice commands that run in the browser. If you would like to follow this tutorial, please be ready to work with the create-react-app boilerplate.

\n

\"example\"

\n

Let's Get Started

\n

Step 1: Setting up the workspace

\n
    \n
  1. Create a new react app with create-react-app.
    2. \n
\n
npx create-react-app dictaphone
\n
    \n
  1. Modify the App.js file and add the dictaphone component like so:
    2. \n
\n
import Dictaphone from './dictaphoneSetup.js'\n\nfunction App() {\n  return (\n    <div className="App">\n      <header className="Dictaphone-Tester">\n        <Dictaphone />\n      </header>\n    </div>\n  );\n}\n\nexport default App;
\n

NOTE: We haven't built the Dictaphone component yet; we'll jump into that next!

\n
    \n
  1. In the root directory of your app, install the react hook using:
    2. \n
\n
npm i react-speech-recognition
\n
    \n
  1. Create a file to house the Dictaphone component in your src directory and import the necessary dependencies:
    2. \n
\n
import React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
\n

And that's it for our basic setup!

\n

Step 2: Setting up the dictaphone

\n
    \n
  1. First, we will build the skeleton of our component:
    2. \n
\n
import React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone = () => {\n return (\n   <div></div>\n );\n};\n\nexport default Dictaphone1;
\n
    \n
  1. \n

    Next, we need to fetch certain props out of useSpeechRecognition. The props we will need are transcript, interimTranscript, finalTranscript, resetTranscript, and listening. You can do so like this:

    \n
    const {\ntranscript,\ninterimTranscript,\nfinalTranscript,\nresetTranscript,\nlistening,\n} = useSpeechRecognition();
    \n

    We will also need to enable commands through this hook so add commands to gain access:

    \n
    } = useSpeechRecognition({ commands });
    \n
    2. \n
  2. \n

    Moving swiftly onward, we need to need to add several functions that are built into the hook and React. First we will be using useEffect to print the transcript to the page.

    \n
    useEffect(() => {\nif (finalTranscript !== '') {\n console.log('Got final result:', finalTranscript);\n}\n}, [interimTranscript, finalTranscript]);
    \n
    3. \n
  3. Then, we will add a listening function to start our dictaphone and throw in a quick conditional to alert the user if their browser is not compatible with this API. These functions would look like:
    4. \n
\n
 if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   return null;\n }\n\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');\n }\n const listenContinuously = () => {\n   SpeechRecognition.startListening({\n     continuous: true,\n     language: 'en-GB',\n   });\n };
\n

Step 3: Building the dictaphone controls and page elements

\n

We will add some page elements to access our dictaphone and print the words to the page. We will need three buttons: stop, listen, and reset - to control the dictaphone and reset the transcript. We may also want to add an indicator that informs the user if the dictaphone is listening or not. Within Dictaphone's return div create the following elements:

\n
    \n
  1. A span that houses a ternary conditional that uses the listening prop of useSpeechRecognition to tell if the dictaphone is currently accessing the microphone or not. Add a 'Listening:' label for clarity reasons (Please see below diagram for more precise explanation).
    2. \n
  2. A reset button that will use the built-in function resetTranscript to- you guessed it- reset the transcript.
    3. \n
  3. A listen and stop button that will use the functions listenContinuously and SpeechRecogniton.stopListening respectively to control the dictaphone.
    4. \n
  4. One last span where we are housing our transcript.
    5. \n
\n

Your return statement should look similar to this:

\n
  return (\n    <div>\n      <div>\n        <span>\n          listening:\n          {' '}\n          {listening ? 'on' : 'off'}\n        </span>\n        <div>\n          <button type="button" onClick={resetTranscript}>Reset</button>\n          <button type="button" onClick={listenContinuously}>Listen</button>\n          <button type="button" onClick={SpeechRecognition.stopListening}>Stop</button>\n        </div>\n      </div>\n      <div>\n        <span>{transcript}</span>\n      </div>\n    </div>\n  );
\n

If you go to localhost:3000 in your browser, the dictaphone should now be working.

\n

Step 4: Adding commands

\n

Now that our dictaphone is working, let's add some commands. We won't do anything too complicated but instead access the functions we already have at our disposal.

\n

Within the dictaphone component, declare an array called commands. This will be an array of objects containing two properties each:

\n\n

A voice command that resets the transcript should look like this:

\n
 const commands = [\n   {\n     command: 'reset',\n     callback: () => resetTranscript()\n   },\n   {\n     command: 'clear',\n     callback: () => resetTranscript()\n   }\n ]
\n

When the dictaphone picks up the words 'reset' or 'clear' from the user's speech, it will execute the callback associated with the command.

\n

Let's add a response feature. If we add a react hook to manipulate the state like this:

\n
const [message, setMessage] = useState('');
\n

Then add the message to the output, we can add commands that generate a response. For instance, if I were to say ‘Hello’, the app would print back 'Hi there!' or something to that effect. Below, I've written some simple commands.

\n
 const commands = [\n   {\n     command: 'reset',\n     callback: () => resetTranscript()\n   },\n   {\n     command: 'shut up',\n     callback: () => setMessage('I wasn\\'t talking.')\n   },\n   {\n     command: 'Hello',\n     callback: () => setMessage('Hi there!')\n   },\n ]
\n

With that our quick dictaphone is complete! Take a look at this code where it all comes together:

\n
import React, { useEffect, useState } from 'react';\nimport SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';\n\nconst Dictaphone1 = () => {\n const [message, setMessage] = useState('');\n const commands = [\n   {\n     command: 'reset',\n     callback: () => resetTranscript()\n   },\n   {\n     command: 'shut up',\n     callback: () => setMessage('I wasn\\'t talking.')\n   },\n   {\n     command: 'Hello',\n     callback: () => setMessage('Hi there!')\n   },\n ]\n const {\n   transcript,\n   interimTranscript,\n   finalTranscript,\n   resetTranscript,\n   listening,\n } = useSpeechRecognition({ commands });\n\n useEffect(() => {\n   if (finalTranscript !== '') {\n     console.log('Got final result:', finalTranscript);\n   }\n }, [interimTranscript, finalTranscript]);\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   return null;\n }\n\n if (!SpeechRecognition.browserSupportsSpeechRecognition()) {\n   console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');\n }\n const listenContinuously = () => {\n   SpeechRecognition.startListening({\n     continuous: true,\n     language: 'en-GB',\n   });\n };\n return (\n   <div>\n     <div>\n       <span>\n         listening:\n         {' '}\n         {listening ? 'on' : 'off'}\n       </span>\n       <div>\n         <button type="button" onClick={resetTranscript}>Reset</button>\n         <button type="button" onClick={listenContinuously}>Listen</button>\n         <button type="button" onClick={SpeechRecognition.stopListening}>Stop</button>\n       </div>\n     </div>\n     <div>\n       {message}\n     </div>\n     <div>\n       <span>{transcript}</span>\n     </div>\n   </div>\n );\n};\n\nexport default Dictaphone1;
\n

Thanks for following along, and I hope this helps!

\n","frontmatter":{"date":"October 29, 2020","updated_date":null,"description":"Learning and exploring the react-speech-recognition hook basics.","title":"A Quick Look at the React Speech Recognition Hook","tags":["React","React Speech Recognition","React Speech","React Hook"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e24959f3fecbc8a550a2b050cbfcba69/58556/mic.webp","srcSet":"/static/e24959f3fecbc8a550a2b050cbfcba69/61e93/mic.webp 200w,\n/static/e24959f3fecbc8a550a2b050cbfcba69/1f5c5/mic.webp 400w,\n/static/e24959f3fecbc8a550a2b050cbfcba69/58556/mic.webp 800w,\n/static/e24959f3fecbc8a550a2b050cbfcba69/99238/mic.webp 1200w,\n/static/e24959f3fecbc8a550a2b050cbfcba69/7c22d/mic.webp 1600w,\n/static/e24959f3fecbc8a550a2b050cbfcba69/fd420/mic.webp 4240w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Krista Singleton","github":"krissingl","avatar":null}}}},{"node":{"excerpt":"Why IoT and AI together make the perfect match! Statistics suggest that a whopping 64 billion IoT devices can be speculated by 2025. When we…","fields":{"slug":"/engineering/ai-and-iot-the-perfect-match/"},"html":"

Why IoT and AI together make the perfect match!

\n

Statistics suggest that a whopping 64 billion IoT devices can be speculated by 2025. When we talk about the latest technologies shaping the IT industry, Artificial Intelligence and the Internet of Things are often top the list. No wonder these technologies complement each other so well. The duet has revamped the conventional solutions both on the industrial and business fronts.\n

\n

Consolidating IoT with AI can help us make Intelligent Machines. These smart automation systems not only help in facilitating the monotonous tasks but making witty decisions without even the slightest of human involvement.\n

\n

How AI enhances IoT-based Systems?

\n

A typical IoT system integrates various sensors, servo motors, either on an Arduino board or Raspberry pi board. This integrated circuit is then fit into the device that is intended to be made smart. Now, these devices generate data. The data can either be structured or unstructured. The devices actually become smart when they invoke the experiential analysis from this data. This is where AI comes into the picture.\n

\n

Both IoT and AI have their part to play. IoT server generates humongous data, while AI has the potential to decipher and derive insights from it. Hence, by coupling both the capabilities, one can establish an intelligent-acting system.\n

\n

Businesses and Enterprises across verticals can leverage the IoT-based analysis to make efficacious decisions and creative plans. An artificial Intelligence-based IoT-system can also provide enhanced security and confidentiality.\n

\n

Why use AI-enabled IoT Systems?

\n

Increased Efficiency

\n

The continuous data streams, along with complex data points, can be analyzed using various Machine Learning algorithms like Linear or Logistic Regression, Random Forest, etc. Which, in turn, can help find the loopholes that need to be fixed for efficient system execution.\n

\n

It also helps in identifying the deficiencies and find an optimal alternative for a pre-existing architecture. Thus, eventually resulting in increased efficiency.\n

\n

Reliable Disaster Recovery

\n

AI-enabled IoT systems can predict a wide range of risk points well in advance. This not only helps in mitigating the risk but also ensures a smooth recovery just in case the system failure occurs. This serves as a dual benefit saving the overhead expenses and avoiding a breakdown facilitating BAU (Business as Usual).\n

\n

Thus, enterprises should have a well-structured business continuity plan in place so that the risk mitigation can be implemented. IoT-based smart devices get a high degree of benefit when it comes to mitigating risk and disaster recovery, provided they have a research-intensive analysis in place.\n

\n

Better Scalability Prospects

\n

The low-end sensors and ICs which form the entire IoT system may not be cent percent accurate at all times. But, if the system has an AI filter that analyzes the data and sends the refined version for further processing, the scalability prospects can be increased dramatically.\n\nThink of it as a screening mechanism wherein the machine learning techniques analyze and filter the valid data points and transmit if further to give a more concrete overview of things.\n

\n

Reduced Overhead Expenditure

\n

The smart systems are actually 'smart' when they employ experiential learning and caters to the users with a predictive fault-tolerant mechanism. The predictive maintenance enables the users to forecast possible damages and breakdowns well in time.\n\nAnother facet to the reduced expenditure is the reduced operational cost. The integration of AI into the IoT system saves the cost and effort for an explicit mechanism to handle data concerns.\n

\n

These were the benefits that an AI-based IoT-system offers to its users. Now, let's look at the real-world implementation of the same.\n

\n

Real-Life Implications

\n

Self Driving Cars

\n

Self-Driving Cars are the best example of AI+IoT based system in the real world. These cars can predict the pedestrian's movements and suggest possible measures to be taken for the cognitive sensing machines. It helps in finding the suitable driving speed, amount of time, and the optimum path to reach a destination.\n

\n

Summing Up

\n

Thus, if we critically analyze the integration of Artificial Intelligence with the Internet of Things, then it is a win-win situation. The AI-based systems manage the data streams and evaluate data points in real-time to make wise decisions in order to optimize the performance and efficiency of the smart devices and automation systems.

\n","frontmatter":{"date":"October 28, 2020","updated_date":null,"description":"AI and IOT are very popular these days. Let's understand Why IoT and AI together make the perfect match!","title":"IoT and AI - The Perfect Match","tags":["AI","IOT"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4bd8041b0f244c0e88595ae6c56be11d/58556/cover.webp","srcSet":"/static/4bd8041b0f244c0e88595ae6c56be11d/61e93/cover.webp 200w,\n/static/4bd8041b0f244c0e88595ae6c56be11d/1f5c5/cover.webp 400w,\n/static/4bd8041b0f244c0e88595ae6c56be11d/58556/cover.webp 800w,\n/static/4bd8041b0f244c0e88595ae6c56be11d/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Devansh Agarwal","github":"Devanshh","avatar":null}}}},{"node":{"excerpt":"Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain…","fields":{"slug":"/engineering/css3-accordion/"},"html":"

Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain HTML, and CSS with no Javascript at all!

\n

Let's Begin

\n

Firstly, let's make some markup with HTML. We are going to create a div and give it a class of accordion like so:

\n
<div class="accordion">\n\n</div>
\n

Next, inside the accordion div, we will create another div, this time without a class.

\n
<div class="accordion">\n  <div>\n  \n  </div>\n</div>
\n

Next up, we will create a checkbox or a radio button. We are creating a checkbox or a radio button so that we can make their checked states open or close the accordion. So if you want to be able to open all accordions at the same time, you will use checkbox, otherwise you will use radio buttons. But in this article, I've chosen to use checkbox.\nWe will give the checkbox an id of section1 and a class of accordion__input.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n  </div>\n</div>
\n

Under the checkbox, we are going to create a label for the checkbox. This label will later on become the head of the accordion tab.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n  </div>\n</div>
\n

Next, we will create a new div and give it a class of accordion__content because it will hold the content of the accordion. In this example, we will make the content of the accordion a paragraph.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n</div>
\n

Repeat the div without a class for as many as you want depending on how many accordion tabs you want. In this example, we will use only three of them.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n</div>
\n

That's it with the HTML, and it should be looking like this:\n\"plain-html\"

\n

Now let's start playing with the CSS part.\nWe'll begin by styling the div with the class of accordion.\nWe will give it a:

\n\n

So now we have:

\n
.accordion{\n    max-width: 400px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n    border-radius: 15px;\n    overflow: hidden;\n    background-color: purple;\n}
\n

Now we will set some padding to the label and content so that there is some space between them and their borders.

\n
.accordion__label, .accordion__content{\n    padding: 14px 20px;\n}
\n

Next, we will style the accordion label and set the following properties:

\n\n

So it looks like this when combined:

\n
.accordion__label{\n    display: block;\n    color: white;\n    font-weight: bold;\n    cursor: pointer;\n    position: relative;\n    transition: background-color 0.1s;\n}
\n

Now, we will make the color of the label darker when the user hovers on it. This is also to make the user know that he/she has placed the cursor on something that can be clicked.

\n
.accordion__label:hover{\n    background-color: rgba(0, 0, 0, 0.1);\n}
\n

Next up, we will style the content of the accordion and set the following properties:

\n\n

So when we put it together, we have this:

\n
.accordion__content{\n    background: white;\n    line-height: 1.6;\n    font-size: 0.85em;\n    display: none;\n}
\n

Now we have to hide the checkbox from showing. To do that, we set the display property of it to none

\n
.accordion__input{\n    display: none;\n}
\n

The next thing to do is to show the accordion tab's content if the label is clicked. To do this, we have to set the display property of it to block when the label is clicked. We can know that the label is clicked using the check-state of the checkbox that we hid earlier.

\n
.accordion__input:checked ~ .accordion__content{\n    display: block;\n}
\n

Hurray🎉, we now have a lovely and functioning accordion that looks like this\n\"css3-accordion\"

\n","frontmatter":{"date":"October 27, 2020","updated_date":null,"description":"Learn how to make a beautiful accordion with HTML and CSS only","title":"A Simple CSS3 Accordion Tutorial","tags":["CSS","Accordion","UI"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d2e82b3c0d7035834b8a286f51bb8fa8/58556/cover-accordion.webp","srcSet":"/static/d2e82b3c0d7035834b8a286f51bb8fa8/61e93/cover-accordion.webp 200w,\n/static/d2e82b3c0d7035834b8a286f51bb8fa8/1f5c5/cover-accordion.webp 400w,\n/static/d2e82b3c0d7035834b8a286f51bb8fa8/58556/cover-accordion.webp 800w,\n/static/d2e82b3c0d7035834b8a286f51bb8fa8/210c1/cover-accordion.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Isaac Anohene","github":"anohene1","avatar":null}}}},{"node":{"excerpt":"EternalBlue: A retrospective on one of the biggest Windows exploits ever Many stories are floating around on the internet about computer…","fields":{"slug":"/engineering/eternal-blue-retrospective/"},"html":"

EternalBlue: A retrospective on one of the biggest Windows exploits ever

\n

Many stories are floating around on the internet about computer viruses and worms that made an enormous impact on the world. From legends like the blistering fast SLAMMER worm from 2003 or the I LOVE Bug worm that set the stage for the fishing email notoriety, we see today. But the story behind EternalBlue has it all. Leaked straight out of the NSA's toolbox, it was a key asset for the well-known WannaCry ransomware to wreak havoc on the world. Some will even argue that it led to a full-on \"Cyber War\"...

\n

Before we start, this story is way too complex to fully cover in a short blog. We are skipping a lot, so go out and read more if you are interested.

\n

The beginning

\n

From 2016 to 2017, the InfoSec community was turned upside down by the so-called \"Shadow Brokers\". This unknown, mysterious group was responsible for five major leaks containing classified hacking tools, collected and archived by the NSA. The NSA has an unprecedented catalog of unknown exploits and backdoors due to decades of hoarding. But instead of notifying the software vendor about these vulnerabilities, they keep these to themselves. These exploits are valuable weapons for the NSA to protect the United States of America and its citizens (controversial, but a topic for another day).

\n

On April 14, 2017, the Shadow Brokers released their fifth leak containing multiple exploits. Infamous EternalBlue was one of them.

\n

So what does EternalBlue do exactly?

\n

Great question! EternalBlue takes advantage of a vulnerability seen in Microsoft's implementation of the SMB protocol. SMB stands for Server Message Block. It is primarily used in Windows for shared folders. Like most of these protocols, it makes communication between two nodes on a network possible via request-response messages (gross over-simplification).

\n

However, Microsoft made a critical error in the way these request messages where handled. By sending a carefully made request to port 445 (which was by default open) containing more data than expected, an attacker was able to set a \"buffer overflow\" in motion. Making the execution of unsigned (and thus malicious) code possible.

\n

MS17-010

\n

A month before the leak, something remarkable happened. The NSA contacted Microsoft to inform them about EternalBlue, presumably because the NSA knew something was about to go down. Microsoft got to work immediately and mysteriously delayed its Patch Tuesday because of a \"last-minute issue\". They eventually released a security bulletin on March 14, the now infamous: MS17-010. Unfortunately, such a wide-spread piece of software like Windows has a prolonged update adaption rate. This proved, once again, to be true...

\n

WannaCry

\n

On May 12, 2017, the WannaCry (powered by EternalBlue) ransomware attack took the world by storm, infecting and encrypting 230,000 computers in over 150 countries. Russia, Ukraine, India, and Taiwan where affected the most, according to Kaspersky Lab. Huge factories from Nissan and Renault came to a screeching halt. NHS hospitals in the UK where severely affected by the attack and where locked out of essential medical equipment. Some estimated that economic losses could be in the hundreds of millions. North Korea is the main suspect for the attack. Two North Korean hackers have been expedited.

\n

NotPetya

\n

Not much later, on June 27, 2017, Ukraine got stomped by another vicious cyberattack. Armed with EternalBlue, the malware called \"NotPetya\" was able to cause significant damage. The attack was mainly targeted towards Ukrainian banks, government bodies, and state-owned organizations. Think of airports, railways, and telecom companies. Even the radiation monitoring system at the Chernobyl Nuclear Power Plant went offline. Because the attack seemed to be aimed at paralyzing the Ukrainian state rather than for monetary motives, Russia is the main suspect. Although Ukrainian authorities and the CIA spoke out, Russia denies any involvement.

\n

Present day

\n

Scary stuff, right? Should you still be worried about EternalBlue in 2020? Well, the exploit indeed lives up to its name. According to Trend Micro, in 2019, two years after WannaCry broke loose, 73,763 detections were made of specific malware samples known to use EternalBlue. Luckily, Microsoft's MS17-010 patch has reached most home users. But organizations are notoriously slow with updating their hardware. Therefore, EternalBlue is still a famous attack today.

\n

But what can you do, you might ask? If we can take one thing from all of this, we should stop using SMB over the internet. EternalBlue is undoubtedly not the last SMB related exploit. Blue's younger brother, SMBleed (CVE-2020-1206), is a new vulnerability and works very similar. It was only patched by Microsoft in June of this year.

\n

Used Sources

\n

https://arstechnica.com/information-technology/2017/04/nsa-leaking-shadow-brokers-just-dumped-its-most-damaging-release-yet/

\n

https://research.checkpoint.com/2017/eternalblue-everything-know/

\n

https://docs.microsoft.com/nl-nl/security-updates/securitybulletins/2010/ms10-017

\n

https://www.independent.co.uk/news/uk/home-news/nissan-sunderland-cyber-attack-ransomware-nhs-malware-wannacry-car-factory-a7733936.html

\n

https://www.cbsnews.com/news/hospitals-across-britain-hit-by-ransomware-cyberattack/

\n

https://www.bbc.com/news/world-europe-39907965

\n

https://www.bbc.com/news/technology-40706093

\n

https://www.nytimes.com/2017/06/28/world/europe/ukraine-ransomware-cyberbomb-accountants-russia.html

\n

https://www.independent.co.uk/news/world/europe/chernobyl-ukraine-petya-cyber-attack-hack-nuclear-power-plant-danger-latest-a7810941.html

\n

https://www.securityweek.com/smbleed-vulnerability-impacts-windows-smb-protocol

\n

https://www.trendmicro.com/vinfo/us/security/news/vulnerabilities-and-exploits/putting-the-eternal-in-eternalblue-mapping-the-use-of-the-infamous-exploit

\n

https://www.darkreading.com/vulnerabilities---threats/eternalblue-longevity-underscores-patching-problem/d/d-id/1337233

\n","frontmatter":{"date":"October 27, 2020","updated_date":null,"description":"It's been more than three years since EternalBlue; let's do a recap.","title":"EternalBlue: A retrospective on one of the biggest Windows exploits ever","tags":["Cyber Security","Exploits","Virus"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/79a8a4af9dfefb08277f2033020505b7/58556/etbluecover.webp","srcSet":"/static/79a8a4af9dfefb08277f2033020505b7/61e93/etbluecover.webp 200w,\n/static/79a8a4af9dfefb08277f2033020505b7/1f5c5/etbluecover.webp 400w,\n/static/79a8a4af9dfefb08277f2033020505b7/58556/etbluecover.webp 800w,\n/static/79a8a4af9dfefb08277f2033020505b7/99238/etbluecover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Anonymous","github":null,"avatar":null}}}},{"node":{"excerpt":"A blog lets a person express his/her thoughts, and everyone craves to have his/her blog. Creating a blog is quite simple as of today. Open…","fields":{"slug":"/engineering/setup-blog-in-minutes-with-jekyll/"},"html":"

A blog lets a person express his/her thoughts, and everyone craves to have his/her blog. Creating a blog is quite simple as of today. Open-source software such as wordpress, jekyll, hugo can help you create & set up your blog. In this post, we will see about Jekyll and how to host it in Github for free.

\n

Create a brand new Jekyll blog

\n

Install Jekyll using the instructions provided here. You mainly need ruby, ruby gems, gcc, make as pre-requisite. Run the below commands to get a new blog up and running.

\n
gem install jekyll bundler\njekyll new my-new-blog\ncd my-new-blog\nbundle exec jekyll serve
\n

That's it. You can navigate to http://localhost:8080 and see your blog up and running like this

\n

\"A

\n

Customizing the blog

\n

As you see, the blog is a bare minimum, and the default values mentioned in the config file (_config.yml) are used. You can use the _config.yml file to add new plugins, provide metadata about the blog, add your social media profiles, modify themes, etc.

\n

Plugins

\n

Some well-known plugins, to name a few are,

\n\n

You can know about other useful plugins here.

\n

Themes

\n

Minima is the default theme for Jekyll. There are many other themes that you can use too. It is possible to customize the minima theme by adding your CSS and Html. Adding support for comments using Disqus is in-built. Also, there is a provision to enable Google Analytics.

\n

Liquid templating

\n

It need not be that all the contents in the blog have to be static. You can add dynamic content using Liquid templating. Jekyll provides tag and filter options on top of liquid.

\n

Using the custom domain name for the blog

\n

You can specify your custom domain by adding a file CNAME in the git repo, as mentioned here.

\n

Hosting & deploying the blog with Github pages

\n

Using your GitHub account, create a new repository. Push the contents of the jekyll blog created above to the new repository. Go to the github project settings page, generally available in the url\nhttps://github.com/<github-id>/my-new-blog/settings.\nIn the settings page, under the Github pages section, specify the branch to use for the github source. This can be the main branch or some other branch in the repository.

\n

\"Enable

\n

As soon as the github page is enabled on a branch, github automatically creates actions to build the jeyll blog on a new commit to the branch.

\n

\"Github

\n

Advantages of using Jekyll & Github pages

\n\n

When not to use Jekyll

\n\n

Let's get started with blogging using Jekyll & Github pages. Happy blogging!!

\n","frontmatter":{"date":"October 26, 2020","updated_date":null,"description":"Getting started with Jekyll & Github pages","title":"Setup a blog in minutes with Jekyll & Github","tags":["jekyll","blogging","blog","github-pages"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4c39b8cf22b319a7c32f6351ea746be2/58556/jekyll-github-pages.webp","srcSet":"/static/4c39b8cf22b319a7c32f6351ea746be2/61e93/jekyll-github-pages.webp 200w,\n/static/4c39b8cf22b319a7c32f6351ea746be2/1f5c5/jekyll-github-pages.webp 400w,\n/static/4c39b8cf22b319a7c32f6351ea746be2/58556/jekyll-github-pages.webp 800w,\n/static/4c39b8cf22b319a7c32f6351ea746be2/210c1/jekyll-github-pages.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Malathi T","github":"malathit","avatar":null}}}}]},"markdownRemark":{"excerpt":"Introduction Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT…","fields":{"slug":"/engineering/how-to-integrate-jwt/"},"html":"

Introduction

\n

Ever wondered how apps like Spotify, Netflix, or Slack manage seamless login experiences across devices? Many of them use JWT, or JSON Web Tokens, a compact, stateless method for securely transmitting user identity and session data across services.

\n

With JWT token authentication, identity information is embedded in a signed token, allowing you to maintain user sessions without server-side storage. This approach is highly scalable and ideal for modern architectures like SPAs, mobile apps, and microservices.

\n

In this blog, we’ll walk you through what is JWT, why use it, and how to implement JWT authentication using LoginRadius.

\n

You’ll learn what JWT is, why it’s effective, and how it works in real-world applications. We'll cover both integration methods (IDX and Direct API), generating your signing key, managing sessions, storing the JWT token securely, and applying best practices throughout.

\n

Whether you're a developer, product manager, or IAM architect, this guide offers a complete foundation for implementing JWT token authentication into your application stack.

\n

What is JWT?

\n

JSON Web Token (JWT) is an open standard (RFC 7519) used to transmit information securely between parties as a JSON object. It’s compact, self-contained, and digitally signed, making it a reliable format for authentication and authorization across modern applications.

\n

A JWT consists of three parts:

\n
    \n
  1. Header – Contains metadata like the type of token and signing algorithm (e.g., HS256).
    2. \n
  2. Payload – Stores the actual data or “claims,” such as user ID, roles, and token expiry.
    3. \n
  3. Signature – A cryptographic hash that ensures the token hasn’t been tampered with.
    4. \n
\n

Example of a token structure:

\n

<base64Header>.<base64Payload>.<signature>

\n

Why Use JWT?

\n\n

How JWT Works?

\n

\"Flowchart

\n
    \n
  1. A user logs in with credentials.
    2. \n
  2. Your app (or identity provider like LoginRadius) issues a signed JWT.
    3. \n
  3. The client stores the token and sends it with each request (usually in the Authorization header).
    4. \n
  4. The server validates the token’s signature and claims.
    5. \n
  5. If valid, access is granted — without any session stored on the backend.
    6. \n
\n

JWT simplifies identity verification, especially when you're building apps that talk to APIs or need to scale without centralized session storage.

\n

JWT Authentication with LoginRadius: Overview

\n

LoginRadius provides robust support for JWT (JSON Web Token) authentication, which allows for flexible and secure access control across different digital platforms. Whether you're building a fully custom identity flow or using a pre-built interface, the platform supports various integration approaches depending on your architecture.

\n

If you're looking to understand how to implement JWT token authentication effectively, LoginRadius offers two primary implementation models that cater to different levels of customization and control:

\n

1. IDX Implementation – JWT through a Hosted Login Page

\n

The IDX-hosted login approach enables secure, standards-compliant, JWT-based authentication without requiring you to build a custom login interface. This is a strategic option for fast, compliant, and user-friendly deployments.

\n\n

Configuration Steps:

\n
    \n
  1. Enable JWT Login
    2. \n
  2. Go to authentication configuration settings and enable JWT Login in the Admin Console.
    3. \n
\n

\"Screenshot

\n
    \n
  1. Specify your signing algorithm and expiry policy, and define your JWT Secret Key.
    2. \n
  2. Input a secure JWT signing key.
    3. \n
  3. Specify token expiry duration (e.g., 15–60 minutes)
    4. \n
  4. Select the desired algorithm —HS256 for symmetric signing (same key signs and verifies)
    5. \n
  5. RS256 for asymmetric signing, where LoginRadius securely stores the private key used to sign the JWT.
    6. \n
  6. Your app or backend service uses the public key to validate the token signature.
    7. \n
  7. LoginRadius provides a JWKS (JSON Web Key Set) endpoint to dynamically fetch and rotate public keys, ensuring trust without key exposure.
    8. \n
  8. Update IDX Template for Callback
    9. \n
  9. Modify your IDX login page template to retrieve the JWT post-login. You can access the token via redirect URL parameters or secure JavaScript callbacks.
    10. \n
\n

Example Response:

\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR...\",

\n

\"expires_in\": 1800

\n

}

\n

This integration approach works best for all teams that want effective identity workflows without the complexity of building proprietary login screens, something that is crucial for customer portals, onboarding of mobile applications, and even managing access for business partners.

\n

2. Direct API Implementation – Self Managed Login

\n

If you’re building a custom login UI or working in a headless environment, LoginRadius lets you generate and handle JWTs directly through its Authentication APIs. Here’s how you can programmatically perform token authentication using the classic method:

\n\n

Configuration Steps:

\n

Step 1: Authenticate via API:

\n\n

Include the user’s credentials (email + password) in the request body.

\n

Step 2: Get JWT in Response

\n\n

{

\n

\"access_token\": \"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\",

\n

\"expires_in\": 3600

\n

}

\n

Step 3: JWT Decoding and Validation

\n\n

Step 4: Set Custom Claims (Optional)

\n

With LoginRadius, it is possible to customize the payload to include user roles and/or any additional metadata. You can set custom JWT claims on the Admin Console.

\n

With this method, you have complete customization over login flows while using LoginRadius to issue signed JWTs for user session management.

\n

NOTE- With either method, LoginRadius ensures that JWTs are securely signed, optionally short-lived, and compatible with standard token validation libraries, making integration seamless for everyone.

\n

To get started with JWT implementation, you can read our complete developer documentation.

\n

Hosted Login vs Direct API

\n

\"Illustration

\n

What is Session Management and How It Works with JWT

\n

Session management is how your app keeps track of a user after they log in so they don’t have to prove who they are with every request.

\n

In traditional apps, sessions are stored on the server using session IDs. Every time a request comes in, the server checks that session ID to verify the user.

\n

In modern apps, especially SPAs and APIs, JWTs are used to manage sessions without needing server-side storage; this is called stateless session management. The token itself carries the user’s identity, roles, and expiration details. As long as the token is valid, the user stays logged in.

\n

Good session management ensures:

\n\n

How LoginRadius Handles Session Management with JWT:

\n
    \n
  1. \n

    User Logs In

    \n\n
    2. \n
  2. \n

    Client Stores the Token

    \n\n
    3. \n
  3. \n

    Access Token Expiry

    \n\n
    4. \n
  4. \n

    Token Renewal

    \n\n
    5. \n
  5. Logout and Token Revocation Strategy
    6. \n
\n

When the user logs out, both the access token and refresh token should be cleared from client storage.

\n\n

Combining these strategies gives you greater control over token misuse and enables a robust, enterprise-grade logout flow.

\n

\"illustration

\n

How to Store JWT Tokens?

\n

When you implement JWT-based authentication, the client (browser or mobile app) needs a way to store the access token and, optionally, the refresh token after they are issued by the authentication server. This stored token is then attached to every subsequent request to prove the user's identity.

\n

Choosing where to store the JWT is a crucial security decision. The most common storage options are:

\n\n

Each option has trade-offs between security, accessibility, and persistence, and the right choice depends on your application's architecture and threat model.

\n

Recommended Storage Strategy

\n\n

Best Practices for Storing JWTs

\n
    \n
  1. Never store sensitive tokens (like refresh tokens) in localStorage or sessionStorage.
    2. \n
  2. Use Secure and HttpOnly flags with cookies to prevent JavaScript access and ensure transmission only over HTTPS.
    3. \n
  3. Set the SameSite=Strict or Lax attribute on cookies to protect against CSRF.
    4. \n
  4. Use short-lived access tokens and rotate refresh tokens regularly.
    5. \n
  5. Implement CSP (Content Security Policy) to reduce XSS risk.
    6. \n
  6. Avoid storing any tokens in frontend code (e.g., hardcoded in JS files).
    7. \n
\n

Conclusion

\n

JWT authentication with LoginRadius offers a modern, stateless approach to managing sessions across distributed systems. The IDX integration is ideal for rapid deployment, while the Direct API model is best for organizations needing deep customization and integration flexibility.

\n

With robust token signing, refresh capabilities, and centralized control, LoginRadius provides a future-ready foundation for secure, scalable identity architecture. Contact us to know more about JWT authentication and implementation guide.

\n

FAQs

\n

1. What is JWT authentication used for?

\n

A: JWT authentication securely verifies user identities, enabling stateless session management across web, mobile apps, and microservices without server-side session storage.

\n

2. How does LoginRadius simplify JWT integration?

\n

A: LoginRadius simplifies JWT integration by offering hosted IDX login pages and direct API-based authentication methods, enabling rapid deployment and deep customization.

\n

3. Is JWT authentication secure?

\n

A: Yes, JWT authentication is secure when implemented with best practices like short-lived tokens, secure storage methods, signature validation, and refresh token rotation.

\n

4. Can JWT tokens be revoked with LoginRadius?

\n

A: Yes, LoginRadius allows revocation of JWT refresh tokens explicitly, and supports strategies like short-lived tokens and key rotation to manage token lifecycles securely.

\n","frontmatter":{"date":"April 15, 2025","updated_date":null,"description":"Discover JWT (JSON Web Token) authentication, its advantages, and how to integrate it seamlessly using LoginRadius' hosted IDX and Direct API methods for secure, scalable identity management.","title":"JWT Authentication with LoginRadius: Quick Integration Guide","tags":["JWT","JSON Web Token","Authentication","Authorization"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":0.7782101167315175,"src":"/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp","srcSet":"/static/4cedb7829f98208cbc6d5a9aea4e983d/61e93/how-to-integrate-jwt.webp 200w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1f5c5/how-to-integrate-jwt.webp 400w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/58556/how-to-integrate-jwt.webp 800w,\n/static/4cedb7829f98208cbc6d5a9aea4e983d/1cc9f/how-to-integrate-jwt.webp 896w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},"pageContext":{"limit":6,"skip":126,"currentPage":22,"type":"//engineering//","numPages":53,"pinned":"5c425581-f474-5ae9-abe7-cf5342db2aaa"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}