teleren/devto huggingface dataset:
Glance — A VSCode extension for viewing SVG sprites easy-peasy.
Tags: vscode, news
Published: 2021-06-23 23:14:02

When working on a front-end project that uses [SVG sprites](https://css-tricks.com/svg-symbol-good-choice-icons/), I often misremember icon names or dis-remembered that I had previously added them. Consequently, I developed an extension for my favorite editor to help solve this issue.

Glance is a VSCode extension for viewing SVG sprites easy-peasy. Its features include:
- A viewer for SVG sprites
- Search icons
- Copy icon's Id or SVG to clipboard
- Appearance controls

{% youtube dK5gAxghYSo %}

> Available on VS Code Market place
https://marketplace.visualstudio.com/items?itemName=ahkohd.glance

It's open-sourced, contributions are welcomed 🤗
https://github.com/ahkohd/glance
Mobile Money (Momo) is not Airtime. Here's why.
Published: 2021-06-23 22:49:00

I have recently had conversations with a few curious people about the difference between Airtime and Mobile money.

This is a short post to show the difference between mobile money and Airtime. As a caveat, this article is based on my experience using Airtime and Mobile money. It is also based on my experience building for Airtime and Mobile Money and enabling people to transfer from a high-level app and an API.

### Airtime
Airtime initially was created to enable subscribers of a mobile network to call others for a predefined number of minutes depending on the value of the purchased Airtime.

First things first, if you live in North America, it might sound strange that people have to pay for each minute they call. But that is the case because of prepaid (Common in Africa) Cellular business models vs. postpaid (common in North America). So people in some parts of the world need to pay for each minute they spend talking on the phone, and that is how Airtime and the name _Airtime_ was created.

But now, Airtime can be used for more than just calls. Airtime, or more rightly, Credit can be used for:

- Calls
- SMS
- Internet Access (again prepaid by Megabyte)
- Buying a predefined amount of Internet data
- Transferring to family and friends
- And more

In fact, many Startups are building solutions that enable people to pay for products and services using Airtime and to exchange their Airtime for cash.

The significant difference, though, between Airtime and Mobile money lies in acceptance. Airtime is mainly issued by a telecom provider and can, in most cases in my experience, be only spent for services provided by the mobile network, Calls, Data, Ringtone etc. This is not the case with Mobile Money. Let's see how


### Mobile Money
With Mobile Money, I assume that some Mobile Network Operators (MNOs) came together and decided to offer a way to transfer real money between themselves without Banks and probably supported by [GSMA](https://en.wikipedia.org/wiki/GSMA). Unfortunately, this is not a history lesson, so I did not care to look up those details.

However, Mobile Money or MoMo, for short, is real money that holds value equal to a predefined local currency. More like **Stablecoins**, for those familiar with Crypto. It can be used to pay for items, and most times, it does not require internet to be spent, transferred, or received.

The big difference between MoMo and Airtime is that MoMo is accepted by third parties other than the issuing Mobile Network liker merchants, for bill payment etc. Although specific mobile networks have standards for accepting mobile money, from the user's perspective, they can pay directly to merchants or individuals. Mobile money can also be used to buy Airtime 🤯.

I hope this was helpful. Please, let me know of any corrections or comments, as this was a very quick post.
Rolling back your Terraform Remote State in S3
Tags: terraform, devops
Published: 2021-06-23 22:34:46

While I hope this is a rare occurrence, I've run into this a few times where I had to rollback Terraform state to a previous version in AWS S3. Why not just keep it in the newer version? Well, some of our CI/CD pipelines used an older version of Terraform (say 0.12), and while none of the resource states actually changed, our code would no longer run after a developer ran something locally on their computer with a newer version of Terraform (say 0.14). 

So! Here's a simple example on how to rollback state. 

**Note**: you must have versioning enabled on the S3 bucket. If it isn't, PLEASE do that for all places that Terraform State is stored :p

## Setup

I'm going to set up this up completely fresh with a new remote state object in S3 with the following Terraform code:

```
terraform {
  backend "s3" {
    bucket  = "shannon-terraform"
    key     = "dev.to-example/terraform.tfstate"
    region  = "us-west-2"
    profile = "shannon"
  }

  required_providers {
    null = {
      source  = "hashicorp/null"
      version = "~> 3.1"
    }
  }
}

resource "null_resource" "fake1" {
  count = 1
}
```

So, I `terraform apply -auto-approve`'d this. Next, I'm ticking up the count to 2 and applying that as well. Thus, I have two different versions of Terraform State saved in that bucket path. 

Now, we should be able to see these with the S3 api: `aws s3api list-object-versions --bucket shannon-terraform --prefix dev.to-example/terraform.tfstate --output json --profile shannon | jq -r ".Versions[].LastModified"`

In my case, I see two modifications:

```
2021-06-23T22:17:02+00:00
2021-06-23T22:16:28+00:00
```

Next up, I'm gonna grab a copy of my previous Terraform State locally in my current working directory: `aws s3api get-object --bucket shannon-terraform --key dev.to-example/terraform.tfstate --version-id [VersionID] [local_copy_name] --profile shannon` If you're wondering where the VersionID comes from, it should be in the output of the above `list-object-versions` command, but it won't show up without removing the `jq` parsing. 

Finally, let's push up that local backup into the S3 path: `aws s3 cp ./[local_copy_name] s3://shannon-terraform/dev.to-example/terraform.tfstate --profile shannon`. Re-run the above command for listing objects, and you should now see another version! 

Finally, you can confirm the update with `terraform state list`. In my case, I now only see one null_resource again after rolling the state back to before creating a second one. 

Please be careful in the use cases here! Getting Terraform State out of sync with actual infrastructure can be disastrous. This should be a niche case for ever using this.
The Secret Sauce from Highly Successful Makers: How to Achieve 10x Productivity
Tags: productivity, makers, developers, founders
Published: 2021-06-23 22:21:55

---
title: The Secret Sauce from Highly Successful Makers: How to Achieve 10x Productivity
published: true
description: top four tips to Achieve 10x Productivity based on our interactions with some highly successful and productive Makers
tags: productivity, makers, developers, founders
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szy0qefcxcnjn424jzjz.png
---


Productivity is a hot 🔥 keyword in the Maker scene. Have you ever wondered what makes some highly successful Makers so amazingly productive? 

The difference between super-productive people and everyone else is simple: they know how to get more done in less time. 

Here are our top four based on our interactions with some highly successful and productive Makers. One thing they all have in common is an intense focus on productivity.

&nbsp;

## 🎯 **Designate time to be unplugged**

Yes, you heard this right: Schedule time off! This sounds counterintuitive, but it’s found to be more effective than anything else. This is known as "blanking time": it allows you to supercharge yourself and start again invigorated, in a better mindset.

## 🎯 **Block out distractions during your creative hours**

Spending time in the Flow state has been shown to mega-boost productivity. You have to ignore the noise and focus 100% on what you want to do — Deep work requires you to focus for long periods on a single task, project, or idea.

## 🎯 **Keep events and meetings short. Walk away from meetings that aren’t well-organized**

Meetings are time-consuming. Focus only on shorter meetings that make you feel productive, skip the rest. Always ask yourself: does this have to be a meeting? Avoid the trap of staying in the meeting just to stay involved. Or you can decide to get up and walk out.

## 🎯 **Prioritize tasks and to-do lists**

Many Makers have a hard time prioritizing their tasks. To stay productive, prioritize your tasks by importance. This sort of microfocus will save you from getting sidetracked by unimportant tasks. Focus on what's most important right now — the priority task at hand. The most effective way to increase your output is to focus on doing one thing at a time.

***

Do you have more ideas💡? Share in the comments✍ !
Get up and running on Figma (tips for devs)🏃🏼‍♀️
Tags: ux, frontend, dx, figma
Published: 2021-06-23 22:17:49

Hey all,

Thought I'd put together this quick breakdown for devs who are being onboarded onto Figma for the first time. (There are some tricks and funky things to watch for as you get used to it)

Quick note on Figma: Figma is a common and dominant design tool in the UI world. It does live collab and designers like it because you can give devs/POs view access and you can navigate it independently. 

Getting up and running.

Expect an **invite** in your inbox, it looks like this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kj6z6gcfoduoypgps0r4.png)

This invitation will get you into the file - it will get you to create a login/password. 


If you have *view access* your interface looks like this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ero0vgq1agtppk30b7pm.png)

