teleren/devto huggingface dataset:
What Happens When You Don't Test in Safari
Tags: testing, webdev, javascript
Published: 2022-02-15 09:11:22

---
title: What Happens When You Don't Test in Safari
published: true
description: A short article about a major bug we found in our platform
tags: #testing, #webdev, #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03oa7jiag745mtgvzvy6.jpeg
---

I decided to write about a major bug I recently encountered in our platform. 

In [Endtest](https://endtest.io), there is a section where users can view the test execution logs:

![endtest results](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vgakvs6wyu3kwixm3v7k.png)

It's a critical component, and that's where it occurred.

## **1. The Bug**

We recently made a change to improve the timestamps.

In our database, we store all the timestamps in UTC time zone, in a basic format:

**2022-02-10 07:31:15**

And we wanted to display the timestamps in a more friendly way, while also converting them to the time zone of the user:

**February 10, 2022, 14:31:15**

This was being done in the frontend, with some vanilla JavaScript.

It worked great in Chrome, Edge and Firefox, but not in Safari:

![endtest safari bug](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqxok1skvde9pevupq81.png)


## **2. The Fix**

The issue was coming from this line:

```javascript
unixTimestamp = new Date(the_timestamp).getTime() / 1000 - (diff*60);
```

As you can see, it's a really basic one, nothing fancy or risky.

Turns out Safari has an issue with spaces in timestamps, and the solution is to replace each space with a *T*, like this:

```javascript
the_timestamp = the_timestamp.replace(' ', 'T');
```


## **3. The Lesson**

No unit or Jest test could have captured this issue. 

The only way to detect such an issue is to run functional tests in Safari. 

This shows us that a browser is more than just a JavaScript interpreter.

And that cross-browser testing is more relevant than ever.


## **4. The rise of Safari**

More and more folks are using Safari, they're loving the privacy-focused aspect of it.

![browser stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rclgj8cyin6kdcp865p.png)

Not testing on Safari means that you might be ignoring 20% of your users.

I'm also using it, but only on my phone. Chrome is still my desktop browser.


## 5. **The Democratization of Automated Testing**

We've always advocated for testing in multiple browsers, that's why Safari was always an option in our platform:

![test in safari](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhq0z6wwznyvs0pb05qq.png)

By providing browsers in the cloud, anyone can run tests on Safari, regardless of what operating system they're using.

And by proving a low-code interface, anyone can create automated tests in a few minutes, even without writing code.

The Test Automation space has always had its fair share of gatekeepers, and we're getting them out of the way.


## **6. What about you?**

Are you running your functional tests in Safari? 

What percentage of your users are on Safari?

Did you ever find bugs that occurred only in Safari?
How to Add and Customize Markers in the Blazor Maps Control
Tags: blazor, csharp, dotnet, webdev
Published: 2022-02-15 09:10:43

See how easily you can add markers to the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) control and customize them to enhance their appearance. In this video, you will learn how to add markers to the Blazor Maps control and change their shape. You will learn how to set custom colors and shapes to the map markers from the data source. Lastly, you will see how to add tooltips and format them. 

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos 

Download this example from GitHub: https://github.com/SyncfusionExamples... 

{% youtube 0Mr7FhIw3Wc %}
Filter Available NPM Name and Get Your Dependency Count Badge
Tags: javascript, npm, node, opensource
Published: 2022-02-15 09:09:01

If you code open source on NPM, chance are, you are going to have a hard time finding the name you want

so I made this: https://npm-util.netlify.app/

Utility website to find your NPM names with multiple filters per character supported.

only 7 `[consonants] [vowels] [consonants]` names left at the time of writing as shown in the image
![Generate NPM name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b1159vgt6yx7tzee13e.png)

There is a lot of nice little badges however one that I think is important is missing(not available by default on shield.io), that is dependency count badge
![Dependency count badge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbed0x1c0lynz84uv4nx.png)

This is an open-source project https://github.com/tylim88/npm-util-front-end

