teleren/devto huggingface dataset:
Learn Cypress in 3 Hours | Full Cypress Tutorial | Cypress Automation
Published: 2022-01-19 14:45:12

{% youtube jX3v3N6oN5M %}

Cypress Testing Tutorial series for beginners and experienced QA engineers helps you understand what is Cypress testing, how to install the Cypress plugin, and set environment variables. In addition, this tutorial walks you through the Cypress Async commands, non-Async promises, get and find commands, custom commands, and much more. Further, you will learn about Cypress fixtures, Cypress Hooks, Cypress actions, and what are assertions in Cypress. By the end of this video, you will be comfortable about how to write tests with Cypress commands, and how to perform Cypress cross-browser testing on the cloud.

You will also learn 🎫 -: 
🔹What are Cypress actions?
🔹What are Cypress fixtures?
🔹What are Cypress hooks?
🔹What are Cypress mouse commands?
🔹How to perform cross browser testing on Cypress cloud Grid?
Simple Product Card In Tailwind CSS
Tags: tailwindcss, css, webdev, codenewbie
Published: 2022-01-19 14:39:54

Product card is mostly used from a selling point of view. Where you can show your product and set a value with a name. So here we made a simple product card in tailwind CSS.

In this product card, we used tailwind CSS components and grids. Also, we used responsive classes to make this section fully responsive. Here we modify some classes and tags to custom CSS properties. Also, we used font-awesome icons and images from Unsplash.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/simple-product-card-in-tailwind-css/)
Become a better Fronted Developer in 2022! 🎆
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-19 14:30:22

## Intro

No matter where you are in your software development journey, It’s always helpful to have a reference guide to help keep you on track!

A community effort by the name of [roadmap.sh](https://roadmap.sh/) has an exhaustive list of guides for multiple different paths into the software development world.


![image of the different learning paths for developers in twenty twenty two. from left to right: frontend, backend, devops, react, angular, android, python, go, java, DBA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/668vl93u040rcmfsrggs.png)
 

## Becoming a better Frontend Developer

Let’s talk about the Frontend guide!


![Image of the frontend developer roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn9pdsare0ln7iq22anu.png)
 

This guide can be broken down in to three main sections:

- Core knowledge
- Tools and frameworks
- Native

Core knowledge covers topics such as knowledge of the web, HTML, CSS and Javascript. As well as other important topics such as web security and version control.

Tools and frameworks covers things like build tools, linters, frameworks such as ReactJS and NextJS.

Lastly, the Native section covers things like mobile and desktop applications.

Learning is subjective, especially with something as nuanced as web development. However, ideally, you should aim to work through each section in order, consolidating your knowledge into projects as you go. 

This way, by the end of this roadmap, you will have an awesome skillset AND a portfolio to go along with it!

If you liked this post don't forget to hit me up on 🐦 at [brandonkpbailey](https://twitter.com/brandonkpbailey) or GitHub at [brandon-kyle-bailey](https://github.com/brandon-kyle-bailey)
Setting Up Unit Tests in VueJS + Jest
Published: 2022-01-19 14:27:23

**1. Add Jest to your project**
Run the following command inside your project directory
```powershell
vue add unit-jest
```
**2. Scripts**
To run the tests add the following commands to your _package.json_ Scripts
``` javascript
"test:unit": "vue-cli-service test:unit",
"test:watchAll": "jest --verbose --watchAll",
```
**3. Configure the extensions your modules will use**
Add in your _package.json_
```javascript
"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
}
```
**4. Mapping Paths**
Add the mappings you need in the **moduleNameMapper** option in your _jest.config.js_
```javascript
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  moduleNameMapper: {
    "@themeConfig(.*)": "<rootDir>/themeConfig.js",
    "@core/(.*)": "<rootDir>/src/@core/$1",
    "^@/(.*)$": "<rootDir>/src/$1"
  }
}
```

**5. Ignore Patterns**
In your _jest.config.js_ the **transformIgnorePatterns** option will ignore every file type that matches the regexp pattern. Like for example:
```javascript
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',``
  transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'],
}
```
Always separate app and server files !
Tags: express, javascript, webdev, beginners
Published: 2022-01-19 14:13:31

This is considered one of the best-practices of working with node/express 
Most of us we just combine them in one single file declaration like follows

```
const express = require('express');

const app = express();
app.use(express.json());
// parse requests of content-type - application/json
app.use(express.json());
// parse requests of content-type - application/x-www-form-urlencoded
app.use(express.urlencoded({ extended: true }));
const httpServer = require('http').createServer(app);

httpServer.listen(PORT, () => {
  console.log(`listening on *:${process.env.PORT}`);
});
```

## Well that's not the best we can do

**Otherwise**: Your API will be accessible for testing via HTTP calls only (slower and much harder to generate coverage reports). It probably won't be a big pleasure to maintain hundreds of lines of code in a single file.

## So what's the alternative?

The api declaration and the the network related configuration should be separated to gain us :

- testing the API in-process without having to perform the network calls
- Faster testing execution
- Getting wider coverage metrics of the code
- Allows deploying the same API under flexible and different network conditions
- Better separation of concerns and cleaner code

## How to do it ?

API declaration should reside in app.js:

```
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

```

Server network declaration, should reside in /bin/www
const app = require('../app');
const http = require('http');


```

// Get port from environment and store in Express.
const port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

// Create HTTP server.
const server = http.createServer(app);
```

And the global project structure should be like follows 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmphjg2bza7p3vx7gwjd.png)