☝️ Don't forget the difference between the default mode (see code etc) and prototype mode (click through and see behaviour) 
 
**Key things to watch for**
- the account creation flow is a bit weird and you need to select "CREATE" an account rather than enter a password
- you can follow other people and quickly find where they are by clicking their avatar
- you can invite people to the file (and not require a designer to do it for you)
- you can export assets right out of the file

 
💡*If this was useful, comment and I can add to this little post with more juicy info.*
Tools for designing a web project
Tags: webdev, beginners, design, wireframing
Published: 2021-06-23 22:16:34

I have a bunch of projects I am working on for fun, mostly around web apps. Some of them are just concepts and some exist but need a revamp for a professional design.

So I want to share some of the tools I am using in my process. From designing the layout of the page to choosing color schemes and images. So when I start coding, I have the design and artistic decisions mostly figured out.


## Whimsical

- https://whimsical.com/

A free, intuitive wireframing tool.

Design your app for mobile or desktop. Create some webpage wireframes where you can see your whole website laid out on one giant page, with arrows and lines connecting them.

The ability to add styling is limited, but this is fine as it keeps the emphasis on laying out pages and components on pages, rather than colors or fonts.


## Wix

- https://wix.com

I've used Wix before to prototype designs for a site, even though I end up coding the site myself after for more control. 

