Frontend-Design Knowledge Sharing #18
Thinking in React Hooks, Gradient Generator, CopyPalette, Generated photos, productdesign.tips,
Table of Content
— Frontend Talks
- Thinking in React Hooks
- Gradient Generator
- CopyPalette
- Generated Photos
— Design Talks
- productdesign.tips
Thinking in React Hooks
React introduced hooks one year ago, and they’ve been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.
For more details visit the article here
Gradient Generator
Take two colors and create a variety of custom CSS gradients. It's a tool that generates a stepped gradient between 2 colors
To change one of the colors, you can use the color picker or preselected swatches. Click on one of the boxes to do it.
To control how many you colors you want to generate, use the slider under the boxes.
You can copy colors in formats: HEX, HSL, RGB. Click on the value, and the color will be copied to your clipboard. If you want to invert the gradient, click on the icon between the boxes. Check the generator here
CopyPalette
It creates an SVG color palette and use it in Figma or Sketch by just copy and paste feature.
Visit the site here
Generated Photos
They are building the next generation of media through the power of AI. More than 100,000 Faces Generated by AI which is free to Download. One simple api and infinite diversity.
Visit the site here
Product Design Tips
It is a community of product designers to help grow each other, find a dream job and create products that will change the world. A product challenge where each and every one of us is contributing to the world’s greenhouse gas emissions by consuming products and services. Take on a design challenge to solve real-world problems.
In here you can get the product design tips every day. It delivers the relevant design pieces of knowledge and inspiration. It also has chrome extension which you can integrate to your chrome browser.
Visit the site here
Read our previous blog
Also from our backend blog
That’s all for this week. Stay tuned for upcoming blogs, Till then
Keep on Hacking!!
