teleren/devto huggingface dataset:
Mocking components in Jest
Tags: testing, javascript, typescript, react
Published: 2020-12-08 18:23:44

[Mocking](https://jestjs.io/docs/en/mock-functions) React components and modules is something I find myself doing often in [Jest](https://jestjs.io/en/). I’m instinctively weary of mocks, test doubles can create a false sense of security if misused, but they are incredibly important when dealing with third party libraries and "Inner-Source" packages, whilst avoiding the indirection and complexity of other techniques such as Dependency Injection. I don’t personally believe that mocking/patching in anyway compromises a clean architecture.

Below is a common mock in the codebase I'm working on. [Next.js links](https://nextjs.org/docs/api-reference/next/link) will fail with an TypeError without a RouterContext. Either we add the router or mock the component, the latter seems easiest and prevents the test from knowing too much about what's needed underneath.

```typescript
jest.mock('next/link', () => ({ children }: { children: JSX.Element }) => children); 
```

Of course that'll work on any component import. 

Unfortunately if you want to return some JSX in the mock the [react/display-name](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md) ESlint rule will kick in. We can ignore the rule or perhaps define the mock like this:

```typescript
jest.mock('../module', () => function Named() { return <div />; });
```

Oh, and named exports?  The above examples show default exports.  The example below takes [Stripe's CardElement](https://stripe.com/docs/stripe-js/react#available-element-components) and return a no-op component.

```typescript
jest.mock('@stripe/react-stripe-js', () => ({ CardElement: () => null }));
```
Don't git pull, use git pull --rebase instead
Tags: git
Published: 2020-12-08 18:38:26

---
description: Use git pull --rebase to keep a tidy commit history.
canonical_url: https://blog.manos-liakos.dev/rebase-vs-pull/
---

Here is another quick post about a neat thing I recently learned.

## Git pull

What `git pull` will actually do behind the scenes, is `git fetch & git merge`. It will fetch changes from the remote and create **a new _merge_ commit**.

## Git pull --rebase

What `git pull --rebase` will do, is `git fetch & git rebase`, effectively **reapplying our local changes on top of the remote changes**, resulting in a tidy, linear commit history, like this:

![rebased_history_line](https://dev-to-uploads.s3.amazonaws.com/i/gj7k0c95afqw2lhrlnd4.png)

## Quick tips

**Tip #1:** Use `git config --global pull.rebase true` to avoid typing the `--rebase` flag each time you pull 🧐

**Tip #2:** Don't forget that you can do all sorts of editing to your commits, before pushing them by using **interactive rebase**.

```shell
git rebase -i
```

You can check more about this in my [other post](https://blog.manos-liakos.dev/git-commands/) about useful git commands.

**Warning: Use rebase only on local branches, as it rewrites commit history (creates new commits)!**
GitHub dark mode, isn't it amazing?
Tags: github, git
Published: 2020-12-08 18:14:34

Now, you can choose between Defaul to system, Light and Dark themes:

![Theme](https://dev-to-uploads.s3.amazonaws.com/i/1oa6cpj6n7r8jzq37tcu.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4z35qh0689ywwurbbj6i.PNG)

Did you discover the dark mode too?
Quick-starting an AWS Serverless Framework Project
Tags: serverless, node, aws, tutorial
Published: 2020-12-08 18:05:27

Step -1: Download Node.JS to your computer

Step 0: Download Serverless Framework CLI via `npm`:

```bash
npm i -g serverless
```

Step 1: Setup AWS Credentials to your Serverless CLI:
```bash
sls config credentials --provider aws --key YOURKEY --secret YOURSECRETKEY
```
> In order to access your key and your secret key, you must log in to AWS console and navigate to [IAM Management](https://console.aws.amazon.com/iam/home?region=us-east-1#/home) and click on **Users**. Create a user, allow **programmatic** access, attach an existing policy called `AdministratorAccess` to it, and then click on your recently created User. Navigate to **Security Credentials**, click on **Create access key**, and take note of the two values, especially the secret key as you won't be able to visualize it again.

Step 2: Create a project setting a template and a path. A list of templates (along with many of the information I am providing here) can be found [here](https://www.serverless.com/framework/docs/providers/aws/cli-reference/create/):
```bash
sls create --template aws-nodejs-typescript --path project-name
```
> This will generate a NodeJS project with a `package.json` file, `handler.ts`, which contains a sample lambda function, and `serverless.yml`, which contains configuration to the AWS services we might want to set.

Step 3: Navigate to your newly created project and install the libraries listed on `package.json`:
```bash
cd project-name && npm i
```

Step 4: Install some developing tools to improve your experience. I recommend the following:
```bash
npm i -D prettier serverless-offline serverless-dotenv-plugin
```
> [Prettier](https://prettier.io/) is a very well known opinative code formatted; [Serverless Offline](https://github.com/dherault/serverless-offline) is a package that emulates AWS API Gateway and Lambda on your local machine, which facilitates **a lot** the development cycle, testing, and debugging; [Serverless DotENV](https://github.com/colynb/serverless-dotenv-plugin) allows us to store environment variables in a `.env` file and access its values in our code and `serverless.yml` file.

Step 4.1: In case you opted to install at least one of the serverless plugins I mentioned before, add them to your `serverless.yml` plugins list:
```yaml
plugins:
  - serverless-webpack # This one should be already there for the template I used here
  - serverless-offline
  - serverless-dotenv-plugin
```

Step 5: Make sure everything is working correctly by launching `serverless offline` in your `localhost`:
```bash
sls offline
```
And, in another shell session:
```bash
curl http://localhost:3000/dev/hello
```

If this command prints a JSON response to your console, you're good to start developing :smile:
Going From Infrastructure to Developer Is A Reality
Tags: infrastructure, developer, 100daysofcode, cloud
Published: 2020-12-08 17:48:45

If you look at conferences from say, five years ago to now, it's changed drastically. There's no more talk about operating systems or server versions. Instead, it's all about "the cloud" and "development". Conferences like:

1. MS Build

2. AWS re-invent

3. MS Ignite

and even smaller conferences/meetups.

What does this mean for infrastructure people?

Well, here's the thing... it's exactly what we've always seen in tech, a transition. The same transition as when bare-metal server folks had to start thinking about virtualization. It's just another shift. The biggest difference is this shift is happening pretty fast.

It also kind of feels like the standard sysadmin/infrastructure engineer is being pushed to the side, which may be the reality. However, this reality isn't a death sentence. It's an opportunity. Let me explain why.

When people think of a "developer", they automatically think to be a developer you have to build the next Twitter or some other crazy app. The simple fact is, that's not the case. You can be an infrastructure developer or a cloud developer that writes code for cloud servers or on-prem environments.

The problem with the explanations we see today is no one is actually explaining HOW a sysadmin or infrastructure engineer can move into a developer role and STILL BE an infrastructure guy or gal. No one is explaining what concepts an infrastructure person needs to know to be a developer. A few of these concepts are:

- Computer science concepts like declarative/imperative or pointers.

- Testing (unit, mock, integration, etc.) infrastructure code

- Source control. Not only GitHub, but a little history like distributed vs centralized source control

- What sprints are and different types of cultural working environments

- CICD for infrastructure

- Code editors and IDEs

There's definitely more concepts, but I think these are the core focuses.

I recently created a YouTube video about this and I'm going to start a little series on this. Let me know your thoughts :)

https://www.youtube.com/watch?v=u-0T-JN0GZc
DESIGN PRINCIPLE VS DESIGN PATTERN 
Published: 2020-12-08 17:48:25



Design principle and design pattern are not the same in software engineering.

Design Pattern
Design Pattern provides a solutions related to implementation, of commonly occurring object oriented problems. That is to say, design pattern offers a specific implementation for the specific object oriented programming problem. For example, if you want to create a class that can only have one object at a time, then you can use the Singleton design pattern which suggests the best way to create a class that can only have one object.

Example : MVC,MVVM,MVP,Abstract Factory, Factory, Singleton, Command, etc.

Design Principle
Design principles provide a guidelines to design better software applications. They do not provide implementation guidelines and are not bound to any programming language. The SOLID (SRP, OCP, LSP, ISP, DIP) principles are one of the most popular sets of design principles.

For example, the Single Responsibility Principle (SRP) suggests that a class should have only one reason to change. This is a high-level statement which we can keep in mind while designing or creating classes for our application. SRP does not provide specific implementation steps but it's up to you how you implement SRP in your application.
P2P on steroids - Meet Surge
Tags: productivity, security, filesharing, p2p
Published: 2020-12-08 17:29:06

Surge is a new alternative to Bit Torrent, claiming to be 100% secure, 100% decentralized, and 100% anonymous. And the client and network are both 100% open sourced and owned by the community: so full transparency and no adware or malware. It has a modern and sleek user interface, and very fast in downloading large files across the globe. Please give it a try! :-)

https://surge.rule110.io/
Video Chat 📹 | What's New in Vue 3 and How to Learn Vue js in 2021 with Chris Dixon
Tags: vue, webdev, javascript, beginners
Published: 2020-12-08 17:10:54

---
title: Video Chat 📹 | What's New in Vue 3 and How to Learn Vue js in 2021 with Chris Dixon
published: true
description: What's New in Vue 3 and How to Learn Vue js in 2021 with Chris Dixon podcast style discussion
tags: vue, webdevelopment, javascript, beginners
cover_image: https://i.imgur.com/PV4I7f7.gif
---

I get bullied by Vue-ers all the time about not writing Vue so Chris is here to educate me! 

In this episode, I talk to Chris Dixon from https://chrisdixon.dev/ all about learning Vue, what's new in Vue 3 and his brand new Vue 3 course.

Vue.js is an approachable, flexible, maintainable, and testable JavaScript framework. If you have an existing application you can use Vue without rewriting your entire application. 

{% youtube FOXlcTd6Itk %}

Check out Chris's course here:
🔗  https://chrisdixon.dev/courses/vue-3/

Free JavaScript Projects by Chris:
🔗  https://fun-javascript-projects.com/

Follow Chris on Twitter:
🔗  https://twitter.com/chrisdixon161

Join the Codú Community Discord:
🔗   https://discord.gg/FvunZdr

---

[Follow me on Twitter](https://twitter.com/nialljoemaher)

Subscribe on [Codú Community](https://www.youtube.com/c/Cod%C3%BACommunity)
Why should we draw a wireframe?
Tags: devjournal, writing, webdev
Published: 2020-12-08 17:06:34

More often than not, we jump to our keyboards and start writing code the moment we are assigned a new task or decide to work on a project. However, when we give in to our temptations or passions, we steal ourselves the possibility of designing our best solutions and become too vulnerable to reworks and impacting bad decisions. That's why this time I dropped on to Figma to think about the UI and the application's flow before writing anything.

The two interactions I decided are core consist of:

1- User opens application :point_right: User checks today's fixtures :point_right: User clicks on a fixture :point_right: User places a bet;

2- User opens application :point_right: User checks last bets and current balance.

With these in mind, let's talk about what is a wireframe and why we should consider them an ally.

Imagine start building a house or manufacturing a car without a proper blueprint to guide actions and track progress. It would surely be a mess. Wireframes are very simple sketches that illustrate behaviors and features and a tool that keeps us on the line.

After this text, I hope it is clear why we should give it at least a try and compare our results to some other project we might have done simply coding a solution.

## To the actual wireframe

As I mentioned before, I used [Figma](https://www.figma.com/) to sketch the wireframe. There are other tools to achieve similar results, including simply using pen and paper. I wasn't fully prepared to leave the computer completely behind so a software tool such as Figma (which is free), with plenty of online material to learn, was the go-to.

To help me to work quicker, I downloaded a set of components on Figma called "Material UI kit". It is simply a collection of UI components such as Cards, Form controls, and Buttons based on Google's Material Design. There is a paid version with even more elements.

It is important to mention too that there are levels of wireframes, going from the low-level fidelity (the furthest from the final product) to the high-level fidelity. I chose to stay in the middle but a little towards the high end simply because I do not have much design skills and wanted to get this done fast.

Here's my final navigable prototype:

![It ain't pretty but does the job](https://dev-to-uploads.s3.amazonaws.com/i/83v80oaq41ezebmj1zq8.png)
It ain't pretty but does the job

In the next post, I'll start analyzing the API data structure and writing some backend code to schedule some cron jobs in order to retrieve data on a daily basis.
Neo4j Sandbox for easy graph database startup
Tags: neo4j
Published: 2020-12-08 17:01:03

TLDR: [The neo4j sandbox](sandbox.neo4j.com) is a super quick and easy way to get started on exploring graph databases.

When I moved to a team using a Neo4j database, I was fortunate enough to have a couple experts around to help me set it up and walk me through the basics.

One of them pointed me to the Neo4j sandbox website where you can quickly start up a project without having to install anything, and they even have a handful of pre-built projects with tutorials to teach you the ins and outs of Neo4j and its query language, Cypher. 
 
In fact, I just discovered a Recommendation project in the sandbox that they must have added since I was last there, so if you'll please excuse me, I have some graphs to database.
Advantage of  React Native Debug
Published: 2020-12-08 17:00:52

One of the advantages of using react native is the use of dev mode build, the build access the js bundle from your local device. 

In case of device being used in local network we can access the said bundle using a shake gesture and addressing the proper ip address and port i.e. usually 8081.

Say we have a project where you are working on a specific feature and would require another person to see the progress of the said feature, we can achieve this by hosting the js bundle across the internet. Note: if any module/library that uses native module is added we must have a updated build.

Firstly create a tmpDir folder in root then we generate the js bundle.

ios: 
```bash
yarn react-native bundle --platform ios --dev false --entry-file index.js --bundle-output tmpDir/index.ios.bundle.js --assets-dest tmpDir
```
android: 
```bash
yarn react-native bundle --platform android --dev false --entry-file index.js --bundle-output tmpDir/index.bundle
```

Now we host the said directory. And after that it is same as using a local network, shake and update the build access point. Android and iOS will auto detect the js bundle they require.
What is CSS?
Tags: codenewbie, 100daysofcode, webdev, css
Published: 2020-12-08 17:00:05

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.


In this tutorial, you will learn about  CSS introduction in CSS 3 in Hindi and Urdu. This CSS intro tutorial by Toqeer Abbas. If you like this CSS intro tutorial then subscribe to this channel and feel free to ask and comment below this video.

https://youtu.be/BhRekLm9k6E
Arrow functions: All you need to know!
Tags: javascript, webdev, 100daysofcode
Published: 2020-12-08 16:59:17

An arrow function is an alternative to a traditional function expression, but is limited and can't be used in all situations.

> Syntax of an arrow function
```javascript
const foo = (arg1, arg2, ..., argN) => expression
```

## Some examples:

> ## Add two numbers

```javascript
// Arrow function
const addArrow = (number1, number 2) => number1 + number2

// Traditional function
let addTraditional = function(a, b) {
  return a + b;
};

console.log(addArrow(5 , 7)) // 12
console.log(addTraditional(5 , 7)) // 12
```

> ## Multiline functions

We have to add curly braces if there is more than 1 line in a function.

```javascript
let add = (number1, number2) => {  // the curly brace opens a multiline function
    let result = number1 + number2;
    return result; // if we use curly braces, then we need an explicit "return"
};
```

> ## One argument function
If only one argument is passed through the function, the braces can be omitted.

```javascript
let add = number => number + 10

console.log(add(5)) // 15
```

## Limitations of arrow functions:

+ Does not have its own bindings to this or super, and should not be used as methods.
+ Does not have arguments or new .target keywords.
+ Not suitable for call, apply, and bind methods, which generally rely on establishing a scope.
+ Can not be used as constructors.
+ Can not use yield, within its body.

I have mentioned the surface level facts of arrow functions. For more information visit the official arrow function [doccumentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) of MDN.
The Pomodoro Method hacks how you define your tasks
Tags: productivity
Published: 2020-12-08 16:55:41

Do you know the Pomodoro Method? Here's a quick slice of the benefits hidden behind its rituals.

## It's hard to define tasks in the right way.

You'll find this advice everywhere:

> Only define goals and tasks you have control over.

Tasks that you don't have control over are productivity killers.

For example: "get a positive answer to proposal X," "get thousands of followers," "finish project in time."

These goals mess with your definition of done.

The world is moving around you, and it's hard to achieve something and get a feeling of progress if it depends more on the rest of the world than on your actions.

That's why I like the Pomodoro Method: When you start using it, it'll force you to add a subtle layer of Pomodoro on top of each task.

## The Pomodoro Method redefines how you measure success

Your task list for today might resemble something like that:

![tricky task list](https://dev-to-uploads.s3.amazonaws.com/i/zkza3hrzcfe8bcerrfq9.png)

How many of these depend on something external?

What happens when the requirements for Project A change and you have to start over? Do you need to wait for another document before replying to Arthur? Or what if the complexity of the issue you were working on explodes and you need to make three more decisions before finishing your job?

On some days, I might end up with **zero** tasks completed. Even after seven, eight, or ten hours in front of a computer. This is exhausting.

At the end of the day, I might have completed ZERO tasks. But when I apply the Pomodoro Method, I still have feedback of the time I spent pushing things forward anyway:

![task list redefined](https://dev-to-uploads.s3.amazonaws.com/i/kw6e9wckbd79an2y7kwf.png)

That would be a fantastic day. These Xs mean that I completed fourteen sessions of 30 minutes of deep focus. That's 7 hours of work. And these two C mean that I slid out of focus only twice during the day.

## I can tell how much progress I made with the Pomodoro Method, even if I couldn't complete any task.

That's where the Pomodoro Method is ingenious. It adds a subtle layer where "a deep focus session" is a success in itself.

The one thing you have control over, your focus, becomes the real subject of most tasks. And with the Pomodoro "layer", you have a metric of success that tells you if you've been focused and lets you ask, "should I change something in my workflow?."

This method is crucial to me; I'm trying to have more people use it "the right way." That's why I published an [interactive step-by-step guide](https://tickingfocus.com/pomodoro-technique/pomodoro-method-guide/) on my website. I'd love to know if this helped you in the comments.
Golang basic: Variable and data type
Tags: go, tutorial
Published: 2020-12-08 14:32:35

variable is a container of value, what type value of you want to assign is data type. golang is static typing that mean you have to ensure what type actually you want to assign to the variable.

## Data type Go
There is several data types
* int 
* string
* bool 

**int** is data type numeric the value is number without floating point like -90,89,...,0,89,90. 

**string** is data type text the value is text and phrase or word like "Steve", "Hello World", "I love learning golang".

**bool** is data type logic containt just 2 variant value `true` or `false`.

## Declare variable
There is two way to create variable
``` golang
package main

import "fmt"

func main() {
    var name string
    var age int
    var graduates bool

    name = "Linda"
    age = 24
    graduates = false

    fmt.Printf("%s and i %d years old", name, age)
    fmt.Println(graduates)
   
    // OR
    name1 := "Linda"
    fmt.Println(name1)
}
```
The first way, declare first variable `name` using key `var` and following `string` as data type so the format is look like.
`var variable_name <data_type>`

The second one is using `:=` to declare variable and assign value, data type will follow the value. From the example we assign "Linda" so variable `name1` will have string data type. 

Symbol `:=` just can be using once, you will get error if you using it at the same variable name. So if you want to change value of `name1` just write `name = "Linda changed"`
``` golang
package main

import "fmt"

func main() {
    name1 := "Linda" // Will set variable name1 as string 
    fmt.Println(name1)

    name1 = "Linda changed"
    fmt.Println(name1)
}
```

Go is static typing, `int` value can't assign to variable `name1` cause `name1` as `string`, it will show you compiler error.

``` golang
package main

import "fmt"

func main() {
    name1 := "Linda"
    name1 = 1
    // Compiler error
    fmt.Println(name)
}
```

All variable that you have declared have to use, if there is a variable that never use, it will get out error compiler
``` golang
package main

import "fmt"

func main(){
    name := "Steve"
    age := 17
    married := false

    fmt.Println(name)
    fmt.Println(age)
}
```
It will show you error because the variable `married` never been used. Not only variable the rule is same with package, if you import package for example `fmt`, you have use it or you can get error compiler.

## Conclusion
We have knew how to create variable and data type so now you can specify what kind of data type you need.


Question: 
Why we assign `age` as int why not string?