teleren/devto huggingface dataset:
How to Mock Luxon's DateTime.now When Using TDD
Tags: testing, javascript, tutorial, codequality
Published: 2021-06-07 19:12:24

{% twitter 1400555383391989763 %}

## When is this relevant?
Ok, here's the situation. You are maintaining a NodeJS application that depends on Luxon and you practice test-driven development. Along comes a requirement that is dependent on the current date and time. 

If you tried to use Luxon's default DateTime.now() function in your tests, you will quickly find that it's difficult to set up proper test data and assertions. This is due to the coupling between the tests and the actual current time. 

## What's the solution?
As TDD practitioners, we know it's always a good thing to fake integration points. This is true for network calls, database read/writes, and even the system clock! 

Let's dive deeper into how you can leverage Jest to fake Luxon's default DateTime.now() function so we can assert on an expected current time.

First, let's take a look at a very simple system under test (SUT).

```typescript
import { DateTime } from 'luxon';

export const doSomethingThatDependsOnDateTimeNow = () => DateTime.now();
```
Nothing special here, just a simple function that returns Luxon's `DateTime.now()` result.

Now let's dive into the unit test.
```typescript
import { DateTime, Settings } from 'luxon';
import { doSomethingThatDependsOnDateTimeNow } from './doSomethingThatDependsOnDateTimeNow';

describe('Mocking DateTime.now with Luxon', () => {
  it('should return the mock DateTime', () => {
    // Arrange
    const expectedNow = DateTime.local(2021, 6, 1, 23, 0, 0);
    Settings.now = () => expectedNow.toMillis();

    // Act 
    const actual = doSomethingThatDependsOnDateTimeNow();

    // Assert
    expect(actual).toEqual(expectedNow);
  });
});
```

A lot going on here, so let's break it down.

First, we need to import `Settings` from Luxon, which is used to configure Luxon. We also import DateTime and our system under test (SUT), `doSomethingThatDependsOnDateTimeNow`.

Next, in the arrange section of the test, we create a new DateTime for the date 6/1/2021 at 11 pm EST. Then we override the `DateTime.Now()` function by assigning a new function `Settings.now` that returns our DateTime instead of the current time.

Finally, we invoke our SUT, capture the actual result, and assert that it is equal to our DateTime value.

## Wrapping things up
Using TDD and integrating with Luxon's DateTime.now() can be a bit complex at first, but I hope this guide helps you red-green-refactor your way through your next time-based application feature.

If you found this useful, please consider following me on Twitter https://twitter.com/thealexkates
NIAGABET SITUS JUDI ONLINE TERPERCAYA & TERLENGKAP!
Published: 2021-06-07 19:05:01

Niagabet.com | situs judi online terpercaya & terlengkap se indonesia! 
link pendaftaran : www.niagabet.com/register
Menjadi member Niagabet dan raih banyak keberuntungan-Mu dan menjadi jutawan dengan mendapatkan hadiah dari bonus / promosi yang di sediakan di niagabet. 
info promosi lebih lanjut : www.niagabet.com/promotion
How to Translate a Flowchart into Pseudocode
Tags: skillcrush, computerscience
Published: 2021-06-07 18:36:57

Skillcrush students are given a chance to practice translating a flowchart into pseudocode with a challenge exercise. Skillcrush provides students with a sample flowchart that they need to practice. The only hint students are given in this challenge is to use military time along with the greater than and less than symbols.

### Solution
First, we are going to define the variables. If you look at the flowchart, it looks like you will need two variables. One is going to be grandma’s tea and the other is the time.

Grandma’s tea won’t have any value set to it, but the time variable is where the time of the day will be stored. After the variables, we will add the start and stop keywords. Then we can start adding everything we need in between these two keywords.

#### If-else statements
We are going to need if-else statements for this pseudocode so let’s start with the first if statement. First, we need to see if Grandma has asked for a cup of tea. So this statement will ask if grandma asked for a cup of tea.

If she has, this is where the user will tell us what time of day it is. We can indicate this with input time. There are different results for each time of day so we will need to nest some if-else statements in our pseudocode.

The first if statement is where we will check to see if it is morning. We can do this by saying if time < 12. After that, we will want to set the results that will happen. So we will say the computer needs to make English Breakfast tea with milk and set grandma’s tea variable to this value.