Being able to move around elements and add a gallery in a few clicks is amazing. Then code it yourself when you are ready.


## Webflow

- https://webflow.com/
- [10 best templates of 2021](https://webflow.com/blog/best-webflow-templates) on their blog.

This is a web design and hosting tool like Wix, but with finer control over styling like adding classes to elements. Wix is ideal for non-developers while Webflow is intended for developers.

You can also add a CMS layer and ecommerce aspect to your site.

I want to use this to prototype my designs.

You need premium for Wix and Webflow if you want to remove ads and use a custom domain.


## Coolors

- https://coolors.co/image-picker

I need to choose a color palette that is harmonious.

On Coolors, I can find existing palettes by other users or make one myself.

There are probably many similar sites.


## Unsplash

- https://unsplash.com

This is a great stock images site. Search for high quality high resolution stock photos. Link to the image on their CDN at the appropriate resolution from your site, or download them and add them to your site.

They are all free. You are encouraged to use a credit to the author but this is not required.

You'll find dev.to and other blogs tend to have cover images found on Unsplash (which some images of laptops and code on screens being used annoyingly often but such is life).


## Free SVG

- https://freesvg.org/

Similar to Unsplash for searching for SVG files. An SVG can be scaled to any time and is typically small in file size, so it great for small icons to a large logo on your site.

Images are under the creative commons license.

I used this tool to find a dragon image which I added to my one project.

- https://github.com/MichaelCurrin/search-dragon


## Wrap up

I hope you learned about some new tools and feel inspired to go and design something. Let me know of other similar tools to recommend.
How coming off maternity leave has given me a “newborn” appreciation for pairing
Tags: career, parenting, womenintech, watercooler
Published: 2021-06-23 22:06:49

Late-night feedings and diaper changes, the 3-4 month sleep regression, teething, and a growth spurt all mean I'm getting less sleep than I'm used to and I am already back to work. Despite being away for 12 weeks on maternity leave, I still find it unbelievable to be back to work before we truly have things figured out, but that's a whole different article. I'm also incredibly privileged... I had 12 weeks paid time off, as did my husband, and we have full-time childcare. I fully recognize that I’m luckier than most - I wish 12 weeks of parental leave was the standard.

Returning to work was a new experience. With Focused Labs doubling in size in the weeks I was on leave, I was returning to not only a new project but also to new Zoom boxes (thank you, pandemic life). However, instead of having to come back and be dropped straight into a 40 hour work week, Focused Labs has a “graceful return to work” policy. I was able to return to half days my first week and then reduced hours the rest of the month. Having been allowed to gracefully return to work, I now can’t imagine what starting back at 40 hours right away would feel like. That first week was jarring enough. I’m so thankful this option was available to me, and I was able to provide feedback to benefit my coworkers in the future.

Pairing with someone on code, and knowing my pair is available as a second set of eyes, ensures continuity, and makes my day much better. When I left for maternity leave, the team didn’t miss a beat since I didn’t have “ownership” of the code.  Upon my return, being able to pair helped me get back up to speed quickly and provided that extra focus that can be lacking when you're sleep deprived. Talking through issues and interacting with another person regularly means a lot. This has especially been the case during a pandemic when you've been home with a baby, aren't going places, and “mommy and me” playdates hold their own new risks. At the same time, working from home is wonderful, especially when I am able to step away and see why Wes is crying, or feed him so I can skip a pump session.

Shortly after my return, our founder asked me if sleep deprivation was affecting me mentally. My instant reaction was “no, I think I'm used to it.” But am I? Is it similar to thinking you’re not "that drunk"? Is that my instant response to not show weakness? The "I can keep up with the boys" mentality? Later I thought more about his question. Would I know if I'm not working up to my normal abilities? Being able to work with a pair gives me some of that feedback. Do I have to be 100% back to normal already? Is there anything I can really do about it? Not right now, but I think knowing my own limitations and that it's temporary helps.

I have a 6 month old, adorable, little boy. My life is different. I'm different. How I work is different. And that's awesome. Pairing has helped me immensely and there are no words to describe how much that means to me to have one less thing to worry about.
Finding Active Forks in GitHub
Tags: productivity, github
Published: 2021-06-23 21:54:49

[This project](https://github.com/ridvanaltun/active-forks) allows you to find the most active forks of a repository.

![Active Forks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azgw8b2othx83yif154u.png)

You can use this tool with the web extension (for [Firefox](https://addons.mozilla.org/en-US/firefox/addon/active-forks/), [Chrome](https://chrome.google.com/webstore/detail/active-forks/kicchcnkocbmnmlpmjoojinofkagcjpi) or [Edge](https://microsoftedge.microsoft.com/addons/detail/active-forks/bpjmkkjkcligjfbanmjnlkjffalbehpb)). The extension is a open source project, you can check from [here](https://github.com/ridvanaltun/active-forks-extension).

![Active Forks Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq75901nd2qbuz8mqgyv.jpg)
React and Material-UI Landing Page/Template Starter Kit — Kanban Taskboard WebApp

Tags: react, typescript, materialui, landingpage
Published: 2021-06-23 21:51:59

Are you looking for a good/responsive React landing/Template to bootstrap your app?. You are in the right place. This article will help you to get your web app up and running quickly. Ideal for any hackathon or innovation project!.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr639t62vx3io12qyshx.png)

Github: https://github.com/hellomuthu23/react-material-ui-template

Live site: https://react-material-ui-template.web.app/

The ready-to-go template comes with the most essential tech-stack of 
- React
- Typescript
- React Router
- Material-UI
- Linter
- Prettier
- Cool Landing Page with mobile support
- Unit tests using Jest+React testing library
- Deployment to Google Cloud firebase using Github Action

The app also has below basic features of creating a Taskboard and managing tasks using Kanban board.

1. Create a new Taskboard
2. Open a Task Board
3. Add Task
4. Move Task across the different stage using the drag and drop feature
5. Delete Task

 
## Landing Page
The Template has a home page with Toolbar for main navigation, the main content area for displaying page content, and a footer. It also offers a smooth transition/animation effect while loading the content on the page.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr639t62vx3io12qyshx.png)

The Landing page is responsive as well, built using material-ui grids.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lehdfkeuc49eferalry6.png)

## Kanban Taskboard Page
The Taskboard page displays all the tasks in a kanban style format, task can be moved across to different stages using Drag and Drop feature. Along with this you can Add and Delete tasks. All data is stored in local storage.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmwl3jzykna6olr4vz20.png)

  

