Terence Zimwara, Author at ProdSens.live

1219. Path with Maximum Gold

Terence Zimwara — Tue, 14 May 2024 16:20:09 +0000

https://leetcode.com/problems/path-with-maximum-gold/description/?envType=daily-question&envId=2024-05-14


/**
 * @param {number[][]} grid
 * @return {number}
 */
var getMaximumGold = function (grid) {
    const m = grid.length
    const n = grid[0].length
    let res = 0

    function dfs(row, col) {
        if (
           Math.min(row, col) < 0
            || row >= m
            || col >= n
            || grid[row][col] === 0
        ) return 0

        let curr = grid[row][col]
        grid[row][col] = 0

        let down = dfs(row + 1, col)
        let up = dfs(row - 1, col)
        let left = dfs(row , col + 1)
        let right = dfs(row , col - 1)

        grid[row][col] = curr

        return curr + Math.max(down, up, right, left)

    }

    for (let row = 0; row < m; row++) {
        for (let col = 0; col < n; col++) {
             res = Math.max(res, dfs(row, col))
        }
    }

    return res
};

The post 1219. Path with Maximum Gold appeared first on ProdSens.live.

HacktoberFest 4th PR accepted.

Terence Zimwara — Mon, 16 Oct 2023 16:25:16 +0000

Pull Request #4

I made some more CSS art cards for the Memory Game project. I’m up to ten cards for that game.

I am still working on a transcribing a podcast for another pull request.

I have met the 4PRs accepted requirement for this year. There’s few more things I’d like to do but I feel good about what I’ve done so far.

Keep Hacking.

The post HacktoberFest 4th PR accepted. appeared first on ProdSens.live.

📢 Uplifting Black Technologists: Spotlight on Black Girls CODE

Terence Zimwara — Wed, 21 Jun 2023 15:25:17 +0000

In honor of Juneteenth, we’re uplifting initiatives and organizations that center Black and African-American technologists. Black Lives Matter, and we celebrate these orgs for their contributions toward creating futures for Black people and African-Americans while shaping our industry for the better.

In this post, we shine a spotlight on Black Girls Code!

For more than a decade, Black Girls CODE has been tirelessly opening doors to education and technology for thousands of Black and brown girls aged 7-17. Their mission is more than just teaching coding; it’s about narrowing the digital divide for young girls of color and sparking a love for technology that can change the face of STEM.

With 14 chapters in cities across the United States, and a thriving chapter in South Africa, the organization has a broad footprint. Each chapter meets approximately once a month to learn and grow together through a variety of STEM-based enrichment activities. These range from engaging workshops and inspiring panels to thought-provoking film screenings and exciting tech company tours.

As we celebrate Juneteenth, we stand in solidarity with Black Girls CODE in their mission. By empowering underrepresented communities, we work together towards building stronger economies and more equitable societies. This is the true embodiment of democracy — the creation of diversity and inclusion that offers a seat at the table for everyone.

We invite everyone in the DEV Community to join us in celebrating and supporting the tireless efforts of Black Girls CODE, this Juneteenth and every day.

Visit their events page to participate in or support their upcoming activities. For those who are able, consider making a contribution on their donation page. Your donations will help fund workshops, programs, and provide resources that are vital in supporting these young, aspiring technologists.

Let’s be the change we want to see in our tech industry – diverse, inclusive, and equitable for all. Your support could very well ignite the spark that inspires the next generation of tech innovators. Together, we are creating stronger economies and more equitable societies.

Happy Juneteenth!

The post 📢 Uplifting Black Technologists: Spotlight on Black Girls CODE appeared first on ProdSens.live.

Dark Mode in 3 Lines of CSS and Other Adventures

Terence Zimwara — Sat, 29 Apr 2023 13:05:20 +0000

Dark Mode is a design trend where the color scheme of a website is changed to a dark background with light-colored text and elements. It’s also referred to as Night Mode or Dark Theme. The purpose of Dark Mode is to reduce eye strain in low light environments, conserve battery life on mobile devices, and create a sleek and modern aesthetic.

Many popular websites and applications now offer a Dark Mode option — here’s TailwindCSS:

