teleren/devto huggingface dataset:
Configurando Teste Unitário no VueJS + Jest
Tags: javascript, vue, testing
Published: 2022-01-17 19:03:07

**1. Adicione Jest ao seu projeto**
Rode o seguinte comando dentro do diretório de seu projeto
```powershell
vue add unit-jest
```
**2. Scripts**
Para rodar os testes adicione os seguintes comandos nos Scripts de seu _package.json_

``` javascript
"test:unit": "vue-cli-service test:unit",
"test:watchAll": "jest --verbose --watchAll",
```
**3. Configure as Extensões que seus módulos usarão**
Adicione em seu _package.json_
```javascript
"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
}
```
**4. Mapear os caminhos**
Adicione os mapeamentos que precisar na opção **moduleNameMapper** em seu _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. Ignorar arquivos**
Em seu _jest.config.js_ a opção **transformIgnorePatterns** ignorará todo tipo de arquivo que coincidir com o padrão regexp. Como por exemplo:
```javascript
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',``
  transformIgnorePatterns: ['/node_modules/(?!vee-validate/dist/rules)'],
}
```
Case Study: Generating high-quality synthetic time-series data for a top 5 global bank
Tags: machinelearning, datascience, privacy, showdev
Published: 2022-01-17 19:02:17

How Gretel.ai generated high-quality synthetic time-series data for one of the largest financial institutions in the world.

Developers can test the methods by following along with the 3-step process outlined in the post!

{% twitter 1483140605698088964 %}
Baloonza IT newsletters weekly digest #20
Tags: webdev, javascript, css, database
Published: 2022-01-17 18:53:18



