teleren/devto huggingface dataset:
A scalable approach to Styled Component Variants
Tags: styledcomponents, javascript, react, typescript
Published: 2021-03-12 11:38:20

On several occasions I saw people asking the question: "What's the best way to create variants using Styled components?"

And, because this variant feature is not natively supported by Styled Components I saw different people have different ways to approach this issue.

So, today I wanted to show you a couple of solutions that actually scales.

Note that this post will be split into two parts.
In this first one we are going to focus on how to create Styled Component variants **within the same file**.

# The problem with if else or switch statements

Let's start by creating a simple Styled Component button with 3 variants:

```js
const ButtonStyle = styled.button`
  color: ${({ theme, flashy, disabled }) => {
    if (flashy) return "fuchsia";
    else if (disabled) return theme.grey;
    else return theme.primary;
  }};
`;
```

As you can see, here you will have to maintain an if else (or switch) condition every time. 
Obviously you could externalise this to a specific function `determineColor` but, still, the problem remains.

## Solution 1

I have seen some people writing the same code as above in a more readable fashion:

```js
const ButtonStyle = styled.button`
  color: ${(props) => props.theme.primary};
  ${({ variant }) =>
    variant == "flashy" &&
    css`
      color: "fushia";
    `}
  ${({ variant }) =>
    variant == "disabled" &&
    css`
      color: ${(props) => props.theme.grey};
    `};
`;
```
Unfortunately, here again, you are kinda using an if-else statement.

# Solution 2 using inheritance

My preferred solution is actually to use the built-in inheritance property of styled-components.

```js
const ButtonStyle = styled.button`
    color: ${(props) => props.theme.primary};
`;

const ButtonStyleFlashy = styled(ButtonStyle)`
    color: fuchsia;
`;

const ButtonDisabled = styled(ButtonStyle)`
    color: ${(props) => props.theme.grey};
`;
```

Here, `ButtonStyleFlashy` and `ButtonDisabled` inherits the CSS from `ButtonStyle`.

## Zooming out

As a rule of thumb when I am creating styled component variants within the same file

▶️ If I am sure that the component will have **exactly 2 variants** I will use a Boolean props

```js
const ParagraphVariant = styled.p`
    font-weight: ${(props) => (props.$bold ? `bold` : `normal`)};
`;
```
▶️ If the component has **x variants** then I will use inheritance as seen above.
How EVE Online Is Built: CI From the Trenches #4 [Video]
Tags: gamedev
Published: 2021-03-12 11:19:12