If you’re a developer, you most likely already know how to toggle Dark Mode in Dev Tools (for those who don’t know, go to the “rendering” tab!):

If you want to toggle on Dark Mode for your operating system (and thus all apps supporting Dark Mode), go to System Settings. On a Mac, you‘ll find it under System Settings > Appearance:

There are a lot of tutorials out there already on how to implement dark mode for a webiste.

This tutorial will look into different approaches, including some rad new CSS-features, that’ll allow you to ditch JavaScript.

Ready? Let’s get started.

Dark Mode using System Colors

First, we’ll create a simple HTML-document with a headline:


  Hello Darkness, My Old Friend

In a stylesheet, we’ll add:

body {
  color-scheme: light dark;
}

This will tell the browser, that our document can accept both a light and a dark color-scheme.

If you run this snippett in a browser, even with Dark Mode on, it will be … light.

Your browser UI will be dark, though.

That’s because the user-agent-stylesheet does not have any default colors set up.

We can fix that quickly, by using System Colors:

body {
  background-color: Canvas;
  color: CanvasText;
  color-scheme: light dark;
}

Let’s check our snippet again:

Much better! Dark Mode for your entire website in 3 lines of CSS!

Let’s dive a bit more into System Colors. From the specs:

In general, the keywords reflect default color choices made by the user, the browser, or the OS. They are typically used in the browser default stylesheet, for this reason.

Here’s a Light Mode-demo, showing the available System Colors in Safari:

If we switch to Dark Mode, some colors are changed completely (like Canvas and CanvasText as we’ve already encountered), while others are only slightly changed:

Using System Colors for Dark Mode is a bit of a simplified Dark Mode-experience.

Yes, it will work — but pure black and white is a bit boring.

We can spice it up using color-mix in CSS. We can mix a bit of CanvasText (black or white) into Canvas (white or black) for the background-color, and the opposite for color:

body {
  background-color: color-mix(in srgb, Canvas, CanvasText 2.5%);
  color: color-mix(in srgb, CanvasText, Canvas 15%);
}

This results in a “softer” look:

Deducting saturation from a color, is a widely used way to make variations of colors in Dark Mode.

Using relative colors in CSS, we can do exactly that:

background: hsl(from ActiveText h calc(s - 30%) l);

Unfortunately, relative colors don’t work with System Colors in any browsers — yet!

NOTE: System Colors can be overwritten with forced colors (although used rarely) — so don’t rely too much on this technique.

Let’s move on to another technique, that’ll allow us to fine-control our Dark Mode colors.

Using a `prefers-color-scheme` media-query

To specify specific colors for light and dark mode, I recommend using CSS Custom Properties, and then update these using a prefers-color-scheme media-query.

With Light Mode as our default, let’s add the colors to a :where(body)-section, to separate them from our regular body-styles:

/* Properties */
:where(body) {
  --background-color: #FFF;
  --text-color: #222;
}
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Then, for Dark Mode, we’ll simply update these colors-properties:

