DEV Community: Savio Martin

Free Certification Courses for Developers 🔥

Savio Martin — Thu, 04 Nov 2021 03:20:23 +0000

Hello Folks 👋

This is Savio here. 14 year old, building useful products. Helping people with tweets and blogs on web development, frotend tips, and interesting resources.

Today, I'd like to share 7 Free Certification Courses for Developers Let's goooo 🚀

1. FreeCodeCamp

FreeCodeCamp is one of the most popular sites offering free certification. FreeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, support etc. FreeCodeCamp is the best place to learn code free and earn certification.

10 certifications available:

Responsive Web Design
JavaScript Algorithms and Data Structures
Front End Development
Data Visualization
Backend Development
Quality Assurance
Python
Data Analysis with Python
Information Security
Machine Learning

2. Fundamentals of digital marketing by Google

There are 26 modules to explore, all created by Google trainers, packed full of practical exercises and real-world examples to help you turn knowledge into action.

3. Cognitive Class by IBM

Learn leading-edge technologies like Blockchain, Data Science, AI, Cloud, Serverless, Docker, Kubernetes and more... with certification fully free of charge. Build your career with skills employers seek.

4. Test Automation University

Free test automation courses with videos, transcripts, quizzes, credits, rank badges, and certificates! everything free thought by experts.

5. Programming Essentials in Python by Cisco

75 hours long course led by leading developers teching Python, the versatile programming language completely free of charge and with certification.

Course includes:

8 Modules
Practice Labs
Module Quizzes and Module Tests
Summary Tests
Final Exam

6. Python Training Course

A perfect blend of in-depth Python theoretical knowledge and strong practical skills, this Free course for Python introduces real-time Python projects to give you a headstart in learning Python and enables you to bag top Python jobs in the industry.

Course includes:

5 real-time projects and 20 complementary projects
100+ hrs of study material, practical codes, quizzes, interview guides
case studies to gain expertise
certificate

7. Learn by Kaggle

Gain the skills you need to do independent data science projects. They pare down complex topics to their key practical components, so you gain usable skills in a few hours (instead of weeks or months). The courses are free, and could earn certificates.

Certifications available:

Python
Pandas
Data Visualization
Feature Engineering
SQL
Deep Learning
Computer Vision
Time Series
Data Cleaning
AI Ethics
Geospatial Analysis
Machine Learning
Natural Language Processing
Intro Intro to Game AI

Credit to Denic Marko

Thank you to Denic Marko for the inspiration. This article was made from his wonderful thread.

// Detect dark theme var iframe = document.getElementById('tweet-1455125936807030791-748'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1455125936807030791&theme=dark" }

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! 💯

Feedbacks are greatly appreciated! 🙌 Have an amazing day!

🌎 Lets connect

Pro Tips to Search on Google 🔥

Savio Martin — Sat, 16 Oct 2021 08:55:38 +0000

Hello Folks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'd like to share 11 pro tips to search google!! 🚀

Why Googling is Must Have Skill?

Googling is the most important skill a developer. Most people don’t know how to google. Googling require a certain ingenuity and hack in order to find exactly what you are looking for. You don’t have to stop googling if the search engine is not finding your first query. There are many tricks you can use and here you can find the pro tips.

I tell people, ‘I have a Ph.D. from Google University.’ —Kris Carr**

So, here are the 11 pro tips to make you an efficient google.

1. Quotations (" ")

If you want to get results with exact phrases, put the words inside quotes " ". Using quotes " ", google will only show results that have the exact words.

🔎 Example Search: "html 2021"

2. Asterisk ( * )

You can use ***** to fill missing words or phrases. This makes searching easy and will help you get the best results.

🔎 Example Search: how to * in JavaScript

3. Range ( ... )

You can use ... to search within a range of numbers. It makes searching easy for number related topics, such as years, versions and so on.

🔎 Example Search: JavaScript in 2010....2020

4. Search:

You can use search: to search anything within a website. Using this, you can directly search from google without switching from different websites.

🔎 Example Search: search:w3schools.com javascript arrays

5. AND

To find the results that must contain some given words, AND operator will be super useful. Helps in solving many problems in real life.

🔎 Example Search: React AND CSS

6. Filetype:

Using filetype, we can fetch results that are in a definite filetype. This will help in finding ebooks, docs etc.

🔎 Example Search: React ebook filetype:pdf

7. OR

We can use OR Operator to get the result of one of the search terms. This will fetch results that should either have the first word or the second word.

🔎 Example Search: React OR Vue masterclass

8. Define:

Using Define: we can find the definition of particular words. It will help a lot in understanding the words, also become handy in exams or so.

🔎 Example Search: define:oops

9. Related:

You can use related: to find sites that are similar to other sites and do the same purpose. This will become super handy if you're looking for an alternatives of a site.

🔎 Example Search: related:w3schools.com

10. Plus ( + )

You can use + between two words to get results that must contain the two given words. This is very helpful if you find something that should be related with the other one.

🔎 Example Search: JavaScript Oops+React

11. Hyphen ( - )

You can use hyphen - exclude certain words from results. This will ultimately help in retrieving the results you only wanted to, blocking spam stuffs.

🔎 Example Search: react js -github

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! 💯

Feedbacks are greatly appreciated! 🙌 Have an amazing day!

🌎 Lets connect

16 must-have Figma Plugins for UI/UX Designers

Savio Martin — Wed, 29 Sep 2021 18:21:39 +0000

Hey there, I'm Savio Martin, A 14-year-old boy on an intention to enhance as a successful full-stack web developer. I love building full-stack web applications and mobile apps. I have proved my superiority in frontend technologies. I love to share my resources and expertise with the dev community. I regularly write articles on @hashnode.

Today, I'm gonna share 16 must-have Figma Plugins for UI/UX Designers. These plugins are really helpful to UI/UX designers and fasten our job. So, consider installing these plugins. Those are the plugins I could not live with, huh!! So, let's get started

Color Palettes

With Color Palettes for Figma, you can search for your favourite colour code, palette number or name that you remember from Color Palettes plugin and apply it on your design and make it awesome

## Autoflow

Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them.

Run Autoflow
Select any 2 shapes while holding down ⇧SHIFT and a line will be drawn
Keep selecting until you're all wired up!

## Product Planner

Product Planner makes the process more comfortable to get started, product planning, product insights, identifying risks, setting goals and identifying and solving problems. Use the prebuilt template relevant to your tasks.

## Remove BG

Remove the background of images automatically with just a single click - using the remove.bg API.

## Figmotion

Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as well as it is built with web technologies in mind.

## Brands Colors

With Brands Colors for Figma, you can search for your favorite brand's colors or app's colors and apply it on your design and make it awesome

## Unsplash

Insert beautiful images from Unsplash straight into your designs.

## Mapsicle

Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world.

## Themer

Themer enables you to create and swap themes from your published styles in your team library. Use it for color, text and effect styles.

## Responsify

A Figma plugin to quickly test your designs across multiple device sizes.

Select any frame, component, or instance
Menu > Responsify️️ ⚡️ > Select device sizes to test
Command + Shift + P to re-run

## Blobs

Create organic blob shapes with the click of a button. Every shape that is generated is unique to the last. You can control how unique a shape is along with how many points it has.

## SmoothShadow

Create really smooth, layered shadows

## Isometric

Isometric allows you to create isometric layers without manually having to set them up.

## Content Reel

Design layouts more efficiently by pulling text strings, images and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!

## Webgradients

Meet the easy-to-use and powerful functional gradient plugin that you can use as content backdrops in any part of your website it in a moment!

## Chart

Chart is a plugin for Figma that uses real or random data to create the most popular charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.

Hope you all loved this article. If you have any doubts or queries, write it up in the comments below. Also, do reactions in this article. Thanks for your time. 🙏