I hope this was helpful to develop more good habits and best practices !
HTML Same Page Links
Tags: html, css
Published: 2022-01-19 14:06:14

https://heidi37.github.io/dev-playground/days/4/4.html

Today I added top navigation that links to anchors within the page. I was having a little trouble with the links as they were jumping to the correct content but the content was falling behind my header.

I found this [stackoverflow](https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header) that helped tremendously.

The bottom line was, use anchor tags, don't link to ids on existing elements. And then put an "anchor" class on those anchor tags with the following CSS applied.

```css
a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}
``` 
**day 4**
Spring Boot SwaggerUI 2 Entegrasyonu
Tags: java, spring, swagger
Published: 2022-01-19 14:04:19

**Swagger nedir?**
API methodlarının dokumante edilmesine olanak sağlayan bir rest api arayüzüdür.

**Spring Boot SwaggerUI Etegrasyonu**

**pom.xml**

```
<dependency>
	<groupId>io.springfox</groupId>
	<artifactId>springfox-swagger2</artifactId>
	<version>3.0.0</version>
</dependency>

<dependency>
	<groupId>io.springfox</groupId>
	<artifactId>springfox-swagger-ui</artifactId>
	<version>2.9.2</version>
</dependency>
```

**SpringSwaggerConfig.java**
```java
package com.app.learn_spring;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;

@Configuration
@EnableSwagger2
public class SpringSwaggerConfig {
    @Bean
    public Docket api() {
        return new Docket(DocumentationType.SWAGGER_2)
                .select()
                .apis(RequestHandlerSelectors.basePackage("com.app.learn_spring"))
                .paths(PathSelectors.any())
                .build().apiInfo(apiEndPointsInfo());

    }
    private ApiInfo apiEndPointsInfo() {
        return new ApiInfoBuilder().title("Spring Swagger API Documentation")
                .description("Spring Swagger API Documentation")
                .build();
    }
}
```

**application.properties**

```
spring.mvc.pathmatch.matching-strategy=ant-path-matcher
```

**Örnek Rest Controller**

```java
package com.app.learn_spring.controller;

import io.swagger.annotations.Api;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

@RestController
@Api(value = "CustomController Api Doc")
public class CustomController {

    @RequestMapping(value = "/post_method_example", method = RequestMethod.POST)
    public String post() {
        return "post";
    }

    @RequestMapping(value = "/get_method_example", method = RequestMethod.GET)
    public String get() {
        return "get";
    }

    @RequestMapping(value = "/put_method_example", method = RequestMethod.PUT)
    public String put() {
        return "put";
    }

    @RequestMapping(value = "/delete_method_example", method = RequestMethod.DELETE)
    public String delete() {
        return "delete";
    }
}
```

**Uygulama Görseli** (http://localhost:8080/swagger-ui.html/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xoyqh5fm5qtoezuluae5.png)
Php and mysql database hosting questions.
Published: 2022-01-19 13:14:45

Php and mysql database hosting questions.
I was using only the previous html css javascript (jQuery).

Not long ago, I learned the use of php and database by self-taught.
Write a site with php (ajax) and learn later (ajax works the same way as fetch, right? Displayed on the screen without refreshing...))) That php used to get data from the database.
I wanted to have access to my site from other devices (other networks).Therefore, the port forwarding http80 was left open to access my bitnami Apache htdoc folder.
It worked successfully and was satisfactory.
However, human greed is endless.
And security issues...
I wondered if my small, old, cracked laptop and home server (router, commonly referred to as Wi-Fi) could withstand requests from numerous devices.