@media (prefers-color-scheme: dark) {
  :where(body) {
    --background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

Let’s check it out:

But what if we want the users to choose which version of our website they want, indepently of the System Settings?

They might prefer a system set to Dark Mode, but our website in Light Mode.

Let’s create a toggler!

Creating a color-scheme toggler

Using JavaScript

If you go to a site like TailwindCSS, you’ll notice that a dark-class is added to the html-node when you select ”dark” from the color-scheme-toggler. This is done with JavaScript:

window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

Open Props is using a similar method, but updating a data-theme-attribute instead, and then defining properties in two blocks:

[data-theme=light] {
  --nav-icon: var(--gray-7); /* etc */
}
[data-theme=dark] {
  --nav-icon: var(--gray-5); /* etc */
}

Using CSS

Using some brand new CSS-techniques, we can create a toggler without JavaScript.

We’ll create a toggler with 3 states:

Light (forced)
Auto (system default, could be either light or dark)
Dark (forced)

First, some basic markup:


  
     type="radio" name="color-scheme" id="color-scheme-light" value="0">
    Light
  
  
     type="radio" name="color-scheme" value="auto" checked>
    Auto
  
  
     type="radio" name="color-scheme" id="color-scheme-dark" value="1">
    Dark

After adding some basic styles (see the Codepen-demo below), it renders like this:

We’ll add a --darkmode-property and container-type to the html-element:

html {
  --darkmode: 0;
  container-name: root;
  container-type: normal;
}

We’ll be using @container style()-queries, so we need to set the node as a “container”.

Since we don’t want to observe inline-size-changes, we just add the value normal.

If the user picks a “forced” value, we’ll update --darkmode:

html:has(#color-scheme-light:checked) { --darkmode: 0; }
html:has(#color-scheme-dark:checked) { --darkmode: 1; }

And finally, we’ll use a container style()-query to check, if --darkmode is set to 1:

@container root style(--darkmode: 1) {
  body {
    --background-color: hsl(228, 5%, 15%);
    --text-color: hsl(228, 5%, 80%);
  }
}

NOTE: @container style()-queries only works behind-a-flag in Chrome at the moment, it’s early days, so do not use in production.

Now, after selecting “Dark”, our toggler (and page) looks like this:

Simple and effective!

Storing state

If we want to store the users choice, I’m afraid we need a bit of JavaScript!

First, let’s add an identifier to our

 id="colorScheme">

Then, in JavaScript:

colorScheme.addEventListener('change', event => {
  localStorage.setItem('color-scheme', event.target.value)
})

Now, all we have to do is setting the property to the localStorage-value when the document has been loaded:

window.addEventListener("load", event => {
  const scheme = localStorage.getItem('color-scheme') || 'auto'
  if (scheme) {
    document.documentElement.style.setProperty('--darkmode', scheme)
  }
})

To select the correct mode in the toggler, add this to the if-block:

const selected = [...colorScheme.elements].filter(element => element.value === scheme)
if (selected) selected[0].checked = true;

Demos

Toggler

System Colors

Photo-credit: Sora Shimazaki

The post Dark Mode in 3 Lines of CSS and Other Adventures appeared first on ProdSens.live.

How TikTok Is Evolving From Social Media App to Entertainment Platform

Terence Zimwara — Tue, 07 Mar 2023 12:02:32 +0000

Welcome to HubSpot Marketing News! Tap in for campaign deep dives, the latest marketing industry news, and tried-and-true insights from HubSpot’s media team.

TikTok is one step closer to being an entertainment app. An example of this transition is its recent collaboration with Snoop Dogg.

In early 2022, Snoop Dogg acquired Death Row records becoming the owner of the infamous label’s catalog of music. A few months later, he announced he was removing the catalog from major streaming platforms with the intention of re-releasing it on his own entertainment app.

Though the status of his app is unclear, in 2023 Snoop Dogg decided to re-release the Death Row catalog on streaming platforms — after making it available exclusively on TikTok for a week.

@snoopdogg

Tha Dogg checcin in. Excited to tell y’all Death Row Records music is back for you to enjoy. Go get the songs on TikTok’s curated Death Row playlist available now #blackmusic #superbowl @musicontiktok @soundon

♬ Gin & Juice – Snoop Doggy Dogg

Getting exclusive rights to a popular music catalog (even for a short time) is a major move for TikTok, as the app distinguishes itself from other social media platforms by taking an entertainment-first approach.

Prioritizing TikTok as part of a music rollout strategy can have a big payoff for artists and record labels. Compared to the general population, TikTok users are more likely to pay for music and artist merchandise.

In 2022, TikTok launched its music distribution platform SoundOn, which allows artists to distribute their music globally while maintaining ownership of royalties (a major gripe artists have with other streaming platforms).

While TikTok can be an effective tool for marketing new music, older songs have also seen a surge in popularity after going viral on the app.

Mariah Carey’s 2009 song “It’s a Wrap” has seen a recent surge in streams thanks to a popular TikTok dance featuring a sped-up version of the song.

@jakey_breaky_heart

Can i get a little commotion for the dress #fyp #foryou #foryoupage #celinedion

♬ It’s All Coming Back To Me Now – Céline Dion

Celine Dion’s 1996 hit “It’s All Coming Back to Me Now” was the soundtrack of multiple popular TikTok trends in 2021 and 2022, which resulted in a boost in streams for the song.

Though some musicians have expressed disdain for creating TikTok-focused music, the influence TikTok has over how music is consumed and shared is hard to deny and unwise to ignore.

Marketing Snippets

The latest marketing news and strategy insights.

Instagram engagement rates for brands are on the decline. Here’s what that means.

The AI controversies marketers should avoid.

Dupes: three out of four consumers plan to continue buying generic items over brand names to save money.

AI Marketing Glossary: terms marketers should know.

Content creators: how three creators took their content from side hustle to full-time.

Snapchat just launched an AI-powered chatbot.

Social media metrics: what marketers need to be tracking in 2023.

The post How TikTok Is Evolving From Social Media App to Entertainment Platform appeared first on ProdSens.live.

Professional designers avoid these 5 mistakes on their websites at all costs

Terence Zimwara — Sat, 24 Dec 2022 03:01:53 +0000

As a web designer, it’s important to avoid making mistakes that can negatively impact the user experience or the overall effectiveness of a website.

In this post, I’ll mention 5 very common mistakes to avoid when designing a website.

Did you know that you can implement your websites or landing pages with or without coding on DoTenX for free? Make sure to check it out and even nominate your work to be showcased. DoTenX is open-source and you can find the repository here: github.com/dotenx/dotenx.

Let’s take a look at these common mistakes. Because this is a sensitive subject I don’t provide any examples for the websites making these mistakes but I show you how avoiding each of these mistakes makes a huge difference.

For each point, we’ll take a look at a few examples from different categories.

Overcrowding the page

One frequent error is cramming too much information into a single page. This can not only make the website appear disorganised and overwhelming, but it can also make it challenging for consumers to discover the information they need. Instead, make an effort to spread out the text over several pages or split it up using headings and subheadings to make it simpler to read.

Examples

SaaS(https://www.datadoghq.com/)

DATADOG offers hundreds of services and features, but looking at their landing page you see very specific and well-separated sections without overcrowding the page.

One of the tricks that larger organisations particularly do is to have multiple landing pages helping them to avoid overcrowded pages.

Real estate (https://www.realestate.com.au/)

This is one of the largest real-estate websites in Australia with tens of thousands of properties, yet when you look at their pages they keep each of them as clean, minimal and to the point as possible. This gives the viewers a sense of confidence in the website, and also makes it a lot easier for them to find what they actually need as quickly as possible.

Using tiny text

Using texts, including on buttons or links, which are too small to read easily is another huge mistake to avoid. Users, especially those who have visual problems or are elderly can find this annoying and may have trouble seeing small texts and not be able to navigate around the website or get the data they need. Make sure to choose a font size that can be read comfortably on all devices and screen sizes.

Examples

Retail (https://au.lespecs.com/)

Even without reading the name of this retailer, you can easily guess what they sell on this website. It’s really important to adjust the font size based on your target audience.

Retail (https://www.apple.com/)

Apple’s website is another example of how important it is to use fonts large enough to easily read the information the company wants to convey. There is no limit on how many sections of a web page can use the larges font size as long as you avoid overcrowding the page.

Design(https://www.adobe.com/)

On the contrary, Adobe, knowing their target audience, take a more radical approach, and not only use smaller fonts, they use background colors that you most likely will never see on a retail website.

Ignoring mobile users

It is essential to have a mobile-friendly website in the modern era. Since mobile devices account for more than half of all internet traffic, it’s critical to ensure that your website functions and looks great on them.

Use of fixed-width layouts that don’t adapt to the size of the screen and the use of buttons or links that are too small for users to simply tap on a small screen are some typical mistakes to avoid. This may make it challenging for users to access and engage with your website on mobile devices, which may result in a negative user experience.

Use responsive design approaches to guarantee that your website’s style and content adjust to the size and orientation of mobile devices in order to build a mobile-friendly website.

Examples

Retail (https://www.nike.com/)

Nike not only gives you a custom experience on mobile devices, but they also offer their mobile app on smaller devices.

Courier (https://www.dhl.com/)

It’s a common practice in well-designed websites to hide some sections on smaller device sizes, change the order of sections or reduce the details of each section.

Using too many different fonts

Although using multiple fonts on a website is fine, utilising too many might make the design appear cluttered and amateurish. For a unified appearance, limit the number of typefaces you employ and utilise them consistently across the entire page.

Examples

Community (https://www.indiehackers.com/)

A community such as Indie Hackers is full of textual context and barely any other visual elements other than small profile pictures or emojis can be found on each page. It’s easy to think, using different fonts is the best way to add variety to the website but in reality, the opposite is true.

Fashion (https://www.gucci.com/)

It’s important to consider the context of your website to decide how much variety is too much. The luxury fashion house Gucci, considering its target audience takes a different approach that better matches its design philosophy and uses a larger set of font types while maintaining elegance and avoiding overdoing it.

Not using clear calls to action

A call to action (CTA) is a button or link on a website that directs visitors to perform a particular activity, such as viewing a product page or subscribing to a newsletter. These components are essential for increasing website engagement and conversion. CTAs need to be clearly visible and simple to find in order to be effective.

They shouldn’t be obscured, difficult to find, or designed to look like the rest of the website. In order to attract the user’s attention and compel them to act, they should instead be conspicuously noticeable and stand out.

Examples

Marketplace (https://www.amazon.com/)

There is virtually no limit on how many CTAs you can have on any page. An extreme example of this is Amazon’s website.

Due to the nature of the service Amazon offers on its website it should have too many CTAs each of which should stand out. To avoid overcrowding the page, they have used a minimalist design for each section and with only two font sizes (title and CTA) they have helped their numerous CTAs to stand out.

DoTenX (https://dotenx.com)

Exactly opposite to a marketplace like Amazon, DoTenX takes an approach that is typical of SaaS websites. With CTAs, DoTenX uses very different colours to direct the users towards the desired actions.

The post Professional designers avoid these 5 mistakes on their websites at all costs appeared first on ProdSens.live.

4 Data-Driven Reasons to Work with Micro-Influencers [HubSpot Research]

Terence Zimwara — Tue, 20 Dec 2022 12:07:05 +0000

Influencer marketing has become more integral to marketing campaigns as brands try to reach audiences on platforms geared toward community building and creating content than companies. When you think of influencer marketing, you probably think of influencers with large followings collaborating with brands; however, smaller influencers (also called micro-influencers) are gaining traction among marketers.

HubSpot recently surveyed 1,200 global marketers and found that 64% of marketers listed micro-influencers among the creators they worked with throughout 2022. 53% of marketers said they plan on working with micro-influencers in 2023. So, why are marketers shifting their focus toward micro-influencers, and should you do the same? To answer these questions, here are four data-driven reasons to work with micro-influencers on your next campaign.

What are micro-influencers?

Our survey defined micro-influencers as creators and influencers with a follower/subscriber count ranging from 10,000 to 99,999. Micro-influencers are very well known within their niche and have a close relationship with their followers, resulting in high engagement.

Why Companies Should Work with Micro-Influencers

Here are four reasons your company should consider working with micro-influencers.

1. Micro-influencers have excellent engagement rates.

Our survey found that 33% of marketers reported having the most success with micro-influencers compared to nano, macro, and mega-influencers. As I said before, micro-influencers have very high engagement, so it’s no surprise that a third of our respondents reported great success working with them.

Micro-influencers boast high engagement because it’s easier to connect with and build a bond with fewer followers versus millions of followers.

A recent study by Later x Forh shows that the fewer followers an influencer has on Instagram, the higher their engagement rate. Instagram users with less than 1000 followers also receive likes from up to 8% of total followers, while users with 10 million+ followers receive only 1.7%.

2. They are more cost-effective than macro-influencers.

According to Shopify, micro-influencers with 5,000 to 30,000 followers charge between $73 and $318 per social media post. Specifically, Shopify says businesses can expect to pay micro-influencers around the following prices:

$172 for an Instagram post
$219 for an Instagram video
$73 for an Instagram story
$318 for a Facebook post
$908 for a YouTube video

This is less than influencers with more than 500,000 followers. These influencers typically charge between $2,085 and $3,318 per post. For these influencers, companies can expect to pay:

$2,085 for an Instagram post
$3,318 for an Instagram video
$721 for an Instagram story
$2,400 for a Facebook post
$3,857 for a YouTube video

If you’re a smaller business looking to tap into a more targeted audience online without exceeding your budget, micro-influencers would be a worthy investment.

3. They account for almost half of all influencers.

Micro-influencers with 5,000 to 20,000 followers account for 47.3 percent of influencers. Mid-tier influencers make up 26.8%, and nano-influencers make up 18.74%. Macro-influencers are rare in the influencer marketing landscape.

With micro-influencers making up such a massive portion of the market, finding one who fits your niche, shares your vision, and can tap into your audience is highly possible.

4. They foster authenticity and trust within their niche.

As mentioned earlier, micro-influencers can form a close bond with their audience, which leads to higher engagement than macro-influencers. Suppose you’re able to get a micro-influencer to support your product. In that case, that influencer will likely boost your reputation and build confidence regarding your business.

5 Brands Who Collaborate with Micro-Influencers

The following brands have included micro-influencer marketing in their marketing strategy:

1. La Croix

Sparkling water brand La Croix has collaborated with multiple micro-influencers to showcase its products. To encourage influencer collaborations, the brand sends vouchers for free cases of their drinks to micro-influencers with as little as 1000 followers. For example, the following Instagram post shows micro-influencer and journalist Andrea Albers holding a can of La Croix next to a Christmas tree.

2. Daniel Wellington

Daniel Wellington is a Swedish watch brand that started its global ambassador community to foster collaborations with micro-influencers. The company’s daily #DWPickoftheday contest challenges influencers to create exciting content to be featured on the company’s main account. Micro-influencers like Melanie Vaclavikova are often featured on the company’s Instagram.

3. Asos

Online retailer Asos works with micro-influencers via its Asos Insiders program. Through the program, Asos finds influencers of all follower counts to promote its clothing and beauty products. One micro-influencer the retailer has worked with is Lauren Nicole, a fashion influencer and editor with 74.6 followers on Instagram.

4. Coca-Cola

Even huge, long-standing brands like Coca-Cola have leveraged micro-influencer marketing in campaigns. Coca-Cola’s #Cokeambassador campaign welcomes influencers to post photos and videos of themselves with Coca-Cola products.

5. Sperry

Boat shoe brand Sperry frequently collaborates with micro-influencers on its social media. Sperry will grant influencers a budget to engage their community and audience. The company also launched OpenSponsorship to connect athletes with the brand, resulting in over 6,000 athletes from 160 sports working with Sperry.

In short, micro-influencers have excellent engagement and a close bond with their followers. Leveraging micro-influencers in your next marketing campaign is an effective and budget-friendly way to tap into your target audience on social media or community-based platforms. Now that you know the benefits of micro-influencers, you’re ready to collaborate with those whose work aligns with your vision.

The post 4 Data-Driven Reasons to Work with Micro-Influencers [HubSpot Research] appeared first on ProdSens.live.

Top 6+ React Development Tools for Productivity

Terence Zimwara — Thu, 01 Dec 2022 02:03:28 +0000

React is an open-source JavaScript library to build user interfaces based on UI components. Due to its collection of a wide range of libraries and tools, it provides great support for developers to work in a productive environment.

Nevertheless, creating an application is never easy. Deploying is even harder. Therefore, it’s important to find the right tools to aid your development journey and create an enhanced coding experience.

Here is a recommendation for some of the most popular tools for React developers.

Reactide

Reactide was the very first interactive development environment (IDE) for React web applications and is now one of the most widely used IDE for React developers.

It is a cross-platform application that reduces the time of server configuration and building tools. What Reactide stands out the most is its outstanding component visualization, where developers don’t have to move between the IDE and browsers to check the updates.

Storybook

Storybook is a free open-source workshop for front-end development. Storybook is not only compatible with React, but also with Vue.js, Angular, and other various frameworks.

Another advanced feature of Storybook is how it runs separately from the app. Thanks to this, components can be developed in isolation, allowing both test automation and simulation. To ensure a reusable component while improving the overall development speed, Storybook is the choice for react developers.

FUNCTION12

FUNCTION12 is a design-to-code tool that allows you to automate design projects to React without the repetition of hand-coding. It is one of the important React tools for developers since it not only raises the development productivity but the production quality is also elevated from the developer-level codes.

What sets FUNCTION12 apart from other design-to-code or Figma-to-code tools is its accuracy and speed. When syncing or importing design projects, the designs are rendered in canvas automatically with the fastest loading speed regardless of the project size.

Bit

Bit is an open-source, command line (CLI) tool with an online collaboration feature where developers can create and share React components. With Bit, users can test the components separately from their project and go through component testing and dependency check.

Moreover, Bit also provides a vast list of open-source components to use for your project that other developers have uploaded with full access which helps save a great amount of time.

ES Lint

Created by Airbnb developers, ES Lint provides a quick check of your codes for possible bugs based on its intelligent algorithms. It offers built-in support for React library by providing an automatic issue fix and enhancing your syntax.

It is also a great tool for React developers to your code and prevent any issues or bugs before the execution.

Visual studio code

Created by Microsoft, Visual Studio Code is an open-sourced editor that offers a great spectrum of development styles. Because of the various plugins available in VS Code, it’s great for React developers to create a personalized environment for their coding experience.

Another great feature of VS Code is a ‘Live Share Feature’, where developers can work and collaborate on a project at the same time. This is great for developers or teams that work in different locations or remotely to work on the same file simultaneously.

Last but not least, here are a few other useful tools to keep under your fingertip as well to improve your React development productivity.

React Toolbox

helps develop Material Design UI with a vast variety of responsive components. The components follow the Google Material Design guidelines, which is another advantage.

React Developer Tools

is one of the popular React DevTool in Chrome extension, which allows developers to inspect and see the React component hierarchies.

Framer Motion

is a motion library that can be applied to production immediately. It is open source and does not require high CSS knowledge to create high-quality animation.

Create React App

is created by Facebook which helps you create a React application with a setup already done such as project structure, modules, and configuration.

The post Top 6+ React Development Tools for Productivity appeared first on ProdSens.live.

How to get dominant colour of an image with the Color Thief library in JavaScript

Terence Zimwara — Fri, 04 Nov 2022 05:05:43 +0000

We have all seen many designs, music players in particular dynamically changing design properties according to the dominant colour (ahem ‘color’) of an image.

Spotify does it, Deezer does it, Youtube Music does it, and I recently did it to showcase my 2022 Spotify playlist Here. Now let’s do it too!.

We start with a basic boilerplate

Then we’ll code ourselves a simple HTML and CSS webpage with the Color Thief CDN link

(also available on NPM npm i --save colorthief)

HTML


 lang="en">

     charset="UTF-8">
     http-equiv="X-UA-Compatible" content="IE=edge">
     name="viewport" content="width=device-width, initial-scale=1.0">
     rel="stylesheet" href="index.css">
    </span>Dominant color tutorial<span class="nt">



     class="background">
         class="image-container">
                         src="https://loremflickr.com/420/340" alt="image" crossorigin="anonymous">

CSS

body{
    margin: 0;
    padding: 0;
}
.background{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container{
    width:40vw;
    height: 60vh;
    background-color: #000;
}
.image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

So we should be left with a nice randomly generated kitten page

Now for the fun part, Javascript!

    window.onload = () => {
    getDominantImageColor = ()=>{
        // get the image
        let sourceImage = document.querySelector("img");
        // get the background element
        let background = document.querySelector(".background");
        // initialize colorThief
        let colorThief = new ColorThief();
        // get color palette
        let color = colorThief.getColor(sourceImage);
        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";
    }
    getDominantImageColor();
    }

Don’t worry, I’ll explain the javascript part

First we make sure our page is fully loaded by wrapping our code in the window.onload function

window.onload = () => {
//code here
}

Then we’ll get our image and the background element

        // get the image
        let sourceImage = document.querySelector("img");
        // get the background element
        let background = document.querySelector(".background");

Next, we’ll initialize colorthief and get the color palette of the image

     // initialize colorThief
        let colorThief = new ColorThief();
        // get color palette
        let color = colorThief.getColor(sourceImage);

Set the background color to the RBG value of the palette

        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";

Then we’ll call the function

    getDominantImageColor();

everything together should look like this

    window.onload = () => {
    getDominantImageColor = ()=>{
        // get the image
        let sourceImage = document.querySelector("img");
        // get the background element
        let background = document.querySelector(".background");
        // initialize colorThief
        let colorThief = new ColorThief();
        // get color palette
        let color = colorThief.getColor(sourceImage);
        // set the background color
        background.style.backgroundColor = "rgb(" + color + ")";
    }
    getDominantImageColor();
    }

Our page should now be working!.

Hurray!

Any suggestions or issues, feel free to comment and follow me lol.

The post How to get dominant colour of an image with the Color Thief library in JavaScript appeared first on ProdSens.live.

Techpro.club GitHub issues(hacktoberfest)

Terence Zimwara — Sat, 01 Oct 2022 13:14:40 +0000

Prior to listing techpro.club to hacktoberfest, here is a list of issues you can work on, feel free to make some pull requests.

1.https://github.com/ClubTechPro/techpro.club/issues/89
-1 like counts on a post in feeds

2.https://github.com/ClubTechPro/techpro.club/issues/92
Accounts without a profile avatar and name in GitHub breaks

3.https://github.com/ClubTechPro/techpro.club/issues/93
LinkedIn profile integration

4.https://github.com/ClubTechPro/techpro.club/issues/94
Order of feeds

5..https://github.com/ClubTechPro/techpro.club/issues/96
Projects link broken from notifications

6..https://github.com/ClubTechPro/techpro.club/issues/109
Golang installation documentation

7..https://github.com/ClubTechPro/techpro.club/issues/111
Contact us form

8..https://github.com/ClubTechPro/techpro.club/issues/112
Add social links on the footer and contact us page

9.https://github.com/ClubTechPro/techpro.club/issues/113
Replace “About us” images in Html

10.https://github.com/ClubTechPro/techpro.club/issues/114
Remove .DS_store file from all folders

Here are issues available for the hacktoberfest event, we’ll love to see what you come up with, Feel free to hit a star, and join our projects on our GitHub page, happy hacking.

The post Techpro.club GitHub issues(hacktoberfest) appeared first on ProdSens.live.

Terence Zimwara, Author at ProdSens.live

1219. Path with Maximum Gold

HacktoberFest 4th PR accepted.

Pull Request #4

📢 Uplifting Black Technologists: Spotlight on Black Girls CODE

Dark Mode in 3 Lines of CSS and Other Adventures

Dark Mode using System Colors

Hello Darkness, My Old Friend

Using a prefers-color-scheme media-query

Creating a color-scheme toggler

Storing state

Demos

How TikTok Is Evolving From Social Media App to Entertainment Platform

Marketing Snippets

Professional designers avoid these 5 mistakes on their websites at all costs

Overcrowding the page

Examples

SaaS(https://www.datadoghq.com/)

Real estate (https://www.realestate.com.au/)

Using tiny text

Examples

Retail (https://au.lespecs.com/)

Retail (https://www.apple.com/)

Design(https://www.adobe.com/)

Ignoring mobile users

Examples

Retail (https://www.nike.com/)

Courier (https://www.dhl.com/)

Using too many different fonts

Examples

Community (https://www.indiehackers.com/)

Fashion (https://www.gucci.com/)

Not using clear calls to action

Examples

Marketplace (https://www.amazon.com/)

DoTenX (https://dotenx.com)

4 Data-Driven Reasons to Work with Micro-Influencers [HubSpot Research]

What are micro-influencers?

Why Companies Should Work with Micro-Influencers

1. Micro-influencers have excellent engagement rates.

2. They are more cost-effective than macro-influencers.

3. They account for almost half of all influencers.

4. They foster authenticity and trust within their niche.

5 Brands Who Collaborate with Micro-Influencers

1. La Croix

2. Daniel Wellington

3. Asos

4. Coca-Cola

5. Sperry

Top 6+ React Development Tools for Productivity

Reactide

Storybook

FUNCTION12

Bit

ES Lint

Visual studio code

React Toolbox

React Developer Tools

Framer Motion

Create React App

How to get dominant colour of an image with the Color Thief library in JavaScript

HTML

CSS

Techpro.club GitHub issues(hacktoberfest)

Using a `prefers-color-scheme` media-query