teleren/devto huggingface dataset:
Interactive Dark mode switch for your Website using CSS and JavaScript
Tags: html, css, javascript, webdev
Published: 2021-01-26 12:06:11

In the process of making my personal website I played around making an interactive switch for Dark/Light modes of my website. So I am going to present you **my solution** and If you like it you can see *the steps* of how I build it using vanilla JavaScript.

#**What we are making**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9u59kf0t7nxb0ydsn2tk.gif)

##**Steps**
**1. Make your static website**

Pretty simple design, in this post we will focus more on the switch and not on the look of the website. Make sure to include some text so we can see the change between the dark mode and light mode and don't forget the input. This is what I made:

{% codepen https://codepen.io/miljkovicjovan/pen/WNGVwwX %}

**2. Make Function to toggle .dark-mode with input**
We will use an onclick function that will apply the **.dark-mode** CSS rules to our website. It is easy and looks something like this:


```
function myFunction() {
        var element = document.body;
        element.classList.toggle("dark-mode");
      }
```


**Don't forget** to add the  `onclick="myFunction()"` part in the input tag. Looks like this : 
{% codepen https://codepen.io/miljkovicjovan/pen/wvzVGeP %}

So we made the dark mode switch but let's start customizing it in CSS and making it look more like a switch.

**3. Customization in CSS**
First I made the switch look like an actual switch and played around with the colors schemes until I found a pretty good one. Then I researched a bit how to make `content: '' ` into a sun and a moon so I could make a cool animation like switching from **daytime to nightime**. I played around and found the best design for each and the best colors. The only thing left was to use an `animation` and use `keyframes` to "animate" the sun and moon. And after around a half our of work it was done. Here is the code:

{% codepen https://codepen.io/miljkovicjovan/pen/LYRwZYx %}

**You can get the whole folder here**
[GitHub](https://github.com/miljkovicjovan/darkmodeswitch)

##Thank you for reading!
I hope this article helps you and becomes useful, any critism is accepted and I encourage you to ask any questions in the comments.

Thanks again,

Stay safe,

~Jovan
How to use a Github Gist as a free database 
Tags: github, database, sideprojects
Published: 2021-01-26 11:56:37

Are you looking for a free and quick to set up service to persist (temporary) data? This article is for you. You've probably used gists before, but how about using one as a data storage?

Here's the easiest setup for storing information for small hobby projects. Yeah, it goes without saying – this isn't a real database nor something you should use for production applications. However, for hobby projects, this is an easy and completely free way to store information. 

Something worth mentioning is that the data you store in secret gists is available in the public without authentication so this **is not a good place to store any secrets**.

I'm using this approach in a few of my projects to store not-that-critical information like the channels my chatbot is in or the reminder data of a Reddit reminder bot. 

## Here's how it works

1. Create a new secret [gist](https://gist.github.com/)
2. Create a file called db.json inside of it. Make it an empty object `{}`.
3. Get yourself a personal Github access token [here](https://github.com/settings/tokens/new). `gist` is the only scope you should need.

```typescript
const TOKEN = "YOUR_PERSONAL_ACCESS_TOKEN";
const GIST_ID = "YOUR_GIST_ID";
const GIST_FILENAME = "db.json";

/* 
 * Reads the JSON file inside of the gist
 */
async function getData() {
  const req = await fetch(`https://api.github.com/gists/${GIST_ID}`);
  const gist = await req.json();
  return JSON.parse(gist.files[GIST_FILENAME].content);
}

/* 
 * Puts the data you want to store back into the gist
 */
async function setData(data) {
  const req = await fetch(`https://api.github.com/gists/${GIST_ID}`, {
    method: "PATCH",
    headers: {
      Authorization: `Bearer ${TOKEN}`,
    },
    body: JSON.stringify({
      files: {
        [GIST_FILENAME]: {
          content: JSON.stringify(data),
        },
      },
    }),
  });

  return req.json();
}

```
Where to put business logic
Tags: help
Published: 2021-01-26 11:46:56

Hello, 

this is a bit of a general question that I haven't been able to find an answer to online. 

I have just started to dabble in React and Next.JS and would like to create my own project with Next.js to enhance my learning. 

I would like to create a point of sale system using next.js and am thinking that calculations of sales tax etc should happen serverside rather than client side (understand that anyone can read you client side code). i do know that the calculation of sales tax is no big secret, but i'm just doing this to learn the principles :)

so my question is
1. Am I wrong that it is not safe to keep all business logic in the frontend (such as some proritetary calculation)?
2. If i hence was going to do my calculation in the backend, where would I do them? a function in Express?

hope someone can help. 

thanks
How to encrypt/decrypt with AES-GCM using CryptoKit in Swift
Tags: swift, crypto, ios
Published: 2021-01-26 11:38:42

I'm developing a native module for React Native that allows you to encrypt/decrypt data with AES-GCM for [my Markdown note-taking app](https://www.inkdrop.app/). Here is a working memo.

CryptoKit is available from iOS 13.0.

* [Apple CryptoKit | Apple Developer Documentation](https://developer.apple.com/documentation/cryptokit)

## Convert hexadecimal strings

First, you need to extend `Data` class to deal with hexadecimal strings:

```swift
public extension Data {
    init?(hexString: String) {
      let len = hexString.count / 2
      var data = Data(capacity: len)
      var i = hexString.startIndex
      for _ in 0..<len {
        let j = hexString.index(i, offsetBy: 2)
        let bytes = hexString[i..<j]
        if var num = UInt8(bytes, radix: 16) {
          data.append(&num, count: 1)
        } else {
          return nil
        }
        i = j
      }
      self = data
    }
    /// Hexadecimal string representation of `Data` object.
    var hexadecimal: String {
        return map { String(format: "%02x", $0) }
            .joined()
    }
}
```

## Load key

A key is given in hex string. The key length is 256 bits.

```swift
import CryptoKit

let keyStr = "d5a423f64b607ea7c65b311d855dc48f36114b227bd0c7a3d403f6158a9e4412"
let key = SymmetricKey(data: Data(hexString:keyStr)!)
```

## Decrypt

An encrypted data comes with a ciphertext, an initialization vector (a.k.a. nonce), and an auth tag.

```swift
let ciphertext = Data(base64Encoded: "LzpSalRKfL47H5rUhqvA")
let nonce = Data(hexString: "131348c0987c7eece60fc0bc") // = initialization vector
let tag = Data(hexString: "5baa85ff3e7eda3204744ec74b71d523")
let sealedBox = try! AES.GCM.SealedBox(nonce: AES.GCM.Nonce(data: nonce!),
                                       ciphertext: ciphertext!,
                                       tag: tag!)

let decryptedData = try! AES.GCM.open(sealedBox, using: key)
print(String(decoding: decryptedData, as: UTF8.self))
```

## Encrypt

```swift
let plainData = "This is a plain text".data(using: .utf8)
let sealedData = try! AES.GCM.seal(plainData!, using: key, nonce: AES.GCM.Nonce(data:nonce!))
let encryptedContent = try! sealedData.combined!
print("Nonce: \(sealedData.nonce.withUnsafeBytes { Data(Array($0)).hexadecimal })")
print("Tag: \(sealedData.tag.hexadecimal)")
print("Data: \(sealedData.ciphertext.base64EncodedString())")
```
Shorthand for `npm install`
Tags: npm, webdev, codenewbie, beginners
Published: 2021-01-26 11:38:37

```bash
npm i
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Interview Tips for Developers Part 1
Tags: python, codenewbie, javascript, productivity
Published: 2021-01-26 11:31:06

I am writing this to address the common issue of getting a job as pertaining being developer, hardly will you find a developer who has not passed and experienced this process. So, in order to prevent and correct your mistakes and mindset towards interview, you've got to read this 

##Firstly, what is an interview?

Primarily, an interview is essentially a structured conversation where one participant asks questions, and the other provides answers. You would be asked questions based on your field for the intended job. 

So, to get jobs easily without less stress and mistakes, let's journey down through the lines of this blog.

- ###INTERVIEWING PROCESS
The interviewing process of companies varies from each other. Typically an initial screening interview goes thus;

  - On phone (call)

  - A social media call (Skype) or zoom maybe

  - On sight interview

- ###PREPARING FOR AN INTERVIEW
Interview is a skill some people are naturally better at it than others but like anything else practice makes perfect.

- ###WAYS TO PREPARE
 - Google "top 40 interview questions" based on your field and read through them.

 - Make sure you have stories you can easily talk about that demonstrate situations when you did some thing related to your field. 

 - Maybe a class project or personal project.

 - A job assigned by maybe a former boss.

 - Check out the company online and know stuffs more about them.

 - Sample interviews questions and information about interviewing processes. [Glassdoor](https://www.glassdoor.com/index.htm) is a great resources!

 - Information about what's like to work wherever you wish

 - Go to practice interviews with friends, families, campuses maybe, this will be of great help

>This can be very hard for programmers especially, I feel we can check this book out for more knowledge **"Cracking the coding interview"**. 

-  [Amazon](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850/ref=sr_1_1?crid=2VN819HZ5MHCD&dchild=1&keywords=cracking+the+coding+interview&qid=1609104847&sprefix=cracking+the+coding+inter%2Caps%2C348&sr=8-1) 

-  [PDF](https://cin.ufpe.br/~fbma/Crack/Cracking%20the%20Coding%20Interview%20189%20Programming%20Questions%20and%20Solutions.pdf) 


Please kindly comment below for feedback and you can also link up with me on *[Twitter](https://twitter.com/chryz_codez)* and follow me on this platform for more engagement, motivations, interactions and support as a developer.
Monday Medley | Success as a Creative in 2021, Chrome 88, and Performant Animations and Micro-Interactions
Tags: fewdaily, webdev, news
Published: 2021-01-26 11:02:31

{% spotify spotify:episode:0HM89axcaM14zxG8YYABDr %}

---

## Success as a Creative in 2021

Last year changed the game for most designers as we had to find new ways to be collaborative, adaptive, and productive in a different environment. Hopefully, 2021 brings better predictability, but regardless it is important to stay up to date with trends and learn new skills. The latest post on Dribbble's blog outlines [how to get ahead as a digital creative in 2021](https://dribbble.com/stories/2021/01/21/bannersnack-tips-for-creative-success). With tips like learn to work with new tools and work on your management skills, it is a great overall guide to get your professional career started off right this year.

## Chrome 88

As of last Tuesday, version 88 of the Chrome browser has begun to roll out to the stable release. This version brings some great new features for developers such as manifest v3 for Chrome extensions and the *aspect-ratio* CSS property for any element. There are tons of new features, bug fixes, deprecations, and more to read about, so check out the [release post on the Chrome Developer blog](https://developer.chrome.com/blog/new-in-chrome-88/).

## Performant Animations and Micro-Interactions

There's no doubt about it, animations give your website that next-level, polished look. But there is a fine line between tasteful animations that enhance the experience and animation for animation's sake. Luckily, Logrocket is here to help with a recent post from their blog that explains [how to design highly performant animations and micro-interactions](https://blog.logrocket.com/how-to-design-highly-performant-animations-and-micro-interactions/). This highly detailed guide breaks down the importance of performance on website speed and accessibility through actionable examples, like trying to stick to the composition properties *transform* and *opacity.*

---

Want to know more? Head to [fewdaily.com](https://fewdaily.com) for more of today’s topics and other front-end web content! If you liked what you heard be sure to rate, review, and subscribe on your platform of choice. That's all for today, tune in tomorrow!
How to split text into sentences in NLP?
Tags: nlp, node, javascript, tutorial
Published: 2021-01-26 10:53:25

To split any text into sentences using [winkNLP](https://winkjs.org/wink-nlp), read the text using [`readDoc`](/wink-nlp/read-doc.html). Then use the [`sentences`](/wink-nlp/sentences.html) method to get a collection of sentences from the text. Follow this with the [`out`](/wink-nlp/out.html) method to get this collection as a JavaScript array. This is how you can split a text into sentences:

```JavaScript
// Load wink-nlp package  & helpers.
const winkNLP = require( 'wink-nlp' );
// Load "its" helper to extract item properties.
const its = require( 'wink-nlp/src/its.js' );
// Load english language model — light version.
const model = require( 'wink-eng-lite-model' );
// Instantiate winkNLP.
const nlp = winkNLP( model );

// Input text
const text = 'AI Inc. is focussing on AI. It is based in 
              the U.S.A. It was started on 06.12.2007.';
// Read text
const doc = nlp.readDoc( text );
// Extract sentences from the data
const sentences = doc.sentences().out();
console.log( sentences );
```

This returns an array of sentences:

```Javascript
[
  'AI Inc. is focussing on AI.',
  'It is based in the U.S.A.',
  'It was started on 06.12.2007.'
]
```

If no sentence-break is found in the input text, the output is the complete text as an array with a single member.

A sentence is usually split at a full-stop, question mark or exclamation mark. Even in the presence of abbreviations, honorifics, etc., winkNLP attempts to intelligently identify the sentence boundary.
Boas Vindas
Tags: bioinformatics, computerscience, floss, machinelearning
Published: 2021-01-26 10:50:45

É 2021 e já se passaram 12 anos que aprendi a programar (2008), 3 que terminei a graduação em TI (2017), e 3 que entrei no doutorado (2017). Resolvi, então, criar um blog nesta rede social para compartilhar com você coisas que aprendi até aqui.

Algumas das coisas que vou falar incluem Python, Linux e 
Software Livre, Bioinformática, Machine e Deep Learning,
e o "fazer científico". Se você curte algum desses temas, acomode seu smartphone e vamo pro papo.
Replace (Blank) with 0 in Power BI
Tags: powerbi
Published: 2021-01-26 10:48:45

I recently did a bit of work in Power BI and came across this issue :

An unsightly (Blank) being displayed whenever a numeric value is zero.

What you really want of course is to see a 0 when it is zero. I put up with it for a while but eventually had to look for a solution.

I experienced this in particular when narrowing a date range filter, so I have used that as an example here.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/53u5mion7yfftxz0lfdi.png)


#Use a measure to replace the (Blank) with 0

Add a new measure (Power Query) to the table via the ‘New Measure’ button.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/976d9ub6dlsevguwjehy.png)


Include the field name that has the (Blank) value — in this case it is ‘Credit’.

(My table name in this example is called ‘Quick Books’).

```
Measure name = IF(
ISBLANK(COUNT('Quick Books'[Credit])),
0,
COUNT('Quick Books'[Credit]))
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/igg51pbkiqnf994erc1c.png)


This by default calls the measure name ‘Measure Name’ and it shows up as a field in your field list on the right-hand side.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ss0jr6ky8uh1o8j9xxxw.png)


#And of course change to use your own field names

Replace ‘Measure name’ with your own name.

Replace ‘Quick Books’ with your table name.

Replace ‘Credit’ with your field name.

#Save/Commit the measure

Click on the tick next to the measure to commit.

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


##Replace original field with the measure

To actually get it to use the new measure select the ‘Numeric Value’ visual and replace the original field name (Credit) with the measure (Measure name).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/onz0fuqyli2hpqcgfxq0.png)


As expected when we increase the date range the correct values are still displayed:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lwqqe4z0mu67epnbzyla.png)


From (Blank) to 0 to hero!
Fade in/out in Unity Timeline
Tags: unity3d, timeline
Published: 2021-01-26 10:47:46

---
title: Fade in/out in Unity Timeline
published: true
description: fade in/out in timeline
tags: unity, timeline
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0s2hxa0ru7nmg7y86m7d.jpg
---

# What's this.

- Unity のTimelineで簡単にフェードイン・フェードアウトできるトラック。
- Unityが制作したものだけど、なぜかデフォルトで追加されていない。
- https://docs.unity3d.com/Packages/com.unity.streaming-image-sequence@0.7/manual/index.html

# Environment

- Unity 2020.1

# How to Install.

- Package Managerで`com.unity.streaming-image-sequence` で検索する。

# How to Use.

- see. https://github.com/unity3d-jp/StreamingImageSequence/blob/dev/Documentation~/en/FeatureFadingImages.md#quick-start
Due diligence of code - crucial when building, buying or selling a business
Tags: startup, news, codequality
Published: 2021-01-26 10:45:41

Hi there
How do you handle the Due diligence of source-code/cloud-setup when buying/selling or building a business?
I found that a lot is skipping this step and later find out that they a left with a bad none scalable setup that will cost them thousands and thousands of dollars.
So how do you handle it?
Asking because I am thinking about building a little business dedicated to do Due diligence - please share your thoughts.
Thank you.
VS Code for Git and GitHub
Tags: github, git, vscode
Published: 2021-01-26 10:31:53

**TL;DR** VS Code has [full Github integration](https://docs.microsoft.com/en-us/learn/modules/introduction-to-github-visual-studio-code/?WT.mc_id=startup-11830-chnwamba)

----------

I have been making series of videos on Youtube that shows Git workflows using **VS Code**. The motivation for this video series is purely personal and I know a lot of developers can relate to it. In as much as I love the terminal and how it makes me look cool while using it, it is not the most productive workflow to shift between VS Code and iTerm. I wanted to be able to do everything with just VS Code.

My productivity with Git and GitHub got doubled after I got a hang of the VS Code integrations so I though it would be useful to you as well.

Each video covers a particular topic or a group of tips that solve related problems.


## Link to Playlist

Here is the [Youtube Playlist](https://www.youtube.com/playlist?list=PL6oN0n_RAgslRZG-hDvBtzRP0AM8lNI88). Feel free to save for your future reference.


## Included Videos

Here is a breakdown of all the videos in the playlist:

 **1. Basic Git Operations with VS Code**
 
 It only makes sense to kick off with basic operations like `init`, `clone`, `add`, `commit` etc
 
{% youtube GWCsqrZszjE %}
 
**2. How to Publish a New Project to GitHub**

This is my favorite video in the series. There is a lot of chores between initianlizing a repo and pusing it to GitHub but VS Code has a single-button alias for all of those chores:

{% youtube 4g3v3cWX6ig %}

**3. How to Manage Git Branches and Merge Conflicts with VS Code**

It’s always helpful to have an extra hand in figuring out how a project is synced and where conflicts are happening. VS Code has a very effective and visual way of guiding you through both managing branches and understanding what to prioritize in a conflict

{% youtube O7cQcdP53bA %}

**4. Push and Pull with VS Code**

In this video, I will walk you through not only pushing a repository to GitHub but also how to pull from it and manage conflict if any occurs while pulling

{% youtube 9oKFPTtyHZg %}
JS Basics: Difference between "null" and "undefined"
Tags: javascript, beginners
Published: 2021-01-26 10:22:23


Hi Folks,

If you are working in javascript, you must be knowing these two keywords, `null` and `undefined`. Although we understand both of them, it becomes difficult to answer this particular question. So in today’s post let’s understand the difference between `null` and `undefined`. 

Null and undefined are both **falsy values** and they are one of the javascript primitives ('string','number','null','undefined','boolean','symbol', 'bigint'). Now let's understand their difference.

The keyword `undefined`, as its verbal meaning says, is not defined. For example, If you are declaring a variable `a` and you are not passing any value to it. This means its value is not defined and so the variable `a` will get value `undefined`. Whenever you call a function or a variable and javascript do not know its value it will always return undefined. Try to do this, Declare a variable *num* and don't pass any value to it. Now let's print the variable num's value `console.log(num)` in your browser console and you will see undefined getting printed. This happened because your browser did not know the value of num as we had not defined it before! Also, as it is one of the javascript primitives, the type of undefined is also `undefined`!

We already have understood that, if something is not defined javascript gives it value is undefined. But then what about null? So null is something whose value you want to be nothing. Let me explain, suppose you have defined a variable a and you want its value to be nothing initially, So, instead of not giving it any value and making it undefined, you pass it Null meaning no value. Also, the type of null is an `object`. This is why according to [MDN documentation](https://developer.mozilla.org/en-US/docs/Glossary/Primitive), javascript has 6 primitives and there also is null, which is seemingly primitive, but indeed is a special case for every Object

So though null and undefined are almost the same, they have these differences in their types. While doing equality comparison in both, as both are falsy values == will give you a result true, but as both have different types, === will give you the result as false. 

That’s all about Null and undefined. 

Though this is a very basic topic, it becomes a tricky question for an interview! So share your comments/feedback about the article and also any of such tricky interview questions from your javascript interviews. 

You can also connect with me on [Twitter](https://twitter.com/hey_yogini) or [buy me a coffee](https://www.buymeacoffee.com/heyyogini) if you like my articles. 

Keep learning :)