#### GraphQL Weekly
- [GraphQL Weekly - Issue 262](https://app.baloonza.com/issues/11432?baloon_issue_id=22)

 - What’s new in the latest GraphQL spec

#### CSS Weekly
- [Issue #488: Writing Better CSS, New Features in 2022](https://app.baloonza.com/issues/11600?baloon_issue_id=22)

 - CSS in 2022
 - Container Query Polyfill

#### Frontend Focus
- [Gradients](https://app.baloonza.com/issues/11605?baloon_issue_id=22)

 - Why Are Hyperlinks Blue, Revisited 
 - A Unified Theory of Web Performance

#### Awesome React Newsletter
- [💻 Issue 213 - 10 Frameworks Software Developers can learn in 2022](https://app.baloonza.com/issues/11670?baloon_issue_id=22)

 - The React Cheatsheet for 2021‬ 
 - Event Capturing and Bubbling explained in React

#### Awesome Javascript Newsletter
- [💻 Issue 295 - Discontinued Long Term Support for AngularJS](https://app.baloonza.com/issues/11667?baloon_issue_id=22)

 - <canvas> based equalizer
 - Axios Cache Interceptor
 - Why you should pin your npm/yarn dependencies

#### Hacker Newsletter
- [Hacker Newsletter #586](https://app.baloonza.com/issues/11690?baloon_issue_id=22)
 - First Impressions of Web3
 - Make the “semantic web” web 3.0 again – with the help of SQLite
 - I made a grid based font editor and font
 - Iconoir – An Open-Source SVG Icons Library
 - Cryptoland

#### CSS Animation Weekly
- [CSS Animation Weekly #283](https://app.baloonza.com/issues/11493?baloon_issue_id=22)
 - Building a Scrollable and Draggable Timeline with GSAP - Codrops
 - Adam Argyle's Sick Mouse-Out CSS Hover Effect
 - ScrollTrigger: SVG Text Mask

#### CSS-Tricks
- [📝 [CSS-Tricks] 285: The Year of the Container Query](https://app.baloonza.com/issues/11515?baloon_issue_id=22)

 - Container Query
 - The UI Fund
 - CSS Underlines Are Too Thin and Too Low in Chrome

#### Frontend Weekly
- [Frontend Weekly - Issue 288](https://app.baloonza.com/issues/11593?baloon_issue_id=22)

 - Top 10 PHP 8.1 Features You Should Start Using Now
 - Save User Data Without Cookies
 - Pagination in JavaScript and React, with a custom usePagination() hook

#### Data Science Weekly Newsletter
- [Data Science Weekly - Issue 425](https://app.baloonza.com/issues/11681?baloon_issue_id=22)

 - Red flags to look out for when considering whether to join a data / tech team
 - XManager: A framework for managing machine learning experiments
 - Why Google Treats SQL Like Code and You Should Too
Significance of Website Design and Development in Today's Business

Published: 2022-01-17 18:47:53

All businesses today, in addition to their activities, are required to advertise on the Internet. Proper management of a website by IT professionals can offer many benefits to the business. These benefits are usually combined with the market share of the company and its brand name. But what does this mean? Winning the battle of the Internet between the other websites, automatically improves the image and reputation of the company, thus increasing its customer base.

Companies that are dominant in the industry make the most of the possibilities of their website by providing their audience with useful information. But why aren't companies investing in Internet technologies achieving the same goal? The answer to this question is multifaceted. On the one hand there is no well-organized strategic plan for digital promotion. And on the other hand digital promotion is not focused on the website but on other means. This phenomenon greatly affects the image of the company because although it tries to promote itself it does not do it right.
Consult [web development agency Toronto](https://brandreshape.ca/web-development-services/) or experts in the field of web design.

A company to properly and effectively promote its actions must:
Build its official website.
Focus only on the digital promotion of the website.
Advertise on all its channels.
Create smart ads and promotions and promote them through the website.

## Why is it Important to Create Easy-To-Use Website?
An easy-to-use website is all a customer needs. Below are the detailed reasons:

## Clean Layout and Structure
A clean and professional website is well organized, structured and accessible. Its design focuses on the targeted audience and visitors should have an easy, effortless and enjoyable experience.

## Simple Navigation Design
The navigation structure (menu) of the website should be clean and simple. Visitors need to find what they need easily and quickly and browse the web without having to wander and get annoyed until they find what they are looking for.

## Original Content
The content of the website should be unique, original, and attractive, focused on the needs of visitors and evoke emotions.

## Beautiful Design
The great design makes a big impression and makes visitors want to check out the rest of the website. That’s why it is highly recommended to consider web development agency Toronto or an expert individual to help you get your website.
In short, a user-friendly website catches the attention of visitors, evokes their emotions and easily gives them what they need.
_document.js error from ctx.renderPage().
Tags: javascript, programming, react, node
Published: 2022-01-17 18:34:02

Hi,
While trying to apply Material-ui styles into a Next app, I am getting error from  the _document.js file, in the ctx.renderPage( ) function
 Below is error log output-
----->
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The error results from this function -->
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},

I would grateful for all useful advice 
Thanks
GitHub Stars lists [template]
Published: 2022-01-17 18:21:31

Github repository [lists](https://docs.github.com/en/get-started/exploring-projects-on-github/saving-repositories-with-stars#organizing-starred-repositories-with-lists) example template

| Name | Description |
| -- | -- |
| ✨ Inspiration | A good example, or templates I can build upon |
| 📚 Learn | workshops, tutorials, and examples |
| 🔮 Future Ideas | Things explore in the far future, repository that intriguing but do not know whether I could ever be working on them.|
| 🚀 My stack | Technology or tools that I use. Include implicit dependencies. |
| ⌚ Standards | Guidelines, standards, codes of practice, RFC, Roadmaps, discussion or working groups. |
3 Neat toString() Tricks in JavaScript
Tags: javascript
Published: 2022-01-17 18:20:06

Most JavaScript objects and primitive values have a [`toString()`](https://masteringjs.io/tutorials/fundamentals/tostring) function that converts the value to a string. Different values have different `toString()` methods, and some `toString()` methods have cool surprises. Here's 3:

1) Numbers have a `toString()` function that supports different bases

Converting [decimal to binary](https://masteringjs.io/tutorials/fundamentals/decimal-to-binary) in JavaScript is easy, because JavaScript numbers have a `toString()` function that takes a `radix` parameter that specifies which base to use.

```javascript
let x = 42;

x.toString(2); // '101010'

x.toString(16); // '2a', hexadecimal!
```

2) Encode data as base64 using [Node.js Buffers](https://masteringjs.io/tutorials/node/buffer)

[Node buffers have a `toString()` function](https://masteringjs.io/tutorials/node/buffer-to-string) that takes an encoding parameter. Calling `toString('base64')` converts the buffer into a base64 string, which is handy if you need to convert a file into base64 for email attachments.

```javascript
const fs = require('fs');

const buf = fs.readFileSync('./package.json');
buf.toString('base64'); // 'ewogICJuYW1lIjog...'
```

3) Custom Tags for Objects

Objects' `toString()` is not very useful by default: the output is just `[object Object]`. However, you can make this output slightly more useful by setting the object's `Symbol.toStringTag`:

```javascript
const obj = {};

obj[Symbol.toStringTag] = 'Test';
obj.toString(); // '[object Test]'
```
Host your website on GitHub Pages
Tags: tutorial, github, webdev, beginners
Published: 2022-01-17 18:17:09

Did you know that you can host a website on GitHub, for free ?

No ? Then let me show you.

You need to create a repository that has the following name :

![yourUsername.github.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhfjda1f3h2c4j2baux0.png)
for me this would be lachouri.github.io, and make it public. 

Then, simply to test it, I am going to create an index.html file with a bit of code and I will push it on github.

![Simple bit of code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpcepm4bvq1csgulrmki.PNG)

- Then initialize the repo with `git init`
- Create a commit with `git add .`  and `git commit -m "First commit" `
- Create the main branch with `git branch -M main`
- Link your local repo to the git repository with `git remote add origin https://github.com/yourUsername/yourRepo `
- Finally push with `git push -u origin main`

Wait for a minute or so, and go to the following url : https://yourUsername.github.io and 🎉 your website appears.


![Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j553fcwtp8clx9gh618n.png)

---


Originally posted on my [blog](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.
Basic Async Await
Tags: javascript, programming, tutorial, react
Published: 2022-01-17 18:15:15

Async-await
when we need to work with multiple promise its very complex for handaling.And we need to use nested callback that is not easy to read and we need to use then for going the next step , That's situation called callback hell. But Async and await work more friendly , when ASYNC keyword use in a   function its change the function behaviours and await control order multiple promise.If we are use async , await with promise we do not need to use then , we can fix and get the error message using with try catch syste.

```javascript
var promise1 = new Promise((resolve, reject) => {
   setTimeout(() => {
      if(true) {
         resolve('Promise 1 Resolved');
      } else {
         reject('Promise 1 Error');
      }
   }, 5000)
 })

 async function hello(){
   var data = await promise1;
console.log(data);
}
hello();
```
Backend Weapons
Published: 2021-12-23 17:35:04


**MongoDB database**
MongoDB is an open source and NoSQL database management program. For a javaScript developer MongoDB is the best NoSQL database platform because MongoDB store data as json file that is very easy to convert.

**Why MongoDB:** MongoDB stores data as json file. We know that it is very easy to convert json file to a javaScript object. For a JavaScript Developer  MongoDB is more easier then other databases. MongoDB give more flexibility to the react developer. Node js, react MongoDB is the best combination to development full stack project. So There is no best pair except MongoDB and Node js. In react component it is also more flexible and easy to understand .
**MongoDB CRUD Operations**: 
CRUD Operation included 4 important backend operation 
Create, Read , Update, and Delete


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56rs40yto5dap8wehpg7.png)
**Create Operation :** Create operation stand for insert new document in collection, If the document  does not currently exist, insert operations will create the new  collection.
db.collection.insertOne()
db.collection.insertMany()

**Read Operation :** Read operation read the data from collection . For collecting data need implement get method. MongoDB Provide the following method to read collection data
db.collection.findOne()
db.collection.find()

**Update Operation :** Update operation make update existing data from collection . MongoDB provide the following method to update a document 
db.collection.updateOne()
db.collection.updateMany() 
db.collection.replaceOne() 




**Delete operation:** Delete operation apply for delete stored data from mongoDB database. Following methods provide mongoDB to delete data 
db.collection.deleteOne() 
db.collection.deleteMany() 
**Mongoose**
Mongoose is a JavaScript object-oriented programming library that make  connection between MongoDB and the Express web application framework.

**NodeJs**
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
Black Jack Game with terminal graphics
Tags: beginners, python
Published: 2022-01-17 18:04:11

A final project for the code academy cs101 course. 


The code is probably a bit messy and there are some things I'd like to clean up and add in the future, but its a good starting point for me I think. 

https://github.com/ProSweeper/python-project/blob/main/main.py
 
![Photo of the terminal graphics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixpi75k5zufj3sodvyms.png)
Day 1 of my twilo Quest
Tags: twilio, webdev, beginners, programming
Published: 2022-01-17 17:55:35

##Intro 
In today's world the gaming is something that we love the most. Almost all of us love to play games in our free time, might be for fun. Not only that people are earning in millions from Gaming and streaming online, keeping these things in minds @twiliodevs have made a game named the Twilio Quest where you can learn to code in languages like JavaScript & Python, learn contributing to open source and about Twilio API. This game is free of cost one can download it from https://www.twilio.com/quest . This game is available for Windows, Mac and Linux Operating Systems. It is light weight and having a modern UI. You can even play this game with your team and complete all the operations and earn XP points on successful completion. I will say it is a bit similar to Minecraft.

## My day 1 experience 
well, if someone asks me, I will say that I just loved this game, I loved the UI, and also the operations that teach you required coding skills one the first day I earned 1700 xp's. I got enrolled in the opensource training and loved the way the game teaches everything that you need to know before contributing to opensource, starting from git and GitHub skills like forking a repository , cloning a project to your local machine, creating a branch or setting the remote to upstream, and many more..

## protip 
 Guys if you want to join my team you can use my code 
Join Code: planet-border-beside

- just download the game setup from https://www.twilio.com/quest/-

- then run the setup and open the game 

- open settings then switch to teams and enter my code and then hit the join button 
![twillio qwest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o79cobr13sehmr68phnq.png)
 
##Conclusion
So, guys that's all for today, and make sure to hit a ❤️ if you like my work and just share this article with you peers. Stay tuned for next happy coding :)

##Connect
 <a href="https://linktr.ee/kumarkalyan">
  <img align="left" width="100px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" />
</a>
Windows 10 PuTTY Kurulumu
Tags: putty, ssh, telnet, windows
Published: 2022-01-17 15:37:23

 
Bu yazımızda Windows 10 işletim sistemi üzerinde PuTTY programının kurulumunu anlatacağız.

## PuTTY Nedir?

PuTTY, SSH bağlantısı ile birlikte uzak bir sunucuya bağlantı kurmamızı sağlayan bir yazılımdır. PuTTY ile birlikte sunucularınıza SSH/Telnet bağlantısı gerçekleştirerek erişim sağlayabilirsiniz. 

## Kurulum

Öncelikle programın yükleme dosyasını indirmemiz gerekmektedir. [Linke](https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html) tıklayarak ilgili siteye gidelim. Direkt .msi uzantılı kurulum dosyası indireceğimizden Package files kısmından işlemcimize uyumlu pakete tıklayarak indirelim.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68rsbiilhi3kktcfm6hm.png)

İlk önce Next diyerek kuruluma başlıyoruz. İlk gelen kısımda programın kurulacağı yeri seçiyoruz. Default olarak gelen yeri değiştirmeden Next diyerek devam edebiliriz. Daha sonra gelen ekranda ise istediğimiz özellikleri seçtiğimiz ekran geliyor. İşaretli yerdeki simgelerin hepsini resimdeki hale getirerek Install diyelim ve kuruluma başlayalım.

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gojrr1w4ukwdxgr9cin.png)

Kurulum tamamlandıktan sonra kurulum sihirbazını kapatarak masaüstüne gidelim. PuTTY simgesine tıklayarak programı kullanmaya başlayabiliriz.

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/we1wc0xsj9h59gwp2cm6.png)
Improve Your Problem Solving Skills Today
Tags: programming, productivity, career, beginners
Published: 2022-01-17 17:48:45

## Intro - Have a problem? Don’t Panic

As programmers we are often placed face to face with difficult problems that seem almost impossible to solve at first.

In reality, every problem has a solution, you just have to learn how to see it.

Here are some steps to follow:

### Step 1 - Be aware of your attitude

When working on something new, you need to develop and awareness of the subject. Don’t have a negative attitude and don’t say your tasks is impossible. Do this instead:

- Research your problem and start developing a plan that is split into small steps
- Keep a positive attitude even if things are not working as expected and keep searching

### Step 2 - Find your strengths and weakness

Problems can usually be broken up into many smaller tasks. If you know which parts you can handle, you will be able to put together parts of the solution. So, you will need to:

- Find ways to split your problem, this way it will no longer seem so intimidating
- Learn from past solves, and apply what you know to new problems, they might be more similar that you think

### Step 3 - If you found your weakness, work on it!

Your weakness is holding you back and you know this. Do whatever it takes to overcome it and you will be a better programmer and a better problem solver. You should:

- Try to go through a short course about your weakness, spend time improving that you lack
- See how your weakness is reflected in the problem at hand and apply what you learned

### Step 3 - Still stuck? Ask for help!

When you’ve done all, you can but still can’t find a solution, it’s not a shame to ask for help! Find someone who is senior to you, they will be happy to help. Make sure to:

- Take a note of all the solutions you’ve tried up to this point and explain them to your senior
- Think about your questions before asking them, make sure you’re able to explain the problem

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
5 Websites To Improve your Front End Skills
Tags: webdev, programming, beginners, tutorial
Published: 2022-01-17 17:40:57

I find front-end development a lot tougher than back-end development. Generally, in backend development, I know what I’m doing and how everything is interacting with each other, whether the code will run or not. But, when it comes to the front-end the whole story is different.
It is countless hours of googling, trying different things, and experimenting.

I’m not a great front-end developer. So, I decided to improve my skills and went out to find resources from where I can practice.
Learning front-end frameworks like React, Angular is well and good. But, I am more focused on developing my web design skills and my fundamentals of HTML, CSS, and JS.

After spending a lot of hours in research and diving deep into the big world of the internet, I shortlisted these 7 websites that I think are best to practice your front-end skills. These websites will take your front-end skills to a whole new level.

{%youtube qBvBzi69Wvc%}

## 1. Frontend Mentor


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

Frontend Mentor is a community-based challenges platform. You are given boilerplate codes and resources and then, you are supposed to make the website as per the requirements.
There is no rule that the website should look exactly like the sample. So, you can play around let your creativity run wild.
The barrier to entry to Frontend mentor is almost zero and anyone at any level can come to have a good challenge for himself. It features challenges from the newbie to the guru level so that there is something for everyone.
The best part about frontend mentors is that after you solve a challenge, you upload it to the community and interact with people to earn points. It is not a test, but, a learn, grow and share with others type of platform.
The way to leverage frontend masters is to participate in the community as often as you can and rather than being a perfectionist, put your work out there.

## 2. 100DaysCSS Challenge

100DaysCSS challenge is focused to drill down on your CSS skills. You will rise up to be a CSS Guru after taking up this challenge (that’s what I have heard).

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

Every day you are given a new challenge to complete and you have to create that or something similar using the same concepts. Creativity is appreciated a lot, especially in CSS communities.
You submit your solution in codepens. If you don’t know what a codepen is, it is an online code-editor tool that lets you write code in the browser and see live results as you build. I would recommend checking it out once.

Read The Complete Article Here:- https://www.epicprogrammer.com/2022/01/5-websites-to-improve-your-front-end.html