Next, let’s tackle the evening. We will create another if statement that checks if the time is greater than 16. The result of this if statement is to make spearmint tea in her evening cup. 

We will set the grandma’s tea variable to the same value. The last thing to tackle is the else statement. This is what will happen if grandma wants tea between 12 p.m. and 4 p.m. 

Here is where you will tell the computer to make Jasmine Pearl tea with honey. This is also the value we will set for grandma’s tea. All that is left to do is output grandma’s tea regardless of tea. Just backspace and write output grandma’s tea before the stop keyword.

### Finished Pseudocode
We are finally finished with the pseudocode. Here’s a sample version of what it might look like.

```
STORE Grandma's tea
STORE time AS the time of day it is

START

IF Grandma asks for a cup of tea
	INPUT time 
	IF time < 12 
		THEN make English Breakfast tea with milk 
		Grandma's tea = English Breakfast tea with milk.
	
	IF time > 16 
		THEN make Spearmint tea in her evening teacup.
		Grandma'stea = Spearmint tea in her evening teacup

	ELSE
	Make Jasmine Pearl tea with honey.
	Grandma's tea = Jasmine Pearl tea with honey.
OUTPUT grandma's tea.

STOP

```
First-week check-in for PSF, GSoC 2021
Tags: gsoc, opensource, python
Published: 2021-06-07 19:00:04

**Hi!** I'm Leo, and I'm glad to share that I was accepted into Google Summer of Code (GSoC) 2021, 
> a global program focused on bringing more student developers into open source software development. 

On May 17th I received the great news: Python Argentina, the organization I applied to, under the umbrella of Python Software Foundation (PSF), accepted me to contribute to their project titled *PyZombis*. Since then, all accepted students entered the community bonding period. For three weeks, I've been in touch with my mentors and with two other students. We have discussed the techniques of how we'll be working this GSoC, and most importantly, we have separated our initial proposals into milestones and issues in GitHub.

