{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/115","result":{"data":{"allMarkdownRemark":{"edges":[{"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":"Identity management for developers isn't a tough nut to crack, especially if you know how to play your cards right.  As a creator of front…","fields":{"slug":"/identity/identity-management-developers/"},"html":"

Identity management for developers isn't a tough nut to crack, especially if you know how to play your cards right. 

\n

As a creator of front-end or back-end applications, you will eventually experience the need to collect and store consumer information like their identities and other profile details. 

\n

At the same time, you'll also need to design a new user registration workflow, enable omnichannel experience, configure authentication methods like social login, provision or deprovision consumers, partner to a third party application or secure the API of your web services.

\n

Learning the basics of identity management for developers can place you in a strong position to communicate what you need and why.

\n

Current Security Challenges That Developers Face

\n

Risk-Based Security, a cyber threat intelligence company, stated in its report that more than 15.1 billion records were compromised in 2019—that sums up to 284% year-over-year growth! 

\n

Data security is the need of the hour. The developer's responsibility is to build security within applications right from the first stage of development. 

\n

Working with identity access management, particularly CIAM, when designing customer-facing solutions, is a fantastic idea. It mitigates various application threats that may otherwise prove fatal for consumers. 

\n

Some of the common ones include: 

\n

Brute force attack

\n

Brute force is a popular password-guessing attack that web developers face. Hackers use automated software to guess every possible combination of letters, numbers, and symbols until they successfully crack the password. So, if your application or website requires authentication, there is a good chance you may be a target for brute force attacks. 

\n

One of the most obvious ways to block brute-force attacks is to automatically lock out accounts after a predefined number of incorrect password attempts. You can keep the accounts locked for a specific duration or until an administrator manually unlocks them.

\n

Injection attack

\n

An injection attack is a malicious code injected by the attacker into a network. The input is interpreted as a part of a command or query. This, in essence, modifies the execution of the program. Injections are amongst the oldest attacks in the book aimed at data theft, data loss, denial of service, and even full system compromise.

\n

However, mitigating injection flaws isn't very difficult. Developers should make it a point to stop writing dynamic queries and also prevent user-supplied input with malicious SQL from affecting the executed query.

\n

Man-in-the-middle attack

\n

A man-in-the-middle attack happens when the hacker intercepts a conversation between a consumer and an application. The hacker may eavesdrop or impersonate one of the parties and steal passwords or credit card information. 

\n

To mitigate such spoofing attacks, developers can utilize secure communication protocols like TLS and HTTPS. They can also keep consumers logged out of their applications when not in use. Encrypting and authenticating transmitted data is another way to steer clear of man-in-the-middle attacks. 

\n

Social engineering attack

\n

Social engineering attacks involve the hacker manipulating human emotions to attack the victim. They utilize common phishing scams through email and text message campaigns to impose urgency, curiosity, or fear in the victim, hoping that the user will download malware or click unsolicited links that host the malware.

\n

Backing up files regularly, keeping software updated, and always scanning executable files before running them are a few ways to avoid social engineering attacks. 

\n

Security misconfiguration 

\n

Security misconfiguration happens when the network administrator fails to implement all security controls for a server or implement security controls, but with errors. It could happen with legacy applications when they try to communicate with applications that do not exist anymore. Hackers may replicate these applications and try to establish connections. 

\n

One of the best ways to fight security misconfiguration is through increased visibility. Make sure you have an accurate, real-time map of your entire ecosystem, so you are always focused on your critical assets. 

\n

Developers are on the front foot

\n

\n

What can prevent someone from breaking into an application or online software system and stealing information or accessing sensitive credentials? Both the challenges and the solutions rely on software, and the situation is well known to many developers. After all, they are the first line of defense.

\n

Gathering and evaluating evidence is a critical step in ensuring that a safety-first culture is being developed within the development team. They should conduct proper assessment, identify the progress of the team in real-time, and benchmark their strengths and weaknesses for continuous improvement. The inclusion of identity management for developers can also help. 

\n

Application Security Regulations

\n

According to Forrester's study, 42% of external attacks happen due to software exploitation, and 35% is a result of web application vulnerability. As applications become more complex, different laws have been enacted to ensure their security. 

\n

To help developers prepare better, we come up with a list of the best application security regulations that's been mitigating the threat landscape to a large extent. 

\n\n

Integrating Security in DevOps

\n

\n

The business IT infrastructure of today is more varied, diverse, and complex than ever before. Environments there were earlier confined to on-premises and are not hosted on multiple clouds and IoT devices. 

\n

However, this modern open perimeter has been posing fundamental challenges for cybersecurity. It requires a zero-trust environment to thrive in the development and operations (DevOps) life cycle. It takes not only the right tools and technology to bring this approach into effect, but a shift in philosophy focused on the holistic integration of security within the DevOps lifecycle.

\n

\n

The safety mechanisms embedded in DevOps offers the following benefits (but not confined to): 

\n\n

How LoginRadius Provides Ideal Identity Management for Developers

\n

\n

Identity is the cornerstone of the modern consumer experience. A good, scalable CIAM solution allows you to manage consumer identity and access securely.

\n

LoginRadius' admin-friendly UI seamlessly implements identity management and balances the skills of your developers. Consequently, it will significantly reduce the developer's effort. For example, you can easily control who is allowed to sign in to your site, how they can do it, and what they can access once they have successfully signed in. 

\n

Here are the core capabilities of LoginRadius identity management for developers. 

\n\n

Conclusion

\n

Identity management for developers is required more than ever. It should be seamless, simple, and secure. The development team is under extreme pressure to build digital experiences that disrupt their industry or differentiate their business. 

\n

No wonder meeting the demands of both businesses and consumers is an uphill ride. The right CIAM solution comes with improved data security and identity management features that meet the developers' need for top-notch experiences.  

\n

\n","frontmatter":{"date":"October 29, 2020","updated_date":null,"description":"Identity management for developers isn't a tough nut to crack, especially if you know how to play your cards right. As a creator of front-end or back-end applications, you will eventually experience the need to collect and store consumer information like their identities and other profile details. Learning the basics of identity management for developers can place you in a strong position to communicate what you need and why.","title":"Identity Management for Developers: Why it's required more than ever","tags":["customer-experience"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/300bad31f0b8b26c9733705acd1f030a/7f8e9/Identity-Management-for-Developers.webp","srcSet":"/static/300bad31f0b8b26c9733705acd1f030a/61e93/Identity-Management-for-Developers.webp 200w,\n/static/300bad31f0b8b26c9733705acd1f030a/1f5c5/Identity-Management-for-Developers.webp 400w,\n/static/300bad31f0b8b26c9733705acd1f030a/7f8e9/Identity-Management-for-Developers.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},{"node":{"excerpt":"The problem with passwords is that they can be guessed, hacked, or coerced out of consumers through social engineering or phishing attacks…","fields":{"slug":"/identity/loginradius-launches-passwordless-login-with-magic-link-or-otp/"},"html":"

The problem with passwords is that they can be guessed, hacked, or coerced out of consumers through social engineering or phishing attacks. So, why not eliminate the main source of insecurity by going passwordless? 

\n

The recently launched Passwordless Login with Magic Link or OTP feature by LoginRadius gets authentication right by hitting all the right chords—streaming consumer experience, enhancing account security, and improving adaptive security (to name a few).

\n

Intent Behind the Launch

\n

Passwordless Login with Magic Link or OTP reduces friction during the registration and login processes. Once the customer enters the Email Address or Phone Number, they receive a magic link via email or OTP on the phone number. As the consumer clicks the magic link or enters the OTP, LoginRadius creates an account (provided it doesn’t already exist), and the consumer automatically logs into the account.

\n

\"Passwordless

\n

Passwordless Login with Magic Link or OTP is designed by LoginRadius to help your business in the following ways: 

\n\n\n\n

LoginRadius also supports various implementation and deployment methods that you can choose depending on your business needs.

\n\n

A Final Word

\n

Times are changing. The majority of consumers do not look forward to creating and entering passwords anymore. Passwordless Login with Magic Link or OTP by LoginRadius is the one-click solution for consumers’ fast-paced authentication needs. It helps businesses improve their security posture while providing a better consumer experience. 

\n

\"LoginRadius

\n","frontmatter":{"date":"October 29, 2020","updated_date":null,"description":"The problem with passwords is that they can be guessed, hacked, or coerced out of consumers through social engineering attacks. So, why not eliminate the main source of insecurity by going passwordless?","title":"Announcement - LoginRadius Launches Passwordless Login with Magic Link or OTP, Keeps Barriers Low During Registration and Login","tags":["passwordless login","data security","cx"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/f9626b12256083c953eaa239cdc22f83/c0524/DS-Login-with-Magic-Link-or-OTP.webp","srcSet":"/static/f9626b12256083c953eaa239cdc22f83/61e93/DS-Login-with-Magic-Link-or-OTP.webp 200w,\n/static/f9626b12256083c953eaa239cdc22f83/1f5c5/DS-Login-with-Magic-Link-or-OTP.webp 400w,\n/static/f9626b12256083c953eaa239cdc22f83/c0524/DS-Login-with-Magic-Link-or-OTP.webp 769w","sizes":"(max-width: 769px) 100vw, 769px"}}},"author":{"id":"Karl Wittig","github":null,"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}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":684,"currentPage":115,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}