Don't forget to follow me on Github and Instagram
%[https://github.com/saviomartin/]

Wishing You A Good Day! Happy Hacking! 💻⚡

20 Killer JavaScript One Liners ☝️

Savio Martin — Sun, 19 Sep 2021 08:47:44 +0000

Hello Folks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'd like to share 20 Killer JavaScript one liners to make your life easier. Let's goooo 🚀

Get Value of a brower Cookie

Retrieve the value of a cookie by accessing with document.cookie

const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

Convert RGB to Hex

const rgbToHex = (r, g, b) =>
  "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(0, 51, 255); 
// Result: #0033ff

Copy to Clipboard

Easily copy any text to clipboard using navigator.clipboard.writeText.

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");

Check if Date is Valid

Use the following snippet to check if a given date is valid or not.

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Result: true

Find the day of year

Find which is the day by a given date.

const dayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());
// Result: 272

Capitalise a String

Javascript doesn't have an inbuilt capitalise function, so we can use the following code for the purpose.

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("follow for more")
// Result: Follow for more

Find the number of days between two days

Find the days between 2 given days using the following snippet.

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366

Clear All Cookies

You can easily clear all cookies stored in a web page by accessing the cookie using document.cookie and clearing it.

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

Generate Random Hex

You can generate random hex colors with Math.random and padEnd properties.

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

console.log(randomHex());
// Result: #92b008

Remove Duplicated from Array

You can easily remove duplicates with Set in JavaScript. Its a life saver.

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]

Get Query Params from URL

You can easily retrieve query params from a url either by passing window.location or the raw URL goole.com?search=easy&page=3

const getParameters = (URL) => {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
  return JSON.stringify(URL);
};

getParameters(window.location)
// Result: { search : "easy", page : 3 }

Log Time from Date

We can log time, in the format hour::minutes::seconds from a given date.

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// Result: "17:30:00"

Check if a number is even or odd

const isEven = num => num % 2 === 0;

console.log(isEven(2)); 
// Result: True

Find Average of Numbers

Find the average between multiple numbers using reduce method.

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4);
// Result: 2.5

Scroll to Top

You can use window.scrollTo(0, 0) method to automatic scroll to top. Set both x and y as 0.

const goToTop = () => window.scrollTo(0, 0);

goToTop();

Reverse a string

You can easily reverse a string using split, reverse and join methods.

const reverse = str => str.split('').reverse().join('');

reverse('hello world');     
// Result: 'dlrow olleh'

Check if array is empty

Simple one liner to check if an array is empty, will return true or false.

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);
// Result: true

Get Selected Text

Get the text the user has select using inbuilt getSelection property.

const getSelectedText = () => window.getSelection().toString();

getSelectedText();

Shuffle an Array

Shuffling an array is super easy with sort and random methods.

const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

Detect Dark Mode

Check if a user's device is in dark mode with the following code.

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode) // Result: True or False

Do you want to test your project?

Try LambdaTest, test your browers in 3000+ browers like that with an image of your website

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! 💯

Feedbacks are greatly appreciated! 🙌 Have an amazing day!

// Detect dark theme var iframe = document.getElementById('tweet-1439848393166180364-346'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1439848393166180364&theme=dark" }

🌎 Lets connect

Introducing Code House - A whole new world of 300+ Developer Cheatsheets 👨‍💻

Savio Martin — Mon, 28 Jun 2021 10:29:31 +0000

Hello Folks 👋

This is Savio here. I hope you all are doing good. I'm young web dev with an intention to enhance as a successful web developer. Today, I'm super proud to introduce my latest and biggest ever project, which I had made till date as a submission for HarperDB Hackathon on Hashnode. Once the hackathon was announced, I was super busy organizing my time and put myself into a good schedule to complete the project by the deadline. After the hard work for 24 days, I finally could meet up with the project, I had in my mind. It was hard, but I loved every moment of it.

Little flashback

Developers love cheatsheets, we cannot leave without them. Indeed, that's true for me too. I always spend a lot of time hunting for the best cheatsheets, I waste a lot of time to find a good cheat sheet for my need. That gave me the thought that what if I could build a super huge storehouse of developer cheatsheets, and a user can get access easily to tons of cheatsheets according to his need. Once, I started building 🛠️, I found that they're more I could do to improve it. And that's how Code House started. The project is never finished, it is still becoming better and better. I'm glad I was able to create a super useful app for the DEV community 👨‍💻.

Introducing Code House

Code House is the all-in-one storehouse for developer cheatsheets. Welcoming you to a whole new world of developer cheatsheets. Code House is made up of 300+ curated cheatsheets from 230+ sources. Filter by categories, or source, sort by time or popularity, dark mode, bookmark cheatsheets, add new cheatsheets, request feature, and much more features, make the app amazing! 🤟

Github Repo / Live Demo

✨️ Inspiration

Hunting for cheatsheets took a lot of time, and we developers don't like to waste it. And that is how I came up with an idea to create a website, that contains a huge amount of curated cheatsheets from the internet. All cheatsheets are reviewed and there will no such spam, giving developers a lot of time to code than hunt. There are 29 categories currently, so, if a user need a cheatsheet of a particular language, he can just sort it up.

There is a lot of content on the internet and it is not so easy to sort out which one is good, this is where code house takes place. All cheatsheets are curated and reviewed by users, therefore helping you to have the best one.

This was my first goal 🎯 in mind, and soon as I started building, I put myself into a schedule to improve the app with more advanced features.

TL;DR

Please watch the short teaser (~2 mins), use headphones 🎧

Now, let me introduce you to the amazing features code house have so far ✌️

300+ Cheatsheets

Code House is well sufficient with more than 300+ developer cheatsheets from 230+ sources. All the cheatsheets are sorted into 29 categories making it easy to select one. You can filter all the cheatsheets by popular, oldest, newest or even use the search bar to find one.
Filter by Category (29 Cateogries)

All cheatsheets are sorted into 29 categories, you can easily choose one according to your language or code. All the types of sorting like popular, oldest, newest and search bar will also work for the filter category cheat sheets.
Filter By Source (230+ Sources)

If you need to filter cheatsheets by source, eg: you need cheatsheets from freecodecamp.org or medium.com, you can filter in super fast. You can also do advanced sorting too.
Bookmark Cheatsheets

If you found any cheatsheets interesting and want to save it for later 🔖, you can also do it. Just click on the bookmark icons and it will then be stored on bookmarks page.
Add new Cheatsheet (on browser itself)

Yeah, you could. If you found a good cheat sheet, you can just click on the New Cheatsheet button and it will take you to a form where you could add a new cheatsheet with simple data, Cheatsheet Name, Website URL and Category. Your cheat sheet will be reviewed and added to the app, also see yourself in contributors.
On Review Cheatsheets

You can help code house by reviewing cheatsheets, just go to codehouse.vercel.app/review, you can see the cheatsheets that are on review. If you think, they're good, you can give an upvote or a comment.
Separate page for each Cheatsheet

Each cheatsheet has a special page dedicated to that cheat sheet. You can get to see a large amount of data and do more functions on that page. You can also see who has added the cheatsheet, or who wrote the cheatsheet.
Request for Features

Do you have an idea to improove Code House, we love 💖 to hear your words. That's why we built feature requests page, you can easily add a new request or upvote the requests that're currently in.
Report Cheatsheet

We always need to keep Code House, clean and good for everyone. So, if you find any problems, such as spam, broken link, or like that. You can report it to us. Just click on the report button and you're good to go.
Contributors Page

We proudly show our contributors on our main website and we love to ❤️ Go ahead and give a pull request, get featured on our contributor's page 👨‍💻. You can also be a contributor by just adding a cheat sheet on the web.
Dark mode

Dark mode is a thing developers could not live with, that's why we built dark mode in Code House. Enjoy Code House in dark mode 🌘
Upvote/Comment on Cheatsheets

Feel free to add an upvote or a comment to a cheatsheet. You have full freedom to decide what you wanna do.
Toggle View (List View or Grid View)

You can toggle between List View or Grid View according to your preferences. So, you can enjoy it in the way you wish.
Newsletter (once a week)

