teleren/devto huggingface dataset:
GUI automation test with puppeteer
Tags: automation, puppeteer, gui, javascript
Published: 2020-02-13 11:07:38

---
title: GUI automation test with puppeteer
published: true
description: 
tags: #automation #puppeteer #GUI #javascript
---

In this blog, I will show you guys how to start automation test in GUI with puppeteer.

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium. 

You can checkout more information about puppeteer in [here](https://developers.google.com/web/tools/puppeteer)

1.Why puppeteer:
Puppeteer allows access to the measurement of loading and rendering times provided by the Chrome Performance Analysis tool. Puppeteer affords more control over Chrome's browsers than Selenium WebDriver offers (likely due to Google's support and sophisticated knowledge of Chrome)

You can checkout more in this [post](https://flood.io/blog/selenium-vs-puppeteer-for-test-automation-is-a-new-leader-emerging/)

2.Setup puppeteer:
Please follow this guide from [google](https://developers.google.com/web/tools/puppeteer/get-started) for how to setup using puppeteer 

3.Example project:

Imagine we need to open google chrome and navigate to google search site to search for "Blackpink" band

We need to provide these things:
- executablePath to the chrome.exe, if not puppeteer will use the default chromium
- set headless mode to false ( to see the actual implementation)
- goto the google.com site
- find the searchbox by xpath
- search the text

Below is the implement code for that:

```javascript

const puppeteer = require('puppeteer');


(async () => {
    const browser = await puppeteer.launch({headless: false,
        executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'});
    const page = await browser.newPage();
    await page.goto('https://www.google.com/');
    // Click on search box

    const searchBox = await page.$x("//input[@title]");

    if (searchBox.length > 0) {
        await searchBox[0].click();
    } else {
        throw new Error("Link not found");
    }
    await Promise.all(
        [
            await page.keyboard.type("Blackpink"),
    // Hit enter
    await page.keyboard.press('Enter'),
            await page.waitForNavigation()
]);
    browser.close();

})();


```
4. Run the test with node:

Run the command : node example.js  (As the file name is example.js)

You can checkout the source code from [github](https://github.com/cuongld2/puppeteer_get_started) as always


Notes: If you feel this blog help you and want to show the appreciation, feel free to drop by :

[<img src="https://thepracticaldev.s3.amazonaws.com/i/cno42wb8aik6o9ek1f89.png">](https://www.buymeacoffee.com/dOaeSPv
)

This will help me to contributing more valued contents.
What's wrong with computational notebooks?
Tags: datascience, notebooks, jupyter, paper
Published: 2020-02-13 11:03:43

Maybe we still don't have a definitive answer, but at least we have an [observational study](http://web.eecs.utk.edu/~azh/blog/notebookpainpoints.html). The link points to a summary page that have a link to the paper. But I'll summarize the summary below. :smile:

## Main pain-points

After observing 5 Data Scientists at work and interviewing 15 more the authors identified 9 major pain points with computational notebooks. But I'll list only a subset:

1. Setup of the notebook, libraries and data sets.
2. Exploration and visualization.
3. Writing code.
4. Version management.
5. Sharing and collaboration.
6. Reproduction and reuse.
7. Production deployment.

If you're a versed Data Scientist you're probably already either giggling or facepalming. Because the list above basically enumerates all the steps in your usual workflow and we have issues with every single one of them!

I now have a question "what's _right_ with computational notebooks?" :smile:

And yet the notebooks are indispensable for Data Analysis and present huge improvement upon traditional purely code-centric development. Still we have a lot to borrow from "the old ways" in particular advanced IDE features and integration with Version Control and Continuous Integration Systems.

The paper authors say there's a huge demand for new advanced tools integrating both IDE features and Notebook features. And I have an impression JetBrains are evaluating such an opportunity and maybe even already designing or developing a Data Science tailored IDE with Notebook features and support for R language and major libraries. :blush:

UPDATE. Apparently there's already an R language plugin for JetBrains IDEs that JetBrains now [officially support and improve](https://blog.jetbrains.com/blog/2020/02/13/update-on-r-language-support-in-intellij-based-ides/). And it indeed brings some Notebook features into a full-featured IDE experience. Yet still I think they might go for a separate Data Science-oriented IDE product.
Empty $_POST and/or $_FILES in PHP?
Tags: php, config, macos, postdata
Published: 2020-02-13 10:46:44

Hey!

I’m assuming that you’ve reached this article because you’re (probably desperate) looking for a solution to fix your issues with empty `$_POST` or `$_FILES` variables in PHP, right?

This content was originally posted on my [Medium blog](https://medium.com/abtz/empty-post-and-or-files-in-php-a1bdf1c05599).

Well, I was pretty much like you up to 2 days ago and what I can tell you is, the solution might be far simpler than what you’re thinking!

>Making a long sentence short: Check on your php.ini file if the `enable_post_data_reading` property is `On`.

The PHP relies on that property to know whether populate or not populate the `$_POST` and `$_FILES` superglobal variables.

Back to my story …

I first noticed the problem when trying to make some changes to my client’s project, an OpenCart based e-commerce. Basically, the entire store was working fine, but I couldn’t login at all, neither as a client or administrator.

After spending some days googling about OpenCart and a possible authentication issue, with any success at all, I realized that the problem could be on the PHP configuration when I remembered that my Mac OS was updated few months before, which also has made some changes to the Apache and PHP settings!

Tada~! Solution found!

Looking into the PHP ini file, I did figure out that the property `enable_post_data_reading` was set to `Off`, while it’s advised to be `On`. Actually, it’s supposed to be On by default, but for some unknown reason, it was turned off by the time I’ve updated the OS!

Once that property was set back to `On`, everything starts working back. 🙂

By the way, if you need to check all other properties from the PHP settings, you can refer to this website: 

http://php.net/manual/en/ini.core.php


See you soon! Cheers. 🍻
Laravel 6 REST API with JWT Authentication with CRUD
Tags: laravel, jwt, crud, restapi
Published: 2020-02-13 10:43:24

Hello Artisan 

In this tutorial i am going to discuss about a brand new topic which is jwt auth laravel 6. This tutorial we will see how to create a restful api with json web token (jwt). JWT (JSON Web Token) is usually used to send information that can be trusted and verified using a digital signature.

https://www.codechief.org/article/laravel-6-rest-api-with-jwt-authentication-with-crud
python in operator
Tags: python, beginners
Published: 2020-02-13 10:24:09

In the <a href="https://python.org">Python</a> programming language, the *in* operator is membership test operator. You can use it to check if a value exists in an object. 

That means you don't need to use a for loop to go through the members and use an if to compare (as you may be used to in C)

So instead of this:

```python
>>> myList = [5,7,8,11,15,17,18,22,26,28,32]
>>> for i in myList:
...     if i == 15:
...         print("found")
... 
found
>>>
```

You can do this:

```python
>>> myList = [5,7,8,11,15,17,18,22,26,28,32]
>>> if 15 in myList:
...     print("found")
... 
found
>>> 
```

The **in** operator can be used on different types of variables like <a href="https://pythonbasics.org/strings/">strings</a>, <a href="https://pythonbasics.org/list/">lists</a>, <a href="https://pythonbasics.org/dictionary/">dict</a>, files and more.

## In operator

You can see some examples below. The in operator is used to test if its part of the members.

Find if a sub-string is inside a string (is a member) with the in operator:

```python
>>> s = "hello world"
>>> if "world" in s:
...     print("found")
... 
found
>>>
```

You can use the in-keyword to find characters (strings of size 1)

```python
>>> s = "hello world"
>>> if "e" in s:
...     print("found 'e'")
... 
found 'e'
>>> 
```

### Lists

A list can be a collection of numbers, strings or other types of data. 

The in operator works on all lists, regardless of which data is inside it. You can find a number inside a list with the in operator:

```python
>>> x = [6,2,7,8,3]
>>> if 2 in x:
...     print('found')
... 
found
>>>
```

If a list contains strings instead of numbers, no problem, it can find the string.

```python
>>> x = ["Alice","Charlois","Eduard","George","Henry"]
>>> if "Eduard" in x:
...     print("Found Eduard")
... 
Found Eduard
>>>
```

### Dict

A dictionary is a key-value mapping, this is sometimes named associated array in other programming languages. A dictionary is a bit different.

For a dictionary, the in keyword finds the keys

```python
>>> x = { 'developer':'dev', 'coffee':'cof' }
>>> if 'developer' in x:
...     print("found")
... 
found
>>>
```

But not for the values in a dict:

```python
>>> x = { 'developer':'dev', 'coffee':'cof' }
>>> if 'dev' in x:
...     print("found")
>>>
```

**Related links:**
* <a href="https://python-reference.readthedocs.io/en/latest/docs/operators/in.html">In operator reference</a>
* <a href="https://pythonbasics.org">Learn Python</a>
What to Choose Between Gridsome and NUXTJS
Tags: vue, javascript, opensource, webdev
Published: 2020-02-13 10:18:23

### A quick comparison of the most popular Vue.js frameworks

**Gridsome** and **Nuxtjs** are the **most popular Vue.js frameworks** at this time and will certainly be throughout 2020.

Today many people and companies prefer to start using Vue.js from one of these frameworks.

## Why start from a framework?
The main reason is that these frameworks already have a lot of preset configurations and are easy to use.

## Let’s see an example
If you have already used Vue.js, you know that to create a Single-page Application you also need to include Vue Router and make the necessary configurations, **Gridsome and Nuxtjs automatically generate the vue-router configuration simply based on your file tree**.
This is only one of the simplifications provided by these frameworks.

If you want to discover the main differences, continue reading the article on Medium 👇

{% medium https://medium.com/notonlycss/what-to-choose-between-gridsome-and-nuxtjs-2aa996ead089 %}

_Ps. If you are not happy that the article is on Medium, nobody forces you to read it. Peace and love_  ✌️❤️
How To Transform Your Idea Into A Feature-rich App | Inoru
Tags: startup, devops, android, ios
Published: 2020-02-13 10:13:58

The development of mobile applications has been gathering attention ever since its advent. This encouraged people to come up with fascinating ideas. But most of them lack the knowledge to execute their ideas. This article assists you with the process of converting your ideas into an astounding app that is rich in features.

Before getting to know how an incredible idea is turned into a fully-functional app, let us first analyze the process of Idea Generation and its importance.

Idea Generation is a vital yet undervalued stage in the development of a mobile app. You need to have an idea that is novel, unique, and workable. Sometimes, your idea might sound magnificent but not practicable. In such cases, it is not possible to develop an app based on such an idea. So, it is essential to pay attention while framing an idea.

Read Full Article: https://www.inoru.com/blog/how-to-transform-your-idea-into-a-feature-rich-app/
Web design References and resource
Tags: beginners, web, design
Published: 2020-02-13 09:19:12

---
title: Web design References and resource
published: true
description: Reference materials and learning resources for Web design as part of FrontEnd Development Zero to Hero series of articles.
tags: beginners, web, design
series: FrontEnd Development Zero to Hero
---

This post contains _reference materials_ that helped in writing the [Web design secton](https://dev.to/ziizium/introduction-to-web-design-2k40) of [this series](https://dev.to/ziizium/frontend-development-zero-to-hero-j0j) and resources to help you in your learning endeavors.

###__Articles__

The following articles will help you advance your Web design skills. Take your time to read them and if they contain code examples do your best to follow along.

* [A brief introduction to color theory](https://www.ndsu.edu/pubweb/~rcollins/242photojournalism/colortheory.html)
* [Web design color theory: how to create the right emotions with color in web design](https://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/)
* [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
* [Getting Started With CSS Layout](https://www.smashingmagazine.com/2018/05/guide-css-layout/)
* [Understanding Progressive Enhancement](https://alistapart.com/article/understandingprogressiveenhancement/)
* [What Does A UX Designer Actually Do?](https://careerfoundry.com/en/blog/ux-design/what-does-a-ux-designer-actually-do/)
* [User Interface Design (UI Design)](https://pidoco.com/en/help/ux/user-interface-design)
* [Nine Ways to Improve User Experience in Mobile Design](https://css-tricks.com/nine-ways-to-improve-user-experience-in-mobile-design/)

###__Youtube videos__

* [Build An HTML5 Website With A Responsive Layout
](https://www.youtube.com/watch?v=Wm6CUkswsNw)
* [Progressive Enhancement & CSS - Ire Aderinokun @ WeAreDevelopers Conference 2017](https://www.youtube.com/watch?v=ALPQ1bXVA1w)
* [Jeremy Keith on progressive enhancement](https://www.youtube.com/watch?v=Uyw1m2t2RJw)

###__References__

* [Color theory: A brief history for designers](https://tubikstudio.com/color-theory-brief-guide-for-designers/)
* [Web Design History Timeline](https://www.webdesignmuseum.org/web-design-history)
* [Different Layouts: Static, Liquid, Adaptive, Responsive, What?](https://magnusbenoni.com/different-layouts-css/)
* [User Interface Design Guidelines: 10 Rules of Thumb ](https://www.interaction-design.org/literature/article/user-interface-design-guidelines-10-rules-of-thumb)
* [User Interface (UI) Design](https://www.interaction-design.org/literature/topics/ui-design)
* [What is Color Theory?](https://www.interaction-design.org/literature/topics/color-theory)
* [Responsive Web Design](https://alistapart.com/article/responsive-web-design/)

<hr>

Up next, the _Final project_.  I'll see you then.
Let's talk Accessibility
Tags: a11y, speaker, web
Published: 2020-02-13 09:51:20

---
title: Let's talk Accessibility
published: true
description: My talk from the GDF Devfest on Accessibility 
tags: a11y, speaker, web
---

A few years back I gave a session on Accessibility - "Web for All" at the Google DevFest, Ahmedabad.

[Here](https://docs.google.com/presentation/d/1Av-1NVIGP_Wmve49SBosDf13I4YeMuW7Gt_66_YKTKw/edit?usp=sharing) is the presentation for you.
Create a React.js, Tailwind with i18n project in a couple of minutes from Github
Tags: webdev, javascript, react, tailwindcss
Published: 2020-02-13 09:05:29

---
title: Create a React.js, Tailwind with i18n project in a couple of minutes from Github
published: true
description: Create a React.js, Tailwind with i18n project in a couple of minutes from Github
tags: webdev, javascript, react, tailwind
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xnaxotcjria194ojg5gu.png)

<u>Why?</u>
I am creating a short series for Template projects to boost my productivity when starting a new project from scratch.

If you are interested in a Template project with SpringBoot, Flyway, Java 11, Maven check out this project: https://dev.to/gabriela/create-a-springboot-flyway-project-in-a-couple-of-minutes-on-github-12jj

<u>About this project:<u>

<b>To build the project locally, run:</b>
NPM:
npm install
npm start

Yarn:
yarn install
yarn start

<b>See the results</b>
Then open http://localhost:3000 in a browser and the application should be running.
I used the free Tailwind CSS template by https://www.tailwindtoolbox.com/templates/nordic-store

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

<b>Project Structure:</b>
- components 
a) common    : About.js, Footer.js, Hearder.js
b) dashboard : Main.js, MainPage.js            

- NotFound.js: renders when the path from router doesn't match anything we expect to
- Page.js: a "higher order"/parent component for all the other components except NotFound.js Here you can declare the strucutre of any page and create functions that are needed by all. Pass them down to child components using props.
- Router.js: declare URL paths and associated components
- img: images used in the application
- config: i18n.js, options.js: configuration for internationalization. Goes hand in hand with folder /locales where all the translations are described
- locales: home for all translations. Add here more languages or delete some
- styles: 
a) index.css: imported all tailwind dependencies
b) tailwind.css: generated taiwind css  
- index.js: entry point of the application
- tailwind.js: here you can keep/add/delete whatever you want to customise the entire application. Read more here: https://tailwindcss.com/docs/container
- postcss.config.js: Tailwind is added to the project as a Postcss plugin. This and autoprefixer are added to this config file.

Code can be found here: https://github.com/gabrielaradu/reactjstailwindcsstemplate

You can download or fork this project in order to save time in your development. Happy Coding.
Go to line number in a file using vim
Tags: quicktip, todayilearned, linux, productivity
Published: 2020-02-13 10:32:50

---
title: Go to line number in a file using vim
published: true
date: 2020-02-13 09:00:00 UTC
tags: quick-tip,til,linux,productivity
canonical_url: https://flaviabastos.ca/2020/02/13/go-to-line-number-in-a-file-using-vim/
---

You want to see line 3842 of file called `my_super_long_file.py` and you can only access that file using vim. You open the file and to your dismay, by default, vim doesn’t display line numbers. Here are your options:

- Arrow down and hope you find that line before retirement
- **Display the line numbers** by hitting `:` and typing `set number`. Now at least you can see the line numbers while you arrow down… (To remove line numbers, do` :` and type `set nonumber`)
- **Go directly to that line** by using one of the following options:
  - hit `:` and type the line number and enter, in this case `:3842` enter
  - type the line number and hit `SHIFT+g`

Note: if you hit `SHIFT+g` without typing the line number, you go to the end of the file.

BONUS: You can accomplish the same thing in VSCode by hitting `CTRL+g`, typing the line number and enter ![🙂](https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/72x72/1f642.png)

> _The post _[Go to line number in a file using vim](https://wp.me/pa0b0y-5T)_ was originally published at _[flaviabastos.ca](https://flaviabastos.ca/)
BEST WAY TO EXPLAIN CLOUD TO ANYONE
Tags: azure, aws, cloud, saas
Published: 2020-02-13 08:56:40

One fine evening, I and my non-IT Friend were sitting in a restaurant and enjoying dinner. I was explaining to him that nowadays, I am working on Azure Cloud. Suddenly he asked me to explain  "CLOUD". I was not sure how to explain "Cloud" to a non-IT guy. I am sure you must be in a similar situation before. 

I took some time to think and then explain  him this way : 

The term “cloud” has become overused. Every IT Company has a cloud and everyone’s platform is cloud-enabled, but if we cut through the hype, three basic models exist in cloud-based computing. These are

Infrastructure as a Service (IaaS)
Platform as a Service (PaaS)
Software as a Service (SaaS)

I could see the "question mark"   on my friends'face but then I used the meal preparation example. 
I tried to map the daily making of meals to the different models of cloud computing.

1>You can make the meal at home.
2>You can go to the grocery store and buy a meal pre-made that you heat up and serve.
3>You can get a meal delivered to your house.
4>You can get in the car and eat at a restaurant.


![Meal to Cloud Services mapping](https://cdn1.savepice.ru/uploads/2020/2/13/eeb957623b3a5cf26e8463e4078466a4-full.png)


The difference between these options is about who’s responsible for cooking these meals and where the meal is going to be cooked.
 In the on-premise model, eating a meal at home requires you to do all the work, using your own oven and ingredients already in the home.
 A store-bought meal is like using the Infrastructure as a Service (IaaS) model of computing. You’re using the store’s chef and oven to pre-bake the meal, but you’re still responsible for heating the meal and eating it at the house (and cleaning up the dishes afterward).

In a Platform as a Service (PaaS) model, you still have responsibility for the meal, but you further rely on a vendor to take care of the core tasks associated with making a meal. For example, in a PaaS model, you supply the plates and furniture, but the restaurant owner provides the oven, ingredients, and the chef to cook them. 
In the Software as a Service (SaaS) model, you go to a restaurant where all the food is prepared for you. You eat at the restaurant and then you pay for the meal when you’re done. you also have no dishes to prepare or wash.


After Explaining "CLOUD" this way to my friend, his view towards Cloud changed a lot. The good part was he paid the restaurant bill as well :)

 I hope you liked the explanation. 




Ref : 

WEB: www.google.com 
Book Ref: Microservice Pattern 
Book Ref: Spring Microservice in Book
Cultivating or Escaping a Habit
Tags: habits, chaos, innovation
Published: 2020-02-13 08:47:32

---
title: Cultivating or Escaping a Habit
published: true
description: when given a choice of two explore both!
tags: #habits, #chaos, #innovation
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ois6r2ykx43knlqjn1cz.jpeg
---

To cultivate habits or to wander around in perpetual escapes from habits. Both routes seem to have their uses.

To escape a habit one may sometimes find a habit that takes you away from all habit seeking methods.

To appear stupid is not to be frowned upon. Because to be ignorant and childlike is a prerogative for the creative mindset.

To be creative is to think of connections and patterns in ways that those who are intelligent in a convergent way cannot think.

Yet those with a divergent thinking cannot see some of the order in a given pattern which might be one well known of among the convergent minds.

The magic really happens when you can combine the two paths at will and adapt to the one way that is useful as needed at the time.
Apply css that will not include specific class.
Tags: css, html
Published: 2020-02-13 08:40:39

Here i wanted to show how i resolve [css problem](http://coderuck.com/)  which i was facing.
I was stuck in one situation where i just wanted to apply css that will not include specific class.
I know it is making confusion lets take a example.

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

So here second .code css i don't want to apply on element which contain .language-javascript class but i will have .code class.
By this i made it will work.

You can also check other reference:http://coderuck.com/