So I found the keyword 'hosting' through search.
Hosting means putting a file on the hosting server (company) and the user communicates with the server, right?
You will send or refer to the data in the database through php. How can I mount php and database on different servers so that they don't come to my area (I mean this small old home Wi-Fi and laptop)? And finally, what I want to create is not a website, but an application using web technology, and I want to post it on the Google Store (in the form that the address bar is invisible to the user).
I want you to tell me free websites or technical keywords about this.
My new project is almost done!
Published: 2022-01-19 13:50:38

Hello,

My cat adoption website project is almost done.
You can see it here: https://michalgornicki.github.io/cats

You can search for your companion, browse database with filter options, browse cat profiles and get contact number to current cat owner. You can also sign up to your account. Some informations are available only for logged users. 

Functionalities in development:
1. Adding cats to favourites visible in subpage.
2. Creating new cat cards for users.
3. Replace local JSON with online database (probably in MongoDB).
4. Adjusting page for mobile users.
IDEA Plugin vo2dto
Tags: java
Published: 2022-01-19 13:34:31

一款用于帮助使用 IDEA 编写代码的研发人员，快速生成两个对象转换过程中所需要大量的 `x.set(y.get)` 代码块的插件工具.

## :sparkles: 特性

1. 2个对象的转换操作，通过复制 X x 对象，转换给 Y y 对象
2. 允许使用 lombok 对象转换、lombok 和普通对象转换，对于 serialVersionUID 属性过滤
3. 支持类继承类，全量的对象转换操作
4. 含记忆功能的弹窗选择映射关系，支持全量对象、支持匹配对象、也支持空转换，生成一组set但无get的对象
5. 支持对于引入不同包下的同名类处理

## :hammer: 使用

- 视频：[https://www.bilibili.com/video/BV13Y411h7fv](https://www.bilibili.com/video/BV13Y411h7fv) - `视频内有完整的使用介绍和插件设计` 
- 描述：你需要复制被转换 X x = new X() 中的 X x 部分，无论它是方法入参还是实例化或者是接口回值，接下来鼠标定位到转换对象 Y y 上，可以定位到`类 大Y`、或者`属性 小y`，这样我就可以知道你要做到是X的对象的属性值，转换到Y对象的属性值上。接下来帮你快速生成全部的 `y.set(x.get)` 代码片段。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s2n9l0rhzgrlxnjzxcs.png)
Javascript Closures
Published: 2022-01-19 13:24:26

JavaScript variables can belong to the local or global scope.

Global variables can be made local (private) with closures.

**Global variable**

#### A function can access all variable defined inside the function like this:-
```
 function calculateNum() {
  let a = 4;
  return a * a 
}

``` 

#### But a function can also access the variable outside of the function like this:- 

```
let i = 4; 
function calculateNum() {
return i * i
}
```

in the above example a is a global variable. 
In a webpage global variable belong to the window object.

In the first example, a is a local variable.

A local variable can only used inside the function where it is defined. it is hidden from other function they can't use them.

Global and local variables with the same name are different variables. Modifying one, does not modify the other.

## Closures Example 

```
const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

```

## Example explained 

- a variable add is assigned to the returning value of a self invoking function 

- a self invoking function only runs a once. it's sets the  counter set to(0) and return a function expression

- This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.

- This is called a JavaScript closure. It makes it possible for a function to have "private" variables.
 
- The counter is protected by the scope of the anonymous function, and can only be changed using the add function.


# A closure is a function having access to the parent scope, even after the parent function has closed
100 Days of Coding & Scrum & Holacracy #0
Tags: programming, javascript, beginners, 100daysofcode
Published: 2022-01-19 13:22:32

This is the very beginning of my 100 days coding (and more :sweat_smile:) challenge. In this post I'd like to get the overview of whole idea, who I am, where I came from and why this challenge may can help you (and me) going forward. Let's jump right into it! :fire:

So, at the beginning of this month I've joined Software House company, which is located in Poland - **Boldare** as a **Junior JavaScript Dev (React,Node)**. Previously I worked for a couple of month as a Frontend Developer, my whole programming career begun about 2 years ago.