If you sign up for the newsletter, we'll let you know when new cheat sheets are available. PS, we won't spam. Only once a week 📬.
GraphQL API Playground

We're also providing a super productive graphql API playground - codehouse-api.herokuapp.com. Here you can play with our API, and build new apps. How cool is that 🙌 Here is a small documentation on how to use the API

Feel free to star ⭐️ the project if you found useful - github.com/saviomaritn/codehouse/

Code House is the next revolutionary app to hunt the best cheat sheets for all types ✨️

💻 Built with

Next JS
Harper DB: source for complete database
Tailwind: source for complete styling
react-infinite-scroll-component: for infinite scrolling
nprogress: for slim progressbars
react-hot-toast: for toasts
firebase: for authentication
date-fns: for formatting dates
Material UI: for components
Animate.css: for smooth Animations
Vercel: for hosting

Feel free to try Code House: codehouse.vercel.app

🧐 Challenges

Challenge	Solution
Adding scroll animations	Used AOS library
Sorting by time	Used javascript `sort()`
Infinite Scrolling	Used `react-infinite-scroll-component`
Skeleton Loader	Created with Pure CSS
Server Side Rendering	Moved to `next js`
Search Filter	Used `filter` method of javascript
Generate cover image and description	Extracted `meta`
Parallax Effect	Used `parallax.js` library
Notifications withing the app	Used `react-hot-toast` library
Stop duplication of same content	Used Lodash

🌈 What's next

Code House is the biggest ever project I have made till date, I have a big idea in my mind, and you can see a lot more features coming soon. These all are the things I have planned to do in the next few days 👀

Profile Page
PWA, In Progress ⏳️
Reply to a comment
Markdown support for feature requests
Twitter and Facebook Auth, In Progress ⏳️
Perform Operations with API
Create Collection when bookmarking cheatsheets
Featuring Cheatsheets on day basis
Generate Cover Image for missing ones
Settings page
Choose Secondary color
Notification tab
AMP Support, In Progress ⏳️
Hear description for posts, In Progress ⏳️

🍰 Contributing

Pull Requests are always welcome! You can add a cheat sheet on the browser. Your cheat sheet will be reviewed and added to the app, also see yourself in contributors.

If you wish to contribute using Github, you can work on any features codehouse.vercel.app/feature-requests or create one on your own. After adding your code, send us a Pull Request.

After your PR got merged, you'll be automatically appared on contributors page. Works through Github API.

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.
Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

🛡️ Licensed under MIT

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Code House. Feel free to bookmark the app, it will become super handy. I'd love to hear feedback and thoughts on Code House. Share on Twitter, tag me @SavioMartin7

🙌 Support

If you're enjoying my app, consider supporting me with a coffee ☕️

🌎 Lets connect

🎸 Feedback

Feedback helps to improve Code House. I'd love to hear feedback and thoughts on Code House. Looking forward to your views.

Introducing Lofi Club - Enjoy Hip hop beats to Relax or Code! 🎧

Savio Martin — Fri, 14 May 2021 18:20:00 +0000

Hello Devs 👋

Little flashback

I'm a big fan of lofi music, In fact, many of us are. Lo-fi is a music or production quality in which elements usually regarded as imperfections of a recording or performance are audible, sometimes as a deliberate aesthetic choice. Hearing to lofi music makes us more productive. So, I thought I could make one app with the main goal as distraction-free lofi music.

Introducing Lofi Club

%[https://www.youtube.com/watch?v=JD6nQrxT5LA]

Lofi Club is a place for listening to live 24/7 Lofi music. Comes with more than 17 awesome tracks that the app runs 24/7 enabling you to relax all time. Dark minimalist UI, Responsive Design, Live Chat, Distraction-free music player, to-do list, Pomodoro timer, control by keyboard, playlist, fullscreen mode makes the app super productive for daily use! So, sit back and enjoy! 🙌

Github Repo / Live Demo

Inspiration

I'm a fan of lofi music and always wanted to hear some freshly prepared lofi music. I was introduced to lofi.cafe and loved the working. I just really need to expand it with much more awesome feature. Used it as my first source of inspiration. Shoutouts to @linuz90 and maridivi89 for the inspiration!

🎉 Features

Provides a great space for you to relax or just chill. Comes with more than 17 tracks. Dark minimalist UI makes it much more amazing. Live Chat, Pomodoro timer, control by keyboard, playlist, fullscreen mode makes the app super better than its competitors.

17+ tracks

Lofi Club comes with 17+ tracks making you adjust to your mood.

Distraction-free music player

Dark, Minimalist, Distraction-free UI to help you concentrate or relax. Also protects your battery life.

Control by Keyboard

Lofi Club supports controlling by the keyboard. You can do a bunch of things make your super productive. Here is the full list

Live Chat & Realtime live count

Chat with live members, get help. Be cooperative, chill together. Enjoy with the community.

Pomodoro Timer

Lofi Club comes with an amazing super-complex Pomodoro timer to meet your need and stay productive.

Stared Music Playlist

Lofi Club allows you to create your own playlist by staring your favoirite. Buzz with that!

Todolist

Organize daily tasks for work and life. Keep track of your doings.

Full-Screen Mode

Enjoy Lofi Club on full-screen mode. I know you're gonna love this.

PWA, Installable app

Lofi Club is a PWA, which means you can install on your local device and loads without internet/.

Fully Responsive

No matter what your device is, Lofi Club is made just for you. Enjoy lofi club in any device! 💻

Feel free to try out: https://loficlub.now.sh/

Star the repo ⭐ https://github.com/saviomartin/loficlub

💻 Built with

React
Tailwind
Material UI: for styling and Icons
Animate.css: for smooth Animations
AOS: for scroll animations
react-router-dom: for routing
Vercel: for hosting

... and much more!

Planning, Building, and Deploying

Oh yeah, it was time-consuming, but I enjoyed it.

### Designing I used Figma for my design, I'm not an expert but I know how to do basic designing and prototyping.
### Planning Notion is an awesome tool to be cared for. It is super productive enough for me to plan my daily work. I used Pomodoro timers too, I want to be productive.
### Time to code I'm a true React lover. I created Lofi Club with react, I used a lot of amazing libraries. The animations were built with Animate.css, used react-router-dom for routing, tailwind for styles and a bunch of amazing libraries to make everything work nice.
### Deploying Deploying was done with Vercel. I'm a big fan of Vercel. Vercel is super fast and easy to use and manage. I also setup auto GitHub deploying so I don't have to deploy everytime something changes.

Challenges

Challenge	Solution
Change different URLs without loading	Used `react-router-dom`
Generate thumbnails	used youtube api
Make the app 100/100 on PWA Check	Optimised app, solved errors
Responsiveness of the app	Used `@media` queries
adding scroll animations	Used AOS library
Notification withing the app	Used `react-toastify` library

✨️ What's next

These are some of the features, I currently have in mind.

Live Video Chat
Complex todo page
Collaboration
Upvote a tracks
Share tracks with public
One tap login (Almost Completed 🚀)

🛡️ Licensed under `MIT`

Lofi Club needs your Upvote

We're on producthunt - producthunt.com/posts/loficlub. Please help us my giving your upvote! 💖

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Lofi Club. Feel free to use the app. Do not hesitate to share your feedback. Share on Twitter, tag me @saviomartin7

Star the repo ⭐ github.com/saviomartin/loficlub

🌎 Lets connect

🎸 Feedback

Hash tree needs your feedback to improve. Help Hash tree by adding your valuable reviews 💖

🙌 Support

My projects are fueled by coffees ☕, get one for me!

34 Ultimate VS Code Extensions to Increase Productivity! 💪

Savio Martin — Fri, 30 Apr 2021 05:11:37 +0000

Hello Folks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'm gonna show you 34 ultimate VS Code extensions to improve your productivity. I'm pretty sure you'll enjoy this huge list of amazing VS Code Extentions.

Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Better Comments

The Better Comments extension will help you create more human-friendly comments in your code.

Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

Visual studio code plugin containing Bootstrap 4, Font awesome 4 & Font Awesome 5 Free & Pro snippets. This plugin works in both in the stable & the insiders build.

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

change-case

A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.

Code Runner

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, and custom command

Code Spell Checker

A basic spell checker that works well with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

CSS Peek

Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto definition.

Debugger for Chrome

A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

EJS language support

Syntax highlighting for EJS, Javascript, and HTML tags. Includes javascript autocompletion.

ES7 React/Redux/GraphQL/React-Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

GitHub Pull Requests and Issues

This extension allows you to review and manage GitHub pull requests and issues in Visual Studio Code.

GitLens — Git supercharged

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

Google Fonts

This extension allows you to browse the Google Fonts list and insert into your code either a HTML or a CSS

Image preview

Shows image preview in the gutter and on hover

GraphQL

GraphQL extension for VSCode adds syntax highlighting, validation, and language features like go to definition, hover information and autocompletion for graphql projects. This extension also works with queries annotated with gql tag.

vscode-styled-components

Syntax highlighting for styled-components

Prettify JSON

Visual Studio Code Prettify JSON Extension

Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

IntelliSense for CSS class names in HTML

CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

Live Server

Launch a development local Server with live reload feature for static & dynamic pages

Live Share

Real-time collaborative development from the comfort of your favorite tools.

Markdown Preview Enhanced

Markdown Preview Enhanced ported to vscode

Mongo Snippets for Node-js

Provides snippets, boilerplate code for Mongo queries and completion suggestions for mongoose models.

npm

This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.

npm Intellisense

Visual Studio Code plugin that autocompletes npm modules in import statements

Placeholder Images

Generate and insert placeholder images into your HTML in Visual Studio Code using various 3rd party services like Unsplash, placehold.it, LoremFlickr and more

Polacode

Polaroid for your code

Prettier - Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Tabnine Autocomplete

Tabnine is a powerful Artificial Intelligence assistant designed to help you code faster, reduce mistakes, and discover best coding practices - without ever leaving the comfort of VSCode.

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

Luna Paint

Luna Paint is a VS Code extension that lets you edit raster images from within the editor, just open an image from the explorer and start editing like any other file.

Quokka.js

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! 💯

Do you know more, Add them in the comments. Feedbacks are greatly appreciated! 🙌
Have an amazing day!

🌎 Lets connect

🙌 Support

My projects are fueled by coffees ☕, get one for me!

Set Up Tailwind In React - The fastest way! 🚀

Savio Martin — Wed, 21 Apr 2021 10:13:46 +0000

Hello Folks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something amazing!

Why Tailwind CSS?

Tailwind is designed to be component friendly. It is so much easier to separate a site's elements into smaller components and not pollute the codebase with objects or extraneous CSS classes. Furthermore, every class is inlined in the component, making it much easier to read and understand.

Create Your React Project

First of all, lets create a react project. Just use the command below to create a react app ⚛️.

npx create-react-app your_react_project_name

Setup Tailwind CSS

Now, lets check how we can setup tailwind css on the react app, we just created.

Install NPM Packages

We need some NPM packages to setup tailwind. These are the npm packages-

PostCSS: A tool for transforming CSS with JavaScript
Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
Tailwindcss: A utility-first CSS framework packed with classes

So, lets install all of them, paste the command in the terminal ⬇️.

npm install tailwindcss postcss autoprefixer postcss-cli -D

Creating `tailwind.css`

After installing NPM packages, let's create a folder named styles inside src/ folder. Create a new tailwind.css and output.css. Here is the folder structure of src ⬇️

src/
├── styles/
         ├── output.css
         └── tailwind.css
├── app.js
└── index.js

So, paste the following contents into tailwind.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Leave the output.css empty. It will be taken care by tailwindcss.

Creating Config Files

Now, lets create the config files. First, lets generate the default configuration file on tailwind css. Paste the code ⬇️ and you'll be good to go!

npx tailwindcss init --full

This command generates a tailwind.config.js with all the default configuration. Now, we have 2 more files to generate.

Create tailwindcss-config.js and postcss.config.js config file by using the following command.

npx tailwindcss init tailwindcss-config.js -p

Now, lets not touch the files, we can jump onto the last part!

Edit `package.json`

Here comes the last part, it is so simple, we just have to add a new command watch:css to the package.json. I have made it in the way, every time you start the app, it get automatically called. So, here goes the scripts part of package.json.

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
  },

