teleren/devto huggingface dataset:
Hover Button Smiley 🙂 | Hide and Reveal
Tags: codepen, vue, javascript, design
Published: 2021-04-29 12:52:14

<h1>CodePenChallenge Microinteractions Hide and Reveal</h1>

<h2>Description</h2>

<p>This is just a simple interaction, when the user hovered on the button, the smiley icon will show.</p>

<p>The face of the smiley icon will follow the mouse pointer relative to the button's position.</p>

<p>I used "Single Page Vue Component" to render the element, styles, as well as the functionalities of the button.</p>

<p>I made the style of the button a little bit "glossy" by adding a dark-colored inset <code>box-shadow</code>, and also the white thing at the top left of the button. I created it by drawing an ellipse, then blurred it out by using <code>filter</code>.</p>

<h3>Note</h3>

<p>While smartphone devices doesn't have "hover" or "mouseover" event by default, the effect may still be seen by using the "touch" event on the button.</p>

<h2>Resources</h2>

<p>Javascript framework: <a href="https://vuejs.org">VueJS</a></p>

<p>Fonts: <a href="https://fonts.google.com/specimen/Fredoka+One">Fredoka One</a></p>

{% codepen https://codepen.io/takaneichinose/pen/rNjgyRv %}
Top USA Based Software Testing Company
Published: 2021-04-29 12:44:50

Do you want your application more user-friendly or deliver high-quality security, advanced feature, or optimum performance? Connect with Testrig Technologies best in world Software Testing Services

As a leading <a href= "https://www.testrigtechnologies.com/">Software Testing Company,</a> Testrig Technologies help worldwide customers to maintain the high performance of the product.

Backend with 100+ QA Testers, 200+ Automation Experts, and 100+ Technology experts, Team Testrig helped thousands of businesses in QA Testing Services

Contact Here: Hire QA Consultancy in India

<b>Team Testrig QA Testing Services</b>

Our QA Company in India is experts in ensuring your web and mobile application works without any error. As a leader in the QA market, we want your application easy to use and friendly.

•	Enterprise App Testing
•	Functional Testing
•	Software Performance Testing
•	Responsive Testing
•	Platform Compatibility Testing
•	Web application Testing
•	Mobile Application Testing



<b>Team Testrig Software Testing Approach</b>

As a Top Web and mobile app testing company in Dallas, the USA We follow the latest technology-based Software Testing Approach to reduce market risk. Below things typical flow of QA activities

1- Technical Support
2- Free Trial
3- Automation testing support
4- Pre-Production Release Testing
5- Requirement Testing
6- Test Cases and Test Scenarios Design
7- Manual and Exploratory Testing


<b>Tools and Technologies Used By Team Testrig:</b>

Our Software Testers makes the unique combination of Tools and Technology to Test Your Product

•	Selenium 
•	HP  Loadrunner
•	Atlassian Confluence
•	Cloud Testing
•	Agile Testing
•	AL and ML

Let’s connect: Hire QA Testing
What Advice Would You Give to Your Younger Self?
Tags: career, productivity, 100daysofcode, beginners
Published: 2021-04-29 12:42:46

**header pic by [Shen Comix](https://twitter.com/shenanigansen)*

Imagine that you traveled back in time and met your younger self, taking the first steps towards a dev career. What advice would you give to your younger self?
The equivalent of componentWillMount using React hooks
Tags: react, hooks, componentwillmount, functional
Published: 2021-04-29 12:29:48

## Given that

 - the goal is to execute some code once, before the ui is updated
 - `componentWillMount` is deprecated ([1][1], [2][2], [3][3]), and that the suggested replacement is executing code in the `constructor`
 - code executed before the return statement of a functional component is implicitly run before rendering it
 - the rough equivalent of mounting a class component is the initial call of a functional component

## The solution would be

Calling a function in the body of the functional component once. This can potentially be achieved with `useState`, `useMemo`, or `useEffect`, depending on the timing required for the use case.

Since the code needs to run before the initial render is committed to the screen, this disqualifies `useEffect`, as “The function passed to useEffect will run after the render is committed to the screen.” [4][4].

Since we want to guarantee that the code will only run once, this disqualifies `useMemo`, as "In the future, React may choose to “forget” some previously memoized values and recalculate them on next render" [5][5].

`useState` supports [lazy initial state][6] calculations that are guaranteed to only run once during the initial render, which seems like a good candidate for the job.

## Example with useState:

```typescript
const runOnceBeforeRender = () => {};

const Component = () => {
  useState(runOnceBeforeRender);

  return (<></>);
}
```

## As a custom hook:

```typescript
const runOnceBeforeRender = () => {};

const useBeforeInitialRender = (fn) => {
  useState(fn);
}

const Component = () => {
  useBeforeInitialRender(runOnceBeforeRender);

  return (<></>);
};
```

The `runOnceBeforeRender` function can optionally return a state that will be available immediately upon the first render of the function, triggering no re-renders.

See [use-once][7] on npm.

  [1]: https://reactjs.org/docs/react-component.html#unsafe_componentwillmount
  [2]: https://stackoverflow.com/questions/49206280/componentwillmount-is-deprecated-and-will-be-removed-in-the-next-major-version-0/49213753#49213753
  [3]: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
  [4]: https://reactjs.org/docs/hooks-reference.html#useeffect
  [5]: https://reactjs.org/docs/hooks-reference.html#usememo
  [6]: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  [7]: https://www.npmjs.com/package/@martinstark/use-once
Daily Developer Jokes - Thursday, Apr 29, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-04-29 12:00:13

---
title: "Daily Developer Jokes - Thursday, Apr 29, 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=Thursday%2C%20Apr%2029%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/5e1258e86d537.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:___ How does a developer make a cheer?

___A:___ ["hip","hip"] // (hip hip array!)
 -->
Custom Arguments with Jest
Tags: javascript, testing
Published: 2021-04-29 11:59:10



[Jest ](https://jestjs.io/) is a powerful test runner, assertion library, and simple to use. Personally, It has replaced other configurations I've used like [Mocha](https://mochajs.org/), [Chai](https://www.chaijs.com/), [Sinon](https://sinonjs.org/) for my Javascript testing. But one thing I **really** wished for, in Jest, is the ability to enable custom command line arguments. With custom arguments, I'm able to isolate testing configurations between npm scripts. Let's dive into what they are.

## What are **custom** arguments

Normally, Jest has its own arguments that you can run like below:

```
jest --runInBand
``` 
The command above allows you to run your tests sequentially, instead of in parallel. It's a useful command for when you need to debug your tests.

Custom arguments are similar to the above example, except you define what you want to send to the jest cli (aka "arguments")

For example, let's say I want to do something like this:
```
jest --failFast=true
```

The example above illustrates that I would like the test suite to stop executing the rest of the test when the first failed test. As of right now, this is not supported by Jest natively. However, with custom arguments, this can become a reality. 

*(Note: Jest does have a fail fast(-ish) option built-in (`--bail`) however, it exits on the first failed test **suite**, not **individual** test. Open issue about this: [Github Issue](https://github.com/facebook/jest/issues/6527))*

## How to enable custom arguments
Upon researching this topic, I came to the conclusion that the best way for this to work without impacting the existing functionality of jest and it's cli, was to create a `.js` file that we pass custom arguments to, perform computation,  and pass the jest runner the modified, but supported arguments for the test suite(s).

It would look something like this:

![carbon.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618637125626/-ZvZFX1CL.png)

And in your package.json, in your scripts portion, you would run it like this:
```
test: "node preJest.js --runInBand",
test:failFast: "node preJest.js --failFast=true --runInBand"
```
This configuration utilizes a third-party dependency called [Yargs](https://github.com/yargs/yargs) and [Yargs-unparser](https://github.com/yargs/yargs-unparser). Both of these utilities allow me to easily manipulate the CLI like JavaScript. 

With this configuration, you are able to share easily different configurations for your tests without the hassle of sharing and updating environment files and/or creating new ones for different use cases. 

Additionally, we are able to run the commands above, mixing both the custom arguments and the official arguments without any conflict.

If you made it this far, thank you for reading my article. If you have any questions, comments, or concerns about this, either leave a comment or contact me at [contact@christianarty.com](mailto:contact@christianarty.com)
5 communities you can join as a developer (+how to join them)
Tags: beginners, webdev, community, newbie
Published: 2021-04-29 11:58:22

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. Tech Twitter

This is the best community of developers out there in my opinion

How to join it?

Search for some big accounts in the niche you want to join (web, ml)

Reply to their tweets

Start writing your tweets

Share your work

Talk to people in the DMs

### 2. Dev. to 

This community is a bit different because:

You can both engage in the #DevDiscuss and post article/engage with people on their blogging platform

I recommend starting with being active on their platform and then moving to Twitter

### 3. Hashnode 

This is another amazing community of developers

This is the one I'm part of too and I recommend every developer to do the same too

How to join this?

Write articles (lots of articles)

Reply to other's articles

### 4. Reddit

There are lots of subreddits for developers like r/learnprogramming, r/programming, and r/webdev

How you join these?

Help people that ask questions

Share tips/advice

Join conversations

Share your work

### 5. Facebook groups

There are lots of groups for developers out there like: Learn Programming, Programming for Beginners and Web Developers

You can pretty much find a group for any niche you are in

How to join these?

Help people with replies

Share tips and advices

### Bonus:

Whatever community you decide to join you need to give VALUE

Don't just ask questions and never give something

Share your work and form connections (like you did in school😅)

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
5 JavaScript Console Methods you should Know
Tags: 2articles1week, javascript, debugging
Published: 2023-04-23 11:22:59

---
title: 5 JavaScript Console Methods you should Know
published: true
date: 2021-04-29 11:48:15 UTC
tags: 2Articles1Week,JavaScript,debugging
canonical_url: https://chrisdevcode.hashnode.dev/5-javascript-console-methods-you-should-know
---

All web developers are probably familiar with using the web console as their debugging tool. The most common way is using the famous `console.log` tool that JavaScript provides.

The `console` has more than just the `.log()` method that could be helpful. Check out some of the methods you could use:

## 1. `console.log()`

> This is the most used method of all

It outputs messages to the web console. The message may be of any data type. can also pass in variables and functions as parameters.

Examples:

```
console.log('A message to the console')

console.log(451999)

```

![console-log.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619522610442/3AWlG_1_p.png)

There are a lot of things you could do with the `.log()`:

### Showing a variable content:

```
let name = 'hashnode blog'

// displaying contents stored in name variable to the console
console.log(name)

```

### Calling a function

```
const Hello = str => {
 return `Hello ${str}`
}

console.log(Hello('World'))

```

## 2.`console.error()`

This is used to output error messages on the web console.

Errors shown are in red text and have a light red background color.

![error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619527317584/Z6hCMbLqr.png)

## 3. `console.warn()`

It's used to output warning messages on the web console.

Warning texts will be in yellow over a light-yellow background on the console.

![warning.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619527561456/5l9S2iDL0.png)

## 4. `console.table()`

The method is used to display groups of data in a tabular layout on the web console. helps visualize complex data in form of arrays and objects in a tabular form. takes in two arguments, the data and the columns to be displayed.

### Displaying Arrays

```
// an array of strings
console.table(["apples", "oranges", "bananas"]);

```

![tablearray.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619528089006/lxecU9L5k.png)

### Objects

```
// an array of objects

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

var john = new Person("John", "Smith");
var jane = new Person("Jane", "Doe");
var emily = new Person("Emily", "Jones");

console.table([john, jane, emily]);

```

![table-array.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619528575418/_MjUJpBGp.png)

## 5. `console.clear()`

This one clears everything from your console.

## Conclusion

Visit [MDN DOCS](https://developer.mozilla.org/en-US/docs/Web/API/Console) to learn more about the console API and its methods
call(), apply() & bind() in JavaScript
Tags: javascript, oop, beginners
Published: 2021-04-29 11:43:02

Hi there,
In this post, I'm gonna talk about the function methods mentioned in the title. A lot of new JavaScript devs find them difficult to understand, so here I am!

Here's our object for example purposes:

`const person = { name: "Aman" }`


The function which we want to invoke as object method:
```
const intro = function(profession, country) {
  return `${this.name} is a ${profession}, who lives in ${country}.`
}
```

##call()

call() is used to invoke a function as method, where first parameter refers to the "this" for the object, remaining parameters acts as regular function parameters.

```
console.log(intro.call(person, "Developer", "India"));
// Outputs: "Aman is a Developer, who lives in India."
```

##apply()

apply() is similar to call(), only difference is the way function parameters are passed i.e. in an array, instead of comma-separated arguments.

```
console.log(intro.apply(person, ["Developer", "India"]));
// Outputs: "Aman is a Developer, who lives in India."
```

##bind()

bind() is different compared to call() & apply(). When we pass the "this" of the object as argument, it returns a bound function which we can invoke later.

```
const boundIntro = intro.bind(person);
console.log(boundIntro("Developer", "India"));
// Outputs: "Aman is a Developer, who lives in India."
```
Using external packages in flutter
Tags: flutter, dart
Published: 2021-04-29 11:30:00

### Automatic way
Run either of the following commands in the terminal ( inside your project directory) to add the package to your project.
```
dart pub add package_name

or 

flutter pub add package_name
```
###Manual way
1. go to [pub.dev](pub.dev)
2. search your package
3. go to installing tab and copy the package name and version under dependencies
4. open `pubspec.yaml` file present in root directory
5. paste it under *dependencies*.(be careful about the indentation)
6. save and your ide will download the package in the project.
7. go to the dart file where you want to use it and import at the top 

That's it. Now you can use the package however you like.
VS Code Extension CDN Ninja
Tags: webdev, vscode
Published: 2021-04-29 11:13:16

This is the first VS Code Extension I have developed
It can be used to create Starter Templates of 4 CSS frameworks.

# CDN Ninja

### Starter Template Commands

| **Command** | ** Help Text **                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------- |
| !bst        | Bootstrap Starter Template                                                                        |
| !tst        | Tailwind CSS Starter Template                                                                     |
| !mst        | Materialize CSS  Starte Template                                                                  |
| !bust       | Bulma Starter Template                                                                            |

---

### CSS Framework CDN

| **Command** | ** Help Text **                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------- |
| !bcdn       | Boostrap CDN                                                                                      | 
| !mcdn       | Materialize CSS CDN                                                                               |
| !tcdn       | Tailwind CSS CDN                                                                                  |
| !bucdn      | Bulma CDN                                                                                         |


---


### Icon CDN

| **Command** | ** Help Text **                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------- |
| !ficdn      | Frontawesome Icon CDN                                                                             |
| !micdn      | Material Icon CDN                                                                                 |
| !fricdn     | Friconix Icon CDN                                                                                 |
|


---

### Others CDN

| **Command** | ** Help Text **                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------- |
| !jcdn       | Jquery CDN                                                                                        |
| !scdn       | SMTP CDN                                                                                          |

---


### Categories

- Starter Template 🚀
- CSS CDN ✅
- Icon CDN ✅
- Others CDN ✅



<p align="center">
  <img align="middel" src="https://user-images.githubusercontent.com/60034035/115988843-4d68c780-a5dd-11eb-9c5b-c130f0166abb.gif">
</p>


If anyone gets an issue or if anyone has any suggestions, let me know what CDN can be added

https://marketplace.visualstudio.com/items?itemName=TechFolk.cdn-ninja
Gravitee.io v3.8 is available for download
Tags: api, apimanagement, apiplatform, graviteeio
Published: 2021-04-29 11:03:34

In this new release 🚀, benefit from multi-factor authentication for SMS and EMail and send messages to your subscribers through the API Publisher 💫

🆕 in API Management:
- Alerts Dashboard (enterprise)
- Page Vizualisation
- Cockpit integration

Download here:
https://lnkd.in/gUMyHbM

🆕 in Access Management:
- MFA SMS
- MFA Email
- Cockpit integration

Download here:
https://lnkd.in/gtFDbgQ
Arabic Lorem Ipsum Extension in VS Code
Tags: vscode, loremipsum, arabic, extension
Published: 2021-04-29 11:02:09

# Arabic Lorem Ipsum

Generating Dummy Lorem Ipsum Text in the Arabic Language.

![Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dyn1cs4mizoxe2b96vp.gif)

## Installation

<a href="https://github.com/YoussefZidan/Arabic-Lorem-Ipsum">GitHub Repo</a>

In order to install an extension you need to launch the Command Palette (Ctrl + Shift + P or Cmd + Shift + P) and type Extensions.
There you have either the option to show the already installed snippets or install new ones. Search for _Arabic Lorem Ipsum_ and install it.

## Snippets

|   Trigger | Words Generated |
| --------: | --------------- |
|    `arlo` | 30              |
|   `arlo3` | 03              |
|   `arlo7` | 07              |
|  `arlo10` | 10              |
|  `arlo15` | 15              |
|  `arlo20` | 20              |
|  `arlo30` | 30              |
|  `arlo40` | 40              |
|  `arlo50` | 50              |
|  `arlo70` | 70              |
| `arlo100` | 100             |

#### Enjoy :)

<a href="https://www.linkedin.com/in/youssefzidan/" target="_blank">
    <img src="https://img.shields.io/badge/LinkedIn-%230077B5.svg?&style=flat-square&logo=linkedin&logoColor=white" alt="LinkedIn">