teleren/devto huggingface dataset:
User Prefers Dark Mode/Light Mode
Tags: darkmode, css
Published: 2021-03-30 15:28:15

This blog covers super basic theming in CSS based on  the user's preferences for light mode or dark mode.

## CSS variables

If you are unfamiliar with CSS variables, this doubles as an introduction. CSS variables are declared at the top level of our document like so

```
:root {
  --black: #101010;
  --white: #ffffff;
  --brand: #ff9999;
}
```

Then we can call the variables for our H1 tag like so

```
h1 {
  background: var(--white);
  color: var(--black);
}
```

## Using User Preference and Variables to update our page

Let's start with one element and toggle between dark mode and light mode. Utilizing user preference queries, we can check to see if our user prefers dark mode or light mode. Together with our CSS variables our CSS file will read as

```
:root {
  --black: #101010;
  --white: #ffffff;
  --brand: #ff9999;
}
h1 {
  background: var(--white);
  color: var(--black);
  padding: 5vh 0;
  text-align: center;
  transition: 1s;
}
@media (prefers-color-scheme: dark) {
  h1 {
    background: var(--black);
    color: var(--white);
  }
} 
```

![one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8t99ivawp75b00fq4vh.gif) 

By adding in a few lines of CSS, our H1 will update when the user changes their preferences. That is super responsive.

## Extending Into a Whole Theme

Taking the concepts another step, we can refactor our code to change the variables themselves to change if our user prefers dark mode. Then we can use the same CSS variables regardless of user preference. 

```
:root {
  --background: #ffffff;
  --text: #101010;
  --brand: #ff9999;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #101010;
    --text: #ffffff;
  }
}
body {
  background: var(--background);
  color: var(--text);
}
h1 {
  border: 2px solid var(--brand);
  padding: 5vh 0;
  text-align: center;
  transition: 1s;
}
```

![two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yci15dj0zm87ldird06r.gif)

It's basic, but the concept works well, and with little code. If I dig into this further I would work to integrate the brand color in an accessible way beyond a border color.
Day 9: Color Flipper
Published: 2021-03-30 15:26:37

So, hey I'm back with my day 9 of #100daysofcodechallenge, I made a color flipper using JavaScript, I got more into event listeners, and its functions and methods... 
Resources: 
---> Github: https://github.com/ashuydv/color-picker
---> Demo: https://ashuydv.github.io/color-picker/
Kubernetes CKAD Tips 11 – Annotations
Tags: kubernetes, devops, cloudnative
Published: 2021-03-30 15:11:22

You can use Kubernetes annotations to attach arbitrary non-identifying metadata to objects. Clients such as tools and libraries can retrieve this metadata.
You can use either labels or annotations to attach metadata to Kubernetes objects. Labels can be used to select objects and to find collections of objects that satisfy certain conditions. In contrast, annotations are not used to identify and select objects. The metadata in an annotation can be small or large, structured or unstructured, and can include characters not permitted by labels.

{% youtube VctAhNXbUFo %}
Refi App -  A tool to make developer less painful when interacting with Firestore DB
Tags: firebase, typescript, javascript, react
Published: 2021-03-30 15:06:17

Hello there,

When I first working with FireStore I had to face many issues
- How can I filter documents by some criteria?
- How can I insert a new document from a JSON, in fact, I have to write a script to insert some new document
- I have to use GC Storge to backup the data, which is I need to spend more time learning about it. WTF 🤬 why not just export and import by a JSON file?
- If I edit the same field of many documents, I need to go through documents and documents to edit.