Now, if we just run npm start we can see our output.css gets filled with the styles of tailwindcss. That means, Everything gone absolutely correct. 🎉

Testing Tailwind CSS

Now, it is time to test. To, use the styles of tailwind, we have to import output.css to our app.js.

import './styles/output.css'

Yeah, that's it. We're good to go! Lets add some tailwind styles.

Feel free to use the following code to test your app.

import "./styles/output.css";

function App() {
  return (
    <div className="bg-gray-900 p-20 h-screen flex justify-center items-start flex-col">
      <h1 className="text-5xl text-white">Hello Tailwind 👋</h1>
      <p className="text-gray-400 mt-5 text-lg">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
        consequuntur odio aut nobis ab quis? Reiciendis doloremque ut quo fugiat
        eveniet tempora, atque alias earum ullam inventore itaque sapiente iste?
      </p>
      <button class="p-4 bg-green-600 rounded-lg font-bold text-white mt-5 hover:bg-gray-600">
        Hello Friends 🚀
      </button>
    </div>
  );
}

export default App;

So, lets do npm start and check if it is working!

Hurray 🎉 That's it we could see our good-looking app in the browser. We just made it with a little line of code. That's all! I hope it was fast! 🚀

I have deployed it! So, have a demo 🚀 create-react-app-tailwind.vercel.app

I have created a starter repo on github - saviomartin/create-react-app-tailwind. It would be a good idea if you really wish to avoid these stuffs, just clone the repo and start app. You are good to go!

Star the repository! 🌟 saviomartin/create-react-app-tailwind

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! 💯

I hope you learned to use Unsplash API and created an image search app, now go start building amazing apps. Feedbacks are greatly appreciated! 🙌

Have an amazing day!

🌎 Lets connect

🙌 Support

My projects are fueled by coffees ☕, get one for me!

40 Amazing Chrome Extensions for Web Developers and Designers

Savio Martin — Sat, 17 Apr 2021 03:52:01 +0000

Hello Devs 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'm gonna share 34 Must have chrome extensions for developers. These extensions are really helpful to developers and fasten our job. So, consider installing these extensions. At the last, I have provided the top 10 extensions for developers. Those are the extensions I could not live with, huh!! So, let's get started

QuickCode

Quick Code Curates Free Online Programming Courses and serves best courses everyday.

LambdaTest Screenshots

Generate Screenshots on different mobile and desktop browsers from Google Chrome.

Notion Web Clipper

Notion Web Clipper help you to save any page on the web to your Notion workspace. Capture and organize all the articles, research and inspiration you want, and we’ll help you turn them into action.

ColorZilla

With ColorZilla you can get a colour reading from any point in your browser, quickly adjust this colour and paste it into another program. And it can do so much more.

Light House

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

Wappalyzer

Wappalyzer is a technology profiler that shows you what websites are built with. Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others.

Fake Filter

Fake Filler is the form filler to fill all input fields on a page with randomly generated fake data. This productivity-boosting extension is a must for developers and testers who work with forms as it eliminates the need for manually entering values in fields.

Momentum

Replace the new tab page with a personal dashboard featuring to-do, weather, and inspiration. New Tab page that gives you a moment of calm and inspires you to be more productive. Get inspired with a daily photo and quote, set a daily focus, and track your to-dos. Eliminate distractions and beat procrastination with a reminder of your focus for the day on every new tab. Join over 3 million users and get inspired to create the life you want to live.

CSSViewer

CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a FireFox add-on (2006-2008).

daily.dev

Daily.dev is a news aggregator, especially for software developers. With daily.dev, you will stay updated with the best articles from the best tech publications on any topic. Get all the content you love in one place -- CSS-Tricks, Smashing Magazine, web.dev, and +350 sources.

