teleren/devto huggingface dataset:
QA and Testing of your (web) Applications
Tags: qa, testing
Published: 2021-02-20 16:07:43

Software or Web Applications testing has been evolving in the last few years. For a long time, [Selenium](https://www.selenium.dev/) has been the default or only choice for automated testing for teams.

There are some new tools for web based application testing such as Cypress, Puppeteer, services like Rainforestqa.

Each of these tools are more modern, developer friendly and offer lot more tooling and control than Selenium for web applications.

Look at Cypress.io's [Why Cypress](https://docs.cypress.io/guides/overview/why-cypress.html) page to get an idea of what these newer tools could offer to take Web Applications Testing to the next level.

### Links:

- https://pptr.dev/

- https://www.cypress.io/

- https://www.rainforestqa.com/

- https://www.selenium.dev/ 

(cover image: Photo by Maksim Goncharenok from Pexels 
)
My javascript / tech / web development newsletter for 20-02-2021 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-02-20 15:35:07

---
title: My javascript / tech / web development newsletter for 20-02-2021 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

AWS, Dorsey&JayZ, Arm, Kafka, podcast moderation, WebRTC, Facebook, regulations, Trello, Clubhouse Musk&Putin, Paul Graham, Ryan Dahl, OSS licenses...

https://markjgsmith.substack.com/p/mark-smiths-newsletter-20-02-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Question: Webhooks in a Node-Express app
Tags: javascript, node, webhooks, question
Published: 2021-02-20 15:14:07

---
title: Question: Webhooks in a Node-Express app
published: true
description: 
tags: #javascript #nodejs #webhooks #question
---

Hello guys, 

I have recently found out about webhooks and was curious if they are viable for microservice composition over http.

In a nutshell, the full requirement is to transition from a monolithic application structure into a modular one. Each microservice is responsible for its own state, but some of the underlying databases share i/o dependencies.

My initial idea was to extend the builtin EventEmitter module with controller classes which, upon successful execution of the business logic, emit the calculated result. 'Elsewhere' within the same project, this event could be caught and its payload would be sent to a related API endpoint with an http request.

What are your thoughts? Have you ever implemented such a use case? How did you plan it out? What problems did you face?
Build Job Listing Website in React JS
Tags: react, javascript, webdev
Published: 2021-02-20 15:09:37

Hi there,

I wanted to create something interactive in ReactJS. So I tried to build this Job Listing Website which is one of the Challenges on [FrontEnd mentor](https://www.frontendmentor.io/challenges).        

Here you can see the DEMO:
https://react-job-listing-website.vercel.app/

I have also created a video on that:

{% youtube -0zQTq4mZAA %}

You'll learn lots of things from this like,

* Getting JSON data from file and displaying it
* Filter data based on the categories selected
* A Search component
* React Hooks
* Sass styling
* Advanced Conditional Rendering

You can find Full-Code repository from [here](https://github.com/codebucks27/react-job-listing-website.git).

Please share your valuable review!

All suggestions are welcome! 

### Thanks For Reading and Supporting.😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

### You might also like these website templates:

- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD)
- NFT collection landing page in ReactJS => [here](- A beautiful portfolio template in ReactJS => [here](https://codebucks.gumroad.com/l/hsTPD))

Follow me on Twitter where I'm sharing lot's of useful resources!
####[@code.bucks](https://twitter.com/code_bucks) 😉
Ruby's not keyword is not not but ! (not)
Tags: ruby
Published: 2021-02-26 18:56:56

---
title: Ruby's not keyword is not not but ! (not)
published: true
date: 2021-02-20 15:05:11 UTC
tags: Ruby
canonical_url: https://richstone.io/rubys-not-keyword-is-not-not-but-not/
---

 ![Ruby's not keyword is not not but ! (not)](https://digitalpress.fra1.cdn.digitaloceanspaces.com/xhtzjbw/2021/02/rubys-not-keyword.PNG)

The title is confusing enough, so I don't want to bore you you with words today, let's better listen to some deep-sounding `Rspec` code... 🎵🎶

```ruby
# ~/code/ruby/rubys_not_is_not_not_but_!_(not)_spec.rb

require './rubys_not_is_not_not_but_!_(not)'

RSpec.describe 'Ruby\'s not keyword' do
  let(:banger) { Banger.new }
  let(:naysayer) { Naysayer.new }

  context 'when ! is overriden' do
    it 'returns whatever value is returned by !' do
      expect(!banger).to eq :bang
      expect((not banger)).to eq :bang
    end

    it 'also returns the overriding\'s return value when called on the instance' do
      expect(banger.!).to eq :bang
    end
  end

  context 'when not is overriden' do
    it 'returns the overriding\'s return value when called on the instance' do
      expect(naysayer.not).to eq :nay
    end

    context 'but when used in the classical way before the message' do
      it 'evaluates a truthy value to false (as it always does)' do
        expect((not naysayer)).to eq false
      end
    end
  end
end

```
<figcaption>Live test-driven, read tests first</figcaption>

Which gives us this result:

![Ruby's not keyword is not not but ! (not)](https://digitalpress.fra1.cdn.digitaloceanspaces.com/xhtzjbw/2021/02/Screenshot-from-2021-02-20-15-35-42.png)

And of course you are curious how it's implemented:

```ruby
# ~/code/ruby/rubys_not_is_not_not_but_!_(not).rb

class Banger
  def !
    :bang
  end
end

class Naysayer
  def not
    :nay
  end
end
```
<figcaption>Check this <a href="https://github.com/RichStone/ruby-3-playground">masterful code on GitHub</a> if you don't believe</figcaption>
### The Moral

As you can [read from the docs](https://ruby-doc.org/docs/keywords/1.9/Object.html#method-i-not), Ruby's `!` can be overriden so that it will even return the overriding's value when used in front of a message (like `! message()`, but the `not` keyword overridings only have effect on the instance's return value (e.g. `instance.not()`).

So the moral of the story is that `not` uses `!` somehow under the hood because when `!` is overriden it has also an effect on `not`.

This being said, they still are not aliases since they differ a tad in functionality (namely, [in precedence](https://stackoverflow.com/a/27429722/5925094)).

* * *
<!--kg-card-begin: html-->

Comments or questions? Just tweet it out to me! 
<a href="https://twitter.com/intent/tweet?hashtags=rubychunk&amp;original_referer=https%3A%2F%2Frichstone.io" class="btn" id="b"><i></i><span class="label" id="l">Tweet</span></a>

<!--kg-card-end: html-->

Want to get new chunks in your inbox? Hit the evanescent Subscribe button somewhere here 👇👉
Hello World
Published: 2021-02-20 14:53:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uihs7f8lvzgzrhc3ked3.gif)

And hello dev community! My name is Rakan, and I'm currently 1 year into my engineering journey. I've learned so much, and have yet so much more to learn. 

I come from a content creation background, specializing in cinematography, editing and VFX. I spent the most of last year learning Javascript and React with two mentors. I'm currently working on a part time internship with a friend's start up, in React/Gatsby/Adonis js.

I've been very lucky to have friends in the field to help me out, and, in order to deepen my knowledge, I'm gonna try writing about the things I've learned. Hopefully someone out there finds something helpful.
npm and pip: some similarities between javascript and python 
Published: 2021-02-20 14:53:17

packages are important in any programming language.

Read Mozilla's [package management basics](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) article for more information from the JavaScript standpoint. Or, Python's [Packaging Python Projects](https://packaging.python.org/tutorials/packaging-projects/).

*Package management:*
- JavaScript uses `npm` (package installer for JavaScript: https://www.npmjs.com/) 
- Python uses `pip`  (package installed for Python: https://pip.pypa.io/en/stable/) 

https://forum.freecodecamp.org/t/package-json-npm-init-equivalent-in-python/218257
Day 54 Of 100DaysOfCode: More About Algorithm
Tags: womenintech, beginners, 100daysofcode, codenewbie
Published: 2021-02-20 14:29:20

This is my day 54th of #100DaysOfcode and #python learning. Like yesterday today also continue to learn more about an algorithm.  I studied greedy algorithm, implement and analyzed the greedy algorithm, efficient algorithm for grouping children and car fueling in [Algorithmic Toolbox](https://www.coursera.org/learn/algorithmic-toolbox/lecture/jF2sC/long-hike)
Also learned more properties of SQL including selecting multiple columns from a table, select distinct, use of count, where and, etc From [datacamp](https://campus.datacamp.com/courses/introduction-to-sql/aggregate-functions?ex=5)
Tried to write some efficient algorithm to calculate Fibonacci number, LCM, HCF as a homework assignment of Coursera.
#Algorithm to find LCM of two number
```python
def compute_gcd(a,b):
    while(b):
        a, b = b , a % b
    return a
def lcm(a,b):
    lcm = (a*b)//compute_gcd(a,b)
    return lcm

a,b = map(int,input().split())
print(lcm(a,b))
```
Above code run fast and its outcome is,
```python
714552 374513
170777928
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 54 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <br>* Learned more About SQL From Data Camp<br>* Learned About Greedy Algorithm<br>* Tried to write Efficient Algorithm to Calculate LCM <a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://t.co/Ngme50mDSH">pic.twitter.com/Ngme50mDSH</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1363127849578717185?ref_src=twsrc%5Etfw">February 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Day 21: Insertion Sort
Tags: 100daysofcode, php
Published: 2021-02-20 14:27:46

Insertion Sort algorithm using php.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00t387zcswpg951chhr6.gif)

```php
<?php
function insertion_sort(&$a) {
    $count = count($a);
    for ($i = 0; $i < $count; $i++) {
        $value = $a[$i];

        for ($x = $i - 1; ( ($x >= 0) && ($a[$x] > $value) ); $x--) {
            $a[$x + 1] = $a[$x];
        }
        $a[$x + 1] = $value;
    }
}

$values = array(2, 8, 4, 7, 6);

insertion_sort($values);

foreach ($values as $v) { echo "{$v} "; }
?>
```
I need some Developer feedback for my work.
Tags: php, laravelproject, webdev, imposter
Published: 2021-02-20 14:18:22

---
title: I need some Developer feedback for my work.
published: true
description: I need some Developer feedback for my personal projects
tags: php, laravelproject, webdevelopment, imposter
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzrz26f21g1vm71p95bq.jpg
---
Hello friends, I hope you are doing well. In recent days I am feeling bit doubtful about my work and progress as Web Developer. I need some feedback about these apps. 

- What is good in it?
- What could be improved?
- How can improve myself for better future as web developer?
Or other thoughts about my work.


Here is my portfolio :
https://shakiltech.com

Please check and tell your thoughts. Thanks in advance.
8 websites to improve your CSS-related productivity
Tags: css
Published: 2021-02-20 14:18:07

---
title: 8 websites to improve your CSS-related productivity
published: true
description: Useful free CSS resources 
tags: CSS
cover_image: https://images.unsplash.com/photo-1523437113738-bbd3cc89fb19?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1651&q=80
---

# To work faster

- [Test CSS Flexbox Rules](https://flexbox.help/) - to quickly generate the layouts you need.

- [Optimizilla](https://imagecompressor.com/) - Compressing is *[concerned with minimizing the number of bits required to represent an image](https://www.techrepublic.com/index.php/resource-library/whitepapers/vhdl-simulation-of-image-compression-using-lbg/)*. Compressing reduces an image size without much compromising its quality. Smaller size means faster loading time which equals happier users. 
![Screenshot 2021-02-20 at 7.54.30 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b32n11n1ofrx28qv29m2.png)

- [BEM naming cheatsheet](https://9elements.com/bem-cheat-sheet/#card+i) - Ever ran out of names for your CSS elements? Don't go naming them like below; use BEM instead! Visit the website to learn a good convention to consider. 
![Screenshot 2021-02-20 at 10.08.28 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6jqwfowtewsoz1txb5i.png)


- [CSS selectors cheatsheet](https://appletree.or.kr/quick_reference_cards/CSS/CSS%20selectors%20cheatsheet.pdf) - Sometimes we have to modify a deep-nested element or target a few elements at the same time; this reference will come in handy at these times. 
![Screenshot 2021-02-22 at 5.47.05 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yki1g1acn6e736763q16.png)
 
&nbsp; 
&nbsp; 

# To play and learn

- [Grid Garden](http://cssgridgarden.com/) - a fun way to learn CSS grid by playing a cute game
- [Flexbox Froggy](http://flexboxfroggy.com/) - while you're at it, why not learn flexbox by playing a game too. Fun!
![Screenshot 2021-02-20 at 10.11.35 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqp3za9ak613c5cp63wt.png)

&nbsp; 
&nbsp; 

# For your reading pleasure

- [7 habits of highly effective media queries](https://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/)[](https://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/) - this informative article is linked to many other resources to strengthen your understanding on building responsive apps.
- https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862 - this writeup has a lot of tips on working with breakpoints.
Windows Terminal – Custom Quick How To
Tags: uncategorized
Published: 2021-03-01 08:51:28

---
title: Windows Terminal – Custom Quick How To
published: true
date: 2021-02-20 14:11:53 UTC
tags: Uncategorized
canonical_url: https://vzilla.co.uk/vzilla-blog/windows-terminal-custom-quick-how-to
---

First up you should head to the windows store to download the latest Windows Terminal

![](https://vzilla.co.uk/wp-content/uploads/2021/02/022021_1410_WindowsTerm1.png)

Once installed open your new Windows Terminal and head straight to Settings

![](https://vzilla.co.uk/wp-content/uploads/2021/02/022021_1410_WindowsTerm2.png)

This is going to open a .json file with the configuration settings, when you first install you will not see this block of configuration under defaults but this is what gives you the ability to add a background image / logo to your terminal session.

![](https://vzilla.co.uk/wp-content/uploads/2021/02/022021_1410_WindowsTerm3.png)

The code is following, this will enable this same theme (image) over PowerShell, Command Prompt and Azure Cloud Shell.

        “defaults”:

        {

            // Put settings here that you want to apply to all profiles.

            “backgroundImage” : “C:\\Users\\micha\\AppData\\Local\\Packages\\Microsoft.WindowsTerminal\_8wekyb3d8bbwe\\RoamingState\\black-on-green.png”,

            “backgroundImageOpacity” : 0.75,

            “backgroundImageStretchMode” : “fill”

 

If you then want to customise the colour scheme scroll down in this .json file a little further until you see these blocks of configuration.

![](https://vzilla.co.uk/wp-content/uploads/2021/02/022021_1410_WindowsTerm4.png)

You will see in the PowerShell top block I have selected the One-Half Dark colour scheme.

You can find the default ones [here that are available](https://docs.microsoft.com/en-us/windows/terminal/customize-settings/color-schemes).

[This also looks like a super site to create other custom themes for your setup](https://windowsterminalthemes.dev/)

This takes 5 minutes to install and get custom.

 

The post [Windows Terminal – Custom Quick How To](https://vzilla.co.uk/vzilla-blog/windows-terminal-custom-quick-how-to) first appeared on [vZilla](https://vzilla.co.uk).
All about MVC
Tags: programming
Published: 2021-02-20 14:09:47

###What is MVC?
MVC stands for Model View Controller. MVC is a pattern that is commonly used for developing applications. This pattern allows the developer to compartmentalise various parts of application logic which helps in maintaining cleaner, sustainable and organised code.

#####Model
The model is the part of the application that deals with all the data. For example, on a server side API, the database schema, model etc come under the "Model" part of the application. Quoting wikipedia - 

>The model is the application's dynamic data structure, independent of the user interface. It directly manages the data, logic and rules of the application.


#####View
The view deals with the user interface(text, images, videos etc). It's main job is to present the data to the user. An important principle of the MVC pattern is that the view is completely ignorant about the model. Views are often called dumb things/objects.

>The view is the representation of information such as a chart, diagram or table.


####Controller
The controller is the bridge between the Model and the View since the Model and the View are completely ignorant of each other. The controller deals with all the application logic. The model and the view should never communicate with each other.

>Accepts input and converts it to commands for the model or view

####An easy diagram to help visualise this
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3k5vr0c6qbv5fiujfbr.png)


####Advantages of MVC
You might be thinking, all this is great but why should I use it? This is why -

1. Clear separation of logic
2. Projects are easier to architect and plan
3. Faster development process as it is easy to keep track of where code is

####Downsides of MVC
These advantages are only a part of the story, a lot of the code we write does not belong in the model nor the view. You might read this and think that yah, no problem just dump it in the controller. Problem solved. Not really. After a while, you will end up with huge controllers with thousands of lines of code which will become imposible to read or test and we'll end up with a colossal mess.

####The solution
Recently, developers have come up with a new pattern which is both similar yet different than MVC. It is the Model View View Model. I'm going to discuss this in my next post.
Bash: Edit command in your editor and execute directly
Tags: bash, linux, shell, terminal
Published: 2021-02-20 14:04:11

Sometimes we need to enter same command multiple times by changing 1 or 2 arguments. This is very tedious job to do. Update and execute command every single time!

But worry not as what you are going to see in next few minutes will act as a big time savior in such cases.

If you use shell in default mode (`emacs` if you don't know :P), you can press `ctrl-x` `ctrl-e` and enter text editor to edit all the commands together by using features of your editor like copy, paste visually select etc. Save and exit editor to execute all the commands.

If you are using `vi` mode, you can move to normal mode by pressing `Esc` and then pressing `v` would achieve similar functionality.

You can switch between `vi` and `emacs` mode by commands `set -o vi` and `set -o emacs` respectively. Your keybindings will work according to your mode.

For my work, I use this script `poolfetch` a lot with arguments varying only 1 or 2 characters. This functionality is very handy for me at such times.

Here is a sample usage of this feature in `emacs` mode:

![change3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfwr4d16bgkxaa2h426j.gif)

#### Edit:
 
As suggested by  [Tai Kedzierski here](https://dev.to/taikedz/comment/1bkb4), you can choose the editor in which you want to edit commands by setting environment variable `EDITOR` or `VISUAL`. 

It's a good idea to set them in `$HOME/.bashrc` or `$HOME/.profile`. Former one will set it for every bash instance and latter one will set it globally which will be done at time of system startup. I prefer latter one.
Deep Cloning (JSON.parse + JSON.stringify)
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-02-20 13:33:08

```js
const obj = {
  name: "Joe",
  address: { city: "X" },
};

const clone = JSON.parse(JSON.stringify(obj));
```

Copying using `spread` operator or `Object.assign()` makes a shallow copy (i.e, nested arrays & objects reference is copied instead of their values) whereas, `stringify + parse` does a deep copy. 


---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
What's the output?
Tags: javascript, codenewbie, webdev, beginners
Published: 2021-02-20 13:29:56

```js
var x = 5;

(function() {
  console.log(x);
  var x = 10;
  console.log(x);
})();
```

## Output

```
undefined 10
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Daily Developer Jokes - Saturday, Feb 20, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-20 13:00:27

---
title: "Daily Developer Jokes - Saturday, Feb 20, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Feb%2020%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259620ca4d.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Where does the pirate stash all of their digital treasures?

___A:___ RAR
 -->