How is a massive MMO like [EVE Online] (https://www.eveonline.com/built) built? EVE is a single-shard universe holding multiple and recent Guinness World Records.

How many people are working on such a game? What programming languages and version control systems do they use?

What technologies do they use, so they can reach a peak concurrent player record of 65,303 pilots? 

How long does it take to build Eve Online from scratch?

Find out [in this episode](https://youtu.be/ORkE8yeSsV4) of 'CI From The Trenches.'

{% youtube ORkE8yeSsV4 %}

Stay tuned for more weekly episodes!


EVE Online: https://twitter.com/EveOnline

Marco: https://twitter.com/MarcoBehler 

TeamCity: https://twitter.com/teamcity

JetBrains: https://twitter.com/jetbrains
Using Vite with linked dependencies
Published: 2021-03-12 11:13:39

**TLDR**
Use the Vite config option `optimizeDeps.exclude` when working with linked local dependencies 👍

The other day I was gonna take a look at a [Svelte issue](https://github.com/sveltejs/svelte/issues/5989) and thought I'd try out [Vite](https://vitejs.dev/) at the same time.

## Setup

I start by linking my fork of Svelte and run it in dev mode so it will automatically update.
```shell
# svelte-fork
npm link
npm run dev
```

In my test project, I configure Vite to transpile svelte-files, which was really smooth since it supports rollup-plugins. Then I link Svelte and start it in dev mode.

```shell
# test-project
npm link svelte
npm run dev
```
I start making changes in my fork of Svelte and expect the changes to be reflected in the test-project but nothing happens. Inspecting the `node_modules` folder shows that the changes are there but in the sources-panel of Chrome nothing has changed.

I restart Vite but nothing changes.

So I bring out the big guns and run:

```shell
rm -rf node_modules
npm install
npm link svelte
npm run dev
```

> A simpler approach to this 👆 is to remove `node_modules/.vite` where Vite keeps the pre-bundled files.

And finally, I can observe my changes. But this is not very smooth.

Then I take a look at the Vite config documentation where I find the `optimizeDeps.exclude` option that tells Vite which dependencies NOT to pre-bundle, and yes, we have a winner 🥳

```javascript
export default {
  // ...
  optimizeDeps: {
    exclude: ['svelte']
  }
}
```

And let me tell you - this works like a charm and I'm finally back to the smooth side of things 😎
Publishing a Chrome Extension
Tags: chromeextension, webdev, javascript, chrome
Published: 2021-03-12 11:10:57

---
title: Publishing a Chrome Extension
published: true
description: Steps to publish a Chrome Extension
tags: chromeextension, webdev, javascript, chrome
cover_image: https://i.imgur.com/5TAZR1T.png
series: chrome-extensions
---

This series wouldn't be complete without a post about how to **publish** a Chrome Extension, so here it is!

# 1. Prepare the extension to be published
We need to create a **.zip file** containing the source code for our extension. The only required file is the `manifest.json`, but we'll need to include the whole project if we want everything to work correctly.

We'll later upload this file to the Chrome Developer Dashboard.

# 2. Create a Chrome developer account

To register as a Chrome Web Store developer, we'll need to access the [developer console](https://chrome.google.com/webstore/devconsole).
Once we do that, we'll have to accept the Developer Agreement and Privacy Policies and pay the $5 registration fee (a one-time payment).

>Don't forget to access the Account panel and fill in your email address. If you don't, you won't be able to publish an extension.

# 3. Publish the extension

We'll go to the "Items" panel and click over the "New Item" button to publish our extension.
We'll see a modal where we'll drop our .zip file (the one created in step 1).

![](https://i.imgur.com/qVULKua.gif)

After uploading the file, we'll be redirected to the "Store Listing" form. Here we'll have to fill all required fields, which include:
- Name
- Description
- Category
- Language
- Small Icon (128 x 128 px)
- At least one Screenshot

After filling all the required fields, we should go ahead and do the same on the "Privacy practices" form. Here we'll need to explain the **purpose** of the extension and **justify why we need each of the permissions** we listed in our `manifest.json`.

> **Host Permission Justification**
> Given that we added a content script with access to *all the web pages* visited by our users in this example, we'll need to justify why we need that, and **our extension will take longer to get verified**.

![](https://i.imgur.com/EVrd3BA.gif)

After completing all fields in both forms, check the buttons at the top-right of the screen:

![The buttons "Save Draft" and "Submit for review". The latter is greyed out.](https://i.imgur.com/wZLX8AG.png)

If the button "Submit for review" is greyed out, click over "Why can't I submit?" to learn what's missing.

Once we've met all the requirements, click "Submit for review":

![](https://i.imgur.com/HdRRpe3.png)

Now our extension is submitted, and we just need to wait for it to be reviewed and approved!

In this case, since we added a content script that requires access to all web pages, we'll need to wait a little longer for the review. 

# The repo
You can find all of the examples of this series in my repo:

{% github pawap90/acho-where-are-we no-readme %}
We are giving away up to $300 credit for RoseHosting Cloud
Tags: javascript, node, laravel, postgres
Published: 2021-03-12 11:09:49

IT'S TIME FOR A GIVEAWAY

We are giving away up to $300 credit for RoseHosting Cloud.
RoseHosting #Cloud is a next-generation fully-managed #PaaS cloud hosting platform for #developers and businesses.

The giveaway ends midnight Thursday, March 25, 2021. Good luck!
https://www.rosehosting.com/blog/managed-cloud-hosting-paas-giveaway/
A quick Vue (Nuxt) component example.
Tags: vue, nuxt, html
Published: 2021-03-12 10:41:00

A short introduction to create a reusable alert component. 

## Prequisites and setup
This is not a formal setup guide, but just the way i have it set up so it can be replicated. It is expected to have a Nuxt application running, if you want to know how to easily do that [Nuxt installation](https://nuxtjs.org/docs/2.x/get-started/installation). 

- Nuxt 2.14*
- Node 14 (but Node > 10 should suffice)


## The component
#### **`components/general/alert.vue`** (file name for the component)
```html
<template>
  <div class="alert" :class="type">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'alert',
  props: ['message', 'type']
}
</script>
```

It is a single div component, which contains a message that is passed down as a `props` value. It also has a type props that is being used to set a class. the shorthand `:class` is being used (which does the same as `v-bind:class`).

## Using the component

To use this component with dynamic values, you need to import it in a different component. Register it in the `components` object and then it is usable as a custom HTML element.

#### **`pages/index.vue`** (file name for the page file)
```html
<template>
  <div class="page">
    <h1>Page title</h1>

    <alert :message="'Error Error!'" :type="'error'" />
  </div>
</template>

<script>
import Alert from '@/path/to/alert';

export default {
  name: 'basic-page',
  components: { Alert }
}
```
In this example, we `import Alert from '@/path/to/alert';` then we register it in `components: { Alert }`. Finally we use it as a custom HTML element. We use `:message=` to pass a String value.

(notice that we are using single quotes within the double quotes to specifically pass a String, if you want to pass down an object or a  variable, do it like: `:message="customMessage"`).

Finally in the same way we are passing the String `error`. which is then added as a class to the element.

The final HTML output will then be something like:

```html
<div class="alert error">
  Error Error!
</div>
```

By adding `methods`, `computed` values and fancier styling you can create components that are very flexible, small and are usable wherever you want in your application.
Offsetting our carbon emissions, one space shuttle at a time
Tags: environment, carbonoffset, business, treeplanting
Published: 2021-03-15 09:18:08

---
title: Offsetting our carbon emissions, one space shuttle at a time
published: true
date: 2021-03-12 10:26:40 UTC
tags: environment,carbonoffset,business,treeplanting
cover_image: https://assets.browserlondon.com/app/uploads/2021/03/tree-planting-in-the-uk-1536x864.jpg
canonical_url: https://www.browserlondon.com/blog/2021/03/12/offsetting-our-carbon-emissions-one-space-shuttle-at-a-time/
---

Back in 2019, [Browser partnered with Ecologi](https://www.browserlondon.com/blog/2019/09/03/carbon-neutral-coding-browser-partner-ecologi/) (formerly Offset Earth) to offset the monthly carbon emissions of our team.

Over the past year and a half, we’ve been fascinated to see how our contributions have been put to work all around the world; from [rebuilding mangrove forests](https://ecologi.com/projects/mangrove-planting-in-madagascar) in Madagascar to [protecting vital areas](https://ecologi.com/projects/protecting-and-restoring-the-pacific-coast-of-colombia) of the pacific coast of Colombia.

Through our involvement with Ecologi, we’re proud to say that Browser has now offset [more than 100 tonnes](https://ecologi.com/browserlondon) of carbon. That’s around about the same weight as a fully loaded space shuttle! Or, if you prefer, that’s equivalent to 79 long haul flights, or 253,930 miles driven in a car.

![Projects Browser has supported through Ecologi](https://assets.browserlondon.com/app/uploads/2021/03/Screenshot-2021-03-11-at-15.29.45-1024x572.jpg)

As well as purchasing carbon offsets, Ecologi also uses our contributions to fund the planting of new trees. To date, we’ve supported the planting of over 1,300 saplings.

This activity doesn’t count towards our carbon emissions offset, because young trees suck up relatively little CO2. However, as the trees grow, so too will their carbon sequestering power, ensuring that the impact of our contributions increases over time.

Both of these milestones are fantastic achievements for our [small team](https://www.browserlondon.com/about/), but, naturally, the work doesn’t stop here. We’ve got a long way to go in the battle against climate change and while we’re pleased to be contributing to change, we know there is more to do. We continue to look at ways that we can make our business more sustainable, and as we grow into the future, we hope our climate impact can too. Here’s to the next space shuttle.

-----

The post [Offsetting our carbon emissions, one space shuttle at a time](https://www.browserlondon.com/blog/2021/03/12/offsetting-our-carbon-emissions-one-space-shuttle-at-a-time/) appeared first on [Browser London](https://www.browserlondon.com).
Fix forgot Facebook password message considering zone dissatisfaction? Appear at help gathering.
Published: 2021-03-12 10:24:28


 
The forgot Facebook password message can impact up on the occasion that you're not set up to enter the application. Therefore, to manage the issue you can utilize the approachs that are open on the web. You can in like way utilize the recommendations that are given by the assistance pack by contacting them out. https://www.emailcontacthelp.com/facebook-password-recovery-reset-hacked.html
Introducing Glassmorphism UI - CSS UI library to build beautiful websites like Apple
Tags: glassmorphism, opensource, showdev
Published: 2021-03-12 10:22:08

There has been some time since I last wrote on the blog, but that doesn’t mean I haven’t been occupied with work. Today I want to introduce to you a new design trend and a project that we’ve been working on here at Themesberg. It’s called glassmorphism.

What’s all the fuss about it? This new trend started a couple of months ago when Apple launched the new Big Sur update for macOS, bringing a new design system to the user interface.

The most appealing feature of glassmorphism is the semi transparent and blurred effect it has when used above image or shape backgrounds. It creates a very immersive and personalised feeling, especially because every time you change the background, the UI changes a little bit.

Dribbble is all over the place with [glassmorphism posts](https://dribbble.com/tags/glassmorphism), more and more articles are being written about it, and honestly it kind of feels like a gold rush at the moment. We have also built a [UI kit based on neumorphism](https://demo.themesberg.com/neumorphism-ui/) last year, but to be honest, it was and still is a controversial trend. That doesn’t mean that it can’t be used in some situations, but surely it can’t be used for just any website.

Anyway, the thing is, I believe that glassmorphism can be used in real life situations, for small projects, medium sized projects, and even enterprise level projects. I mean, Apple did it, right?

## Introducing ui.glass

The past couple of months we’ve been working really hard here at Themesberg on a CSS UI library based on the new glassmorphism design trend. It will be a bit different from our previous UI kits, because it will be available on a standalone website and it will be more of a CSS library rather than a UI kit.

[![Glassmorphism UI](https://themesberg.s3.us-east-2.amazonaws.com/public/posts/glassmorphism/glassmorphism.png)](https://ui.glass)

As of now, most of the components are almost finished and currently we’re working on the documentation and presentation pages. You can sign up at [ui.glass](https://ui.glass) to receive more updates about the progress and be one of the first to find out when it will be available.

The base project will be free and open-source under the MIT license, and we will build premium products based on this library like admin dashboard templates, UI kits, landing pages, and many more.
To Know About Unfreeze My Cash App Account to Keep Safe from Fraud
 
Published: 2021-03-12 10:10:28


The money application usually blocks an account to protect it from hackers or scammers. So, if the unfreeze my cash app account, there is definitely something wrong with it. You can only find out about this by talking to the cash app representatives. However, if you already know how to defrost my cash account from the app, it will be the icing on the cake for you. Although, you can visit our website to unfreeze your account. https://www.my-accountrecovery.com/blog/transfer-money-from-zelle-to-cash-app/
Build Dev.to Clone in ReactJS
Tags: react, javascript, webdev, tutorial
Published: 2021-03-12 09:39:02

Hey guys,

Today, I'm feeling so grateful for this DEV community. From the last few months this community gave me lot's of support. So in return I wanted to share something.

I have build this clone of this [Dev.to](https://dev.to). (Home page only)

Demo Link: https://devto-clone.vercel.app/

This clone has lot's of good features like in the dev,
Such as,
* Infinite Loading
* Skeleton UI etc..
It is mobile responsive.

Things that I have used to build this clone,
-- ReactJS (React hooks)
-- [react-icons package](https://react-icons.github.io/react-icons/) 
-- Sass for styling
 
I have also created tutorial, You can find it here:

{% youtube gauYEwQ15lQ %}

Follow whole tutorial and you can learn lot's of things like,

-- Setting Layout
-- Creating Hamburger Menu
-- Getting data from API
-- Creating Skeleton UI
-- Infinite Loading
-- Mobile Responsive
-- React Hooks
-- Sass styling
-- Advanced Conditional Rendering etc.

You can find Full-Code from [here](https://github.com/codebucks27/devto-clone.git).

Please share your valuable review!

All suggestions are welcome! 

### Thanks For Reading and Supporting.😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Twitter where I'm sharing lot's of useful resources!
####[@code.bucks](https://twitter.com/code_bucks) 😉


> Note: This clone is for educational purpose only. 

### You might also like these website templates:

- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD)
- NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD))
NodeCrawler Vs. Proxies API
Published: 2021-03-12 09:38:31

The world of web scraping is varied and complex, and Proxies API sits at one of the most crucial junctions. They are allowing web scrapers/crawlers to bypass IP blocks by using a single API endpoint to access our 20 million-plus high-speed proxies on rotation.
One of the questions we get frequently is how we are different from services like OctoParse or Diffbot. Many times it is like comparing Apples and Oranges. Still, when we send this comparison table to our customer's developer team, their CXO, their marketing, or SEO team, they typically get it quite quickly if we are a convenient service or not.

So here is how we are different from NodeCrawler.

This powerful crawling and scraping package for Node Js allows server-side DOM and injection of JQuery and has queueing support with controllable pool sizes, priority settings, and rate limit control.

It's great for working with bottlenecks like rate limits that many websites impose.
Android vs. iOS- Which Platform is More Secure in 2021?
Tags: android, ios, mobile, devops
Published: 2021-03-12 09:35:47

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ymjt1sno5po4rb8ch7t.jpg)

Whenever we talk about mobile app development, it is necessary to compare every aspect from the perspectives of archrivals Android and iOS. Let’s take an example of mobile app security. Irrespective of app development duration and methodology, the security of your enterprise app largely depends on the operating system (OS). Though iOS has remained an unprecedented winner for a long time Google has decided to up the ante with the release of Android Q.

Here we are going to find the answer to an age-old question- which mobile operating system is more secure, Android or iOS? As we become more dependent on mobile devices for banking, social media, and online shopping, cybercriminals focus more on attacking our Android and iOS-powered devices for getting access to the most personal information. Let’s check out the threat level for both these operating systems in this blog.

But, before moving forward, let’s have a quick look at both these systems from the viewpoint of a [mobile app development company](https://www.suriainternational.com/).

Android OS

Popularity- With almost 72% market share globally, Android OS enjoys higher popularity than iOS. This is one of the major reasons why entrepreneurs and individuals opt for [Android app development](https://www.suriainternational.com/android-application-development-company/). But then, huge popularity makes Android OS more vulnerable to cyber-attacks. Also, the app review process on Google Play is far less stringent as compared to that on Apple’s App Store. As a result, users may accidentally install a malicious app on their devices, especially when they trust Unknown Sources.

Open Source- As an open-source OS, Android enables device manufacturers to modify the source code. Users find this aspect highly flexible and interesting, but it increases the risk of cyberattacks. Altering the source code of the device can open the doors for cybercriminals.

Read More: https://www.suriainternational.com/android-vs-ios/