Grammarly for Chrome

From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself. You’ll get real-time feedback from Grammarly on Gmail, Google Docs, Twitter, LinkedIn, and nearly everywhere else you find yourself writing. Grammarly is a writing assistant that offers you specific suggestions to help you improve your writing — and it goes way beyond grammar. You can be confident that your writing is not only correct, but clear and concise, too. Be sure to register your account to receive a personalized writing report each week to help you track your progress and identify improvement areas.

JSON Viewer

The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen. It is a Chrome extension for printing JSON and JSONP.

Keywords Everywhere - Keyword Tool

Keyword search volume, cpc and competition for 15+ websites like Google™ Search Console, YouTube™, Amazon™ & more. Keywords Everywhere is a freemium chrome extension that shows you monthly search volume, CPC & competition data on 15+ websites. It also has built in tools to find keywords from your seed keyword, and to show you keywords that any page ranks for in the SERPs.

Site Palette

Free browser extension that generates colour palettes. A must-have tool for designers and frontend developers. Grab colours for any website.

Devo

Devo is a new tab extension that displays GitHub Trending, Hacker News, Product Hunt and many different platforms' front pages on every new tab, with no-login required. You can change the placement of the cards, display whatever platform you'd like to in different order.

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

Vue.js devtools

Chrome devtools extension for debugging Vue.js applications.

Open in VSCode

Open Github and Gitlab links in VSCode. Just right click on any link to a file and select "Open in VSCode". You can also click on line links to open the file to the specific file.

Awesome Autocomplete for GitHub

Add instant search capabilities to GitHub's search bar. Simple and discreet extension that enhances GitHub's search, letting you search for repositories and people faster than ever.

Redux DevTools

Redux DevTools for debugging application's state changes. The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.

WhatFont

The easiest way to identify fonts on web pages. Firebug and Webkit Inspector are easy enough to use for developers. However, for others, this should not be necessary. With this extension, you could inspect web fonts by just hovering on them. It is that simple and elegant. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.

Clear Cache

Clear your cache and browsing data with a single click of a button.
Quickly clear your cache with this extension without any confirmation dialogs, pop-ups or other annoyances. You can customize what and how much of your data you want to clear on the options page, including: App Cache, Cache, Cookies, Downloads, File Systems, Form Data, History, Indexed DB, Local Storage, Plugin Data, Passwords and WebSQL. Cookies can either be removed globally, only for certain domains or for everything except for certain domains.

Google Keep Chrome Extension

Save to Google Keep with a single click! Found a web page, image or quote that you want to save for later? With the Google Keep Chrome Extension, easily save the things that you care about to Keep and have them synced across all the platforms that you use – including web, Android, iOS and Wear. Take notes for additional detail and add labels to categorise your note quickly for later retrieval.

Loom for Chrome

Video messaging for work. From onboarding new employees, troubleshooting customer issues, or code reviews, Loom makes it easy to get your message across quickly and clearly using the power of video. With Loom, you can record your screen, voice, and face to create an instantly shareable video in less time than it would take to type an email. Reduce back-and-forth typing and get your message across the first time. Your co-workers and customers will thank you!

Focus To-Do: Pomodoro Timer & To Do List

Focus To-Do combines Pomodoro Timer with Task Management, it is a science-based app that will motivate you to stay focused and get things done. It brings Pomodoro Technique and To Do List into one place, you can capture and organize tasks into your todo lists, start focus timer and focus on work & study, set reminders for important tasks and errands, check the time spent at work. It's the ultimate app for managing Tasks, Reminders, Lists, Calendar events, Grocery lists, checklist, helping you focus on work & study and tracking your working hours. Focus To-Do syncs between your phone and computer, so you can access your lists from anywhere.

Speedtest by Ookla

Take a Speedtest directly from your toolbar to quickly test your internet performance without interruption.

Toby for Chrome

Toby is better than bookmarks, it levels up your Chrome browser. Toby is a visual workspace that lives on every new tab. Add new tabs by dragging and dropping your browser tabs into collections or save a whole session in just one-click. Access all of your collections on any desktop with automatic sync. Use tags to organize your collections or create notes for your to-dos.

Volume Master

Up to 600 % volume boost, Control volume of any tab, Fine-grained control: 0 % - 600 %, Switch to any tab playing audio with just one click

Save to Google Drive

This extension allow you to save web content directly to Google Drive through a browser action or context menu. You can save documents, images, and HTML5 audio and video all by right clicking and selecting 'Save to Google Drive'. You can save the currently viewed page using the 'Save to Google Drive' browser action. The directory location and format of saved HTML pages can be controlled with the extension's options page (Choice of Entire image (default), Visible image, Raw HTML, MHTML, or Google Doc). You can automatically convert Microsoft Office files or comma separated files to Google Docs format.

HTTPS Everywhere

This is an port of the popular HTTPS Everywhere extension for Firefox, created by EFF and the Tor Project. It automatically switches thousands of sites from insecure "http" to secure "https". It will protect you against many forms of surveillance and account hijacking, and some forms of censorship.

Keeper® Password Manager & Digital Vault

Protect and autofill passwords with the world's most trusted and #1 downloaded secure password manager and digital vault.
Stay protected with the world's most trusted and #1 downloaded password keeper and digital vault. Keeper’s password manager generates, stores, and autofills strong passwords on all of your devices while also securely storing and protecting your private documents. Don't get hacked. Get Keeper.

Vimeo Record - Screen & Webcam Recorder

Record and share unlimited free video messages from your browser
Did you know we speak up to 7x faster than we type? Next time you’re thinking about sending a long email or a chat message, consider whether a video recording might communicate your ideas better—and faster. Whether it's a product demo, design feedback, or a knowledge transfer session, with Vimeo’s screen recorder you can quickly record and share unlimited video messages. Choose to record your screen, voice, face or a combination. Once you’re done recording, you can instantly share your video with a private link. Every recorded video is automatically uploaded to Vimeo, which gives you a variety of tools such as organizing and replacing videos, customizing the player, sharing videos with your teams, adding chapter markers, and much more. Join over 200M users who have chosen Vimeo as the home for their videos.

Scrn.li - Screenshot Tool and Editor

Screenshot tool for making a full page or partial screen capture with further edit, download or text adding. The advanced app to make a full webpage screenshot or just any part of it with an opportunity to edit, save and download screen capture to your PC. The app is launched from a browser that totally saves your time. Simply click the extension icon to choose from options whole page screenshot or a selected part

Full Screen

This is just a full-screen button added to the toolbar. It does exactly the same as the keyboard shortcuts (F11 on Windows or Cmd+Shift+F on Mac). You can change the icon and add/remove the full-screen function to the context menu.

Emoji Keyboard by JoyPixels®

The world's leading emoji keyboard for Chrome. Now Unicode 13 compatible!

Enhanced GitHub

Display repo size, size of each file, download link and option to copy file contents. Extension that provides useful features on top of GitHub Website.

AdGuard AdBlocker

Unmatched adblock extension against advertising and pop-ups. Blocks ads on Facebook, YouTube and all other websites. AdGuard ad blocker effectively blocks all types of ads on all web pages, even on Facebook, YouTube and others!

Octotree - GitHub code tree

Browser extension that enhances GitHub code review and exploration.
Features - IDE-like code tree, Folder and file search,Support private repositories, Repo/file/issue/pull request bookmarking, High performance, working with repositories of any size

Save to Pocket

Pocket’s Chrome extension is the easiest, fastest way to capture articles, videos, and anything else you find on the web. With one click, the content you’ve collected appears across all your devices in a clean, distraction-free space—there to read when you’re ready, whether at home, at work, or on the go.

Bookmark Sidebar

Adds a toggleable sidebar with all your bookmarks at the edge of your browser window.

The Top 10 extentions I would strongly recommend installing

