![\"This](\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\")
Found the world-class UX Design Courses.
\nYour one-stop design school to learn new design skills.
\nWebsite | Courses | Topics | Join our community
\nWe share knowledge with the world.
\n\nLearn to think like a UX designer and gain the concepts, skills, and confidence to build your UX career.
\n\nWe envision a world where anyone, anywhere has the power to transform their lives through learning.
\n\nThese are the websites where the world’s top design talents share their works and ideas.
\nShowcase and discover the latest work from top online portfolios by creative professionals across industries.
\n\nDribbble is where designers gain inspiration, feedback, community, and jobs and are your best resource to discover
\n\nAwwwards are the Website Awards that recognize and promote the talent and effort of the best developers and designers.
\n\nCheck out the hand-picked collection of latest mobile design patterns from apps that reflect the best in design.
\nmobbin.design.com
\nOver 500+ interactions from the world's best designed and highest-grossing apps.
\n\nThe largest collection of the best portfolio websites from top designers in the industry.
\n\nDesigners' Secret Source: all the design inspiration you need. Served fresh.
\n\nUse these tools to explore different color schemes quickly.
\nCreate color schemes with the color wheel or browse thousands of color combinations from the Color community.
\n\nCreate and share color palettes for your UI, and measure the accessibility of any color combination.
\n\nSearch, discover, test and create beautiful color palettes for your projects
\n\nContrast is the difference in luminance or color that makes an object (or its representation in an image or display)
\n\nColorbox is a color tool to produce color sets.
\n\nCome to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop, and Sketch.
\n\nThe biggest collection of official brand color codes around. Includes hex color codes for 500+ brands including…
\n\nA curated collection of the most popular and trendy color palettes. Get the perfect color ideas for your design.
\n\nDrawing illustration could be time-consuming, why not start with this template and use it as a draft/underlay and build your design on top of that?
\nOpen-source illustrations for every project you can imagine and create.
\n\nCreators who don't draw face the problem of the boring content for app screens, articles, landing pages, and emails.
\n\nA library of sketchy illustrations of people free for personal and commercial use.
\n\nFree illustrations, for everything. Memorable products, brands, & presentations start with our curated royalty-fr
\n\nIconscout comes with integrated Plugins, conversion Tools, and simple, powerful Editors that enhance and streamline your workflow.
\n\nAn aggregator that indexes various free avatar sources that you can use in your design mockups by copy-paste, API, plugins…
\n\nA collection of star vectors in various styles and illustrations with over 30 collections and 290k images.
\n\nImages and Sketch files of popular devices.
\n\nBig library of high quality best free UI & UX mockups
\n\nHuge collection of free mockups, patterns, illustrations, scene creators, DIY scenes, for Photoshop, Sketch, and Figma
\n\nA directory of the best free design mockups for Photoshop, Sketch, Figma, and InVision Studio.
\n\nFind documentation and resources for designing great apps for Apple platforms.
\n\nBuild beautiful, usable products faster. Material Design is an adaptable system-backed by open-source.
\n\nBehind the scenes of our new design system, This article is part of a series on our new Design Language System.
\n\nWith our company’s growth and new direction, we need a brand identity that is efficient to use, flexible across applications, and able to feature localized content in a globally consistent way.
\n\nOur style guide helps us collaborate across disciplines to build a great experience for all of Shopify’s merchants.
\n\nUse Atlassian’s end-to-end design language to create straightforward and beautiful experiences.
\n\nA collection of tools and resources from Facebook Design.
\n\nMaking the web more beautiful, fast, and open through great typography
\n\nTypewolf helps designers choose the perfect font combination for their next design project-features web fonts in the…
\n\nArchive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity.
\n\nFont Squirrel scours the internet for high quality, legitimately free fonts.
\n\nHere at Typ.io, we're revealing designers' decisions for all to see; peeking under the hood of beautiful websites…
\n\nCreate a testable design prototype for your interviewee and get feedback
\nAdobe XD is your UI/UX design solution for website and mobile apps creation. Design, prototype, and share. Try it now.
\n\nInVision is the digital product design platform used to make the world's best customer experiences.
\n\nFigma helps teams create, test, and ship better designs from start to finish. Meet our customers Packed with design…
\n\nSeamless integration to the Mac app makes saving to Cloud as easy as hitting ⌘S. From there, you can organize designs…
\n\nA new tool for designing modern interfaces, built and used by designers at Facebook
\n\nA framer is coming to the web. Learn more › Why Framer X Resources Framer X Framer is coming to the web. Learn more › The…
\n\nThe principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a…
\n\nThe world's first user flow diagramming tool tailored for designers. Build and present beautiful user flow diagrams…
\n\nFree stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required
\n\nBeautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock…
\n\nStunning stock images, perfect for blogs and websites Explore stock photography by category, all free for commercial…
\n\nA collection of stock photography in a single style. Good for collages. Free for commercial use.
\n\nGlitch images, videos, or webcam using WebGL effects. Save output as image, gif, or video.
\n\nFind beautiful free duotone images to use in any project, or make custom duotone images by uploading your own image and…
\nduotone.shapefactory.co
\nCompressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining…
\n\nExcellent question! Let me give you a side by side comparison. Below are two photos of my cousin. The left image is…
\n\nmade with ♥ All trademarks, service marks, trade names, product names, logos, and trade dress appearing on our…
\n\nThis toolkit is an introduction to the methodology of service design
\nwww.servicedesigntoolkit.orgs
\nConnected space for product teams. Handoff designs and style guides with accurate specs, assets, code…
\n\nScalable, secure, cross-device, and enterprise-ready team collaboration tool for distributed teams. Join 2M+ users &…
\n\n","frontmatter":{"date":"August 13, 2020","updated_date":null,"description":"As a designer, often wondered which new tools and utilities, other designers are using? So here is a list of all the tools and utilities famous around the world in designers.","title":"Best Free UI/UX Design Tools/Resources 2020","tags":["Design","UX","Tools"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/410d54b614a5a7d5a65c0ca21856011c/4fe8c/ux-ui.jpg","srcSet":"/static/410d54b614a5a7d5a65c0ca21856011c/f836f/ux-ui.jpg 200w,\n/static/410d54b614a5a7d5a65c0ca21856011c/2244e/ux-ui.jpg 400w,\n/static/410d54b614a5a7d5a65c0ca21856011c/4fe8c/ux-ui.jpg 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Hitesh Kumawat","github":null,"avatar":null}}}},{"node":{"excerpt":"Migrating your existing code to a new programming language is a very tedious task. We need to have a proper set of requirements and some…","fields":{"slug":"/engineering/a-journey-from-node-to-golang/"},"html":"Migrating your existing code to a new programming language is a very tedious task. We need to have a proper set of requirements and some obvious benchmarking between the new and existing technology.
\nSo here our journey started to transform (not convert) our existing code to a new language. You might be thinking why I have used the word transformation instead of conversion, so -
\nConversion: Conversion is just about writing your existing code in different languages as it is.
\nTransformation: Transformation is about leveraging all possible benefits of a new language and convert accordingly.
\nThe idea of migrating code to a new programming language started with a simple requirement: we wanted to take our cloud solution to on-premise as well. Till now, our services were written in NodeJS for a cloud solution and it was doing pretty well. The performance was also good but there is nothing that cannot be improved upon. So, along with performance improvement, we started to find out that can we make a GUI or CLI using existing NodeJS code that can take our solution on-premise?
\nAnswer for that was practically YES. but, technically NO. If we’re writing apps with a GUI, Node can’t do it on its own. We had to use some other projects which provide GUI creation capabilities (eg: ElectronJS, NW.js, etc). Making CLI seemed doable but there were also problems like the inablility to have single file distribution for our code. And the ability to download a single file and execute commands - without an installer, or even a setup process - does wonders for a user. This also makes the product easily backward-compatible.
\nAlso, another factor came in that it was better to switch to a technology that works closely with gRPC.
\nSo, we drew out a few goals for our new solution
\nAfter research with our requirement, we were able to figure out that we can achieve these with GoLang, developed by Google.\nOn the basis of our research, we also did some benchmarking on different node js frameworks and GoLang.
\nBenchmarking sever we’ve used with below configurations
\nThe benchmarking result was pretty much similor to what we are thinking. Here are the benchmarking results -
\nThe below chart is showing that the Number of requests is very high compared to other node js frameworks.
\nAll the data clearly shows the direction so we decided to move to GoLang.
\n","frontmatter":{"date":"August 11, 2020","updated_date":null,"description":"If your existing technology is not fulfilling all your needs and you are thinking about switching to the new one. Also, if you are concerned about the performance. Here is the blog that can help you in this direction.","title":"A journey from Node to GoLang","tags":["NodeJs","Golang","Performance"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/0cb80044e5634c85f2b1002c7c3661d8/2a4de/node-go.png","srcSet":"/static/0cb80044e5634c85f2b1002c7c3661d8/69585/node-go.png 200w,\n/static/0cb80044e5634c85f2b1002c7c3661d8/497c6/node-go.png 400w,\n/static/0cb80044e5634c85f2b1002c7c3661d8/2a4de/node-go.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Narendra Pareek","github":"pareek-narendra","avatar":null}}}},{"node":{"excerpt":"Overview I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more…","fields":{"slug":"/engineering/react-hooks-guide/"},"html":"I want to explain the inspiration for React Hooks in this walkthrough, what React Hook is and the advantages of hooks, and more. This article covers only an introduction to React Hooks. React Hooks have been introduced in React function components as a way of utilising state and side effects.
\nHave you ever assigned a task to change the functional component which is full of UI and business logic to a Class Component just because the new feature requires the use of state, just to toggle some text colour to red on some events occurred?
\nChances are there if you are a react developer, Hopefully we can solve this using the Hooks.
\nHooks are features that allow you to “hook into” the features of React state and lifecycle from function components. Hooks do not function inside classes. Without classes, they let you use React.
\n\n\nHooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
\n
Dan Abramov has provided a well-rounded introduction to the API, and how and why the framework that many of us use has evolved to where it is now. You can read about it and watch his ReactConf 2018 keynote introducing the hooks proposal.
\nThe key takeaway maybe this:
\n\n\nIf the React community embraces hooks, it will reduce the number of concepts you need to juggle when writing React applications. Hooks let you always use functions instead of having to constantly switch between functions, classes, higher-order components, and render props.
\n
React Hooks enables the functional components to attach the local state to it, so that you can use React functionality without using a class component.
\nAdvantages of react hooks:
\nAs you all know there are two ways to create the React components, one is using the function and other is using the class, there is always a confusion between one v/s other.
\nLet us assume we have a simple class component and then we will convert it to a functional with hooks and see the difference.
\nimport React, { Component } from "react";\nclass Greeting extends Component {\n state = {\n text: "",\n };\n handleChange = (e) => {\n this.setState({ text: e.target.value });\n };\n render() {\n return <input value={this.state.text} onChange={this.handleChange} />;\n }\n}\nexport default Greeting; import React, { useState } from "react";\nexport default () => {\n const [text, setText] = useState("");\n return (\n <input\n value={text}\n onChange={(e) => {\n setText(e.target.value);\n }}\n />\n );\n};\n\nIf you disagree with any of the above, you can play with it in practice. I’m sure that would change your mind!
\n
Let us understand some basic hooks with examples.
\nI will take one example and will explain all the hooks in that example using a various scenarios.
\nimport React, { useState } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n return <h1>{message}</h1>\n};\n\nexport default App;In this example variable message will save the value Hi there, how are you using the useState() hooks. It will be similar to this code we write in the constructor() of class component.
this.state = {\n message: "Hi there, how are you?"\n}\n\nIf you are wondering about the
\nsetMessage@line 3 then be calm, I will explain later in this tutorial
React useEffect() function can be executed in 3 different React component life cycles that are
Let's understand the useEffect() hook by taking the above example. So let's say I want to change the message 1 second after the component is mounted.
import React, { useState, useEffect } from "react";\n\nconst App = () => {\n const [message, setMessage] = useState("Hi there, how are you?");\n\n useEffect(() => {\n console.log("trigger use effect hook");\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000);\n });\n\n return <h1>{message}</h1>;\n};\n\nexport default App;As you can see, In this example we have used the useEffect hook to trigger the setMessage method the change the message variable after 1 second.
But there is one problem, while executing this component you can see that the console.log will trigger twice. The reason is the useEffect hook will by default trigger on change of either state or props similar to the componentDidUpdate method in our class component.
To overcome this kind of case we need to pass the Empty array ([]) as the second argument in the useEffect hooks. So updated code will look like this
\nimport React, { useState, useEffect } from 'react';\n\nconst App = () => {\n const [message, setMessage] = useState('Hi there, how are you?');\n\n useEffect(() => {\n console.log('trigger use effect hook');\n\n setTimeout(() => {\n setMessage("I'm fine, thanks for asking.");\n }, 1000)\n }, []);\n\n return <h1>{message}</h1>\n};\n\nexport default App;The above code means that hook will never be triggered as we have an empty array there, if we want to trigger the hook on a specific variable change of props or state we can add that variable in the array.
For eg : [state.message] here hook will fire on the update of message variable only.
I have covered the two basic and important hooks in this tutorial, there are many more types of hooks available in React, you can find the detailed explanation in the React docs.
\n\n\nWe can use eslint-plugin-react-hooks this eslint plugin that ensures the above two rules.
\n
So, from multiple points of view, we have covered the power of Hooks and seen how we can use controlled state in our Components without utilizing classes.
\nI hope you find this article useful, Happy Reading !!!
\n","frontmatter":{"date":"August 07, 2020","updated_date":null,"description":"A walkthrough guide on React Hooks, what is React Hooks, benefits of Hooks, and how to use Hooks in React and more.","title":"React Hooks: A Beginners Guide","tags":["React","Hooks"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.36986301369863,"src":"/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png","srcSet":"/static/35867498747d433ab6d7d6e31ba37b17/69585/react-hooks.png 200w,\n/static/35867498747d433ab6d7d6e31ba37b17/497c6/react-hooks.png 400w,\n/static/35867498747d433ab6d7d6e31ba37b17/ee604/react-hooks.png 800w,\n/static/35867498747d433ab6d7d6e31ba37b17/f3583/react-hooks.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Mohammed Modi","github":"mohammed786","avatar":null}}}},{"node":{"excerpt":"If enterprise mobile apps are the future of businesses, we are already living in the future. With the growing popularity of technologies…","fields":{"slug":"/identity/securing-enterprise-mobile-apps/"},"html":"If enterprise mobile apps are the future of businesses, we are already living in the future. With the growing popularity of technologies like 5G, blockchain, AI, and machine language, more and more companies are integrating their corporate processes with mobile platforms.
\nSome of these primary capabilities include the management of security, IT infrastructure, content, salesforce, human resource, business intelligence (BI), billing system, and product catalogs.
\nNo doubt, mobile applications are gradually becoming a staple in enterprises.
\nWith all the good that's going around, it is crucial that we flip and try to see through the other side of the scenario.
\nMobile will take over the enterprise software universe very soon. Almost three-quarters of internet users (that sums up to 72.6 percent) will use mobile to access the web by 2025.
\nNo wonder, businesses of all sizes are making the shift towards enterprise mobile apps.
\nWhat could go wrong? It turns out, a lot. Even a well-established enterprise can fail spectacularly—with respect to security—when they take on mobile.
\nZimperium's 2019 State of Enterprise Mobile Security findings below highlights the nuances:
\nMobile security is at the epicenter of an enterprise's concern today. After all, nearly all employees now regularly access corporate data on mobile. You need to keep confidential information out of the wrong hands, and that's an intricate puzzle in itself.
\nFollowing are the major threats security teams need to deal with:
\nImproper Session Handling: Most applications use tokens to allow users to perform multiple actions without re-authenticating their identity every time. Improper session handling happens when apps involuntarily exchange session tokens (for example, with the bad guys), they can exploit the website and the corporate network, altogether.
\nInsecure data storage: There are many vulnerable places in an application where data can be stored: binary data stores, SQL databases, and cookie stores are a few. Majority of these vulnerabilities are triggered by the OS, frameworks, and compilers involved. Often, the poor storage of data results from inadequate processes to manage device gallery and data cache.
\n\nImproper encryption: Encryption is the method of translating data into an unreadable code that is only usable with the secret key after it has been re-translated. Therefore, it is important to evaluate how easy or difficult it might be to crack your application's secret code. This is a common vulnerability that hackers exploit with code and intellectual property theft, leading to privacy violations, and damage to reputation.
\nMobile ad fraud: With the amount of revenue generated by mobile advertising every year, it is no surprise that cybercriminals are after all the cash that can be duped from mobile ad revenue streams. One of the most common types of ad fraud is using malware to generate fraudulent clicks on ads that appear to come from real uses. Ad fraud malware often runs in the background and can overheat the battery, incur high data charges, and make users lose millions of dollars.
\nHuman error from remote workers: Human error is perhaps one of the most commonly observed cybersecurity threats. Despite the steady rise in mass media reporting of cybersecurity accidents, the non-technical population still lacks basic security knowledge. Your responsibility as an enterprise owner is to educate employees on mobile security threats and prevent cybercriminals from accessing a device or network.
\nA holistic approach to security for mobile devices is regarded as an essential part of a security ecosystem. Keeping data storage and application management at the center, here's what the entire ecosystem looks like.
\nLoginRadius, a consumer identity and access management (CIAM) solution, offers a comprehensive approach to protecting enterprise mobile applications. While human error is unavoidable, the platform is an all-in-one solution for all mobile security needs. Some of the features include:
\nThe most efficient mobile security involves intelligent device identification. This describes the emergence and development of identity and access management services like LoginRadius, which offers a host of advantages:
\nMFA is ideally a kind of authentication granted on the server-side and is available after successful authorization. LoginRadius ensures that all user data is encrypted and accessed only after all credentials are successfully validated. Moreover, it creates different authentication tokens for different devices.
\nLoginRadius takes an integrated approach when it comes to responding to mobile threats. It offers a thread of risk management and information security features to prevent cyberattacks or upcoming mobile app vulnerabilities from happening.
\nLoginRadius defends user data by profoundly analyzing the issue that may exist and produces defense strategies accordingly. It keeps you well-informed about how different operating systems, external APIs, platforms, and enterprise mobile frameworks store and transfer their data.
\nSadly, very few companies have a well-secured management policy, while still a lot of others lack absolute power.
\nEnterprise mobile app security is the need of the hour. Businesses must consider the changing state of cybersecurity and mobility when implementing the above-mentioned protection tips to secure their devices.
\n\n","frontmatter":{"date":"August 07, 2020","updated_date":null,"description":"We are already living in the future as corporate mobile applications are the future of companies. More and more businesses are combining their organisational processes with mobile networks with the the popularity of innovations such as 5 G, blockchain, AI , and machine language.","title":"Securing Enterprise Mobile Apps with LoginRadius","tags":["security"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/aecf6bc1006634031f22240252ba32e4/33aa5/Secure-Enterprise-Mobile-App.jpg","srcSet":"/static/aecf6bc1006634031f22240252ba32e4/f836f/Secure-Enterprise-Mobile-App.jpg 200w,\n/static/aecf6bc1006634031f22240252ba32e4/2244e/Secure-Enterprise-Mobile-App.jpg 400w,\n/static/aecf6bc1006634031f22240252ba32e4/33aa5/Secure-Enterprise-Mobile-App.jpg 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},{"node":{"excerpt":"Overview Each business relies on a specific target set of users, who has a problem area. Analysis and further finding out the right solution…","fields":{"slug":"/engineering/design-led-thinking/"},"html":"Each business relies on a specific target set of users, who has a problem area.
\nAnalysis and further finding out the right solution for the identified problem hence helps businesses to meet their target user’s needs.
\nIf the solution meets the needs completely and resolves the pain area, at the right time, acts as an ointment and proves and builds trust for businesses.
\nDesign Thinking plays an important role to reiterate the understanding of problems, causes, environmental changes leading innovation and experimentation for a competitive advantage.
\nDefine the problem - based on\n5 W’s- who, what, where, why, when
\nIdeation - Design Thinking solutions
\nUser Experience - prototype
\n5.Testing of design and solution
\nMatch the solution ideas demonstrated via designs to target users, to make sure every detail of the solution chosen matches the requirements and observations made.
\n| Criteria | \nDesign Thinking | \nTraditional Problem Solving | \n
|---|---|---|
| Nature | \nVisual Thinking Process | \nOld traditional documented process | \n
| Initial Stage | \nObservation, based on Emotional intelligence | \nProblem Defining, based on intelligence | \n
| Based Depends on | \nExperiment, Innovation based on user needs | \nBased on founders vision | \n
| Focussed On | \nWhat People needs | \nBusiness model | \n
| User means | \nReal Humans | \nCustomers | \n
| Solution Proposal | \nRestricts proposing solutions within the problem definition stage. | \nIncludes proposing solutions while problem understanding | \n
| Future Scope | \nVisualize the future of business organization via innovation thinking, via releasing products before actual development. | \nRework and re-iteration with improvement are supported to reach final product deliverable. | \n
| Meaning | \nDiscovery of what WORKS.So encourages Multiple POSSIBLE answers | \nDiscovery of what is RIGHT = CORRECT solution. | \n
| Approach | \nBased on storytelling following a bottom-up approach | \nBased on facts and figures, based on top-down approach | \n
| Testing with real users | \nUser is unaware that he is in test mode and experiences the service he expects to perceive. Example- ability to customize furniture without buying. | \nUser is well aware that he is using test services and does not expect much. | \n
| Phase | \nThere is no planning, instead there exists building of Prototypes and presenting fast to get feedback without delaying the GO-TO market. | \nFollows conventions process of THINKING and PLANNING | \n
| Failure | \nFailure Driven- learn from failure and read to fail anytime as the cost associated is low. FAIL EARLY- FAIL FAST | \nFailure Restrictor- Tries to avoid failure, to avoid huge money loss involved. | \n
Pepsico design-led problem-solving\nFor female user experience, it released a new line of Doritos in china in a stack of the tray and packaged in a canister, instead of a snack bag, so that women can use it opening the drawer and push it back when done, as they don't like other to notice them munching.
\n\nSamsung’s design-led innovation\nIt realized the need of Korean and Japanese business users who had common practice to note or schedule events or important points in small pocket-sized notebooks, This led to an innovative idea where the user was observed and the need was created and hence realized to users.\nSamsung launched a successful Galaxy Note series. with the innovation of “smart diary” a 5.5-inch interface with a stylus pen to pair.
\n\nSamsung design concept used for experimenting\nWhere it experimented with TV units, realizing the fact that users are spending more time on furniture, so TV ‘s are supposed to be a bit more attractive. This led to the radical change for the speaker’s positioning at the TV sets to be hidden at the bottom instead of the traditional side panes. This has experimented in the European market first and after a successful adaption, Samsung experimented more with visual appearance and by the time it was building the product, it had already sold a million units.
\n\nStanford Hospital for improvement\nIt worked on improving the experience of a patient within the emergency room and for staff to serve patients a better way
\n\nIt is very important to drive and extract meaningful images out of the observations from real humans.\nThis requires an influencing processor who can drive the team to opt for an approach for DESIGN THINKING. Here even the market leaders are at risk to sustain with innovations and experiments involved with Early FAILURES.
\n","frontmatter":{"date":"August 06, 2020","updated_date":null,"description":"Design thinking is a solution-oriented, iterative process where the team creates the design while keeping the end customers in mind. This blog guides you about how does design-led thinking works.","title":"DESIGN THINKING -A visual approach to understand user’s needs","tags":["Design","Design Thinking","UX"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/86c25548974790cc4477586bd28eee2e/ee604/design_led_thinking.png","srcSet":"/static/86c25548974790cc4477586bd28eee2e/69585/design_led_thinking.png 200w,\n/static/86c25548974790cc4477586bd28eee2e/497c6/design_led_thinking.png 400w,\n/static/86c25548974790cc4477586bd28eee2e/ee604/design_led_thinking.png 800w,\n/static/86c25548974790cc4477586bd28eee2e/f3583/design_led_thinking.png 1200w,\n/static/86c25548974790cc4477586bd28eee2e/e4d72/design_led_thinking.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Deepali Soni","github":null,"avatar":null}}}},{"node":{"excerpt":"Audience: Anyone who wishes to deliver secure code to the rest of the world. Answer to What it is? At the heart of any image scanning tool…","fields":{"slug":"/engineering/container-security-scanning/"},"html":"Audience: Anyone who wishes to deliver secure code to the rest of the world.
\nAt the heart of any image scanning tool is static analysis against a “Common Vulnerabilities and Exposures” (CVE) database. Each layer within the container image is analyzed and queried to discover known vulnerabilities.
\nIn addition to vulnerability scanning, a comprehensive tool should compare the architecture of your application against best practices to identify potential vulnerabilities.
\nWhile tools like Kubernetes and Container Registries have become household names for developer community because these tools make their life much easier to develop and deploy applications, many are still catching up on the need to integrate container security tools to secure their containerized application throughout the container lifecycle. As the world is already shifted to containerized applications, taking good care of you docker images is also equally important.
\nOne of the main unique features of containers is how layers are used to build a container image. A service is piled up with an application server layer, a Linux layer and so on. One of these layers is updated, we can rebuild the application with a new updated version.
\nIt would be an unthinking idea to get into a container-based strategy without integrating a well-grounded and inclusive container scanning security solution into the CI/CD setup.
\nI am here, implementing a Clair tool in gitlab-ci.yml to get secure docker images.
\nimage_scanning:\n stage: scan\n image: docker:stable\n tags:\n - gitlab-org-docker\n services:\n - docker:19.03.8-dind \n variables:\n DOCKER_DRIVER: overlay2\n allow_failure: true\n before_script:\n - echo $CI_BUILD_TOKEN | docker login -u $CI_REGISTRY_USER --password-stdin $CI_REGISTRY\n script:\n - docker run -d --name db arminc/clair-db:latest\n - docker run -p 6060:6060 --link db:postgres -d --name clair --restart on-failure arminc/clair-local-scan:v2.0.1\n - apk add -U wget ca-certificates\n - docker pull $CI_REGISTRY_IMAGE:$PROJECT_NAME-latest || true\n - wget https://github.com/arminc/clair-scanner/releases/download/v8/clair-scanner_linux_amd64\n - mv clair-scanner_linux_amd64 clair-scanner\n - chmod +x clair-scanner\n - touch clair-whitelist.yml\n - while( ! wget -q -O /dev/null http://docker:6060/v1/namespaces ) ; do sleep 1 ; done\n - retries=0\n - echo "Waiting for clair daemon to start"\n - while( ! wget -T 10 -q -O /dev/null http://docker:6060/v1/namespaces ) ; do sleep 1 ; echo -n "." ; if [ $retries -eq 10 ] ; then echo " Timeout, aborting." ; exit 1 ; fi ; retries=$(($retries+1)) ; done\n - ./clair-scanner -c http://docker:6060 --ip $(hostname -i) -r gl-container-scanning-report.json -l clair.log -w clair-whitelist.yml $CI_REGISTRY_IMAGE:$PROJECT_NAME-latest || true\n - cat gl-container-scanning-report.json\n artifacts:\n paths: [gl-container-scanning-report.json]\n rules:\n - if: '$CI_COMMIT_BRANCH == "staging"'\n when: alwaysgitlab-org-docker is a GitLab shared-runner to run this analysis (an agent on which the above-described job will run), it will fetch the latest ms image and will run it against the CVE database, at last record the report in the JSON file which we can store as artifacts. These artifacts can be further used by the developer to see and resolve the vulnerabilities.
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.
\nWe’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.
\nThe goal? Having them spend less time searching and more time building.
\nLoginRadius’ 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.
\nHere’s a closer look at what’s new and why it’s important:
\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.
\nThe 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.
\nSo, 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![\"This](\"/e5358b82be414940f3fb146013845933/capabilities.webp\")
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:
\nThis structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.
\n![\"This](\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\")
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.
\nThe 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![\"This](\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\")
Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.
\nOur platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.
\nCheck out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.
\nDo 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":738,"currentPage":124,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}