teleren/devto huggingface dataset:
Stay on top of the new release SecureBridge 10.1
Tags: delphi, securebridge
Published: 2022-07-13 14:43:36

---
title: Stay on top of the new release SecureBridge 10.1
published: true
description: Devart presented a new version of SecureBridge 10.1 with the support for macOS Monterey, Windows 11, RAD Studio 11.1 Alexandria, and Lazarus 2.2.
tags: delphi, securebridge
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Devart, a recognized vendor of world-class data connectivity solutions for various data connection technologies and frameworks, announced a new version of [SecureBridge 10.1](https://www.devart.com/sbridge/?utm_source=devto&utm_medium=referral&utm_campaign=pr_sbridge_13.07.2022) with the support for macOS Monterey, Windows 11, RAD Studio 11.1 Alexandria, and Lazarus 2.2.0. The other significant update is the HTTP/HTTPS server in the TScHttpServer component support.

**The release also includes other improvements:**
- TScSSLServer component is added.
- TScHttpWebRequest.WriteAsStringParams method is available for writing encoded post data.
- BeforeSendAttachment and AfterSendAttachment events are available in the TScSMTPClient component.
- TScSMTPClient.OnProgress event is added.
- Import of private key assigned with a certificate from CryptoAPI storage is added. 

To learn more about the recent release and download new products, visit: 
https://blog.devart.com/securebridge-10-1-released.html

**SecureBridge** is a suite of client and server components for SSH, SFTP, FTPS, HTTP/HTTPS, SSL, WebSocket, and SignalR protocols. Our network security solution is easy to install and use: it is enough to place several components on the form and specify the server address and user credentials to establish a secure connection.

**About Devart** 
 
Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration, and backup solutions. The company also implements Web and Mobile development projects. 
For additional information about Devart, visit https://www.devart.com/.
How to Mock an ES6 Module Import using Jest
Tags: jest, javascript, testing
Published: 2022-07-14 14:11:43

---
title: How to Mock an ES6 Module Import using Jest
published: true
date: 2022-07-13 14:26:37 UTC
tags: Jest,JS,Testing
canonical_url: https://robertmarshall.dev/blog/how-to-mock-an-es6-module-import-using-jest/
---

--------

This article was originally posted (and is more up to date) at https://robertmarshall.dev/blog/how-to-mock-an-es6-module-import-using-jest/

--------

## What is an ES6 Module?

ES Modules are the ECMAScript standard for working with modules. Node has used this standard for a while, and browsers have only recently (2016) started using ES6. ES6 functions are the same as regular functions with syntactic sugar. So they can be mocked in the same way!

## How to Mock an ES6 Module

The `jest.mock` function is used to mock an ES6 module import with Jest. The initial function would look like:

```javascript
// ./functionToTest.js
import {
    es6ModuleToMock,
    es6ModuleToReturnThing
} from './fileWithModuleToMock';

export const functionToTest = () => {
    const value = es6ModuleToReturnThing();
    es6ModuleToMock(value);
};

```

And the test file would look like:

```javascript
import functionToTest from './functionToTest';
import {
    es6ModuleToMock,
    es6ModuleToReturnThing
} from './fileWithModuleToMock';

jest.mock('./fileWithModuleToMock');

test('example of how to mock an ES6 module', () => {
    const mockValue = 'mock-value';
    es6ModuleToReturnThing.mockReturnValue(mockValue);

    functionToTest();

    expect(es6ModuleToMock).toBeCalledWith(mockValue);
});
```

What we are doing is importing the particular functions that need to be mocked, and then mocking the whole file with Jest. This allows us to work with different functions run different mocks on them.
Poop.
Published: 2022-07-13 18:33:56

---
title: Poop.
published: true
date: 2022-07-13 14:07:48 UTC
tags: 
canonical_url: https://alex.party/posts/2022-07-13-poop/
---

I think I now have a few people reading this, so I should update it more regularly, so let's get some life updates in here.

### Upcoming Speaking Engagements

- [THAT Conference](https://that.us/events/wi/2022/) at the end of July.
- [MagnoliaJS](https://magnoliajs.com) in September.

Plus some other ones might be around the corner too. Stay tuned.

### Recent Projects/Pens

- [This Site is Empty](https://thissiteisempty.com)
- [Theme System for page wide themes](https://codepen.io/fimion/pen/wvmaBbm)
- [`defineCustomElement` accordion](https://codepen.io/fimion/pen/vYdoGyw)

### General Updates

Streaming is going well. My follower count has stalled slightly, but this also gives me time to get things I need to get the confetti cannon working.

[Work](https://wearetraina.com) is extremely rewarding right now. Having just come from a job that put me on a path to burnout, this one is a breath of fresh air, and is an extremely good place to work for.

I am helping several friends with their wedding websites, and I love seeing how people want content to be set up. A great gift to a newly engaged couple is offering to help them put finishing touches on a WordPress site. They can usually get it 99% of the way there, and I come in and add the last few touches to make it what they want.

Alright, this is getting a bit long winded, So that will be enough for now.

Originally Posted as [Poop.](https://alex.party/posts/2022-07-13-poop/) at alex.party
How do you handle toxic environment at your work?
Tags: work, toxic, office, environment
Published: 2022-07-13 13:58:55

---
title: How do you handle toxic environment at your work?
published: true
description: Learning handling toxic behaviour at work
tags: work, toxic, office, environment
# cover_image: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3i81yh1a9mhw75egf0d.jpeg)
# Use a ratio of 100:42 for best results.
---
What is an HTML Document’s Basic Structure?
Tags: html, webdev, beginners, tutorial
Published: 2022-07-13 13:58:00

HTML (HyperText Markup Language) is the code that is used to structure a web page and its content.
The basic structure of an HTML document consists of these elements:

- Doctype declaration
- html
- head
- body

## !DOCTYPE html

The `<!DOCTYPE html>` declaration needs to be there to inform the browser that this document is an HTML5 document.

## The `<html>` Tag

Although several versions have been released throughout time, the fundamentals of HTML have remained the same.

The `<html>` tag is the root and is the container for all other HTML elements (except for the `<!DOCTYPE>` tag).
An HTML document’s structure has been compared to that of a burger. The HTML document has opening and closing HTML tags, just like a burger has two bun slices on the top and bottom.

These tags, surround everything else:

```html
<html>
	<!-- content -->
</html>
```

## The `<head>` Tag

The document’s head, which is identified by opening and closing head tags, appears immediately after the beginning HTML element.

The head of an HTML file contains all of the page’s non-visual elements. The head element contains metadata about the document, such as its title, scripts, and style sheets.

```html
<html>
	<head>
	</head>
</html>
```

## The `<body>` Tag

The body tag follows the head tag.
The tag defines the main content of the HTML document.
All visual-structural elements are contained within the body tag.

Headings, paragraphs, lists, quotes, images, and links are just a few of the elements that can be contained within the body tag. Like in our burger analogy, the body is like the contents of a burger e.g. cheese, lettuce, patty, pickles etc.

## Basic HTML Structure

Here is the basic structure of a HTML document:

```html
<!DOCTYPE html>
<html>
	<head>
		<title> Title here </title>
	</head>
	<body>
		web page content goes here
	</body>
</html>
```

Read more articles about HTML, CSS and JavaScript over on my [blog](https://maxlockwood.dev/blog/)
Experimentation in Artificial Intelligence
Tags: ai, experiment, career
Published: 2022-07-13 13:57:37


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qui3anv69evixncu0tcb.png)In this modern era, (AI) refers to the simulation of human intelligence in machines that are programmed to think like humans and mimic their actions. The term may also be applied to any machine that exhibits traits associated with a human mind such as learning and problem-solving.

Furthermore, the ideal characteristic of artificial intelligence is its ability to rationalize and take actions that have the best chance of achieving a specific goal. A subset of artificial intelligence is [machine learning (ML)](https://six-industries.com/blog_detail?view=What_is_Machine_Learning), which refers to the concept that computer programs can automatically learn from and adapt to new data without being assisted by humans.

 

Basic Key Points of Artificial Intelligence
[Artificial intelligence (AI)](https://six-industries.com/artificial-intelligence-lab) refers to the simulation or approximation of human intelligence in machines.
The goals of artificial intelligence include computer-enhanced learning, reasoning, and perception.
AI is being used today across different industries from finance to healthcare.
Weak AI tends to be simple and single-task oriented, while strong AI carries on tasks that are more complex and human-like.
Some critics fear that the extensive use of advanced Artificial Intelligence can harm society.
read more in detail by clicking on the link below:
[Experimentation in Artificial Intelligence](https://six-industries.com/blog_detail?view=Experimentation_in_Artificial_Intelligence)
Get Started with Directus Standard Cloud using our pay-as-you-go hourly pricing.
Tags: tutorial, typescript, sql, database
Published: 2022-07-13 13:53:52

{% embed https://youtu.be/l12F3VmzJbI %}

Ready for more power? Directus Standard Cloud takes all the things you love from Community Cloud - unlimited users, access roles, collections, items, locales, API requests and API bandwidth, plus a dedicated server and SQL database, asset storage, a global CDN, 24/7 system monitoring and encryption - and adds customized URLs, three datacenter regions to choose from, and the ability to select how many active and standby nodes your project requires. 

And here's the best part, our Standard Cloud is based on a pay-as-you-go, usage-based pricing model, so you only pay for what you use! 

Get started with Directus Cloud today: https://directus.cloud

#directus #opensource #api #sql #database #graphql #vuejs #nodejs 

-----

WEBSITE: https://directus.io
DOCS: https://docs.directus.io
GITHUB: https://github.com/directus/directus
TWITTER: https://twitter.com/directus
COMMUNITY: https://directus.chat
NPM: https://www.npmjs.com/package/directus
DOCKER: https://hub.docker.com/r/directus/dir...
10 Hour Free Tutorial to Build a Full Stack Whatsapp Clone
Tags: flutter, firebase, dart, tutorial
Published: 2022-07-13 13:49:10

Learn how to Build a Full Stack Whatsapp Clone with Flutter, Firebase & Riverpod 2.0 in this 10 hour FREE tutorial! 
This tutorial covers all the main features of a chatting app: Phone Number Authentication, One to one & Group chatting with contacts only - includes text, image, gif, video, audio (with recording) sharing and image & video caching, status visible to contacts only and disappears after 24 hours, video calling (one-one and group), online/offline status, Message Seen Feature, Automatic Scrolling on New Message, Replying to Messages and much more!

Prerequisite: Basics of Flutter & Dart

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj44f3iwsvdkufdj1boi.jpg)
Link: https://youtu.be/yqwfP2vXWJQ
Getting Started with Directus Community Cloud - it's free!
Tags: opensource, typescript, 100daysofcode, mysql
Published: 2022-07-13 13:46:39

{% embed https://youtu.be/KSSO5C-QWjM %}

Our open-source spirit takes to the sky with Directus Community Cloud, our free tier boasts zero quotas or limitations and is ideal for proofs-of-concept and hobby projects. Enjoy unlimited users, access roles, collections, items, locales, API requests, and API bandwidth – it’s all included - for free. We've also got your infrastructure covered with a dedicated server and SQL database, asset storage, a global CDN, 24/7 system monitoring, and encryption in transit and at rest. 

Directus is completely free, open-source, and 100% JavaScript (Vue.js and Node.js). Get started with Directus Cloud today: https://directus.cloud

#directus #opensource #api #sql #database #graphql #vuejs #nodejs 

-----

WEBSITE: https://directus.io
DOCS: https://docs.directus.io
GITHUB: https://github.com/directus/directus
TWITTER: https://twitter.com/directus
COMMUNITY: https://directus.chat
NPM: https://www.npmjs.com/package/directus
DOCKER: https://hub.docker.com/r/directus/dir...
Wednesday Links - Edition 2022-07-13
Tags: java, jvm, gradle, performance
Published: 2022-07-13 13:37:28

Pagination in a Reactive Application (3 min)📃
https://joshlong.com/jl/blogpost/pagination_in_a_reactive_application.html

Remote and Distributed Build Patterns (10 min)🌐
https://blog.gradle.org/remote-and-distributed-build-patterns

General Build Distribution: A Game-Changer or a Gimmick? (6 min)↔️
https://blog.gradle.org/general-build-distribution

6 Symptoms of a Distributed Monolith (4 min)⚠️
https://medium.com/codex/6-symptoms-of-a-distributed-monolith-78a097320ebb

Mitigate the relocation degradations for cache locality improvement algorithm (7 min)🐢
https://inside.java/2022/07/01/mitigate-relocation-degradations/

Logging Performance Comparison (9 min)✍️
https://blog.sebastian-daschner.com/entries/logging-performance-comparison

The Eckel Index: New language features from Java 9 through Java 17 (4 min)🎉
https://blogs.oracle.com/javamagazine/post/java-eckel-index

Persistent data structures in functional programming (6 min)🗄️
https://blog.softwaremill.com/persistent-data-structures-in-functional-programming-c5e5061bade3

Groovy Goodness: Using Macros For Getting More Information About Variables (1 min)🔍
https://blog.mrhaki.com/2022/07/groovy-goodness-using-macros-for_13.html
Using portals as a means of communication
Tags: communication
Published: 2022-07-13 13:28:30


Key Insights on Use/Efficacy of Portals

Over the past few months we have worked with a number of companies/organisations in both the Public and Private sectors, gathering feedback from their Suppliers/Customers/Employees. With most projects, as part of the research, we included gathering feedback on the use/efficacy of Portals, as a means of communication.

In most cases, Portals were a relatively new initiative and were designed to improve both communication and information flow, from our clients, to their Suppliers/Customers/Employees.

[Bespoke market research](https://www.fotpresearch.com/) results clearly indicated that the take up/usage of the portals hasn’t always met expectations.

**A few key learnings from our recent research:
**

Whilst the uptake of the Portals should continue to grow, for the foreseeable future the Portal should be in addition to, rather than instead of, other forms of communication.


    Depending upon the objective of the Portal, the benefits should continually be explained/reinforced, to drive usage.
    Training/Tutorials for the use of Portal should be provided
    For someone going onto the Portal, this is an active decision to search for information. Companies shouldn’t therefore assume that everyone you’d like/expect to access the Portal, will do so.
    
The information on the Portal must be:
Relevant to both parties, i.e., the Organisation hosting the Portal and the Organisation/People accessing the Portal
           
**Up to date**
Easy to understand to avoid confusion
Sufficiently engaging/useful/insightful to encourage repeat/consistent use of the Portal
What the heck is State in React?
Tags: react, javascript, beginners, webdev
Published: 2022-07-13 13:10:56

## Introduction

After building numerous projects using only HTML, CSS and Javascript, you find yourself ready to tackle the most popular front-end framework - React.js

There are literally more than 100s of job postings daily for good React developers. So you have a pretty good reason to move from static pages.

And you are met with your first challenge - State.

## Explanation

So what is state exactly?

An oversimplification will be - a variable that re-renders(reloads without refreshing) the parent component. That's all it is.

In class component : 

![states-in-class-component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sflz5neo64nujkqwub2d.png)
 
In functional component :

![states-in-functional-components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5c6mb6ulssn1vusqb7i.png)

And as any other variable, you are free to add whatever you want in it. Some examples in functional component. (they are applicable in class component as well) : 

 ![state-example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlvcw07sjtia1tab3gvg.png)

### Changing values of state

Unlike variables where we can directly change the value by reassigning, we change values in set using a function called setState and NOT by re-assigning like a variable.

In class component:
![using-setState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnf6uncxlewmv8ny8k3s.png)

In functional component :
![using-setState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuvd3z94ygn0gte8bcay.png)
  

### Changing specific values in state

Whenever you initialize a state with an object, most of the time you might want to change a specific value only and not the whole object. How do we achieve it?

We do it by copying the previous data from the state and modify the value using the property name.

Here, I'm using functional component (same can be done in a class component) :

![changing-value-of-state-object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j62imsd2o820rybufow7.png)

## Conclusion

So that is what state is in React and how you can go about initializing, changing and using it. 

States are very helpful and "control" the component.

I often share react related content on my twitter so be sure to check it out!
The Importance of Balance
Tags: heath, balance
Published: 2022-07-13 13:09:00

I mentioned a couple of weeks ago that I was going to take a break from writing for a bit - the effects of burnt-out were starting to creep in.

I hadn't taken a valid enough pause since the start of the year (after I came back from being sick)

I got extremely invested in what I was doing - very exciting stuff. During that time I interacted with a plethora of people from different communities that helped me answer the different questions I had. Even got approached by some organisations because of writing.

However as a result I was neglecting myself in the process...


I ended up in a situation where I was exhausted...

---

## What I've Learnt From the Experience 
- **Ask**: You're not going to know everything. Reach out,  ask questions - until you have a better understanding.
- **Balance**: Within all of this, balance is a must. Don't overwork yourself - find the equilibrium between getting what needs to be done accomplished and giving yourself time to breathe.


## Conclusion
Take care of yourself. Find the balance. Don't be afraid to ask questions, there are people out there willing to help.

As for me, I'm pacing myself better....
Next Experience Framework: select a shadow DOM node in your actionHandlers
Tags: servicenow, component, uxf, nextexperience
Published: 2022-07-13 12:57:53

I had the task to write a component where I render a d3js graph. D3.js is a JavaScript library to manipulate documents based on data you provide. 

So my goal was, to create the hole graph when the component is rendered. For that we can use some component lifecycle actions. I used the 'COMPONENT_DOM_READY' to achieve my goal.

First we need to import the action type like:

```javascript
import {createCustomElement, actionTypes} from '@servicenow/ui-core';
const { COMPONENT_DOM_READY } = actionTypes;
```

Then we can go to our createCustomElement function and add the actionHandlers. We can now create the action handler for the COMPONENT_DOM_READY lifecycle action and with the effects we are also getting the host object.

Let's imagine I have a <svg></svg> tag in my view and now I can use the d3.select and the host.shadowRoot.querySelector("svg") to get the right shadow DOM node to do my d3js magic.


```javascript
actionHandlers: {
    [COMPONENT_DOM_READY]: {
		effect({ state, host }) {
                   const svg = d3.select(host.shadowRoot.querySelector("svg"));
      }
   }
}
```
ESLint Warnings Are an Anti-Pattern
Tags: javascript, webdev, react, programming
Published: 2022-07-13 12:53:46

ESLint offers three settings for any given rule: `error`, `warn`, and `off`. The `error` setting will make ESLint fail if it encounters any violations of the rule, the `warn` setting will make ESLint report issues found but will not fail if it encounters any violations of the rule, and the `off` setting disables the rule.

I'd like to argue that using `warn` is an anti-pattern. Why? Because either you care about something, or you don't. The rule is either important to follow and violations should be fixed, or the rule is not important and developers shouldn't worry about it. Therefore, use `error` or `off`.

---

## The Problem with Warnings

Now, there's no real issue with using the `warn` setting. The problem though is that when ESLint rule violations aren't enforced, developers tend to ignore them. This means that warnings will pile up in the ESLint output, creating a lot of noise and clutter.

So do you care about the rules that are being violated or not? If not, why do you have the rule enabled? If a rule serves no purpose and developers aren't addressing the warnings, get rid of the rule. If the rule is important, set it to `error` so that developers don't have the option of ignoring it.

---

## One Caveat

There is one use case for the `warn` setting that I feel is valid, so let's address that. Remember, only a Sith deals in absolutes.

When introducing a new ESLint rule to your codebase, you may find that you have too many violations to fix all at once. In this situation, what are you to do? You want to keep your ESLint script passing, especially if you enforce it in your CI pipeline (which you should!). It may be counterproductive to add an `eslint-disable-next-line` comment along with a `TODO` comment for every violation of this rule as well.

So, if you're adding a new ESLint rule and find that for whatever reason you can't clean up the violations all at once, set the new rule to `warn`, at least for now. Understand though that this is a temporary setting and that it should be your goal to clean up the warnings as quickly as possible. Then, once the rule violations have been taken care of, you can change the rule setting to `error`.

---

## Conclusion

ESLint warnings are an anti-pattern. Use only the `error` or `off` settings, and reserve using the `warn` setting only as a temporary stopgap.