*PyZombis* is intended to be a MOOC to teach Python to Spanish speakers. Here is an overview of [my proposal](https://summerofcode.withgoogle.com/projects/#5193086193369088).

### What did I do this week?
So far, I've done solid progress. As I stated already, I got to know my working team and discussed everything around the project. Also, as I'm new to GitHub, I had to learn its basics. I learned about PEP8, the Style Guide for Python Code, and about a tool that checks whether my code follows those rules, named `flake8`. I learned about Playwright as well, a tool to automate tests for web apps. Now, I feel ready to start the coding period.
### What is coming up next?
Today, June 7th, the coding period starts. I'll be working for 2 months on this open source software project. These first two weeks, I'll focus on completing my first milestone: fixing existing code, adding python quizzes with unit test and adding minimal Playwright tests.
### Did I get stuck anywhere?
Indeed. My second milestone involves using Brython and the Twitter API. My mentor recomended trying to combine both by integrating [twitter-scraper](https://github.com/bisguzar/twitter-scraper) library in [Brython](https://brython.info/static_doc/en/import.html). Unfortunately, everything I have tried so far hasn't worked.
Creating a serverless API and CLI tool
Published: 2021-06-07 18:52:32

Have you ever wanted to have an image of Nicolas Cage directly from your terminal? In this post we will create an http endpoint that serves an image, and then we will build a CLI tool that accesses that endpoint. 

# Creating the API

Today we'll make a new http endpoint using Begin. To get started click the button below to create a hello world example. 

[![Deploy to Begin](https://static.begin.com/deploy-to-begin.svg)](https://begin.com/apps/create?template=https://github.com/begin-examples/node-hello-world)

To login to Begin all you need is a GitHub account. Once logged in, give your new API a cool name. Begin will create a repo and set up your CI/CD at the same time. Now each time you push to `main` your changes get deployed to a `staging` environment.

When the repo is created, go ahead and clone it and open in your favorite text editor. 

The first thing we'll change is `index.js`, change it to the following: 
```javascript
// index.js
exports.handler = async function http(req) {

  return {
    headers: {
      'content-type': 'text/html; charset=utf8',
      'cache-control': 'no-cache, no-store, must-revalidate, max-age=0, s-maxage=0'
    },
    statusCode: 200,
    body: JSON.stringify({ image: `${process.env.BEGIN_STATIC_ORIGIN}/1.jpeg`})
  }
}

```
Next, we need to create a `public` folder in the root of our application and put an image in it to be served.  

Now, we can push these changes and deploy the endpoint. Make note of the public url for your staging environment. We'll be making a GET request to it for the image from the CLI tool. 

# Creating the CLI tool
We'll create a new project called `praise-cage-cli`. 

```bash
npm init -y
```

Then go into your `package.json` and add a `bin` property. This `bin` property will give you a command to 

```
{
  "name": "praise-cage-cli",
  "version": "1.0.2",
  "description": "",
  "main": "index.js",
  "bin": {
    "praise-cage": "cli.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tiny-json-http": "^7.3.0",
  }
}
```

Create a `cli.js` file in the root and `npm install tiny-json-http` as a dependency. We will be using `tiny-json-http` to fetch the image from our API. 

`cli.js` should look like the following: 

```javascript
#!/usr/bin/env node
const tiny = require('tiny-json-http')

console.log('praise cage')
getImage()

async function getImage() {
  const result = await tiny.get({ url: 'https://light-28e-staging.begin.app' })
  console.log(result.body.image)
}
```
The URL that you need to fetch should match the one from your deployed Begin API. 

Finally, you can publish your CLI package to `npm` with `npm publish`. 

Now anyone can run the command `npx praise-cage-cli` and they will be greeted with an image of The One True Cage.
Making a Project My Own
Tags: javascript, 100daysofcode, devjournal, codenewbie
Published: 2021-06-07 18:49:39

I would't say that I'm trapped in tutorial hell, but I am working through a series of resources that are teaching me more of the ins and outs of web development. Today was a #Javascript30 day, and I decided to make the first proejct in the series—the drum kit—my own.
<!-- Excerpt End -->

For the past four years, I've been making a podcast with a friend. We chat about movies in the Criterion Correction, and we usually have a good time. It's a small program, but we enjoy it. As I was looking at the #Javascript30 drum kit, I couldn't help but wonder: how can I make this my own? How can I extend it beyond its original functionality?

Well, first I decided to get rid of the deprecated keyCode property so I'd stop seeing strikethrough lines in my code. It was a really simple fix. Turns out the property.key works quite well and...just uses letters. 

I also decided that I wanted to change up the content. Instead of a drum kit, I wanted to make a soundboard with some clips from our podcast. This was a really easy substitution—the hardest part was locating audio clips in our old files, and that was just a matter of taking the time to do it. 

The second tricky (though not very) element was making the app work on mobile devices. See, the original uses `keydown` events to trigger the sounds and the visual transitions on the page. But on a mobile device, there isn't a keyboard to use. Instead, I needed to make a good old-fashioned click event on each of the triggers for the sounds.

The biggest takeaway I need to investigate is `document.getElementsByClassName` versus `document.querySelectorAll`. I thought they'd be equivalent, but the `forEach` command that works so well on querySelector...does not work on getElementsByClass. So, that will be something I plan to investigate further.

Additionally, I need to better understand the options for the css `transform` property. I first made changes to the size of objects individually, but seeing the use of `transform: scale(1.1);` was enlightening. 

So, another day of coding down, and a fun project as the result. 

If you're interested in boosting your own JavaScript skills, check out the entire [30 Days of JavaScript](https://javascript30.com/) challenge.
Ngrok - From Localhost to Everywhere
Tags: productivity, cybersecurity, todayilearned
Published: 2021-06-07 18:45:35

Last weekend my team `c4t_fl4g.txt` participated in zh3r0 CTF and got 32nd rank overall, it was a huge achievement for our team since all the members are fairly new to the field. During this competition I came across a really cool tool, `ngrok`.

The very first impression was, where the hell was it all this time. The basic functionality of the tool is that it forwards your localhost server to the public internet, you don't need the hassle of trying to host your website on any platform. Just start your server locally and start `ngrok` for the same port and boom, you have a website on the link provided by `ngrok`.

### How to set it up
It's a single command setup. First create an account on the [official page](https://ngrok.com/). You can download the executable from the official page. Once you have downloaded the executable, just run the below command.

```
ngrok authtoken {your_authtoken}
```
*You can find you authtoken on your ngrok profile*

## Running ngrok
To run ngrok you just need to specify the protocol and the port number
```
ngrok {protocl} {port_no}
```
protocol ⇒ http, tcp, tls

To get `https` you can use its default port i.e 443.

You can also specify a custom domain that you would like for the url
```
ngrok http -subdomain=noice 4444
```

If you want to set up authentication for your tunnel then you can do that too.
```
ngrok http -auth="username:password" 8080
```

ngrok also gives you the ability to forward server that are not hosted locally. For example, if your website is hosted on 192.168.1.1 then you can forward that too.
```
ngrok http 192.168.1.1:8080
```

ngrok also provides a web interface at `127.0.0.1:4040` where you can see the requests that are being made to your server. It is quite handy when you want to analyze a request, especially when you are playing Capture the Flag competitions

## Conclusion
This tool is fantastic when you just want to share your local project with somebody. It is also quite useful for CTF players as they don't need to have a server of their own when they want to host their exploit.

*Don't be dumb on the internet*
How to Turn LOL Cat Clock Flowchart into Pseudocode
Tags: skillcrush, computerscience
Published: 2021-06-07 18:41:24

It is time to turn to the pseudocode for your LOL Cat clock. Your job is to turn your flowchart into pseudocode. Skillcrush provides students with one hint. 

There will be three variables for noon, evening, and time of day. Now that you know the variables, we are going to start putting together all the pseudocode. Put the start and stop keywords first. Then we are going to put all the pseudocode in between.

### Solution
First, we need to get the time of day. So after the start keyword, you will need to input the time of day and store it to use later in our algorithm. So we will use the input keyword to input time.

Then we will take the time and put it in a time variable. You will indicate this using the store keyword. Now we can create the variables for noon and evening.

In this example, these variables are stored in military time. So the noon variable is stored as 12 while the evening variable is stored as 18.

```
START
INPUT TIME
STORE time AS what time it is
STORE noon AS 12
STORE evening as 18
```

#### If-else statements
Now that we have our variables, we need to work on our if-else statements. In the first if statement, we want to check if it is morning. We will do this by checking to see if the time is less than noon. 

```
IF time IS LESS THAN noon THEN
OUTPUT “Good morning!”
```
If this is true, we will output “Good morning!” to the screen. What if isn’t morning? If this if statement is false, we need to check if it is evening next. 

We can do this by writing an else if statement to see if the time of day is greater than the evening value. We can do this by asking if the time value is greater than evening. If that is true, it will output “Good evening!” to the user.

```
ELSE IF time IS GREATER THAN evening THEN
OUTPUT “Good evening!”
```
Now we need to check to see if it is the afternoon. This will be the else statement in our algorithm. Here is where you will write the output “Good afternoon!” to the user.

```
ELSE
OUTPUT “Good afternoon!”
STOP
```

### Finished Pseudocode
That’s a wrap on your LOL Cat pseudocode. You now have all the pseudocode you will need to build the LOL Cat clock project. Here’s the completed version of the LOL Cat clock pseudocode with everything put together.

```
START
INPUT time 
STORE time AS what time it is
STORE noon as 12
STORE evening as 18

IF time is LESS THAN noon THEN
OUTPUT "Good morning!"

ELSE IF time is GREATER THAN evening THEN
OUTPUT "Good evening!"

ELSE
OUTPUT "Good afternoon!"
STOP
```
Day 104
Tags: 100daysofcode, programming
Published: 2021-06-07 18:40:36

Day 104/200 of #200DaysOfCode #100DaysOfCode

- Solved two problems on Codewars.

1 - Bob's Short Forms (7 kyu)
2 - Wordsearch (7 kyu)

Yesterday I was sick, I couldn't practice.  (6/6/21)
How to Make a New LOL Cat Clock Flowchart
Tags: skillcrush, computerscience
Published: 2021-06-07 18:38:47

Before we can start writing any pseudocode for the LOL Cat Clock project, you need to update your flowchart. The only guidelines you need to follow are the following items.

- You need to know what time of day it is
- You need a different message for each time of the day. So there needs to be a new message for the morning, afternoon, and evening.

### Solution 
Let’s get started. First, let’s start with a start block with an arrow. Next, we will add an input parallelogram to indicate where you will input the time of day.

Now we can start adding the decision diamonds. Put an arrow after the input parallelogram that leads to a decision diamond. Inside the diamond, this is where you will ask if it is morning. 

Put two arrows after this diamond to indicate the yes and no routes. For the yes arrow, have it lead to another parallelogram. This will output “Good morning!” to your users. 

For the no route, you will put another decision diamond which will ask if it is afternoon. This decision diamond will have two arrows indicating the yes and no routes. If it is afternoon, the yes arrow will lead to another parallelogram which will output “Good afternoon!”. 

The no arrow will lead to the final decision diamond. This is where it will ask users if it is evening. The third decision diamond will have one arrow. The yes arrow will lead to an output parallelogram which will output “Good night!” to users. 

Now it is time to stop the algorithm. In this example, we are going to stop the algorithm after the message is shown to the users. After each of the parallelograms, you will want to add arrows that lead to yellow circles. 

You will want to connect these circles with more arrows. For the middle circle, add one more arrow which will lead to the stop block.

### Finished Flowchart
Do you need to see a visual example? Here’s one version of the flowchart.

![new lolcat flowchart](https://live.staticflickr.com/65535/51229609668_36beba8477_c.jpg)
Dark mode in your app using tailwind CSS
Tags: webdev, womenintech, css, tailwindcss
Published: 2021-06-07 18:29:39

I wanted a dark mode feature in my web application and instead of writing it from scratch I just used **Tailwind CSS** dark mode, was pretty easy to use, all you need to do is enclose the entire app inside a div having class name *dark* and also in *tailwind.config.js* file, you have to enable dark mode variant.
This *class* darkMode is quite useful when one wants to manually toggle the theme from dark to light and vice versa.

``` javascript
// tailwind.config.js
module.exports = {
  darkMode: 'class',
 
}
```
``` javascript
<div className = 'dark'>
<div class="bg-white dark:bg-gray-800">
  
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...

  </p>
</div>
<div>
```
or

If one is using *media* instead of *class* in *darkMode* variant, no need to enclose the entire app inside a div having class name *dark*.

``` javascript
// tailwind.config.js
module.exports = {
  darkMode: 'media',
 
}
```
``` javascript

<div class="bg-white dark:bg-gray-800">
  
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...

  </p>
</div>

```
Don't create README files without this tool
Tags: webdev, tooling, productivity
Published: 2021-06-07 18:29:30

I think everyone has already saved some markdown cheatsheet so I could create a README file faster. 

However, sometimes it was better to have an editor to make the process of creating a ReadMe easier, more intuitive and more visual. 

For that, I will talk a little about [readme.so](https://readme.so/).

![tool](https://res.cloudinary.com/dj5iihhqv/image/upload/v1623088167/Screenshot_2021-06-07_at_18-48-24_readme_so_-_Easiest_Way_to_Create_A_README-min_jwi76u.png)

Of course markdown isn't that complicated, but with all the things we have to learn, we always end up forgetting some syntax stuff.

And for a lot of people who want to optimize the process of creating their markdown files, I think this is a great tool for that.

And even for many people who do the documentation of their projects through markdown files, having a visual tool like this helps with consistency.

![tooling](https://res.cloudinary.com/dj5iihhqv/image/upload/v1623088833/Screenshot_2021-06-07_at_18-59-29_readme_so_-_Easiest_Way_to_Create_A_README-min_lvhgb8.png)

All sections that are on the platform have the most popular structures that is usually added in a README. Examples include features, Api references, information about deployment, contribution, among others.

And of course, in addition to adding them, we can also customize each one of them. And as we make changes, we can visualize them in real time.

![final](https://res.cloudinary.com/dj5iihhqv/image/upload/v1623090049/Screenshot_2021-06-07_at_19-19-45_readme_so_-_Easiest_Way_to_Create_A_README-min_wye5qz.png)

As you can see in the image above, the way it is rendered in the preview is similar to the way the README is presented to us on Github.

And you can download the README file through the platform by clicking a simple button. It's fast, it's simple, and it works incredibly well.

## What about you?

Have you tried [readme.so](https://readme.so/)?