teleren/devto huggingface dataset:
Color Scheme All Component Switch
Tags: codepen
Published: 2020-12-03 13:27:46

---
title: Color Scheme All Component Switch
published: true
tags: codepen
---

I tried to do simple switch for CSS Variable on different page themes, mainly to try darkmode. It... kinda backfired because I was not satisfied and ended up doing full-scale design system preview.

Maybe somebody here use it as inspiration.


{% codepen https://codepen.io/Ernedar/pen/WNGvvYW %}

Thanks for checking.
WebWindow a lighter alternative to Electron
Tags: electron, webwindow, csharp
Published: 2020-12-03 13:05:03

If you want to develop console app with a WebUI in C#, give WebWindow a try

[WebWindow](https://blog.stevensanderson.com/2019/11/18/2019-11-18-webwindow-a-cross-platform-webview-for-dotnet-core/)

You can trim down the size of the app to nearly 30M (see my previous post).

Simply add WebWindow nuget package in your console app.

Here is an example where I embed a html file in a resource,
within a HelloWorldApp application

Beware, embeding scripts, does not meen they are not visible if you open the executable file with an editor...


```csharp
using System.IO;
using System.Reflection;
using WebWindows;

namespace HelloWorldApp
{
    //https://stackoverflow.com/questions/3314140/how-to-read-embedded-resource-text-file
    class Program
    {
        static void Main(string[] args)
        {
            string result;
            var assembly = Assembly.GetExecutingAssembly();
            var resourceName = "HelloWorldApp.wwwroot.index.html";
            var window = new WebWindow("My first WebWindow app");
            var stream = assembly.GetManifestResourceStream(resourceName);
            using (StreamReader reader = new StreamReader(stream))
            {
                result = reader.ReadToEnd();
            }
            window.NavigateToString(result);
            window.WaitForExit();
        }
    }
}

```
October 22nd, 2020
Published: 2020-10-22 04:43:04

---
title: October 22nd, 2020
published: true
description: 
tags: 
//cover_image: https://www.mediafire.com/convkey/bca3/u10p6rgt6n1v0lm4g.jpg
---
I am writing this at 8:45 AM in the morning. I am writing this because I feel 
~~ I need correction~~  I need a little bit rest. 
## The Problem 
My office work pressure has gone off the roof. It's almost every day and it's going out of control. Things that I am required to do almost daily are all that I need to do. I know that. I know that right now I shouldn't be ignoring these tasks but yet here I am complaining about these things. 
In very specific I am not able to workout on a daily basis as planned. Last night I was really tired and I was yawning. I couldn't finally workout. It's not an excuse that I am sharing but rather a real scenario I am sharing that is hurting my focus. 
## How Make Things Correct?
By starting over and over again. Whenever I fail, I should know that I failed because I need to get started again. It is a very simple mindset that I need to keep to become more perfect. But again here is the irony, Perfection is na illusion. 
## What Are The Right Things The I Am Doing?
There are some things that I am doing I consider as being right. Using the calendar on a daily basis to map my day and tasks. This in reality is actually helping me a lot,  I don't need to try hard to remember doing something. I just need to focus on using my calendar from my phone to look at my schedules. 
Another thing that I am doing right is I regularly noting down my food intakes. I mean as much as possible. Not all the time it's possible to note down what I just had but I am trying to note whenever possible. 
## Final Thoughts
### There should not be any final thoughts. Remember that you are just getting started. 

1. #### You are motivated. Motivation gets you started. So that's a great sign.  

2. #### You also should know that you are a person of extreme discipline. A disciplined person can be stopped by nothing. Discipline is the next step after motivation. A disciplined person requires no motivation. 

3. #### You should know that you are strong and you don't stop when you are tried rather you stop when you are done.
Daily Developer Jokes - Thursday, Dec 3, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-12-03 13:00:11

---
title: "Daily Developer Jokes - Thursday, Dec 3, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Dec%203%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e0be565.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How did pirates collaborate before computers ?

___A:___ Pier to pier networking.
 -->
Managing my sonoff from my own program
Tags: sonoff, raspberrpi, raspi, making
Published: 2020-12-03 12:43:42

In the previous post we saw some ideas about [Managing my sonoff device from command-line](https://dev.to/fernand0/managing-my-sonoff-device-from-command-line-1nj6).
But my objective was to integrate this management in other applications, so I needed to digg into the code.
The module has several interesting funcions, such as `pysonofflanr3.cli.switch_device()` which is just what I wanted to do. So, I needed some way to store configuration (`configParser`), the parameters known from my previous experiments, and some syntactic sugar:

    import configparser
    import time
    import sys
    import logging
    import os
    import pysonofflanr3.cli
    
    
    if __name__ == "__main__": 
       
        logging.basicConfig(stream=sys.stdout, 
                level=logging.INFO, 
                format='%(asctime)s %(message)s')

        HOME = os.path.expanduser("~")
        CONFIGDIR = f'{HOME}/.config'
        section = 'Estudio' # Some section
    
        config = configparser.ConfigParser()
        config.read(f'{CONFIGDIR}/configSonoff')
    
        api_key = config.get(section,'api_key')
        device_id = config.get(section,'device_id')
        host = config.get(section,'host')


        config = {'host':host,    'device_id':device_id, 'api_key':api_key}
        if len(sys.argv)>1:
           command = sys.argv[1] 
           pysonofflanr3.cli.switch_device(config, None, command)
        else:
           print("We need a command, changing the state")
           pysonofflanr3.cli.switch_device(config, None, "")
Solving day 3 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-03 12:24:53

---
title: Solving day 3 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 3)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

{% youtube isodLrkqmZY %}
How to Comment Your Code Like a Boss
Tags: juniordev, cleancode, es6, javascript
Published: 2020-12-03 12:18:44

---
title: How to Comment Your Code Like a Boss
published: true
description: A quick rule of thumb for code comments
tags: juniordev, cleancode, es6, javascript
//cover_image: https://direct_url_to_image.jpg
---

Comments are like garlic.

They can push a dish over the top. Or, they can relegate it to the polite pile of leftovers that your guests appreciate but didn't enjoy.

Comments in your code are much the same. Good, clear, and necessary comments can help keep an otherwise convoluted narrative of code become a clear, easy-to-follow story.

The two main ideas that have helped me when deciding if a section of code needs comments, or if I should leave it bare are these:


### 💡 Code should explain *what* is happening.

A true gem from Uncle Bob's *Clean Code* is the chapter on naming. Explicit and clear naming will help make your code be clear and easy to follow.

Instead of this:
```
// get the length of an array
const gl = a => a.length
``` 

We write this:
```
const getArrayLength = a => a.length
```

This allows us to write code that is expressive. The code itself tells you what is happening. In the simple example above, the name of the function tells you what it does. There is no need to parrot this in a comment above. Each time you write a comment, you add to the mental overhead of trying to parse not only the code, but the comments as well. This is why comments should be limited & meaningful.

### 💡 Comments should explain *why*.

Let's say we have a user base that is split between two databases. A client or product has users from an old system, a new system, and our application needs to manage both while we transition the code base to a new platform.

```
import oldsdk from 'old-sdk';
import newsdk from 'new-sdk';

const getUserByEmail = async email => {

    // we switched identity providers
    // and not all users are migrated yet.
    const oldUserData = await oldsdk.getUserByEmail(email);
    const newUserData = await newsdk.getUserByEmail(email);
    return newUserData || oldUserData;
}
```

In this example, we are fetching a user from some API using a new SDK, and an old SDK. Stuff like this happens _all the time_. For someone reading this code, while the variable names are descriptive, we don't know _why_ this is happening. The comments in this code explains the _purpose_ of this code. The _what_ is still clear.

#### Conclusion

Like many things, this is not a hard and fast rule. In fact, it's not even a rule, but more like a tool. It's a generalized guidepost that has been helpful for me in my career as a barometer for writing good comments. There are plenty of situations where you would want or need to approach things differently, but this tip can be a great starting point when getting a feel for writing comments.

Happy coding!
GROQ vs. GraphQL?
Tags: discuss, sanity, cms, graphql
Published: 2020-12-03 12:17:57

[Sanity CMS supports query language called GROQ](https://www.sanity.io/docs/overview-groq) but you can also query data with GraphQL.

![](https://media.giphy.com/media/26gR0YFZxWbnUPtMA/giphy.gif)

This got me thinking, what does GROQ give me that GraphQL doesn't. I'm interested in hearing your thoughts if you've used one, the other or both! What's the deal with GROQ?

***

**What's your experience of GROQ and is there a reason to use it over a plain GraphQL query?**
Soon-to-be Ruby on Rails --api Programmer (writing my first book)
Tags: book, ruby, rails, beginners
Published: 2020-12-03 12:12:20

---
title: Soon-to-be Ruby on Rails --api Programmer (writing my first book)
published: true
description: 
tags: book,ruby,rails,beginner
---

Hi, I just wanna share my experience about teaching programming in Youtube vs writing books.

I'm a self taught programmers, I do read a lot and tried my best to completely understand the concept.
I started off with just recording my screen and explained how to do stuffs that I'm comfortable to share.

First just coding video,
![](https://dev-to-uploads.s3.amazonaws.com/i/tv6uh067w4v54wmw3f9d.png)

Then I started looking for more ways to present the content by using papers.
![](https://dev-to-uploads.s3.amazonaws.com/i/r5dkufr2u1s3b1i080tn.png)

I get around 200~600 views per day and about $0.20 per day. I do now know why the number isn't stable. But it's ok, I'm doing this for fun.
![](https://dev-to-uploads.s3.amazonaws.com/i/o24idjgh2n2yk4ta8ff5.png)

Then I think, I want to try writing a book. So I started writing one in Thai a couple of weeks back. It's difficult to write the first few chapters because there are so many things to explain. I'm now on Chapter 13 in Thai and at 126 pages.

The purpose of this book is actually to help my new employees to be able to start working on Ruby on Rails without having to bother their seniors. I want them to be able to gain enough knowledge and start asking more question about business not code.

Then I think, why not sell the book? So, I'm just posting this book (in Thai) in a few facebook groups I know. I didn't do any Ads, I'd like to focus on writing than doing Ads for now.

[![หนังสือเกิดอยากเขียน API ด้วย Ruby on Rails](https://dev-to-uploads.s3.amazonaws.com/i/duytgs22l61an95t66cr.png)](https://leanpub.com/soon-to-be-ruby-programmer)
[Link to the book (Thai) => Leanpub](https://leanpub.com/soon-to-be-ruby-programmer)

Before I started writing chapter 14, I'm translating my book to English. It's about 70% done and I'm excited to share.

[![Soon to be Ruby on Rails --api Programmer](https://dev-to-uploads.s3.amazonaws.com/i/y9hrn7m9ccq6aciai64a.png)](https://leanpub.com/soon-to-be-ror-programmer)
[Link to the book (English) => Leanpub](https://leanpub.com/soon-to-be-ror-programmer)

If you are about to start Ruby on Rails, please give my book a chance and please give me feedback.

Thank you very much.
SaKKo
Week -4 Step in React
Published: 2020-12-03 12:04:10

Hello, Community Today is week -4 of learning. You can visit my previous blogs [Blog1](https://dev.to/amansharma/week-1-documenting-the-learning-journey-37n7) [Blog2](https://dev.to/amansharma/week-2-update-47ol) [Blog3](https://dev.to/amansharma/week-3-reactjs-2ikm).

In this week I learned about props it stands for property which is used for passing the value from one component to the other component. Props value cannot be changed, the value remains the same, unlike the state which can be updated!!!

*Functional component:* There are 2 ways through which we can define a component in react One is class-based another one is functional as reactjs is moving toward functional programming it is better to define the functional component. 

*Creating Multiple Components:* How to create the component, how to structure the code in the react and passing the props in the multiple and understand how to make the code reusable by passing the data from one file using in the other file. Learned About ES6 Concept of arrow function, let and const, how to do destructuring.

By using all these concepts I have made two projects one is Stopwatch and the other is a portfolio website. In the Stopwatch, i have made the hours minute seconds timer and add the three buttons for stop reset and start and using the concept of javascript setInterval and clearInterval.
Used the react hooks useState for managing the state inside the component.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8waqqkwvivsyrzvlenmp.PNG)

Portfolio in this project I have understood the react-router how to link and navigate between the pages. Difference between a href and Link and also exact keyword. In this, I have passed the data through the profiledata.js import the component in home and define and map where the data needed. It helps in understanding code reusability.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/72s5d5b6unr40kn46cft.PNG)

Learning from peers is very great. It makes learning fast as well helps to understand things easily. Thanks, Frontend Community [Deepak](https://twitter.com/HQdeepak) and [Sagar](https://twitter.com/sa_choudhary) for providing me this opportunity.

*You can follow me on [Twitter](https://twitter.com/amansharma0011) or connect with me on [LinkedIn](https://www.linkedin.com/in/amansharma01/).*
Which concept took you the longest to grasp?
Tags: watercooler, learning
Published: 2020-12-03 12:02:41

---
title: Which concept took you the longest to grasp?
published: true
description: 
tags: watercooler, learning
cover_image: https://cdn.substack.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Ff6eee673-03ee-4829-a929-232e64700a8b_590x443.jpeg
---
This could be anything from some specific technologies/tools, data structures, design patterns, programming paradigms to advanced concepts like Machine learning, Neural networks, AI, etc.

Which concept took you the longest to grasp?
Does Rust's no_mangle function conflict with OS APIs?
Tags: rust
Published: 2020-12-03 11:57:34

I faced an odd behavior today. I wrote a Rust function and a test like below and ran them on Windows.

```rs
// the crate socket2 is needed
use socket2::{Domain, Socket, Type};
use std::net::{IpAddr, Ipv4Addr, SocketAddr};

#[no_mangle]
extern "C" fn send() {
    let socket = Socket::new(Domain::ipv4(), Type::dgram(), None).unwrap();
    let local = SocketAddr::new(IpAddr::V4(Ipv4Addr::LOCALHOST), 0);
    let remote = SocketAddr::new(IpAddr::V4(Ipv4Addr::LOCALHOST), 5678);

    socket.bind(&local.into()).unwrap();
    socket.connect(&remote.into()).unwrap();

    let buf = vec![0u8; 0];
    socket.send(&buf).unwrap();
}

fn main() {}

#[cfg(test)]
mod tests {
    #[test]
    fn it_works() {
        super::send();
    }
}
```

The result was like this:

```
thread 'tests::it_works' has overflowed its stack
error: test failed, to rerun pass '-p function --bin function'

Caused by:
  process didn't exit successfully: `ab583070df1ffc3d.exe tests::it_works --exact -Z unstable-options --format=json --show-output` (exit code: 0xc00000fd, STATUS_STACK_OVERFLOW)

Process finished with exit code -1073741571 (0xC00000FD)
```

Why did the stack overflow!? I couldn't understand what happened but found 2 solutions.

1. Change the name of the function from `send` to the others like `send2`.
2. Remove `#[no_mangle]`.

Then, I noticed the name of the function conflicted with OS's `send` because the name wasn't mangled. In other codes, I've also seen access violation, heap corruption errors, so this will cause undefined behavior.

Then, I've made the smallest reproduction code!

```rust
mod api {
    extern "system" {
        pub fn ntohl(netlong: u32) -> u32;
    }
}

#[no_mangle]
extern "C" fn ntohl() {
    unsafe { api::ntohl(0) };
}

fn main() {
    ntohl();
}
```

I'm not bright about C or system calls, so this will make sense for those who understand them. However, I wonder if the rust compiler can detect this conflict because this is extremely unsafe.
What should I know about windows container?
Published: 2020-12-03 11:48:52


In this post, I assume you have a basic understanding of containers.

#Why windows containers
I think the first question that you need to ask yourself is why do you want to use Windows containers? Containers are a better fit for Linux compared to Windows and not every feature that you expect to use in Linux containers exist in Windows containers (at the time of writing this post). However, there could be instances that you have an application that needs Windows to run and you still want to benefit from containerisation. 

If you made up your mind to use Windows containers, here are the things which you need to know:

#Isolation Modes
If this is the first time that you are going to work with Windows containers, you need to know about their isolation modes. Windows containers have 2 isolation modes, "Process" and "Hyper-V". You can read more about them [here](https://docs.microsoft.com/en-us/virtualization/windowscontainers/manage-containers/hyperv-container). But in short, process isolation mode is useful when your containers are going to share the same host OS. However, Hyper-V isolation mode is useful when you want your containers to have their own virtual machine and their own OS. Hyper-V isolation mode can give you a more secure option and also more flexibility when it comes to choosing the host OS version, but it [could affect the performance](https://cevo.com.au/post/windows-containers-on-ecs/).

One other thing to consider is that not all cloud providers support Hyper-V isolation modes. For example, Azure and AWS don't support it yet (at the time of writing this post).

#Base Images
There are [multiple windows images](https://docs.microsoft.com/en-us/virtualization/windowscontainers/manage-containers/container-base-images) that you can use to build your windows container. If you have a .Net framework application which you want to containerise, you probably want to choose [Windows Server Core base image](https://hub.docker.com/_/microsoft-windows-servercore). 
If you want to use a different build of Windows base image for your host machine and containers, you should first check [this](https://docs.microsoft.com/en-us/virtualization/windowscontainers/deploy-containers/version-compatibility?tabs=windows-server-20H2%2Cwindows-10-20H2) page out. If you are going to choose process isolation mode, you have limited flexibility when it comes to Windows builds.

#Windows containers limitation
* Windows containers are introduced with Windows Server 2016. So it is not available for older versions of Windows.
* Version compatibility is another limitation which I mentioned above.
* At the time of writing this post, cloud providers are catching up on Windows containers and their offerings are not as mature as their Linux containers
* There is better community support on Linux containers compared to Windows containers.
* If you use container orchestration tools like Kubernetes, you'll need to have Linux vms in your setup as well, so you'll end up with a hybrid approach.
* Windows base images are bigger in size compared to the Linux ones.
Bookmarklet for Tumblr
Tags: bookmarklet
Published: 2020-12-03 11:44:45

```
javascript:window.open('http://www.tumblr.com/widgets/share/tool?shareSource=legacy&canonicalUrl=&url='+encodeURIComponent(window.location.href)+'&type=link&caption='+encodeURIComponent(window.getSelection())+'&title='+encodeURIComponent(document.title));
```

Save this as a bookmark and name it e.g. "2tumblr". Select text on a page that you want to share and click the bookmark.
Do you still use IDs for unique elements?
Tags: watercooler, webdev, css
Published: 2020-12-03 11:44:03

---
title: Do you still use IDs for unique elements?
published: true
description: 
tags: watercooler, webdev, css
cover_image: https://designshack.net/wp-content/uploads/css-specificity-3.jpg
---
With the rise of styling libraries and mixed CSS in JS solutions, I've seen increased use of classes, while ID selectors are nearly extinct.

Even when understanding the code structure/context and noticing that the element is clearly unique and used once throughout the whole app, it's often still given a class to access via CSS.

Do you still use ID attributes for unique elements?