teleren/devto huggingface dataset:
Re-creating Apple’s Dark Mode Icon
Tags: svg, design, css, javascript
Published: 2022-06-23 06:06:36

A couple of weeks ago, while fiddling around with my iPhone's _Control Center_, I noticed a new icon: "Dark Mode":

![Apple Dark Mode Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/911d11btmiln14kkvmxd.jpg)
 
I've seen plenty "Dark Mode"-icons — most of them involving the sun and the moon — but this one is so simple and intuitive.

Let's re-create it in SVG, and add some CSS magic!

First, we need a circle:

```xml
<circle r="195" cx="200" cy="200" fill="#FFF" stroke="#000" stroke-width="10" />
```

I've added a black stroke, so the icon works on light backgrounds as well:

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

Now, the semi-circle is a bit more complicated. For this, we need an **Arc**. 

In SVG, this is called `A`, and is within a `path`:

```xml
<path d=" M 200 375 A 175 175 0 0 1 200 2" />
```

While you _can_ manually code arcs, it's much easier to use a tool for it. [Here's an online tool, you can use](http://xahlee.info/js/svg_circle_arc.html).

Now, we have this:

![SVG Arc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur85hg3iudieopi1eaib.png)

Let's add two more semi-circles

```xml
<path d=" M 200 300 A 100 100 0 0 1 200 100" fill="#FFF" />
<path d=" M 200 100 A 100 100 180 0 1 200 300" />
```
— and we have this:

![Complete Icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/brqiw0he7247iknzw20v.png)

Now for the fun part! Let's add a single _CSS Custom Property_, that can either be `0` or `1`:

```css
body {
  --dark-mode: 0;
}
```

Using this property, we'll set the `background-color` of the page:

```css
body {
  background-color: hsl(0, 0%, calc(100% * (1 - var(--dark-mode))));
}
```

In `hsl`, the third paramter is _lightness_. `0%` is black, while `100%` is white. So we'll multiply `100%` with either `1` (dark mode **on**) or `0` (dark mode **off**).


We'll use the same property to `invert` and `rotate` the icon:

```css
.class {
  filter: invert(var(--dark-mode));
  transform: rotate(calc(var(--dark-mode) * 180deg));
}
```

Now, if you change the `--dark-mode`-property to `1`, the icon will invert and rotate, and the background of the page will change to black:

![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sujqogtj4kbcipoz3ws1.png)
 

How you toggle the property is up to you. The "no-JS"-way could be a `checkbox`, while the JS-way could be something like this:


```js
element.addEventListener('click', () => {
  const current = document.body.style.getPropertyValue("--dark-mode") - 0;
  document.body.style.setProperty("--dark-mode", 1 - current);
})
```

First, get the current status using `getPropertyValue()`. Convert it to a numeric value by subtracting a `0` (old JS-hack!), then set the opposite value using `setProperty()`.

Here's a Codepen demo:

{% codepen https://codepen.io/stoumann/pen/YzeBPrw %}

> **NOTE:** In the Codepen, I've added the JS-toggle-function to the `svg` itself. In production, add proper semantics, like a `<button>` or similar.
Blog Vay Tiền
Published: 2022-06-23 05:23:13

Blogvaytien là website tư vấn tài chính cá nhân uy tín, chúng tôi mang lại cho quý độc giả những thông tin hữu ích về kinh nghiệm vay vốn cá nhân và nhiều thông tin tài chính liên quan. 
Địa chỉ: 112 Phan Văn Trị - Quận Gò Vấp - Hồ Chí Minh
SĐT: 0972826781
Website: http://blogvaytien.com/
#blogvaytien #taichinhcanhan #vaytienonline #vaytienquaapp #vaytientrenmang #vaytiennhanh #vaytienuytin
Getting Started with the Angular DateRangePicker Component
Tags: webdev, angular
Published: 2022-06-23 05:20:41

Learn how easily you can create and configure the Angular [DateRangePicker ](https://www.syncfusion.com/angular-ui-components/angular-daterangepicker)component of Syncfusion using the Angular CLI command. This video also explains how to configure a few of the control’s basic features like setting specific date range values, formats, and range restrictions for date range selection. You will also learn how to convert Angular DateRangePicker to Month Range Picker. 

**Product overview**: https://www.syncfusion.com/angular-ui-components/angular-daterangepicker

**Download an example from GitHub**: https://github.com/SyncfusionExamples/getting-started-with-the-angular-daterangepicker-component

**Refer to the following documentation**: https://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started/

{% youtube dtWV_N7c5-c %}
String value in Python
Tags: beginners, programming, python, strings
Published: 2022-06-23 05:06:33

**Introduction**
We extensively use string values in Python, in the form of messages or quotes in the designed code as it makes an easier task for the user to understand the situation. Strings in python are surrounded by either single quotation marks or double quotation marks.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj6b7izm588nau2u1yoc.png)
  
 'hello' it is the same as "hello”. You can execute the value by using print(), for example, print(“hello world”). Assigning a string value to a variable is done with the variable name followed by an equal sign and the string value which you want to assign.
 **Concatenation**
We can also assign multiple values to a variable and add them with the help of Concatenation.
**Access to string value**
To check if a certain phrase or a character is not present in the value, then we can use the keyword(not in). for example, a=” string value in Python”
             print(‘java’ not in a)
**Indexing**
We can access individual characters using indexing. Index starts from 0. In Python, we can also do negative indexing like -1,-2, etc. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3q9sujo01pejp58mx0c.png)
Amazon EFS Performance!
Published: 2022-06-23 04:50:31

We have seen key features of Amazon EFS now let's dive deep into **EFS performance:**
-Storage class: Amazon EFS uses two types of storage classes:
 1. EFS Standard and 
 2. EFS One Zone.

--**EFS Standard and EFS Standard Infrequent Access(IA) storage classes** are regional storage classes that are designed to provide continuous availability to data even when one or more availability zones in the AWS region are unavailable they offer the highest level of availability and durability by storing the file system data and the metadata redundantly across multiple geographical separated availability zones within a region.

--**EFS One Zone and EFS One Zone IA storage classes** are designed to provide continuous availability to data within a single availability zone. The EFS one zone storage classes store file system data and metadata redundantly within a single availability zone in an AWS region. Because they store data in a single availability zone although it might be a cheaper option data that is stored in these storage classes must be lost in an event of disaster or other fault that affects all copies of the data within the availability zone or in the event of availability zone destruction.

-Performance mode: There are two types of performance mode that is 
 1. General Purpose Mode and 
 2. Max I/O Mode.

--**General Purpose Mode** supports up to 35,000 IOPS (input/output operations per second) and has the lowest per operation latency. File systems with EFS one zone storage classes always use general purpose performance mode for the systems with EFS standard storage classes you can use either the default general purpose performance mode or the max I/O performance mode. 

--**Max I/O Mode** supports .5M(500,000) IOPS and has higher power operation latencies when compared to the general purpose mode.
You can set the performance mode when you create a file system and you can't change it after it is created. It is recommended to use general purpose performance mode for vast majority of applications
if you are not sure which performance mode to choose. Choose the general purpose performance mode to help ensure that your workload stays within the app's limit available to the file systems using the general purpose mode.

-Throughput Mode: A file system throughput mode determines the throughput available to your file system. amazon efs offers two throughput modes
 1. Bursting throughput and 
 2. Provision throughput.

--**Bursting Throughput Mode** is the default Amazon EFS throughput mode. It is a good fit for traditional applications that have a burst throughput pattern when throughput is low bursting throughput mode uses burst buckets to save burst credits. When throughput is higher it uses burst credits.

--**Provision Throughput Mode**  is recommended for applications that have a relatively constant throughput. You specify a level of
throughput that the file system can drive independent of the file system size or the burst credit balance.
Component – Inputs Best Practices
Tags: component, ux, inputfield, uidesign
Published: 2022-06-23 04:46:33

Hey! Here are some best practices of Input Component design. 
1. Use enough padding for scannability
2. Add enough space between inputs
3. Add enough spacing between elements (Label, help text, icon, placeholder, validation text etc.)
4. Use standard input styling for faster recognition
5. Use labels to guide users
6. Keep labels concise
7. Keep labels legible
8. Select label case that's easier to read
9. Keep the input text legible
10. Provide concise but meaningful helper text
11. Provide informative placeholders

I will add more description later. 

Thanks you. 
See my portfolios on [Behance](https://www.behance.net/mdhachib02) | [Dribbble](https://dribbble.com/Hachib)
Follow me on [LinkedIn](https://www.linkedin.com/in/md-hachibur-rahaman-5913a5139/)
React Native Error: Task :app:mergeDexDebug FAILED
Tags: reactnative, bugfix, javascript, programming
Published: 2022-06-23 04:46:17

## React Native Error: Task :app:mergeDexDebug FAILED

Android 5.0 (API level 21) and higher uses ART which supports multidexing. Therefore, if your minSdkVersion is 21 or higher, the multidex support library is not needed.


Modify build gradle at path android/app/build.gradle
```
android {
    compileSdkVersion 22
    buildToolsVersion "23.0.0"

         defaultConfig {
             minSdkVersion 14 //lower than 14 doesn't support multidex
             targetSdkVersion 22

             // Enabling multidex support.
             multiDexEnabled true
         }
}

dependencies {
    implementation 'com.android.support:multidex:1.0.3'
}
```
How to fix Error Cocoapods pod install in mac m1
Tags: cocoapods, reactnative, m1, errors
Published: 2022-06-23 04:42:32

If you got error while trying pod install. Try this way!

Try this command in terminal.

```
sudo arch -x86_64 gem install ffi
```
Then

```
arch -x86_64 pod install
```

Or

```
arch -x86_64 pod install --repo-update
```
How to fix EsLint Error: Must use import to load ES Module
Tags: eslint, react, reactnative, javascript
Published: 2022-06-23 04:37:28

How to fix EsLint Error: Must use import to load ES Module

1.Add eslint-parser in package.json, inside of devDependecies
```
"@babel/eslint-parser": "^7.5.4",
```

2.Open .eslintrc.js file, and add eslint-parser
```
parser: '@babel/eslint-parser',
```
How to fix Error: decorators-legacy - React Native
Tags: reactnative, errors, bugfix, programming
Published: 2022-06-23 04:25:09

## How to fix Error: decorators-legacy - React Native

```
Experimental syntax 'decorators-legacy' isn't currently enabled
```

1.Install decorator in package.json

```
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-flow": "^7.0.0"

```

2.Update babe.config.js with this

```
module.exports = {
  "presets": [
    "module:metro-react-native-babel-preset",
    "@babel/preset-flow"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy" : true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }],
  ]
}

```
630. Leetcode solution in CPP
Tags: cpp
Published: 2022-06-23 04:12:59

```

class Solution {
 public:
  int scheduleCourse(vector<vector<int>>& courses) {
    int time = 0;
    sort(begin(courses), end(courses),
         [](const auto& a, const auto& b) { return a[1] < b[1]; });
    priority_queue<int> maxHeap;

    for (const auto& c : courses) {
      const int duration = c[0];
      const int lastDay = c[1];
      maxHeap.push(duration);
      time += c[0];
      // if current course could not be taken, check if it's able to swap with a
      // previously taken course with larger duration, to increase the time
      // available to take upcoming courses
      if (time > lastDay)
        time -= maxHeap.top(), maxHeap.pop();
    }

    return maxHeap.size();
  }
};



```
How much HTML & CSS should you know before learning JavaScript? 🤔
Tags: html, css, javascript, webdev
Published: 2022-06-23 04:11:37

{% embed https://youtube.com/shorts/63TzlQRF3nE %}

In my latest **[Youtube Shorts Video](https://youtube.com/shorts/63TzlQRF3nE)**, I'm answering the question **How much HTML & CSS should you know before learning JavaScript?** 🤔

Make sure to watch the **[Short Video](https://youtube.com/shorts/63TzlQRF3nE)** and also make sure to **Like** the **[Video](https://youtube.com/shorts/63TzlQRF3nE)** & **Subscribe** to my **[Youtube Channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)** for more **Amazing** content related to **Web Development** and **Self Taught Developer** Journey 🙌

---

Please do me a favour by **Reacting** to this post with 
❤️ + 🦄 and also bookmark 🔖 it for your future reference ✅

---

**Connect/Follow** me on Social platforms like Twitter, Linkedin where I regularly post Tips💡+ Guides📜 + Resources 🌟 related to Web Development and Programming 👨‍💻


![RammCodes Social Follow Request Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a5vzbe9atsgmoll0oih.png)

### 🐦 **[My Twitter](https://twitter.com/rammcodes)**
### 👨‍💼 **[My Linkedin](https://www.linkedin.com/in/rammcodes/)**
### 🌐 **[My Website](https://rammaheshwari.com)**

---

Press the **Follow** button to stay updated with my content 🚀

Thanks for your **Support** ❤️
The Rails Configuration File (~/.railsrc)
Tags: rails, ruby
Published: 2022-06-23 04:05:11

**Did you know that Rails has a `~/.railsrc` file?** 

Similar to your `~/.bashrc` or `~/.zshrc` file, you can use this file to configure your Rails applications. 


![The Rails Configuration File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n34lvzurl128rhd6z4eh.png)

This is especially useful if you find yourself repeatedly typing `--skip` or `--no-skip` commands and installing specific gems every time you create a new Rails application.

Since I made a switch to Rails from .NET last year, I must have created at least 20-30 projects for either learning, experiments, or client work. I have a text file that documents all the gems I want to install for a fresh Rails app. Every time I create a new project, I go through the file to install all the gems I want for my project. 

With the `~/.railsrc` file, I don't need to do that. Rails will do it for me. Here's how you do this. 

<!--more-->

First, create the `.railsrc` file in your home directory. 

```bash
touch ~/.railsrc
```

Add whatever options you want in this file. For example, 

```bash
--database=mysql
--skip-active-job
--skip-spring
--skip-javascript

--template=~/dotfiles/rails_template.rb
```

To see all the available options, type `rails` in a non-rails directory. 

```bash
➜  rails rails
Usage:
  rails new APP_PATH [options]

Options:
      [--skip-namespace], [--no-skip-namespace]              # Skip namespace (affects only isolated engines)
      [--skip-collision-check], [--no-skip-collision-check]  # Skip collision check
  -r, [--ruby=PATH]                                          # Path to the Ruby binary of your choice
                                                             # Default: /Users/akshay/.rbenv/versions/3.1.0/bin/ruby
  -m, [--template=TEMPLATE]                                  # Path to some application template (can be a filesystem path or URL)
  -d, [--database=DATABASE]                                  # Preconfigure for selected database 
  
  ...
```

To pre-configure the gems you'd like to install, create a `template.rb` file. Here's mine:

```ruby
gem_group :development, :test do
  gem 'dotenv-rails'
  gem 'factory_bot_rails'
end

gem_group :development do
  gem 'better_errors'
  gem 'binding_of_caller'
  gem 'annotate'
end
```

Now add the path to the template at the end of your `~/.railsrc` file. 

```bash
--template=~/software/rails/template.rb
```

That's it. The next time you run `rails new app`, Rails will use the configuration file along with the `Gemfile` template to create your application just like you want. 

Pretty cool, right?

---

This post was originally published on my blog at https://akshaykhot.com/railsrc-rails-configuration-file/
How do you get email notification based on simple rules, monitoring based on data?
Published: 2022-06-23 04:00:28

Hello, How do you get email notification based on simple rules, monitoring based on data?

I have an application with clicks and attributed clicks. clicks and attributed clicks should be the same 90% of the time. For some clients, it's normal that it was lower, for others this means there is a problem. 

I'm looking for a solution where I can setup a global rule like attributed clicks should be minimum 90% of clicks, if it's not the case notify me on slack or by email.

I know I can code it into my code but I would prefer an external solution similar of uprobot but for this use case.

Regards
C++ Program to find maximum element from an array.
Tags: cpp, programming, tutorial, opensource
Published: 2022-06-23 03:46:38



`#include <iostream>
using namespace std;
int main() {
    int n,i,max;
    cout<<"Enter Size of Array : ";
    cin>>n;
    int arr[n];
    for(i=0;i<n;i++)
    {
        cin>>arr[i];
    }
    max=arr[0];
    for(i=0;i<n;i++)
    {
        if(arr[i]>max)
            max=arr[i];
    }
    cout<<"Max Element is : "<<max;
    return 0;
}`

**Output:**

Enter Size of Array : 5
65
78
23
90
89
Max Element is : 90
Seu código vai quebrar se você não usar this. nesse caso (Java Script)
Tags: javascript
Published: 2022-06-23 03:45:31

```
function resultAverage(){
  return (this.notes[0] + this.notes[1])/2;
}

var student1 = {
  name: "Ana",
  notes: [9, 10],

  average: resultAverage
}

var student2 = {
  name: "Bia",
  notes: [10, 10],

  average: resultAverage
}

console.log(student1.name);
console.log(student1.average(student1.notes[0],student1.notes[1]));

console.log(student2.name);
console.log(student2.average(student2.notes[0],student2.notes[1]));

```
Lamento dizer, mas seu código vai quebrar se você tirar o this nessa parte:

`function resultAverage(){
  return (this.notes[0] + this.notes[1])/2;
}`

Vou pegar explicação técnica do www.w3school e depois  vou explicar de uma forma bem simples.

> In an object method, this refers to the object.


Minha explicação simples e com um vocabulário acessível: as variáveis student1 e student2 representam uma estrutura blocada de código. O this está apontando para as notas dentro dessas estruturas blocadas,dessa forma consegue identificar as notas dos estudantes. É como se comandando this falasse "Estrutura blocada de código, deixa eu vê se tem um objeto notas aí".
A Unique Approach to Form Validation 🙃
Tags: ux, forms, validation, codepen
Published: 2022-06-23 03:28:07

There are many common practices for throwing a validation error - red outlines, error messages, disabled buttons, etc. Today I want to explore an (extremely) innovative approach...

But first please fill out the form >

{% codepen https://codepen.io/eitanwaxman/pen/gOvNjYg %}

If you didn't, you may have noticed the "submit" button is a slippery little fella.

This idea was originally just going to be a UX parody with an unclickable button. Then the idea struck me to make it a form validation feature giving it a semi-plausible implementation.  

At first I thought it would be a 5 minute project, a simple form, some styling and a few event listeners. Then things got a bit complicated - first I had to think of how to randomize the movement in four directions and then on top of that I had to contain the movement within the viewport. 

As an afterthought I added a return to original state when the user shows intent of filling out the form (focus or input).

All in all it was fun to code (which is what really counts) and who knows maybe one day this will become the golden standard 🤪.
Telling my leaders that I want to be a dev advocate and the challenge of creating my own role - #DAJ 6
Tags: developer, advocate, daj
Published: 2022-06-23 03:25:49

As you read in the title, I said to my leaders that I want to be a developer advocate, and I have two answers: Woo, that's amazing, we need that; and the other one, what is that? What are you going to do?

In my current company, I know that we need this advocacy, but for me was a little tricky because in the other companies, the role was already defined, and they know the precise actions the developer advocate needs to do. In my case, I need to do my homework, research and understand our products and how the developers interact with them. It was an enriching experience, I love it, and I hope it makes me a better dev advocate.

Obviously, it's not about me; well, at first, it wasn't so obvious; It's about the product we provide and how I can make it easier to use, thinking in what the current users of our product need. So now I have more clarity about my proposal to my leaders, and I will have a short meeting with the product manager and the tech lead of the engineering team in charge to line up our ideas and make something valuable.

I really wish my colleagues would love our product.

I think my advocacy will be to my coworkers. Later, I can make more noise about our product to the community using the same technology and inspire others to use more open source projects. For now, I tell you, being a dev advocate is not doing what you want; it's doing what devs need; my first mistake was not understanding that.

Let's give value! 💜
Outreachy Week-3: Everybody struggles
Tags: gnome, outreachy, internship, soc
Published: 2022-06-23 02:47:08

> This blog post is on my progress till week-3 and vocabulary terms which I got to know while working on this project .

---
##Journey uptill now

When I initally replaced gtk3 version with gtk4 version there were so many errors about 300 or so and double warnings 😵. Then I went through each error one by one , and figured out that I have to change some parent classes . Because now in gtk4 version , some classes have been made final which were not final in gtk3 and now we can no more derive from those classes . This was a big task as there were many components which were deriving from those final classes for example DL-teams page, projects page and Poeditor page some other components .  The one which was looking toughest to me was poeditor page . It was a component deriving from GtkNotebook , we have to remove that component and modify GtrTab component as its replacement .  

##Some vocabulary terms which I got to know
When I started working there were many terms related to translation which I was coming accross like **po file** , **internationalisation** , **localisation** etc. I read some sections from [gettext manual](https://www.gnu.org/software/gettext/manual/gettext.html) .
Uprealfollowers
Published: 2022-06-23 02:38:43

Uprealfollowers is a blog that shares knowledge, tips, and strategies for doing instagram marketing for beginners, individuals and businesses. You will learn how to advertise and increase followers on instagram effectively.
Website:https://uprealfollowers.com/
Address:3213 Edsel Road - Los Angeles - 90013
Phone:12025550124
Email:uprealfollowersdotcom@gmail.com
#uprealfollowers #followersinstagram #instagrammarketing #influencerinstagram