Is there any tool to interact with FireStore like [TablePlus](https://tableplus.com/) - A question pop on my head. But you know what

![Not found](https://media.giphy.com/media/ujwRcmfHSZvjN2rld6/giphy.gif)

So yeah, I think many of you will phase the same issues like me, so I decided to make one.

![Refi App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hii60utso6heuoyremzp.png)

Check out it at https://refiapp.io/

## Features
The first version includes:
🔐 **Privacy - Your privacy is our first priority. We do not keep any of your data**

We never ever send any of your data. Your data is your and always your

 📜 **Table view - Easy view & edit a large amount of data like Excel**


🗒️ **JSON Editor - You can add, edit documents like in your editor. No more wasted time clicking to add just a document**

*We integrated `Monaco Editor` - aka **VS Code** **core** so you can feel like 🏠*

👨‍💻 **Build for Developer - With hotkeys, you can do anything without leaving your keyboard. We are developer, we love keyboard**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vtifw2eg9t2r0e4epe9.png)

Press `Cmd + Shift + P` or `Cmd + /` to open **Command list**

### 🚧 **Preview changes - Confidence edit data without making Production crash**

## P/S
This is an early version, so let help me make it better by giving me some feedback. I think we can make it better

![Make RefiApp stronger](https://media.giphy.com/media/26BRGxMMN3Pn1MMdG/source.gif)

## P/S 2
This tool is built by Electron, Typescript, React, Vite
And the Homepage is built by Cloudflare worker, Notion as backend

There some many interesting when building it, I think it would be shared with the community. Which one make you interesting most?
React useThrottle hook with usage example
Tags: react, javascript, webdev
Published: 2021-03-30 15:06:04

**Throttling** is a technique, where a given function runs only once at a specified period of time 

Throttling could be used in scenarios, where our code does expensive CPU/Network tasks on frequently fired events:
- Listening to HTML Input element change
- Listening to window resize or scroll
- Listening to mouse cursor position change

### Code

This is a React hook to work with throttling

{% gist https://gist.github.com/loonywizard/c2813222ff41b7fd1479793414dc4c01 %}

Example of usage: listening to HTML input element change

{% gist https://gist.github.com/loonywizard/1c0767462699f29a8a7c9ea3590491de %}



### CodeSandbox example

Live demo of the previous useThrottle hook usage in CodeSandbox. Throttled value updates only once at interval (500ms by default)

{% codesandbox react-use-throttle-demo-kcmrl %}


Links: [CodeSandbox demo](https://codesandbox.io/s/react-use-throttle-i5jfc) | [GitHub repo](https://github.com/loonywizard/use-throttle)
I need a mentor.
Tags: javascript, vue, node, mentor
Published: 2021-03-30 13:41:41

Hello everyone I'm making this post to talk a bit about my self and seek some advices from you experts in the field.
I'm 29 years old I have been introduced to coding back in 2015, my first experience was with VB.net making some simple desktop app for managing simple issues like : restaurant billing systems as you know it was only like making mysql a database connect it to the app and make some updating,  inserting .. functionalities. After like a year or so, I decided to do some web development so I learned some native php and html css js for making websites, it was okay till I figured out that only php is not enough to make good quality web apps, I heard about Laravel, symphony.. and other frameworks which I wasnt motivated to learn ( asking my self always why do we have to learn all this framework while we can make the same thing with native php ! )
After a break that last for one year, I decided to get back on the road but this time with javascript, I started with libraries like P5js to make html drawing and 2d animating stuff , it was fun at the beginning but soon I realized that it's not something I can make money out of it or get a good job with, so with my fine level in javascript I decided to learn frontend development and this time with using some frameworks. My "take it easy" philosophy led me to discover VueJs. Started to do some experimental work with, and it was super cool, easy to start, easy to keep up. 
Now I'm able to make good looking vue apps with help of APIs.
But what bothers me the most is that whenever I read a post on the internet about programming i feel like I'm retarded and I'm missing a lot of things in such a huge world, that's why I'm not feeling satisfied at all.
I'm making this post as my first post ever her on Dev.to.

I wish i can find someone who wants to be my mentor or guide in this vast space. 

Thank you :)
Promises in JavaScript
Published: 2021-03-30 15:01:15

*What is a Promise?*

A promise in JavaScript is a mechanism for handling asynchronous code (like a disk read or a network request).  What does that mean?  A synchronous method returns its resultant value immediately (immediately meaning as soon as it’s done evaluating the expressions it contains).  An asynchronous method doesn’t return its value immediately.  It has to wait for something else to complete (https request, etc.) before it has an “answer”.  Because JavaScript is single-threaded, and it can only process instructions in a single sequence, one-command-at-a-time, this presents a problem when one of those commands is asynchronous.  Any tasks subsequent to it requiring as an input the result of our asynchronous operation are liable to evaluate their expressions before that value is available and our code will fail.  

Promises present a solution to this problem.  They make asynchronous code behave more like synchronous code.  The way they do this is to give the asynchronous code something else to immediately return as soon as it is evaluated while waiting for the resultant value.  What is this something else it returns instead?  A promise.  The promise stands as a proxy to the final value until the final value becomes available.  And to this promise object we may attach callback functions which do not get invoked before the completion of the current run of the event loop.  This means, the final value will be available at the time when those callbacks are invoked.  (This is critical for understanding promises.)  

A promise contains state that is not accessible to any function but the async operation that created it.  The state is either pending, fulfilled, or rejected.  Pending is the initial state of the promise.  It has neither been fulfilled nor rejected.  Fulfilled means the asynchronous operation has completed successfully.  Rejected means the operation failed.  We can instruct the promise to call different callbacks based on whether the promise settles in a fulfilled or rejected state.  

These callbacks are added to the runtime message queue by the promises’ `.then` and `.catch` methods.  (See diagram [here](https://imgur.com/puaIucM))  I have found this understanding helpful in the practical implementation of promises.  

A site for practical examples of how to use promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises 

A site with a fascinating introduction to combining promises with event emitters: https://www.jpwilliams.dev/using-eventemitters-to-resolve-promises-from-afar-in-nodejs 

Feel free to improve upon this explanation by leaving a comment.
What is Geo Redundancy?
Tags: infrastructure, webdev, database, programming
Published: 2021-03-30 14:54:51

Let's talk geo-redundancy! Ever heard of it? There are many benefits to redundancy, and it is important for IT teams and general organizations to utilize/implement redundancy methodologies as a safety net. Having these systems in place can improve reliability and availability while reducing downtime. This is because there are certain variables that businesses rely on that are not guaranteed and therefore might need a backup plan. For example; Internet, hardware, power, and/or data storage. Many of these variables can affect a large area. They may not happen often, but one power failure that takes your application offline is one too many. Geo redundancy can reduce or remove these risks, and better prepare organizations to handle disaster recovery. 

As the name implies, geo-redundancy refers to the practice of providing redundancy (extra or duplicates) through physically separating infrastructure across multiple geographical locations, and because I work for a database company, I will be discussing it in relation to databases. 

Geo redundancy is a powerful (and somewhat magical) force that ensures high availability and disaster recovery. It will replicate your data and store it in other databases located in separate physical locations. It does this so that if a location fails or simply needs to be taken offline, your other location, which also stores your data, will not be affected. 

Geo redundancy is super easy to implement in HarperDB through its [clustering engine](https://harperdb.io/developers/documentation/clustering/), which replicates data between instances of HarperDB using a highly performant, bi-directional [pub/sub-model](https://harperdb.io/developers/documentation/clustering/creating-a-subscription/). The first step is to install HarperDB in multiple geographical locations. A single instance/installation of HarperDB constitutes a node. Once HarperDB node subscriptions are configured via the API they establish a WebSocket connection between each other to replicate data. When two or more nodes are subscribed to each other you have a cluster. Depending on how the nodes were subscribed to each other, a transaction on one node can automatically be published to another. And there you have it, the start of geo-redundancy!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bzt0v2d9cey8uqhav26.png)

In this case, HarperDB provides a “backup plan” to ensure that your organization is prepared for even the most unpredictable outcomes. The term redundancy means “too much” or “more than is needed.” This of course is not necessary or helpful in all situations of life or business, but when it comes to the world of data, IT, and engineering, you can bet your bottom dollar that you will regret not having a redundancy plan in place. If you fear that implementing redundancy is a waste of time, just think, what would happen if you lost your data? HarperDB enables you to implement geo-redundancy in a simple and cost-effective manner, and you can now sleep easy knowing your data is safely stored across the globe.
Tutorial: Create a Hands-Free Virtual Theater in Unity
Tags: unity3d, vr, speechrecognition, csharp
Published: 2021-03-30 14:50:26

{% youtube 4JLZSmI2yNU %}
{% medium https://medium.com/picovoice/tutorial-making-a-hands-free-video-player-in-unity-68e5f43b6fff %}
How to customize error messages in Laravel 8
Tags: laravel, php, programming, webdev
Published: 2021-03-30 14:47:16

On a website, validation errors and full-page errors are ways to show the user that the request does not proceed so they should be as clear as crystal.
### Customize Validation Errors
For customizing the rule and attribute of validation Laravel has a separate file called validation.php in 

```
resources/lang/xx/validation.php.
```

If you just want to edit the validation message you should define your custom message with attribute name in the “custom” array.

```
'custom' => [
    'name' => [
        'required' => 'Please Enter Your Name'
    ],
],
```

For customizing the attributes name just add your attribute name in the “attributes” array

```
'attributes' => [
    'name' => 'Full Name',
],
```

### Customize Error Pages

Laravel 8 error pages are in the vendor folder so you need to publish those pages into resources/views

```
php artisan vendor:publish --tag=laravel-errors
```

after publishing pages, you have access to them in 


```
resources/views/errors
```

Feel free to edit the messages or the whole layout.
Build a CSS Theme Switcher in Vue JS 
Tags: vue, javascript, webdev, css
Published: 2021-03-30 14:32:12

Hi all, 

For people who want to learn Vue JS, I just wrote a tutorial on building a CSS theme switcher. I wanted this to be an easy on-ramp for those who do not use extensive command-line tool chains, so there is no build step required.

https://medium.com/codex/build-a-css-theme-switcher-in-vue-js-34cdeb101ea9 #Javascript #VueJS #webdeveloper
Major changes to serverless-dotenv-plugin
Tags: dotenv, serverlessframework, serverlessframeworkplugin
Published: 2021-03-30 14:37:01

---
title: Major changes to serverless-dotenv-plugin
published: true
date: 2021-03-30 14:30:00 UTC
tags: dotenv,serverlessframework,serverlessframeworkplugin
canonical_url: https://blog.neverendingqs.com/2021/03/30/major-changes-to-serverless-dotenv-plugin.html
---

The [Serverless Framework](https://www.serverless.com/) has a new [variables engine](https://github.com/serverless/serverless/pull/8987) starting in`serverless@2.26.0`. This is part of a [larger initiative](https://github.com/serverless/serverless/issues/8364) by the Serverless Framework team that will come into effect in `serverless>=3.0.0`.

The biggest impact with these changes is that plugins will not get initialized until **after** `env` variables are resolved. This means[`serverless-dotenv-plugin`](https://github.com/neverendingqs/serverless-dotenv-plugin) is no longer able to load environment variables in time for them to be used in your service file (i.e. `serverless.yml`). However, the plugin will continue to load environment variables into all your functions using `dotenv`.

If you need to load environment variables to be used in your service, you will either need to use the [built-in `dotenv`functionality](https://www.serverless.com/framework/docs/environment-variables/) or wire up `dotenv` yourself. You can see an example of how to wire up `dotenv`yourself at[`neverendingqs/serverless-dotenv-example`](https://github.com/neverendingqs/serverless-dotenv-example).

I’m happy to address any questions or comments in the [discussions section on GitHub](https://github.com/neverendingqs/serverless-dotenv-plugin/discussions/categories/q-a) or below. I’m also happy to answer any Serverless Framework questions you may have at [neverendingqs/ask-me-anything](https://github.com/neverendingqs/ask-me-anything/discussions/categories/serverless-framework).
Top 11 Best Practices For Vue.js Development
Tags: vue, techtalk
Published: 2021-03-30 14:12:18

Vue.js is Javascript open-source front-end building platform to design single-page application. Vue.js developers can use a single file component instance to build rich applications. You can combine the codes with Vue.js for better performance. Vue.js frameworks offers advantages over architectures such as React and Angular because of its lightweight nature and unique framework design principles. Here we’ve curated some of the evolving vue.js best practices. As Vue.js is becoming more and more favourable, these best practices will help you to develop an effortless web app.

You can also know new features and improvements in Vue.js 3.0 at- What’s New In Vuejs 3.0 ?

#Top 11 Best Practices For Vue.js Development-
**1. Use Data Property On Component-**
This is an important Vue.js best practice. You should use data property on a component as a function that returns an object instead of data property as a simple object. When the value of data is object, it’s shared across all instances of component.

data: {
  title: ”
}

If you want to use title property from different places of component and somewhere you have changed the value of it, it will be reflected at all places of the component because you are using an object and each instance of component references the same data object, changing the title from one portion will also change the title of every other portion. 

Use data property as a function so that each part of component gets a different instance of data property.

data: function () {
  return {
  title: ”
 }
}

**2. Use Kebab-Case-**
You must always try to use kebab-case while writing any custom event name as event names are automatically changed to kebab-case internally if we don’t provide it in kebab-case. Let us see an example of data sharing between parent & child component:

Child:
<button v-on:click=“$emit(‘increase-count’, 1)”>
 Increment
</button>
Parent html:
<counter
 …
 v-on:increase-count=“increaseCounter”
></counter>
Parent js:
methods: {
 increaseCounter: function (count) {
  this.value += count
 }
}

**3. Keep npm Packages Updated-**
According to the Vue Style guide base components can only contain HTML elements, 3rd party UI components and other some additional based components. 
Update npm packages on regular basis to avoid any dependency errors and to use the latest/updated features provided by individual packages.
For example, if you have configured vuetify the design patterns in the VueJS project, vuetify regularly updates its packages to provide the best UI with some breaking changes. Hence it is better to update NPN packages regularly to avoid bulky or breaking changes.
npm outdated // run to check outdated npm packages

npx npm-check-updates -u // run to check updates outdated npm packages

npm install // run to update npm packages

Know more at- https://solaceinfotech.com/blog/top-11-best-practices-for-vue-js-development/
My first article on Perl.com!
Tags: programming, link, perl, exceptions
Published: 2021-03-30 14:19:39

---
title: My first article on Perl.com!
published: true
date: 2021-03-30 14:03:11 UTC
tags: Programming,link,Perl,exceptions
canonical_url: https://phoenixtrap.com/2021/03/30/my-first-article-on-perl-com/?utm_source=rss&utm_medium=rss&utm_campaign=my-first-article-on-perl-com
---

This month I [interviewed Paul “LeoNerd” Evans](https://www.perl.com/article/interview-trying-to-catch-paul-leonerd-evans/) for Perl.com on the upcoming `try`/`catch` syntax he’s added to the language and other topics. Check it out!
Coding: "Past you" vs "Present you"
Tags: codequality, codereview, career, coding
Published: 2021-03-30 13:43:34

Have you ever thought about your progress that you made during your career as a coder? 

Have you ever measured the distance from your ***past you*** and your ***present you*** in terms of quality or results? 

Whoever you are, a senior with many years of experience or a junior that is at start of his career or why not, a newbie that is starting something new, there are always questions buzzing in your head like: *Am I improved? Am I on the right path? Have I made some progress?*

When these are the questions that are buzzing in your mind probably it's the moment to call [Emmett Lathrop "Doc" Brown](https://en.wikipedia.org/wiki/Emmett_Brown) to bring you in the past to meet your past you (that probably you forgot) and check if you have made some progress. 

In other words choose a time window depending on your seniority and shot yourself in the past. Once landed in the past choose a specific *past* project or activity and **be critical**!

In the **best scenario** "you should meet" a different coder less expert than you, a coder with a different coding style that made mistakes in terms of design, readability, usability   and scalability, mistakes that now you wouldn't probably make.  

In the **worst scenario** you don't spot any problems and you think how much you were good at coding!

What you'll see in this time travel will probably define your **future you** or the next **past you** (time travels are complex) but what matters is you'll probably find some of the answers that you are looking for.

See you!

AM

...I forgot... don't talk with your "past you" you risk to alter the time line :)
6 of Python's Best NEW Features
Tags: python, programming, news, tutorial
Published: 2021-03-30 13:30:08

{% youtube KTFWNI0qL28 %}

2018 brought us a plethora of new features with the release of Python 3.7, followed by 3.8 in 2019, and 3.9 in 2020.

Many of those changes were behind the scenes. Optimizations and upgrades that the vast majority of us will never notice, despite their benefits.

Others are more obvious, additions to syntax or functionality that can change how we write our code. But even these visible changes can be hard to keep up with.

In this video, we will run through the more apparent upgrades to provide a brief but hopefully invaluable refresher on everything new to Python from the past few years.