Daily.dev
Wappalyzer
Grammarly for Chrome
Clear Catche
Loom for Chrome
Scrnli - Screenshot Tool and Editor
Full Screen
Emoji Keyboard by JoyPixels®
Adgaurd Adblock
Octotree - GitHub code tree

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github at @saviomartin, Don't miss my awesome projects!

I hope you found the article helpful. Feedbacks are greatly appreciated! 🙌

Have an amazing day!

🌎 Lets connect

🙌 Support

My projects are fueled by coffees ☕, get one for me!

111 amazing resources you're gonna love 💖

Savio Martin — Fri, 19 Mar 2021 08:05:39 +0000

Hello Devs 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'm gonna share 100+ super amazing resources every developer are gonna love for sure 💖 I hope you'll enjoy this article.

3 UX/UI Design Systems to gain inspiration

🤟 Polaris by Shopify - an amazing design system by shopify
🐵 Patterns by Mailchimp - super creative design system by mailchimp
💪 Google’s Material Design - A huge design system by Google

3 tools every UX/UI designer should know

📒 Notion - is an all-in-one workspace to organise your notes, projects and tasks
🎸 Figma - is a multiplayer interface design tool to create mockups, design systems and prototypes ⁣
⭐️ Miro - is a real-time whiteboard to gather research and ideate with team mates ⁣

3D websites that will inspire every UX/UI designer ⁣

🍻 Protopie.com - go the extra mile with 3D video and awesome animations on scroll
♻️ Pitch.com - began the 3D movement and their characters are super friendly and feature in their website and product. ⁣
💯 kukla-kit.com - is a 3D library for Figma projects

3 chrome extensions for every UX/UI Designer ⁣

⌨️ Font Ninja lets you inspect and bookmark fonts and any webpage⁣
💻 Go Full Page takes full page screenshots of any webpage ⁣
🔥 Loom lets you record videos directly in chrome

3 Illustration Libraries for UX/UI Designers ⁣

🌈 Absurd.Design have expressive illustrations for products with personality ⁣
🥰 Blush.design have a great mix of characters from artists around the world ⁣
🌟 Ouch! - have a comprehensive library of searchable illustrations

3 Typography tools for UX/UI Designers ⁣

🍭 Fontjoy.com generates font pairings with a contrast slider in a single click ⁣
🍟 app.typeanything.io let’s you experiment with font pairings, sizes, spacing, and weights live i. The browser ⁣
🎨 Font Base is a free font manager with access to Google’s fonts for Mac and windows

3 color tools for UX/UI Designers ⁣

🎹 picular.co generates colors based on keywords ⁣
🚆 Coolhue is a gradient plugin for Figma & Sketch ⁣
🚀 Eva uses AI to generate feedback colors based off your brand color

3 user testing tools for UX/UI Designers ⁣

🎉 Maze.design is great for running unmoderated tests as it integrates smoothly with your existing prototyping workflow ⁣
✨ Lookback.io is super for moderated usability tests of your product live with users ⁣
🤙 Usertesting.com is an accessible tool for your whole team to test with

3 3D libraries for UX/UI Designers ⁣

🏀 Shapefest.com is a massive library of 3D shapes ⁣
📎 Storytale.com has a great mix of 3D characters and objects ⁣
🥳 Toy Faces is a super fun 3D avatar library

3 Prototyping tools for UX/UI Designers ⁣⁣

💫 Figma lets you effortlessly create prototypes whilst you design ⁣
🍿 Framer has an extensive library of notions and tutorials to help you learn how to prototype ⁣
🤯 Protopie helps you create mind blowing prototypes with native elements

3 sites to gain inspiration as a UX/UI Designer ⁣

📱 mobbin.design is a hand picked collection of the latest mobile design patterns ⁣
💼 Land-Book.com is a great place for landing page and portfolio inspiration ⁣
🏀 Dribbble is perfect for conceptual thinking and experimental design

3 productivity tools for UX/UI Designers ⁣

🏃‍♂️ Notion is perfect for organising your weekly tasks and design team wiki ⁣
🍅 Tomato 2 is a super app for following the pomodoro technique and managing your time ⁣
📅 Calendly helps your organise meetings without the back and forth emailing.

3 accessibility tools for UX/UI Designers ⁣

🎨 colorable.jxnblk.com - Colorable is a great tools for generating an accessible color palette ⁣
💯 getstark.co - Stark is a super Figma, XD, Sketch plug-in for running contrast and color blind tests live in your designs ⁣
🌊 Wave is a wicked chrome extension for running an accessibility evaluation live on your site.

3 free image libraries for UX/UI Designers ⁣

🎥 pexels.com - Pexels is a super resource for free images and videos ⁣
🌍 unsplash.com - Unsplash has powerful search, filters and collections from around the world ⁣
✌️ Reshot.com - Reshot is another super image resource with handpicked, non-sticky images.

3 font resources for UX/UI Designers ⁣

⚡️ Google fonts has over 1k searchable fonts categorised by type. ⁣
📦 Open Foundry is a super resource for handpicked open-source typefaces ⁣
🐺 Typewolf is super for learning about fonts and font pairings.

3 portfolio tools for UX/UI Designers ⁣

⚡️ Super.so is quick and easy way to convert your Notion docs into an online portfolio ⁣
🖥 Webflow.com lets you design your portfolio directly in the browser across multiple devices ⁣
🖊 Grammarly.com fixes your grammar errors helping you write better case studies

3 no-code tools for UX/UI Designers ⁣

⚡️ Webflow is the best no-code website builder with awesome interactions ⁣
🍬 Bubble is a great tool for building web apps without code ⁣
💵 MemberStack is a no-code membership tool for any website

3 UX Writing resources for UX/UI designers⁣

✍️ dailyuxwriting.com have super how to guides to up your writing game⁣
🤙 Uxlibrary.org define the value of UX Writing with super ux writing blog links ⁣
📖 uxplanet.org is an awesome handbook for UX writers⁣

3 Figma plugins for UX/UI Designers ⁣

↪️ Autoflow allows you to neatly draw the flows between your frames ⁣
👀 Color-Palettes font picker lets you view typefaces before you select them ⁣
📸 Unsplash is super for adding awesome stock images to your designs

3 color gradient tools for UX/UI Designers ⁣

👀 webgradients.com have 180 awesome gradients with full screen preview ⁣
💪 coolors.co have a super gradient maker with a neat toggle between radial and linear ⁣
⚡️ uigradients.com is a super resource to grab limitless gradients with a neat full screen toggle

3 user flow libraries for UX/UI Designers ⁣

📱 uxarchive.com have a super library of user flows from top mobile apps ⁣
⚡️ Mobbin.design is the largest user flow library that you can click through on a device ⁣
🍿 pageflows.com is an awesome user flow library with web and mobile apps

3 icon libraries for UX/UI Designers ⁣

💡 Ikonate.com is a super library of customisable icons that you can preview in dark mode ⁣
⚡️ Useanimations.com is an awesome library of animated icons ⁣
👀 Streamline.to is an icon app and plugin with over 30k icons to use

3 AI powered tools for UX/UI Designers ⁣

🎨 Khroma.co is an AI powered color palette generator based on your fave colors ⁣
✏️ UIzard.io is an AI tool that converts your sketches into mockups ⁣
📸 remove.bg is an AI tool that removes any background from an image

3 color palette tools for UX/UI Designers ⁣

😁 happyhues.co is a color palette tool that lets you view curated colors in context ⁣
🌈 colorinspo.com let’s you generate a color palette based on color theory ⁣
⚡️ Colors.muz.li is a color palette generator with a live UI kit demo

3 Zoom alternatives for UX/UI Designers ⁣

🇳🇴 Whereby.com is a no fluff video meeting tool made by a secure friendly team in Norway⁣
💭 Vowel.com is a video conference tool that helps you host, plan and transcribe meetings ⁣
📈 Macro.io is an interface tool for Zoom that allows you to visualise meeting discussions

3 white boarding tools for UX/UI Designers ⁣

