teleren/devto huggingface dataset:
Playing around with browser cookies in Scala.js
Tags: scala, webdev, javascript, showdev
Published: 2021-11-21 20:06:28

> _Photo by [Laura James](https://www.pexels.com/@laura-james?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from [Pexels](https://www.pexels.com/photo/homemade-festive-cookies-in-box-on-table-6102150/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels)_

I spent this weekend playing around with Scala.js and learning how to manipulate browser cookies with it.

Check out the live demo at [cookies.awwsmm.com](https://cookies.awwsmm.com/).

The source is available at [github.com/awwsmm/CookiesScalaJS](https://github.com/awwsmm/CookiesScalaJS).

There are a few cool Scala flairs here, particularly this bit which pattern matches on a regular expression

```scala
  def clearAllCookies(): Unit = {
    val Cookie = "([^=]+)=.+".r
    document.cookie.split("; ").foreach {
      case Cookie(key) => clearCookie(key)
      case other => err.println(s"Couldn't parse '$other' as a key=value cookie pair")
    }
  }
```

In order to ensure that users don't include the `;` or `=` characters in their cookie keys and values (which confuses the parser), I've also added these two little safeguards, as well

```scala
    // prevent the user from typing ';' or '=' into the input
    input.addEventListener("keypress", (e: dom.KeyboardEvent) => {
      if (e.key == ";" || e.key == "=") {
        e.preventDefault()
      }
    })

    // prevent the user from pasting ';' or '=' into the input
    input.addEventListener("paste", (e: dom.ClipboardEvent) => {
      val text = e.clipboardData.getData("text")
      if (text.contains(";") || text.contains("=")) {
        e.preventDefault()
      }
    })
```

What do you think? Anyone else on DEV doing anything cool with Scala.js?
A basic Ecommerce web app, built with reactjs and paypal
Tags: react, javascript, css
Published: 2021-11-21 19:51:06

I built a simple ecommerce web app using reactjs ,and paypal for payment integration 
Check it out 
Demo : https://reactjs-commerce.netlify.app/
Source Code :https://github.com/albeniskerqeli10/Reactjs-Ecommerce-App

😊
"weak"ly linked #1
Tags: ios, swift, mobile
Published: 2021-11-21 19:37:26

####1. Quick assertion to check if you are on a proper queue :heart:
  {% twitter 1459905148852088837 %}

Now the only thing I need is an equivalent of this for testing - something like `XCTAssertDispatch(condition: .onQueue(.main))`

####2. A GUI driven scripting tool in Swift 🛠
https://underplot.com/light
Writing scripts and automating things is a great way to improve your workflow - with this tool it would be a breeze to whip up something ad-hoc, especially with this instant and interactive feedback loop :heart:
<sup>Originally seen in [this tweet](https://twitter.com/icanzilb/status/1460275096552148998)</sup>

####3. Floating point number math is hard(er) :thinking:
https://discourse.julialang.org/t/array-ordering-and-naive-summation/1929
Floating point math has always been tricky, and you should never use it for critical things - it's way better to use [`Decimal`](https://developer.apple.com/documentation/foundation/decimal) if you care about precision. That being said, I always assumed that associativity of addition was preserved here. As it turns out - its not :exploding_head:

####4. VSCode bracket guides 🔁
{% twitter 1461380028609048576 %}
VSCode is such a powerful editor that keeps on giving - after all these years using it as a supercharged notepad, I think I should finally at least try to setup the environment for iOS development outside of Xcode to try it out - seems it's not that complicated, and there are many guides out there, like this first result from a quick search 
{% medium https://medium.com/swlh/ios-development-on-vscode-27be37293fe1 %}

------
<sup>
What this is:
A subjective list of links I found interesting during last week, mainly to keep them around.
</sup>
Becoming a JavaScript Jedi - Mastering the JavaScript Filter
Tags: javascript, webdev, functional, tutorial
Published: 2021-11-21 18:55:55

![javascript filter](https://res.cloudinary.com/uequations/image/upload/c_fit,e_sharpen:100,h_625,w_1200/v1637519359/Disruptive%20SmackTalk%20/becoming-javascript-jedi-mastering-javascript-filter/35476539.jpg)
Author: <a href="https://twitter.com/MensahAlkebuLan" target="_blank" rel="noopener">Mensah Alkebu-Lan</a>

## Table of Contents
[Prerequisites](#prerequisites)
[Discussion](#discussion)
[References](#references)

## Prerequisites
Some familiarity with the JavaScript programming language.
Some familiarity with arrow functions.
Some familiarity with prototypes in JavaScript.

## Discussion
Arrays in JavaScript are list-like objects whose prototype has methods to perform traversal and mutation operations. There are countless use cases in Web Development where arrays will be useful.

The Array.prototype.filter() method creates a new filtered array containing all of the elements in the array that pass the test implemented by the provider function. This provider function can be an arrow function taking an element of the array as input and a boolean pass/fail as output.  To clarify, if the output is true the element will be included in the new filtered array. As with most methods in JavaScript, there is considerable flexibility in how they are implemented. For example, instead of an arrow function, the filter method can also take a callback function that returns true or false.

Below is a typical example of how the filter function is used:

```js
var arr1 = [1,2,3,4],
    arr2 = [2,4],
    res = arr1.filter(item => !arr2.includes(item));

console.log(res);
```

When this program is executed, the result should be [1,3]. That is, for each of the elements is arr1, the provider function is going to check whether the array [2,4] includes that item. If the element is neither 2 nor 4, it will be added to the filtered array. 

## References
1.  Array.prototype.filter() - JavaScript | MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter. Assessed 11-21-2021.
2.  Array - JavaScript | MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array. Assessed 11-21-2021.

View original article at https://voices.hassanriver.com/article/2021/11/becoming-javascript-jedi-mastering-javascript-filter/.
Building a time tracker app in NextJs with MongoDB
Tags: nextjs, mongodb, javascript, webdev
Published: 2021-11-21 18:31:49

## What is the `time tracker app`?
I always wanted a way to keep track of day to day activities. For example, i want to know that how much time i'm investing in study, sports, coding, prep, etc.

If i have record of all these things, then i can easily decide that which area need more time and which need less. 

This application is built for the same purpose.

## How to use?
### 1. Go [here](https://time-stamp.vercel.app)
Here you will see a sign-in button, clicking on that button do signin.

> Sign-in required to save your data into DB

### 2. Create/Select TAG
TAG is a notation of your todo type. Suppose you are reading about javascript, and you would link to know that how much time you are providing to the javascript.

Then you can create a TAG named `javscript`.

To create TAG click on Track button.

> Here you can either create or select the TAG

### 4. Start the timer
After creating the TAG, you can click on the GO.


### 5. Save the data 
After timer finishes, you can save the data into DB and comeback to the home page.

[repo](https://github.com/ats1999/time-stamp)
## Thank You
Getting Started with CSS Animations
Tags: css, animations, webdev, html
Published: 2021-11-21 18:26:16

CSS Animations is a very wide topic. I'll try to cover the things I've got a grip on during the past few weeks.

CSS basically provides you two types of animations:
1) Using the transform property.
2) Using Keyframes.

Let us first explore animations through transition property.


##Animations using Transform

Have a look at this CodePen:
- [Transform Animation](https://codepen.io/Shasheesh15/pen/QWMPqbL?editors=1100)

In the above example, we mainly focus on the following properties:

(properties shown here are only related to the ones used for animation)
```
.card{
  background-color:#9C19E0;
  transition: all 0.5s ease-out;
}

.card:hover{
  transform:scale(1.2);
  background-color:#FF5DA2;
}
```

The transform properties help us to change various properties such as move the card left, right, scale it up (as shown in the above example) and the transition property helps us to time the animations and also provide a timing function (ease-out) in the above example which basically starts the animation quickly and slows it down towards the end finishing it in the time provided.

This is a very simple technique to implement animations in CSS, let us now explore the Keyframes approach:


#Animations using Keyframes

Have a look at this CodePen:
- [Keyframes Animation](https://codepen.io/Shasheesh15/pen/bGrJoLN?editors=1100)

You will notice the animation starts as soon as the page loads, and happens twice (because of the properties we've set).

Let us get into the code:

(properties shown here are only related to the ones used for animation)
```
.card{
  animation-name: scaleUp;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-timing-function: ease-out;
  animation-delay: 0.75s;
}


@keyframes scaleUp{
  0%{
    opacity:0;
    transform: scale(0);
  }
  
  100%{
    opacity:1;
    transform: scale(1);
  }
}

```

here 0% defines when the animation just starts and 100%  defines when the animation has been completed.

if we define something with 80%, it would mean manipulating the properties when the animation has been completed by 80%.

So you can see we have quite a lot of properties set for a Keyframes animation, we will also look at a shorter way to write all these, but for now let's understand what they do:


animation-name: Specifies the name of the keyframe you want to bind to the selector

animation-duration: Specifies how many seconds or milliseconds an animation takes to complete

animation-timing-function: Specifies the speed curve of the animation

animation-delay: Specifies a delay before the animation will start

animation-iteration-count: Specifies how many times an animation should be played

There are a few more properties associated with animations which give you more command over them.

Here's an example of how to write all these in a single line:

` animation: name duration timing-function delay iteration-count `

You can play around with these properties and see the various kinds of effects they produce.
Batch delete emails from MS Exchange
Tags: python, exchange, outlook, email
Published: 2021-11-21 18:24:53

Simple CLI script for deleting emails from Microsoft Exchange mailboxes. 
You can use it to delete emails from exchange mailboxes, that are not managed by Outlook, OWA or etc. (e.g. technical e-mail accounts). The script use Microsoft Exchange Web Services (EWS) to communicate with MS Exchange server.

https://github.com/bosodo/exchange-mailbox-cleaner

Deleted emails can be exported to .eml files before removing from MS Exchange server.
Prefect CLI Action
Tags: actionshackathon21, prefect
Published: 2021-11-21 17:56:20

### My Workflow
[A GitHub Action](https://github.com/sp1thas/prefect-cli-action) for running Prefect commands using the Prefect CLI.


### Submission Category: 

DIY Deployments


### Yaml File or Link to Code

{% github sp1thas/prefect-cli-action %}


### Additional Resources / Info

This Github Actions allows you to specify Prefect version or any other additional dependencies by specifying a `requirements.txt` file with the extra dependencies.
How we manage Backend Services at Fusion
Tags: analytics, javascript, python, webdev
Published: 2021-11-21 17:54:13

It’s been around 1.5months we shifted the entire backend services to AWS, being previously on Heroku. Coming from Heroku background it’s quite different to have your services running on AWS!!

We have 5 different services running on a single Kubernetes cluster with three nodes of t2.medium and all in autoscale mode!!

Also a big thanks to porter.run for making it as simple as Heroku to deploy stuffs!

**What all services are currently running at Fusion?**
1. Event-collector service (tracking engine) — Javascript
2. Query Service (query engine) — Javascript
3. Email service — Python
4. User service — Python
5. Payments service — Python
6. Chat Service (Currently running on Heroku)

**What type of services are these and how much intensive?**
1. Event-collector (this is the most intensive service bearing a lot of requests being made in a single interval of time)
![Current Event Collector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjan0ipf0k9ldbolfhqu.png)
2. Query Service (DB LookUp service)
3. Email Service (A SMTP server for email campaigns)

**How we do use event collector?**
It’s purely asynchronous, also will be adding queuing service of Redis/RabbitMQ. As we can register events in a lazy manner!

**How do we use Query Service?**
This is something where we are entirely dependent on the DB service/RDS which we use for PostgreSQL. We will be soon shifting to ClickHouse(Column based DB)

**How do we use Email Service?**
Currently we are only using queuing to scale the email service and this can be used to pretty large number of emails to be sent in a batch!

**RDS Used?**
Currently we are entirely using AWS RDS for PostgreSQL. But will be soon moving to ClickHouse DB!

**How far we are at Fusion?**
1. #1 product of the week on Remote.Tools
2. #1 product of the day on BetaList
3. Featured on Product Hunt

**What are we trying to do?**
We are bringing an open source alternative for Amplitude/Mixpanel, Hotjar/Smartlook, Mailchimp, CleverTap/WebEngage

Also we are open-source, soon to be releasing the newest patch of codes!! Stay Tuned in for more engineering blogs!
Find odd or even number by getting user input using redux
Tags: redux, react, javascript, beginners
Published: 2021-11-21 17:19:01

Hi folks today i come up with very popular concet called redux.

Here is the official Documentation for redux --> https://react-redux.js.org/tutorials/quick-start

Here i will show you how to find odd or even number using redux concept 

Actually redux is using for very large applications so here i just want to show you in simple way how redux actually works 

Here i am using subscribe for enable and disabling the button 
```
function OddorEven() {
    const initialState = { value: 0 , isSubscribed : true }
    const Reduceraction = (state = initialState,action) => {
        if(action.type === 'checkOddorEven')
            {
                if(action.value % 2 === 0)
                {
                    window.alert('even number')
                } else {
                    window.alert('odd number')
                }
            }

        if(action.type === 'subscribe')
        {
            return {
                ...state,
                isSubscribed : !state.isSubscribed
            } 
        } 
        return initialState
    }

    let store = createStore(Reduceraction);

    return (
        <div>
            <Provider store={store}>
            <CheckOddorEven />
            </Provider>
        </div>
    )
}

export default OddorEven

```
```

  function CheckOddorEven () {
       const select = useSelector(state => state)    
        console.log('select', select)
        const dispatch = useDispatch()
        const [state, setstate] = useState();
        return (
            <div>
         <input onChange={(e)=>setstate(e.target.value)} />
         <button 
           disabled={select.isSubscribed} 
           onClick={()=> dispatch(checkOddorEven(state))} >
             check
             </button>
         <button 
             onClick={()=>dispatch(subscribe())}> 
                subscribe 
           </button>
            </div>
        )
    }

    export default CheckOddorEven 
```
Learn Modern C++ in 2021
Published: 2021-11-21 16:55:26

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbgybjtf7wkb2ug2zmei.png)
#### ‍**1\. Learn Cpp**

LearnCpp is a free course devoted to teaching you how to program in C++. Whether you have had any prior programming experience or not, the tutorials on this site will walk you through all the steps to write, compile, and debug your C++ programs, all with plenty of examples.

[More info](https://www.learncpp.com/)

#### **2\. C++ Tutorial**

This C++ tutorial covers basic concepts, data types, arrays, pointers, conditional statements, loops, functions, classes, objects, inheritance, and polymorphism.

[More info](https://www.sololearn.com/learning/1051)

#### **3\. C++ For Programmers**

C++ for Programmers is designed for students familiar with a programming language and who wish to learn C++. It focuses on 'how' instead of 'what.' For example, we do not teach function definition but rather how to create a function in C++. The lessons are taught by several different instructors who have used C++ in their professional careers, so students get to experience different perspectives. The course also includes comments and tips from Bjarne Stroustrup --- the original designer of C++.

[More info](https://www.udacity.com/course/c-for-programmers--ud210?irclickid=WpMxs6SgjxyLUxKR-pw1BWvlUkBR2xxMZ2TXUk0&irgwc=1&utm_source=affiliate&utm_medium=&aff=2890636&utm_term=&utm_campaign=__&utm_content=&adid=786224)

#### **4\. C++ For C Programmers**

This course is for experienced C programmers who want to program in C++. The examples and exercises require a basic understanding of algorithms and object-oriented software.

[More info](https://www.coursera.org/learn/c-plus-plus-a?ranMID=40328&ranEAID=jU79Zysihs4&ranSiteID=jU79Zysihs4-j4rJQDvBpGRUOR86eEkoUw&siteID=jU79Zysihs4-j4rJQDvBpGRUOR86eEkoUw&utm_content=10&utm_medium=partners&utm_source=linkshare&utm_campaign=jU79Zysihs4)

#### **5\. C++ Language Tutorial**

This tutorial is for those people who want to learn to program in C++ and do not necessarily have any previous knowledge of other programming languages. Of course, any knowledge of other programming languages or any general computer skill can be helpful to understand this tutorial better, although it is not essential. It is also suitable for those who need a minor update on the new features the language has acquired from the latest standards. If you are familiar with the C language, you can take the first 3 parts of this tutorial to review concepts since they mainly explain the C part of C++. There are slight differences in the C++ syntax for some C features, so I recommend reading it anyway. The 4th part describes object-oriented programming. The 5th part primarily describes the new features introduced by the ANSI-C++ standard.

[More info](http://www.cplusplus.com/files/tutorial.pdf)

*Originally posted at* [*raftlabs.co*](https://raftlabs.co/development/top-5-free-resources-to-learn-c?utm_source=devto&utm_campaign=crosspost)
Adding Discord Bot Status with Python
Tags: python, discordpy, discord
Published: 2021-11-21 16:46:11

### About Rich Presence
We all have seen a custom status on a discord bot like 'playing a game' or 'watching a movie', that is known as 'Rich Presence'. We have to enter some lines of code to add a custom rich presence in a Discord Bot. This Post will help you to add a custom rich presence in your discord bot. 
### How to add it?
To add this, import discord and commands. The ` client` object for the bot has a method ` change_presence`. This is used to change the status of your bot!

 • **For Playing:** Use discord.game() for adding playing status. Add the name of the game to the name argument

```py
import discord
from discord.ext import commands

client = discord.Client()

@client.event
async def on_ready():
await client.change_presence(status=discord.Status.Online, activity=discord.game('a video game'))
print('We have logged in as {0.user}'.format(client))

```
• **For Streaming:** Use discord.Streaming() for adding streaming status with a url argument
> **Note:** Discord only supports streaming links for YouTube and Twitch. The url argument must be formatted as an actual URL. `http://www.twitch.tv` will work while `www.twitch.tv` will not. It won’t change the bot status at all.

```py
import discord
from discord.ext import commands
client = discord.Client

@client.event
async def on_ready():
    await client.change_presence(activity=discord.Streaming(name='a movie', url='https://www.twitch.tv/your_channel_here'))
print('We have logged in as {0.user}'.format(client))
```


• **For Watching:** `Use discord.Activity()` with the type argument set to `discord.ActivityType.watching` for the watching status.

```py
import discord
from discord.ext import commands
client = discord.Client

@client.event
async def on_ready():
    await client.change_presence(activity=discord. Activity(type=discord.ActivityType.watching, name='A Movie'))
print('We have logged in as {0.user}'.format(client))
```

• **For Listening:** `Use discord.Activity()` with the type argument set to `discord.ActivityType.listening` for the listening status.

```py
import discord
from discord.ext import commands
client = discord.Client

@client.event
async def on_ready():
    await client.change_presence(activity=discord. Activity(type=discord.ActivityType.listening, name='To Music'))
print('We have logged in as {0.user}'.format(client))
```
### Example code

```py
import discord
from discord.ext import commands

# Change below's prefix with your prefix

client = commands.Bot(command.prefix = 'ENTER YOUR PREFIX')

@client.event
async def on_ready():
await client.change_presence(status=discord.Status.Online, activity=discord.game('a video game'))

# You can change the current status above
client.run('Your Bot Token')
```
The ephemeral miniconf - The Raku Quizz
Tags: raku
Published: 2021-11-21 16:33:19

There were some activities during the conference, this **Raku Quizz** was one of these! :grinning:

## Questions
![Raku Quiz Question 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh4brsbgqkgxh8ix7ru6.png)

![Raku Quiz Question 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzf4v1r42gz8darskpu1.png)

![Raku Quiz Question 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gkv6xhnubprr4kypq8n.png)

![Raku Quiz Question 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwchnhcw239thonwyxal.png)

![Raku Quiz Question 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4toq30u3awqx2kh4cw7i.png)

![Raku Quiz Question 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru5eg2spmar4gg0ojavm.png)

## Answers
### Raku users can be called...
![Rakoons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czu7395xnlzxsw8yrbls.png)

### What of the following designates MoarVM optimizations?
![Spesn and JIT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxtcyyzqke9bh8f6dqnf.png)

### What is the meaning of NQP?
![NQP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nst7eruiuk07c00l7l5w.png)

### Which was not an early Raku implementation?
![Emerald](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtl4w9lmr42tn6m1cunm.png)

### What is not true about MoarVM?
![Ref count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltqrrp0sc9jlrmtotujq.png)

### What is not a Rakudo feature?
![Continuation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tazyimh5xxefnaduc9k.png)