{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/156","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this…","fields":{"slug":"/engineering/my-name-is-darryl-this-is-how-work/"},"html":"

Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this episode, I'm going to tell you about the tools I use, the things I do to get design inspiration, and what I do when I get stuck on a project.

\n

Let's get started!

\n

Tools I use

\n

Coffee

\n

Let's face it, you all know this is the number 1 priority for pretty much everyone you know. Getting my fuel up and over driving my brain... And hope to god I don't break down in the middle of the day.

\n

Sublime Text 3

\n

The Photoshop to my coding skills. Sure, there are other text editors out there but this one really knows what it's doing. I have come to the point where I've installed so many Sublime Packages that I cannot function without them.

\n

Some of those packages are:

\n
    \n
  1. Emmet Boy, oh boy, Let me tell you about Emmet. But, it would take a long time to explain what it is, so just go to their site. It's basically premade snippets for pretty much everything you need.
    2. \n
  2. SidebarEnhancementSublime's sidebar is a little bit underdeveloped. Then again, that's what packages are for, right? This nifty little package ehances your sidebar with more options to choose from like: 'Reveal...' (which opens the file folder).
    3. \n
  3. ColorHighlighterIf you're the kind of person who remembers the hex code for colors, you are one talented individual. Ya see, it's hard to visualize colors using hex code. ColorHighlighter puts a background on those colors for you to easily visualize what kind of color #00427c is (regal blue, btw).
    4. \n
  4. SFTPThis one is a cool package. It lets you edit, sync, and save on-upload files from any of your sftp or ftp servers. But only if you configure it properly. If you use any preprocessors and you're worried that you have to upload the processed file manually. Worry no more as you can make sftp monitor that file if it has changed and automatically upload it. Pretty neat, huh?
    5. \n
\n

And since we're talking about sublime and packages, check out this nifty blog about sublime text and their packages.

\n

Codekit

\n

If you don't know what is codekit, you should. It compiles everything from SASS to HAML to Coffeescript. It also auto refresh your browser on every save. It... it just works. Bower is also built-in so you have access to over 6,000 components. Best part? No command line usage. Just drop your project files and go.

\n

What I do to get inspired.

\n

As a normal human being — and not an extraterrestrial or alien as you tiny humans may call it. I tend to get stuck in a design black hole. It is where every ideas you have is just 1 big blank canvas — or as some artists call it \"modern art\". So what do I do when I don't have any ideas? It's simple really. The first website I go to is dribbble.com. Dribble used to be an invite-only social network for designers. I think they probably opened their doors to everyone. I'm not really sure. But, I am sure that most of the designers there are still the best of the best. What I really like about it is when some designers show how their designs interact with users. With the help of GIF or codepen. Speaking of codepen, That's the place I go to if I am in need of some CSS trickery. At some point, I do get inspiration from that place too. If dribbble can't help my —oh so in the dark— brain, I go to Pinterest. Pinterest have their own design category with a bunch of different sub categories from Graphic Design to UI/UX. The best thing about it? It links back to another site with more design inspiration. YAY for Pinterest.

\n

Getting out of a sticky situation

\n

Now that my brain is full of design food. How do I put it to work? There's this thing called a notebook. If you don't know what that is. It looks like this. \n

\n","frontmatter":{"date":"September 22, 2015","updated_date":null,"description":null,"title":"Hi, My Name is Darryl, and This is How I Work","tags":["Tools","Engineering"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/c79f21489b740148a259277d35e3bbd5/630fb/darryl-how-i-work-300x300.png","srcSet":"/static/c79f21489b740148a259277d35e3bbd5/69585/darryl-how-i-work-300x300.png 200w,\n/static/c79f21489b740148a259277d35e3bbd5/630fb/darryl-how-i-work-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it…","fields":{"slug":"/engineering/beginners-guide-for-sublime-text/"},"html":"

Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it is just plain fun. The goal of this blog is to help you set-up the basic extensions that are required while working with Sublime: Package Control, a professional, sharp looking theme pack, and a core feature of Sublime, \"Goto Everywhere\". I am using a Mac, but the concept also works well in Windows, check the corresponding shortcut online, and it should be an easy and smooth process.

\n

Before marching forward, make sure Sublime Text Editor 3 is properly installed, if you haven't installed it yet, you can download it here.

\n

1. Package Control

\n

Still with me? Awesome! Let's get started. First of all, the most amazing thing about Sublime is the diverse collection of packages you can install. The packages vary from big ones such as Git and SublimetoCodeIntel to small handy widgets like color picker and path auto fill. Keep checking and digging for the most useful packages for yourself is a very important part for your daily coding with Sublime. Therefore, first things first, let's install the Package Control.

\n

Installation Guide is here

\n

Press

\n
ctrl + `(Normally the one under Esc)
\n

Then paste the code from above link into your console, it could be confusing to paste a big graph of code into your sublime python console, but it does work, so Let's do it.

\n

Now try pressing

\n
Cmd + Shift + p
\n

Then type \"Install Package\", you should see it now:

\n

\n \n \n

\n

2. Theme

\n

Prior to installing any functional package, let's make sublime even prettier, let's search for a theme!

\n
    \n
  1. Install Package from above
    2. \n
  2. Then type \"Theme\"
    3. \n
\n

You should see a big list of themes right now, you can first search on the internet to have some previews of the themes, pick a good color scheme that you like and then search for it here. What I would suggest is the one I am using it, is called \"Theme - itg.flat\"

\n

After installing your preferred theme, the font and color scheme for sublime may have already been updated. But it doesn't quiet look like what you have seen from elsewhere does it? It's because you also need to update the UI preferences for sublime, for itg.flat it will give you a more flat look after the update.

\n

Navigate to:

\n

\n \n \n

\n

What this file does is actually overwrite the settings in the default-setting JSON file, if you mess up with this user file, just delete them to recover back to the original settings. So feel free to play around with it, from here you can define the settings from your theme provider's guidance, here I will post mine as a sample

\n
{\n  "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",\n  "font_size": 14,\n  "highlight_line": true,\n  "highlight_modified_tabs": true,\n  "theme": "itg.flat.dark.sublime-theme"\n}
\n

Please note JSON format is significant to Sublime Settings, when you are not sure about it, check it with an online JSON validator. Now with this step done, you will have a delightful working environment to write your code in:

\n

\n \n \n

\n

3. Goto Everywhere

\n

One of the most awesome features provided by sublime is called \"Goto Everywhere\", to me it is more like a \"Find Everything\". Once you get used to it, it will boost your productivity incredibly by saving enormous amount of time on finding stuff. Here is a brief list of its most common usage purpose:

\n\n

To trigger this feature, press key combination:

\n
Cmd + p
\n

Then for different purpose you just press different buttons to trigger the function,

\n\n

So far I have briefly covered the essential features sublime provides.In the next blog of this series I will explain how to make your work even easier by utilizing sublime Project, Snippet and Macro.\nUntil then, Adios!!!

\n","frontmatter":{"date":"September 15, 2015","updated_date":null,"description":"Getting started with one of the lightweight Code Editor Sublime Text and it's package control and shortcut commends","title":"Beginner's Guide for Sublime Text 3","tags":["SublimeText","CodeEditor"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fe6e52be480d783d993428df72436141/7d145/Beginner-Guide-Sublime-Text.png","srcSet":"/static/fe6e52be480d783d993428df72436141/69585/Beginner-Guide-Sublime-Text.png 200w,\n/static/fe6e52be480d783d993428df72436141/497c6/Beginner-Guide-Sublime-Text.png 400w,\n/static/fe6e52be480d783d993428df72436141/7d145/Beginner-Guide-Sublime-Text.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon…","fields":{"slug":"/engineering/social-network-branding-guidelines/"},"html":"

I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon color to green. But, hey at least you didn’t distort the logo.

\n

Hello and welcome to another segment of me telling you things that you need to know but will ignore at some point. Let’s get started.

\n

Social Login and Social Sharing are everywhere. Some people even combine it with with their User Registration. There’s no surprise that on every website you go to, you’ll see either well designed social icons or just plain ugliness. We can’t blame them, they want their icons to be unique and eye catching.

\n

\n \n \n Beauty!

\n

But, the universe is full of holes inside an “A” whom sometimes destroy a thing of beauty.

\n

\n \n \n

\n

Quick, somebody call 911!

\n

Twitter branding is a little bit complicated. Probably because they had multiple drastic changes in their logo design.

\n

\n \n \n Nonetheless, it’s simple.

\n\n

On Google+ (yes “ + “ not “plus“), they prefer that you don’t change or remake their icon. But if you must, you can style it to match your design, as long as you don’t...

\n\n

If you’re using the icon with the title, You should use “Google” without the plus (word and sign), because… well… that’s redundant.

\n

LinkedIn is kind of ridiculous with their branding guidelines. They still have the same drill with no distorting or changing the color and so forth. But there’s one thing you won’t expect, you cannot change the radius or the box. \n \n \n

\n

We’re all going to LinkedIn Jail!

\n

Keep it to a minimal radius, like 2px. That means no circle, square, iOS style rounded icons — hold the phone, did LinkedIn just violate their own branding guidelines? Tsk tsk, LinkedIn. Breaking your own rules, eh?

\n

What about the other 30+ social icons? Well, by now you’ve probably seen the pattern here. No? Well, let me break it down for you.

\n\n

But, who am I to tell you what to do? Just do what makes you happy and hope to god they don’t catch you. Keep in mind too that these branding guidelines are part of your user experience and affect your users impression of the site.

\n

Let me know in the comments if there’s a specific guideline that I miss.

\n","frontmatter":{"date":"September 08, 2015","updated_date":null,"description":null,"title":"Social Network Branding Guidelines","tags":["Social","SocialLogin","Branding"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/5e82ea46808325c644771116384e3aad/630fb/social-network-branding-300x300.png","srcSet":"/static/5e82ea46808325c644771116384e3aad/69585/social-network-branding-300x300.png 200w,\n/static/5e82ea46808325c644771116384e3aad/630fb/social-network-branding-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database…","fields":{"slug":"/engineering/index-in-mongodb/"},"html":"

 Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database system. This article gives insight about the index in MongoDB, for query optimization.

\n

Index in Mongo:

\n

Default

\n

_id is an ObjectId object, 12-byte BSON type that guarantees uniqueness within the collection. The ObjectId is generated based on timestamp, machine ID, process ID, and a process-local incremental counter.

\n

Single Field

\n

For a single-field index and sort operations, the sort order (i.e. ascending or descending) of the index key does not matter because MongoDB can traverse the index in either direction. The value of index is the type of index. For example, 1 indicates ascending order and -1 specifies the descending order.

\n
db.friends.createIndex( { "name" : 1 } )
\n

\n

Compound Field

\n

The order of fields listed in a compound index has significance. For instance, if a compound index consists of { userid: 1, score: -1 }, the index sorts first by userid and then, within each userid value, sorts by score.

\n
db.products.createIndex( { "item": 1, "stock": 1 } )
\n

\n

Multiple Key

\n

MongoDB uses multiple index to index the content in an array. MongoDB creates separate index entries for every element of the array. You do not need explicitly create multiple key.

\n

Text Index

\n

A collection can have at most one text index.
\nPerformance cost for text index:
\ntext indexes can be large. They contain one index entry for each unique post-stemmed word in each indexed field for each document inserted.
\ntext indexes will impact insertion throughput because MongoDB must add an index entry for each unique post-stemmed word in each indexed field of each new source document.

\n
db.reviews.createIndex( { comments: "text" } )
\n

Hash index

\n

Query content by its hashed value. The hash is a function to computed by its value. The hashed value is designed to be distinct value. The one advantage is it is so quick, which take O(1) at most but by contract the normal binary search tree will take O(Log(N)). Hash will be theoretically quicker than normal binary search tree implementation. But the disadvantage is hash index performing range search will be extremely slowly than normal index.

\n

This an example in python to build a hash index

\n
db.active.createIndex( { a: "hashed" } )
\n","frontmatter":{"date":"September 01, 2015","updated_date":null,"description":null,"title":"Index in MongoDB","tags":["MongoDB","Database"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/37f07a89ba1a1b4fd56cbd7c0548d86a/ee604/mongo-db-index1.png","srcSet":"/static/37f07a89ba1a1b4fd56cbd7c0548d86a/69585/mongo-db-index1.png 200w,\n/static/37f07a89ba1a1b4fd56cbd7c0548d86a/497c6/mongo-db-index1.png 400w,\n/static/37f07a89ba1a1b4fd56cbd7c0548d86a/ee604/mongo-db-index1.png 800w,\n/static/37f07a89ba1a1b4fd56cbd7c0548d86a/f3583/mongo-db-index1.png 1200w,\n/static/37f07a89ba1a1b4fd56cbd7c0548d86a/196bc/mongo-db-index1.png 1278w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mark Duan","github":null,"avatar":null}}}},{"node":{"excerpt":"Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element…","fields":{"slug":"/engineering/ab-use-css2-sibling-selectors/"},"html":"

Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.

\n

I’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.

\n

What are sibling selectors.

\n

Sibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).

\n

Squiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.

\n

Great, give me the deets.

\n

\n \n \n

\n

Have you ever seen our support docs?

\n

Would you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.

\n

Anyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.

\n
.sibling:first-child {\n/*styles for first sibling*/\n}
\n

Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.

\n
.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}
\n

Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.

\n

Let’s go crazy.

\n

How do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.

\n
<div:first-child + div + div {\n/*styles*/\n}
\n

The best part is. It’s backwards compatible.

\n

What about the 12th child? Well, you can just painfully type all those “+ div”.

\n

Now, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.

\n

Keep experimenting with this technique and be free from any restrictions of IE8.

\n","frontmatter":{"date":"August 18, 2015","updated_date":null,"description":null,"title":"How to ab-USE CSS2 sibling selectors","tags":["Engineering","Selector","CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/945890eb5408214619f2dbcdf3da2fcf/7d145/sibling-selectors.png","srcSet":"/static/945890eb5408214619f2dbcdf3da2fcf/69585/sibling-selectors.png 200w,\n/static/945890eb5408214619f2dbcdf3da2fcf/497c6/sibling-selectors.png 400w,\n/static/945890eb5408214619f2dbcdf3da2fcf/7d145/sibling-selectors.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text…","fields":{"slug":"/engineering/customize-user-login-register-and-forgot-password-page-in-drupal-7/"},"html":"

Did you ever want to customize your registration or login page on Drupal 7, but did not know how? Customizing these pages by adding new text or changing theme is not a difficult task.

\n

To help you out with that, I have compiled some simple steps to customize your registration or login page. All that you need to do is to add the following code :

\n

Steps:

\n
    \n
  1. In the first step of customization, you need to implement hook_theme in your module file.
    2. \n
\n
 array(\n      'template' => 'user_login',\n      'render element' => 'form',\n      'path' => drupal_get_path('module', 'yourmodule') . '/templates'\n    ),\n    'user_pass' => array(\n      'template' => 'user_pass',\n      'render element' => 'form',\n      'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n    ),\n    'user_register' => array(\n      'template' => 'user_register',\n      'render element' => 'form',\n      'path' => drupal_get_path('theme', 'yourmodule') . '/templates'\n     ),\n  );\n  return $theme;\n}-->
\n

Now that you have implemented hook theme in module file, the next step is to implement three pre-process functions. These functions are used if module needs to override or you want to add something in theme pre-processing.

\n

In the third step, you need to create following template files for login/register/forgot password.

\n
    \n
  1. user_login.tpl.php
    2. \n
  2. user_register.tpl.php
    3. \n
  3. user_pass.tpl.php
    4. \n
\n

Now paste the following code into user_login.tpl.php. Also, don’t forget to modify user_register.tpl.php and user_pass.tpl.php template files accordingly.

\n
<!--\n\n  \n-->
\n

Now your login page will contain new intro text This is my awesome login form. Customization of registration page in Drupal 7 is not difficult and if you follow above mentioned tips, you can design an amazing registration / login / forgot password page according to your audience.

\n","frontmatter":{"date":"August 11, 2015","updated_date":null,"description":null,"title":"Customize User Login, Register and Forgot Password Page in Drupal 7","tags":["Drupal"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/26f698c9942b635d0137bd4039e85ba7/7d145/drupal-custom-login-register-password-pages1.png","srcSet":"/static/26f698c9942b635d0137bd4039e85ba7/69585/drupal-custom-login-register-password-pages1.png 200w,\n/static/26f698c9942b635d0137bd4039e85ba7/497c6/drupal-custom-login-register-password-pages1.png 400w,\n/static/26f698c9942b635d0137bd4039e85ba7/7d145/drupal-custom-login-register-password-pages1.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","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.jpg"}}}},"pageContext":{"limit":6,"skip":930,"currentPage":156,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}