## How to use/run the app locally?
You can run the app locally and see how it performs. Follow the below steps to run the app locally.
1. Clone the repo
git clone https://github.com/hellomuthu23/react-material-ui-template.git
2. Run yarn command to install the required npm package.
3. Run yarn start to start the app.
4. Access the app at http://localhost:3000.

Hope you like this cool template and is of use to you!.
Good luck!.

## Links:
Github: https://github.com/hellomuthu23/react-material-ui-template
Live site: https://react-material-ui-template.web.app/
Day 394 : Early in the Morning
Tags: hiphop, code, coding, lifelongdev
Published: 2021-06-23 21:49:42

_liner notes_:
- Professional : My morning got super busy. A lot of my team lives in Europe, so I log in and see a few messages to start my day. I looked over and commented on some correspondence that will be going out to talk about one of our products. Did a PR review of some code for a blogpost. Did my own pull request for some updates to the documentation I did yesterday. I had an issue with the thing I made not showing up in the side navigation. When I did my PR, it created a test deployment and it was in the side navigation. Cool. May have been a local caching issue. Helped out with a Community question. Then I worked on refactoring some code for a tutorial. Basically fix one issue, see where it breaks, fix that and repeat. haha.

- Personal : Last night, I was able to get video from my webcam to an invited user of the site. I had to refactor some things but was able to reuse a lot of stuff from the HACO portion of the site because it uses the same technologies for the most part. On the user side, I was able to add a preview section where they can make sure the audio and video (if they want) is working properly before joining me. I still have to get the video chat layout worked out and add screen sharing. Took longer than I thought due to mostly thinking through how I want to pass data around. Learning quite a bit which is a reason why I do these projects. 

![View looking up at the huge rock formations of the Superstition Mountains in AZ, USA under a blue with a lot of white clouds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ip52tquci97cme032e01.jpg)

Really need to get the video chat stuff done tonight. Still have to work out the broadcasting of the video and other stuff around that. I'm thinking this is the last large section to get done. Other stuff are things that are nice to have by the deadline, but not really critical. Can always add later. We'll see. Will probably be a late night / early in the morning situation. Time to get at it.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 4PWSz2PpcEs %}