Enjoy!
Different ways in creating a React Component
Tags: javascript, react, webdev, programming
Published: 2022-02-15 09:08:41

In this short article, we will be looking at the different ways that can be used to create a React component.

Let's say we are to create a React component called Counter,

- Using the **Class** method we will construct our codes like this:

```
import React from 'react';

class Counter extends Component {
   render() {
      return (...)
   }
}
```

> _Where ... should be replaced with the JSX to be rendered._

- Using the **Function** method, our codes will be like:

```
import React from 'react';

function Counter() {
   return (...)
}

```
> _Where ... should be replaced with the JSX to be rendered._

- Using **ES6 Arrow** function, we will write:

```
import React from 'react';

const Counter = () => {
   return (...)
}
```

> _Where ... should be replaced with the JSX to be rendered._
TIL: ESLint | Fix "'props' is assigned a value but never used @typescript-eslint/no-unused-vars"
Tags: todayilearned, eslint, vue
Published: 2022-02-15 09:01:25

## Story

This is a continuation of `script setup` syntax usage. `eslint` thinks that variables like `props`, `emits` etc. are not used, but actually they are.

## Question

How to fix ESLint error `'props' is assigned a value but never used @typescript-eslint/no-unused-vars`?

## Answer

Add `vue/script-setup-uses-vars` rule to eslint.

> ESLint no-unused-vars rule does not detect variables in `<script setup>` used in `<template>`. This rule will find variables in `<script setup>` used in `<template>` and mark them as used.

```diff
module.exports = {
  // Use the rule set.
  extends: ['plugin:vue/base'],
  rules: {
    // Enable vue/script-setup-uses-vars rule
+     'vue/script-setup-uses-vars': 'error',
  }
}
```

## Links

-   https://eslint.vuejs.org/rules/script-setup-uses-vars.html
-   https://eslint.vuejs.org/user-guide/#the-variables-used-in-the-template-are-warned-by-no-unused-vars-rule
The Class Property Proposal is Finished and Avaliable in React
Tags: javascript, react, babel, typescript
Published: 2022-02-15 08:58:08

Hooray! The class property proposal is finished and is avaliable via **babel/plugin-proposal-class-properties**
> This plugin is included in `@babel/preset-env`, in [ES2022](https://github.com/tc39/proposals/blob/master/finished-proposals.md)

> Check it out [here](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)

So you can finally clean that legacy React project in peace

```js
class Foo extends React.Component {
  // Note: this syntax is now standardized.
  handleClick = () => {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

```

Spread the word!
#32 - Find the divisors! CodeWars Kata (7 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-02-15 07:14:44

##Instructions
Create a function named divisors/Divisors that takes an integer n > 1 and returns an array with all of the integer's divisors(except for 1 and the number itself), from smallest to largest. If the number is prime return the string '(integer) is prime' (null in C#) (use Either String a in Haskell and Result <Vec<u32>, String> in Rust).

**Example:**

> divisors(12); // should return [2,3,4,6]
> divisors(25); // should return [5]
> divisors(13); // should return "13 is prime"

---

##My solution:

```javascript
function divisors(integer) {
  let r = []
  for(let i = 2; i<integer; i++){
    if(integer%i == 0) r.push(i)
  }
  let res = r.length !== 0 ? r : `${integer} is prime`
  return res
}
```
---

##Explanation
Firs I decalrated the variable "r" tha contains an empty array.

> let r = []

After that I started a loop that will iterate from 2 to the integer value, in every iteration I'll check if "i" is divisible by the integer, and if it is I'll push it to the "r" array.

> for(let i = 2; i<integer; i++){
>     if(integer%i == 0) r.push(i)
> }

After that I'll check if the length of array isn't 0, it'll return the array, and if it is 0, it'll return ${integer} is prime, and at the end I'll just return this result.

> let res = r.length !== 0 ? r : `${integer} is prime`
> return res

---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/544aed4c4a30184e960010f4/)
Leetcode Daily Challenge - Single Number
Published: 2022-02-15 08:46:19