🕹 Freehand by Invision is a quick and easy to use whiteboarding tool⁣
⚡️ Miro is a super tool with loads of handy templates to kickstart your white boarding sesh ⁣
🎨 Mural is a great white boarding tool to use with your team ⁣

3 grid extensions for UX/UI Designers ⁣

📏 Page Ruler is super for defining the spacing between components ⁣
🎾 Baseliner is a super grid extension for applying a baseline to your design ⁣
🎹 Grid Overlay is a great for applying a grid system directly to any page

3 awesome AI tools for UX/UI Designers ⁣

🎨 tailwind.ink is an awesome AI color shade generator ⁣
🔥 visualeyes.design is a AI heatmap generator for your designs ⁣
✂️ Clipdrop is a super AR copy paste tool for adding images, objects, and text to your design ⁣

3 massive Design Systems to inspire UX/UI Designers ⁣

✅ Atlassian.design have a mammoth design systems with neat accessibility checks ⁣
👀 buffer have a huge design systems with super guidelines on each component ⁣
🌔 IBM whopping carbon design system works across a light and dark theme

3 super fun typography tools for UX/UI Designers ⁣

💻 wordmark is a super tool that previews every font on your computer ⁣
🎉 Prototypo is a super tool for creating your own font⁣
💯 kerntype is a game that helps you learn how to learn type

3 device mockup generators for UX/UI Designers ⁣

💻 previewed.app is a super 2D and 3D device mockup generator across devices ⁣
🤯 threed.io is an awesome 3D mockup generator directly in the browser ⁣
⚡️ Rotato is a super animated mockup generator

3 animated icon libraries for UX/UI Designers ⁣

🎄 iconfinder.com/p/animated-Christmas-icons is a super festive library of animated Christmas icons ⁣
🌱 loading.io is a super tool for making your own custom Animated loading icon ⁣
🍋 lottieflow.com is a super library of animated icons that you can filter by category

3 super analytics tools for UX/UI Designers ⁣

👏 useFathom.com is a super simple and visual analytics tool for your product ⁣
🤩 Plausible.io is another awesome analytics tool with a neat UI ⁣
⚡️ Useberry.com is great for grabbing analytics directly on your prototype

3 super productivity tools for UX/UI Designers ⁣

🏡 meetsidekick.com is a super browser that gives your apps a home and removes the need for cluttered tabs ⁣
✅ getslash.co is an awesome tool that helps you complete your to do list ⁣
📧 hey.com is a super tool that makes emails fun and easy to manage

3 character illustration libraries for UX/UI Designers ⁣

👖 Humaaans is an awesome illustration library of characters that you can mix and match ⁣
🏔 control.rocks is a super illustration library with loads of characters and scenes ⁣
🍉 struct.rocks is a super fun character illustration library based on shapes

3 agency websites to inspire UX/UI Designers ⁣

🦵🏼 Toyfight.co use humour to demo the value of a small team ⁣
🐻‍ Hellomonday.com use playful characters to showcase the diversity of their agency ⁣
🧑‍🚀 majortom.com use animation on scroll to showcase their iterative

3 must read books for UI/UX Designers

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed these amazing resources and you're satisfied with this article. Do not hesitate to share your feedback. I am on twitter @saviomartin7. Give a follow!

Do you know more? Add them in the comments?

🌎 Lets connect

Introducing Gradient King - Never again run out of gradients! 🌈

Savio Martin — Mon, 01 Mar 2021 09:20:06 +0000

Hello Geeks 👋

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies. Due to exams, I wasn't able to attend the last hackathon powered by vercel, but now I'm super excited to share my biggest ever project made as a submission for Amplify Hashnode Hackathon

Little flashback

I constantly need gradients for my projects, yeah, every developer needs them. Gradients are very much important as they give good UX to the users. So, I started planning an app on it and it then enlarged to grab awesome features. The project is never finished, it is still becoming better and better. I'm glad I have created useful stuff for the dev community.

Introducing Gradient King

Gradient king solves all your gradient problems. It provides a huge collection of gradients and you could easily choose one. Besides It, we also provide a well-efficient gradient generator where you could upload your image and grab the gradients from it. How cool is that 🙌

Github Repo / Live Demo

Inspiration

I was struck by these 2 awesome articles The logic of good gradients and The Secret of Great Gradient

Have you ever noticed how some colors and gradients look so natural and beautiful, while others look so unnatural and weird? The reason for this can be found somewhere between our pupil and our visual cortex. The difference between natural and unnatural is just familiarity or maybe nature is created to perfectly to fit together with our souls. The gradients we identify as beautiful are similar to what we see in nature. Conversely, a combination of colors our eyes have never seen before would rightly evoke feelings of discomfort and unease.

And this is what gave me the idea to build an awesome gradient generator where you could upload your local images 📂 and get them converted into gradients 🎨

This was the first idea 🎯 in my mind and then I got to make the app more advanced with more features

TL;DR

Please watch the short demo (use headphones 🎧)