You can learn more about Boldare at the [official website](https://www.boldare.com/).

The most curious thing for me is their work management system  which have its roots in **holacracy**. 

As a newbie in this area I'd like to explore as much as I can in the following months so I'll post daily some more insightful explanation regarding this topic.

Not only that but also I'd like to structure and consolidate my JavaScript knowledge, which special focus on backend workflow, deployment, CI/CD and more.. 

Throughout the next 100 days I'll follow Udemy course created by Stephen Grider - [Microservices with Node and React](https://www.udemy.com/course/microservices-with-node-js-and-react/). Also, I have some **follow up personal project** which is **just simple notes app** with login auth that I'd like to work on in a meantime.

The last thing I'd like to at least touch daily is Scrum. Currently I don't have the opportunity to work in any team as I'm just getting into company, many things are new to me, so I need to give me some time to grasp everything.

To learn & practice theory I've started using [Anki flashcards](https://apps.ankiweb.net/). So far it's the most efficient tool for me that follows spaced repetition learning technique.

So, will see where I can get from this point in the next 100 days. I hope anyone interesting in areas I'd like to cover may get something valuable from this series. See you tomorrow :wink:
The 32 Best Free and Paid Notion Alternatives

Tags: productivity, product, apps, remotework
Published: 2022-01-19 13:14:03

Notion is one of the most commercially successful and feature-rich productivity app on the market today. 

Notion was introduced to the world in 2016, and since then, it has amassed a cult-like following. Valued at $10 Billion, it’s fair to say that people have loved the concept of an ‘all in one workspace’. 

The reason people love Notion is because of its flexibility and versatility. Whether you want to store documents, take notes, jot down to-dos, track projects, or manage databases, Notion can do it all. 

However, it is not the only tool that makes knowledge management easy and makes you and your [remote team](https://remoteverse.com/coworking-space-management-software/) more productive.

There are many Notion alternatives out there, free and paid, that are on par or even better than Notion.

But before we jump into our list of Notion alternatives, let’s find out why do we need a Notion alternative in the first place. 

---


## Why look for a Notion Alternative? 

While Notion is feature-packed to the brim and has raving fans who swear by the product, it does come with its fair share of drawbacks. 

There could be several reasons why you may be looking for a Notion competitor:

1. The tool is a bit overwhelming. If you are a newbie, getting around a myriad of features can be a bit intimidating. (source)
2. The mobile apps are not up to the mark of what one would expect from a quality tool like Notion. (source)
3. Notion can be a bit sluggish and slow, especially when you have stored a ton of content. (source)
4. The pricing can be a bit high, especially for a large team. (source)

If you have experienced one or more problems mentioned above, don’t fret as we have handpicked a vast list of Notion alternatives that you can choose from.

---


## The 32 Best Notion Alternatives You Should Check out in 2022

Here are our picks for the best Notion alternatives you should explore:

1. Coda
2. Walling
3. Remnote
4. Evernote
5. Routine
6. MyMind
7. Notea
8. Organizedly
9. Nimbus Note
10. Dropbox Paper
11. Zengobi Curio
12. [Slite](https://remoteverse.com/free-and-paid-slite-alternatives-and-competitors/)
13. Milanote
14. Workflowy
15. Microsoft OneNote
16. Confluence
17. Notebook by Zoho
18. Tettra
19. Obsidian
20. Quip
21. Scrivener
22. Slab
23. Nuclino
24. Centered
25. Amplenote
26. Notejoy
27. Day One
28. Agenda
29. Octo
30. Supernotes
31. Dashword
32. Google Workspace

For detailed review of each tool mentioned above, check out this [post](https://remoteverse.com/notion-alternatives/).
React Js Article
Published: 2021-12-29 15:13:49

[
React Js
React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling view layers for web and mobile apps. React was created by Jordan Walke, a software engineer working for Facebook. 

JSX

JSX stands for JavaScript syntax extension. It is a JavaScript extension that allows us to describe React ’s object tree using a syntax that resembles that of an HTML template.

 React Component lifecycle 

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The three phases are: Mounting, Updating, and Unmounting.

Virtual Dom

 A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn on screen.

Custom Hook

Custom Hook is a JavaScript function which we create by ourselves, when we want to share logic between other JavaScript functions. It allows you to reuse some piece of code in several parts of your app.

Optimize a react Js application

memo() If you're using a React class component you can use the should Component Update method or a React. Pure Component class extension to prevent a component from re-rendering.
Optimizing React performance by preventing unnecessary re-renders
Use React. memo or React. Pure Component.
Make sure property values don't change.
Passing objects as props.
Using keys to avoid re-renders.
Avoid changes in the DOM tree structure.

Context Api

In a typical React application, data is passed top-down via props, but such usage can be cumbersome for certain types of props that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

The advantages of React

 Increases the application's performance with Virtual DOM.
JSX makes code easy to read and write.
It renders both on client and server side (SSR).
Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.
Easy to write unit and integration tests with tools such as Jest.


](https://drive.google.com/drive/folders/16KqB2edvkhLLiJV_KLULX6lnytKxYd8m?usp=sharing)