Leetcode Challenges are extremely helpful to build and revise your concepts of Problem Solving. Presenting you the Daily Challenge of 15th February. [Click on this link to solve it on Leetcode on 15th Febraury 2022 and get 10 points assured.](https://leetcode.com/problems/single-number/)

**Approach 1: Brute Force**
It asks you to find which number has a sole occurrence in the list. Very wise of Leetcode of to put up the question the very next day after Valentine's Day, maybe the lonely number in the list is a coder too. 

Jokes aside, the simplest approach we can have is to pick a number and check if it is present twice or more and continue checking until we we get the one which has no doppelganger. This would cost us a time complexity of O(n^2) as we will compare each number to the whole list with a space complexity of O(1).

```
for i in range(len(nums)):
            if nums.count(nums[i]) == 1:
                return nums[i]
```


**Approach 2: Hash table**
Using a hash table can save you from TLE as it reduces the time complexity and makes the solution more readable with better code. How we approach is we will store the occurrences of each numbers in the list, which will transform into keys of the hash table.

Once we are done creating a hash table, either you can sort the dictionary and the return the first first key which will be having a single occurrence or traverse through the list to check the number having one occurrence. I prefer the lateral one having O(n) complexity because no sorting algorithm in the world assures a time complexity below O(n*logn). Since we created a hashtable, the space complexity would be O(n)

```
ht = {}
        for i in nums:
            if i not in ht:
                ht[i] = 1
            else:
                ht[i] += 1
        
        for k,v in ht.items():
            if v == 1:
                return k
```

```
ht = {}
        for i in nums:
            if i not in ht:
                ht[i] = 1
            else:
                ht[i] += 1
                
        ht = sorted(ht.items(), key = lambda x: x[1])
        a = ht[0]
        return a[0]
```
Hope you understood how I handled this problem. See you with some other problem. Happy Leetcoding!!!
[To learn the fundamentals of python do checkout my YouTube Channel.](https://www.youtube.com/watch?v=CffZDfq_8Vk&list=PLnGsOhprawFPahp6KOsxY77C6QKddgIkm)
React Apollo: useQuery pollInterval with cache-and-network doesn't stop to make requests after unmounting the component
Tags: javascript, apollo, graphql
Published: 2022-02-15 08:45:09

I've made the issue [here](https://github.com/apollographql/apollo-client/issues/9431) in [apollo-client repository](https://github.com/apollographql/apollo-client).

It works well with other `fetchPolicy` options but it doens't work correctly with `cache-and-network`.

Before resolving the issue, here is one of the alternatives.

## alternative

`Starting polling manually`
```javascript
const {
    data: todosData,
    error,
    startPolling,
    stopPolling,
  } = useQuery(GET_TODOS, {
    fetchPolicy: "cache-and-network",
  });

  useEffect(() => {
    startPolling(1000); // poll interval

    return () => {
      stopPolling();
    };
  }, []);
```
Tại sao uống nước trước khi đánh răng
Published: 2022-02-15 08:32:18

Nước không chỉ giúp giải tỏa cơn khát mà còn là nhân tố quyết định để duy trì sự sống. Thực tế, cơ thể con người có tới 75% là nước. Và để duy trì một cơ thể khỏe mạnh, ngoài việc có thói quen ăn uống, sinh hoạt và tập luyện khoa học, lành mạnh thì việc luôn đảm bảo đủ lượng nước cũng là một yêu cầu rất quan trọng.
https://trongranggia.net/tai-sao-nen-uong-nuoc-truoc-khi-danh-rang-vao-buoi-sang
https://trongranggia.net/cach-pha-nuoc-muoi-sinh-ly-suc-mieng
https://trongranggia.net/cach-tap-mewing-dung-cach-de-cai-thien-khuon-mat-mui-cao
https://trongranggia.net/vi-sao-tre-nho-an-keo-de-bi-sau-rang
How I improved my confidence, code quality and became a better developer
Tags: programming, testing, manualtesting, react
Published: 2022-02-15 08:25:08

Manual testing was always an underrated part of my development. I worked under pressure to deliver fast, stable and predictable code. Usually, there was no time for writing valid test cases and test plans. Instead, any excuse was a good reason to skip it.

Lack of testing caused stress and anxiety. Every time I tried to deploy my code, I used to ask myself numerous, repeatable questions, e.g. did I miss some regression in the code? Didn't I forget to update environment variables, update config files, remove unnecessary comments from the code, and I could produce a list of many more serious questions.

Many companies need to iterate fast. Manual testing is often left behind. Popular combo (Google Doc + Excel) bring mess, confusion, and lack of control during the whole process. It does not help teams keep peace of mind during the development and release process.

> We built [ManualTesting.dev](https://manualtesting.dev), a simple and powerful tool, to help my team and people like me write code, test it, and deliver on time with confidence.

So, if you have a list of test cases to review every time you deploy your code, or you have a checklist to review before a release, or you need a place to store user cases, new feature requirements and create test scenarios based on them, then this tool is for you.

And, as a developer, if you are looking for ways to deliver better code, control what to test and deploy, have peace of mind, reduce stress and anxiety, then this tool is for you as well. 😌

PS. "Any new application must be manually tested before its testing can be automated." — found it on the Internet.
Day 22/100 Java
Tags: 100daysofcode
Published: 2022-02-15 08:08:31

Complexity continues growing.

Day 22/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Today’s Learning:**
- Code Challenge:
	- Array List

**Additional Notes:**
Getting further into the arraylist challenge, however, got a bit lost into the task. All methods and declarations were fine. I implemented the user input differently to the tutor but it worked. Realised that the use of arraylist is quite useful as you can implement the classes to store data dependent on a classes requirements. Help needed with the implementation but getting a better understanding on how the whole thing works. Once this is done I will create my own project referencing this section. All of this makes sense as we are implementing all that we have been learning in the prior sections into one bit project.
A Nice Developer Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-02-15 08:00:15

---
title: "A Nice Developer Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259d336eb5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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___: What good can come of 2989 witches casting a hex?

___A___: None, it is always 0xBAD
 -->
What is NPX?
Tags: javascript, react, beginners, npx
Published: 2022-02-15 06:13:28

JavaScript is definitely one of the most interesting, popular, and busiest languages out there.

So, whenever there’s a new buzzword flying around in programming, chances are it is JavaScript related. One such buzzword is NPX.

At this point, I’d love to briefly explain what Node and NPM are so as not to get confused.

## Node

A JavaScript runtime that enables us to run JavaScript outside of a browser. It also enables us to run JavaScript on server-side.

## NPM

Stands for Node Package Manager and is tool that allows us to install and manage node packages as dependencies.

## So, what is NPX?

NPX is an NPM package runner that makes it really easy to install any sort of node executable that would have normally been installed using NPM.

## Why use NPX?

There are a number of ways to install node packages, you can have them _sitting locally_ (local to the project) or _install globally_ (in the user environment).

Sometimes, instead of using either of the two install methods above, you may just want to use the package and go.

Sometimes, you might just want to experiment with a list of packages as you may not know exactly what you need.

In these cases, instead of installing locally or globally, you can go straight to running those packages with NPX.

## How does it work?

NPX comes bundled with NPM starting with version 5.2+. So, if your version of NPM is 5.2 or higher, then you have NPX installed.

When you run a package using NPX, it searches for the package in the local and global registry, and then it runs the package.

If the package is not already installed, NPX downloads the package files and installs the package, but it will only cache the files instead of saving it.

To use NPX, you would run a command like this:

```JavaScript
npx some-package
```

One great way for you to see how quickly NPX works is to create a react app using:

```JavaScript
$ npx create-react-app my-app
```

The above command will generate a react app, named `my-app`, in the path that the command was run in using the `create-react-app` package. NPX then searches for the package in your environment. If it is not found, NPX downloads the files and runs the command to create a new react app, using just that one line of command.

One disadvantage of NPX is that it needs to search for packages, whether or not they are installed, before it actually runs them. This, to me, can sometimes be an overhead when you need to get things done very quickly.

Thank you so much for reading, I hope I have been able to at least shed some light on what NPX is.

---

### Let's connect 💜

You can follow me on [Twitter](https://twitter.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)
Modernize Applications with API Integration | Software AG & Delaware Courts
Tags: webmethods, apimanagement, adabas, natural
Published: 2022-02-17 04:51:06

---
title: Modernize Applications with API Integration | Software AG & Delaware Courts
published: true
date: 2022-02-15 08:00:14 UTC
tags: webmethods, apimanagement, adabas, natural
canonical_url: https://tech.forums.softwareag.com/t/modernize-applications-with-api-integration-software-ag-delaware-courts/255235
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tzofh5vvd8ou8hhzwmr.png)
 

[https://www.youtube.com/embed/g63sOTMjne8](https://www.youtube.com/embed/g63sOTMjne8?autoplay=1&feature=oembed&wmode=opaque)

The Delaware Court System modernized its processes to unlock the true value of siloed data across their 1.3 million legal entities.
 
See how they integrated data sources from disparate sources to access real-time information by partnering with IBM and Software AG.  
Learn how they took an API-led approach with Software AG’s webMethods, Adabas & Natural on IBM Z to:  
• Modernize applications by exposing core through APIs  
• Enable real-time data flow and access up-to-date case information from the different court systems  
• Achieve integration among new and existing applications and core systems on Z  
• Maintain the highest level of security, reliability, processing on IBM Z


Visit the [original article](https://tech.forums.softwareag.com/t/modernize-applications-with-api-integration-software-ag-delaware-courts/255235) in the Software AG Tech Community
The Story of How I Became a Pet Owner
Tags: personal, fun, pets, story
Published: 2022-02-15 08:27:10

---
title: The Story of How I Became a Pet Owner
published: true
date: 2022-02-15 07:57:36 UTC
tags: personal, fun, pets, story
canonical_url: https://mszeles.com/the-story-of-how-i-became-a-pet-owner
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sauefw13gooqf9dm4vuj.jpg)
It was 6:11 in the morning. I couldn't sleep so I went out to the street, to start my day with a cigarette. It was quite cold and completely dark.

There are only 4 kinds of people on the street in my neighbourhood at this time. Homeless guys, dog owners, dustmen and smokers. And of course, there is dame Sophie. She is an old and nice lady living in the same building as me.

Madame Sofie is crawling on the street all day (and night) long. She helps wherever she can, collects dust and does many other things.

So on this dark and cold morning, I spotted dame Sophie. She was walking towards me. Whenever she got closer, I saw there is something in her hands. Then I suddenly realized she was holding a cute little pet in her hands.

Dame Sophie told me she found her on the street, but she had no idea what to do with her. Aaaand that was my moment. I felt sorry for this cuteness bomb, and I wanted to save her, so I told to dame Sophie I will take care of her. She was happy as I took the responsibility from her shoulders.

She was in quite bad shape, so I brought her into the house. I gave her some water, which she drank immediately. As she was covered with dust, I bathed her, she was quite thankful for that. Unfortunately, she was hardly able to stand, so I had to use a temporal crutch to stabilize her.

To my astonishment, I realized she was house-trained as she never slubbered the flat.

When the family got up in the morning, they were charmed. They never so such a cute pet before.

Well, I needed a name for her. After some thinking, I came up with the name Greeny.

I am sure we will be best friends and I will even bring her to my workplace.

Please scroll down and greet my new friend.

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

Keep going

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

👇 👇 👇

![Greeny Green Plant Rescued From The Street.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1644910286011/AMaT9BAff.jpeg)

Have a nice day. 😊