%[https://youtu.be/6sM3A8p54Ps]

So far, these are the features Gradient King have

100+ gradients

Gradient King is richly supplied with gradients for you to copy. As this is an open-source project, the list will increase for sure. 👍 You're getting access to a huge amount of gradients and simply clicking on the Copy CSS button copies the CSS code of that gradient to your clipboard 📋
Generate your own gradients

Gradient King provides you a playground where you create gradients from your local images. 📂

Indeed Mother Nature is rich in colors, So why should we waste this opportunity?
Search

Gradient King is now able handle search for anything on the page - Colors, authors, contributors, etc 🔍
Seperate page for each gradient

Gradient in a small part of a page may not be useful for you as you have to use in big area. No problem, just click on a gradient and it will open in a relatively larger area 💪
PWA, Installable app

Yeah, it was a task but I accomplished it. I managed to get passed on all the Progressive Web App checks. Now, you're able to install the app on your local device and works offline 💻
Contributor page

Are you an open-source enthusiast, this is for you. We proudly show our contributors on our main website and we love to ❤️ Go ahead and give a pull request, get featured on our contributor's page 👨‍💻
Dark mode

Dark mode 🌒, an awesome feature everyone loves and cares about. Of course, I found time to work on it and make it happen. The dark mode is acceptable for all pages.
Fully Responsive

Responsiveness is an important part of a website 📱, it doesn't matter why it should be, it just thinks you should do it. Yeah, I did get the same feeling.

I know developers are not gonna code on their smartphones but as a web developer, it is my responsibility to add responsiveness to my project.
Free and Open Source

I'm an open-source lover, I love to be 💖. So, inviting all devs to view the code as well as contribute to the app. github.com/saviomartin/gradientking
Minimal UI, Lightning Fast, Elegant animations

Thanks to Material UI, React Router Dom, Animate on Scroll and Animate.css. These awesome libraries helped me to add these awesome UX features. I super sure that they did a great job in the UX of my app ⚡️.

Everything loads super fast (without even loading), So appropriate to use on daily basis.

Gradient King is super productive enough to grab the best gradients for your next app ✨️

💻 Built with

React
CSS
Jquery
Material UI: for styling and Icons
Animate.css: for smooth Animations
AOS: for scroll animations
react-router-dom: for routing
AWS Amplify: for hosting

Planning, Building, and Deploying

Oh yeah, it was time-consuming, but I enjoyed it.

Designing I used Figma for my design, I'm not an expert but I know how to do basic designing and prototyping.
Planning Notion is an awesome tool to be cared for. It is super productive enough for me to plan my daily work. I used Pomodoro timers too, I want to be productive.
Time to code I'm a true React lover. I use it for all my projects and I did use it for creating Gradient King

npx create-react-app gradientking

And it is how it started, coding components, designing it, getting errors, copying code from StackOverflow, debugging, and Of course, it continues...
I wanted my app to get the data from a JSON file. So, I used useEffect to make everything work. Like this 👇

const [data, setData] = useState([]);
const getData = () => {
    fetch("data.json", {
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    })
      .then(function (response) {
        console.log(response);
        return response.json();
      })
      .then(function (data) {
        console.log(data);
        setData(data);
      });
  };

  useEffect(() => {
    getData();
  }, []);

And I'll the respose as an array so that I could map it or pass it to other pages.

And the next thing was that to implement Dark Mode 🌒. I created a component useLocalStorage.js, I did it to avoid duplication of the same code. Now everything becomes fast and easy, we can now use localstorage like this 👇

const [dark, setDark] = useLocalStorage("DarkMode:", true);

And now, we're able to store our data in localstorage

Now, I made a code that if dark mode is true and dark class and else dark mode is false keep it same. So, we just have to change some of our CSS like this 👇

.dark .App {
  background: #333;
}

And that's it. Now, we have dark mode in our app. Next, to make the app responsive, I used @media queries. Like this 👇

@media (max-width: 500px) {
    .preview {
       width: 90%;
       height: 70%;
    }
}

To handle the search, it was easy coding just need a bit of logic. There is an inbuilt function called find() and it helps 🤝.

const findSearchWord = (e) => {
    if (e.keyCode === 13) {
      window.find(e.target.value);
    }
  };

and then we should render our component.

 <input
      type="text"
      placeholder="Search for a Color or Author"
      className="input"
      onKeyDown={(e) => findSearchWord(e)}
/>

And yeah, the total build process is far longer, I just told you the main part of it. Head over to Github Code and find more. After the basic completion of the code, I pushed it to Github and then whenever I need to add more stuff I did a new commit.

Deployment Honestly, I'm super new to Amplify. I watched a lot of youtube videos in fact did some tutorial to get started with Amplify. My friend helped me lot, he guided me to use Amplify and helped me in hosting the app 👏 Amplify is super powerful, it has a much larger space. I was new to Amplify so I wasn't not knowing how to use these, but I'm sure I'm gonna learn more on AWS. It is yet to be explored for me 🌊 > Feel free to use Gradient King: https://dev.di7tazxmp7xob.amplifyapp.com/

Challenges

Challenge	Solution
adding scroll animations	Used AOS library
User want to contribute an Idea	Made a feature request template
Change different URLs without loading	Used `react-router-dom`
Generate image by uploading faster	Converted it into base64 value
user want to see the gradient in a bigger way	Implemented a page where it show the clicked gradient
Notification withing the app	Used `react-toastify` library
User want to report a bug	Made bug template
Make the app 100/100 on PWA Check	Optimised app, solved errors
Responsiveness of the app	Used `@media` queries
Stop duplication of same user details in contributors page	Wrote a jquery code to solve it

✨️ What's next

I'm pretty sure that I will be constantly adding more and more extraordinary features as I consider this as my biggest project to date. These all are the things I have planned to do in the next few days

Voting (user can upvote a gradient)
User authentication
Comments
Generate gradient from a website URL (in progress)
Generate gradient from a word, eg: love - red gradient
Download Gradient
Chrome extension which does all the features
Share on Twitter(update 27th February 📢)
Contributors in the Readme(update 28th February 📢)
404 page(update 1st March 📢)
Launch on Product Hunt

🍰 Contributing

As I have said earlier, Gradient King is an open-source project 🤝 and I'd like to invite all devs over the planet to contribute to the app. Here is how you can contribute.

Head over to public/data.json and add your gradient at the bottom of the list. Here is an example contribution 👇

Make sure that you have all the required items

{
  "id": 104,
  "githubUsername": "saviomatin",
  "colors": [
    "#3CA55C",
    "#B5AC49"
  ]
},

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

🛡️ Licensed under MIT

👀 Wrapping Up

Yeah, that's a wrap. Hope you enjoyed Gradient King. Feel free to use it for your future projects. Share with other friends. Let them know of the resource. Do not hesitate to share your feedback. Share on twitter, tag me @saviomartin7

%[https://twitter.com/SavioMartin7/status/1365957352998993923]

🌎 Lets connect

📢 Changelog

These are the awesome features that I have developed after the publishing of the article. 🙌

Github Repo / Live Demo

Share on Twitter (February 27 ⏳️)

You can now easily share on Twitter 🐦. Just click on the Twitter icon in the footer and you will be opened to Twitter in a new browser with a pre-defined text.
Contributors in the Readme (February 28 ⏳️)

We love to show our proud contributors 👨‍💻. Now, you can see them in the GitHub readme also. Feel free to contribute in the app.
404 page (March 1 ⏳️)

If you go to a page that doesn't exist like https://dev.di7tazxmp7xob.amplifyapp.com/asada or https://dev.di7tazxmp7xob.amplifyapp.com/404 you will now get this 404 page, where you could jump back to home 🏠. 404 pages also support Dark Mode 🌒.

Originally published at hashnode

34 Chrome Extensions for Productivity 🔥

Savio Martin — Tue, 22 Dec 2020 03:29:56 +0000

Hey there, I'm Savio Martin, A 13-year-old boy on an aim to become a successful full-stack web developer. I love creating full-stack web applications and mobile apps. I have prooved my excellence in frontend technologies. I love to share my resources and expertise with the dev community. I regularly write articles on @hashnode.

The Top 10 extentions I would strongly recommend installing

Daily.dev
Wappalyzer
Grammarly for Chrome
Clear Catche
Loom for Chrome
Scrnli - Screenshot Tool and Editor
Full Screen
Emoji Keyboard by JoyPixels®
Adgaurd Adblock
Octotree - GitHub code tree

Hope you all loved this article. If you have any doubts or queries, write it up in the comments below. Also, do reactions in this article. Thanks for your time. 🙏

Don't forget to follow me on Github and Instagram

Wishing You A Good Day! Happy Hacking! 💻⚡

Orginally published on hashnode

DEV Community: Savio Martin

Free Certification Courses for Developers 🔥

Hello Folks 👋

1. FreeCodeCamp

2. Fundamentals of digital marketing by Google

3. Cognitive Class by IBM

4. Test Automation University

5. Programming Essentials in Python by Cisco

6. Python Training Course

7. Learn by Kaggle

Credit to Denic Marko

👀 Wrapping Up

🌎 Lets connect

Pro Tips to Search on Google 🔥

Hello Folks 👋

Why Googling is Must Have Skill?

1. Quotations (" ")

2. Asterisk ( * )

3. Range ( ... )

4. Search:

5. AND

6. Filetype:

7. OR

8. Define:

9. Related:

10. Plus ( + )

11. Hyphen ( - )

👀 Wrapping Up

🌎 Lets connect

16 must-have Figma Plugins for UI/UX Designers

Wishing You A Good Day! Happy Hacking! 💻⚡

20 Killer JavaScript One Liners ☝️

Hello Folks 👋

Get Value of a brower Cookie

Convert RGB to Hex

Copy to Clipboard

Check if Date is Valid

Find the day of year

Capitalise a String

Find the number of days between two days

Clear All Cookies

Generate Random Hex

Remove Duplicated from Array

Get Query Params from URL

Log Time from Date

Check if a number is even or odd

Find Average of Numbers

Scroll to Top

Reverse a string

Check if array is empty

Get Selected Text

Shuffle an Array

Detect Dark Mode

Do you want to test your project?

👀 Wrapping Up

🌎 Lets connect

Introducing Code House - A whole new world of 300+ Developer Cheatsheets 👨‍💻

Hello Folks 👋

Little flashback

Introducing Code House

✨️ Inspiration

TL;DR

300+ Cheatsheets

Filter by Category (29 Cateogries)

Filter By Source (230+ Sources)

Bookmark Cheatsheets

Add new Cheatsheet (on browser itself)

On Review Cheatsheets

Separate page for each Cheatsheet

Request for Features

Report Cheatsheet

Contributors Page

Dark mode

Upvote/Comment on Cheatsheets

Toggle View (List View or Grid View)

Newsletter (once a week)

GraphQL API Playground

💻 Built with

🧐 Challenges

🌈 What's next

🛡️ Licensed under `MIT`