teleren/devto huggingface dataset:
ONLYOFFICE Docs Developer Edition: version 7.2 released
Tags: onlyoffice, update, opensource, news
Published: 2022-09-27 15:25:05

The latest version of ONLYOFFICE Docs for developers is already available with multiple improvements and new features.

## In all editors

![Plugin marketplace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4zq0kkr0r6o74o708qt.png)

- Plugin marketplace for easy and straightforward plugin installation.
- Live viewer that allows users to see the changes made by other collaborators in real time when opening a doc in the view only mode.
- Enhanced work with fonts, support for N'Ko script. 
- Dark Contrast theme.
- Hotkeys for Paste Special, e.g. to paste formulas and text without formatting.
- Embedded OLE spreadsheets. 
- Updated Search and Replace.
- Upgraded interface for more comfortable user experience.

## Form creator

![Updated forms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdeeyg09bpx0ppa5ws51.png)

- New fields: email address and phone number.
- Complex field to compose custom fields.
- Format settings for text fields: _None, Digits, Letters, Arbitrary Mask, Regular Expression_.
- Allowed symbols setting for text fields.
- Tags to simplify form creation in the automatic mode.

## Document editor 

![Ligatures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqdkrz7g3wkgbcwddutp.png)

- Ligatures which allow merging multiple symbols into one.
- Removing headers and footers from the toolbar menu.

## Spreadsheet editor

![Link to data range](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b0qnum1eyfxjsgdk0re.png)

- Link to data range.
- Switch Row/Column.
- 1904 date system.
- Using custom images as bullets in bulleted lists.

You can explore the most important updates from version 7.2 in the [official blog](https://www.onlyoffice.com/blog/2022/09/onlyoffice-docs-7-2/) and [video overview](https://youtu.be/wF0qB78hRo8).

See the new features in action in this detailed presentation:

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

**Useful links**

[Full changelog on GitHub](https://github.com/ONLYOFFICE/DocumentServer/blob/master/CHANGELOG.md#720)

[Get ONLYOFFICE Docs v7.2](https://www.onlyoffice.com/download-docs.aspx#docs-developer)

[ONLYOFFICE Docs for developers](https://www.onlyoffice.com/developer-edition.aspx)
Upload media to Supabase from remote URL with nodejs
Tags: supabase, node, javascript, tutorial
Published: 2022-09-27 15:18:31

## Introduction

Recently I had to upload images in bulk to Supabase but I was kind of rusty on my nodejs and lost some time so I thought I would share the simple result to spare time for others.

---

## Supabase setup

The first step is to create your bucket on supabase, make it public or make sure to create policies to have the right access. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcw0ts1536u807spqj5z.png)

You can also get your **service_role** API key to bypass any RLS policies at this URL (do not share or display in public):
https://app.supabase.com/project/{YOUR_PROJECT_ID}/settings/api

---

## Script setup

To init your project we are going to need **npm** or **yarn** and run those two commands

```bash
npm init
npm install @supabase/supabase-js node-fetch@2
```

It will create a package.json and install the necessary dependencies. Now you can create your script.js file and run 
```bash
node script.js
```

If you wish to use typescript you can also do
```bash
npx ts-node script.ts
```

---

## Script

```js
import fetch from "node-fetch"
import { createClient } from '@supabase/supabase-js'

const script = async () => {
  const options = {
    schema: 'public',
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  }
  
   const supabase = createClient(
    `https://${process.env.SUPABASE_PROJECT_ID}.supabase.co`,
    process.env.SUPABASE_API_KEY || '',
    options,
  )
  
  const url = "https://www.grapheine.com/wp-content/uploads/2015/09/nouveau-logo-google-2015.jpg"
  const blob = await fetch(url).then((r) => r.blob())
    await supabase.storage.from('my-new-bucket').upload("my-name" + '.jpg', blob)
    const { publicURL } = supabase.storage.from('covers').getPublicUrl("my-name" + '.jpg')

    //To save it in your DB
    await supabase.from('myTable').update({ logo_url: publicURL }).eq('id', the_thing_id)
}
script()
```

That's it, now you can run the script and loop it for bulk upload.

---

### 😄 Thanks for reading! If you found this article useful, want more tips and follow my journey to create my own startup studio follow me on [Twitter](https://twitter.com/AntoineMesnil)
Ng-News: Episode 22/38
Tags: javascript, angular, webdev, programming
Published: 2022-09-27 15:14:12

{% embed https://youtu.be/24ZiYOFEYko %}

## Angular & Electron

Angular defines itself not as web framework but as a platform because it is not limited to the web only. To create mobile applications, we normally go with Ionic. For desktop applications, though, we can use Electron.

Aristeidis Bampakos gave a short introduction during the September Angular World Tour edition.

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

## TypeScript Beta 4.9

Microsoft released the beta version of TypeScript 4.9.

It comes with a new satisfies operator. Until now, when you declared a union type to a variable and also assigned a specific value, the variable's property was always a union type. With the new `satisfies` operator that union type is gone.

We can also expect an improvement for the `in` operator which can check if a certain object contains a particular property and is used for type narrowing in order to improve type safety.

{% embed https://devblogs.microsoft.com/typescript/announcing-typescript-4-9-beta/ %}

## Chrome DevTools 106

Chrome DevTools version 106 comes with improvements for bundled JavaScript files like Angular produces it.

The main feature is a much better stack trace and call stack because DevTools lists only our application files and excludes those from Angular or other third-party libraries.

This only works if the underlying framework adds special metadata to its bundles. Good for us because Angular does that already.

{% embed  https://youtu.be/5gBqTXctxO8 %}

## Minor Releases

Last but not least, we have a minor version of Playwright, an E2E testing framework, to 1.26.

https://github.com/microsoft/playwright/releases/tag/v1.26.0

And Spectator went up to 11.2.

https://github.com/ngneat/spectator/blob/master/CHANGELOG.md#1120-2022-09-23
Ng-News: Episode 22/37
Tags: angular, javascript, webdev, programming
Published: 2022-09-27 15:13:29

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

## ng-conf Keynotes

The ng-conf keynote, held by Angular team members, is available on YouTube.

Sarah Drasner talked about how different frameworks incluenced each other over time, and Madleina Scheidegger talked about the future plans of Angular.

The main focus on the upcoming features will be a better developer experience. We can expect improvements in the areas of hydration and reactivity.

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

The video of the community keynote is also online. It is a set of "mini presentations" about libraries, partners in the Angular ecosystem.

Like NgRx, nx, Ionic, etc.

{% embed https://youtu.be/3Mnp2WYGrVA %}

## AMA with Minko Gechev

On Twitter, Minko Gechev, also member of the Angular team, opened an Ask-me-anything session.

One of his interesting responses was that the Angular team doesn't plan to set the change detection strategy to OnPush by default. It might introduce further bugs, especially if the implications are not well understood.

Minko also suggested a minimalistic design in terms of dependencies. For example, one could use the fetch method instead of the big HttpClient, or, one should not always jump directly to angular animations but try to use native CSS first.

{% embed https://twitter.com/mgechev/status/1569866924850556930 %}

## Cypress 10.8 with support for Safari/Webkit

Cypress, an E2E testing framework, comes with support for  Safari in version 10.8. It is a little bit of a compromise though. It doesn't use the browser Safari itself.

Instead, it uses a wrapper, that acts as a minimal browser, around Safari's engine, Webkit. That particular browser comes from Playwright, another E2E testing framework that had quite some traction in 2022.

Support for Safari/Webkit is still experimental.

{% embed https://www.cypress.io/blog/2022/09/13/cypress-10-8-experimental-run-tests-in-webkit/ %}

## Minor Releases

Prime Ng, was released in 14.1.

https://github.com/primefaces/primeng/tree/v14.1.0

Angular Nation released a video about the directive composition API which we can expect for Angular 15. It will improve use cases where a component needs to have multiple directives.

{% embed https://youtu.be/oC9Qd9yw3pE %}
ColorID: 🌈 The unique 4-colors-ID string generator in JavaScript
Tags: javascript, webdev, opensource, node
Published: 2022-09-27 14:44:42


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv3gfle2qjgmok36f4sa.png)


Color as Identify - The unique 4-colors-ID string generator in `JavaScript`

The performance of `ColorID` is better than `UUID` and `NanoID` (The algorithm of `ColorID` is actually very similar to the `UUID.V4`)

If we use `ColorID` to represent identities in social networks, we can easily generate personalized social information for users, such as avatars, NFTs, etc.

The `ColorID` is consisted by 4 colors in the RGB channel from 12 unsigned 8 bits numbers (`u8`), so the theoretical total of `ColorID` is `(2^8)^12` = `2^96` ≈ `7*10^28`, which means that even if the `ColorID` is generated for every 7.8 billion people in the world every second, it will take 300 billion years to use up all `ColorIDs`. And `ColorID` provides safety by using hardware random generator, can also be used in clusters.

Because the Four color theorem, if we need to color the regions of any avatars or NFTs so that no two adjacent regions have the same color, four colors are enough!


## Install

```shell
$ npm i colorid.js
```

## Usage

```js
import colorid from "colorid.js";

colorid(); // #5B34F9-#34F9DF-#F9DF4E-#DF4EB5
```

`#5B34F9-#34F9DF-#F9DF4E-#DF4EB5`

<img src="https://user-images.githubusercontent.com/11075892/189944569-e00bfbaf-7e6e-408d-8a60-32994f79a2a2.svg" width="300px">

## Performance

```rust
crypto.randomUUID    8,829,532 ops/sec
colorid              3,252,649 ops/sec
nanoid               2,925,204 ops/sec
uuid v4                910,855 ops/sec
```


Benchmark configuration: Ubuntu, Intel(R) Xeon(R) Platinum 8171M CPU @ 2.60GHz, Node.js 18.9.0

[(runs: 3045998209)](https://github.com/rustq/colorid.js/actions/runs/3045998209/jobs/4908256305)


## License

[MIT](https://opensource.org/licenses/MIT)


## ColorID in Other Languages

- [Rust](https://github.com/rustq/colorid)
Variables - JavaScript Core Concepts
Tags: javascript, codenewbie, beginners, tutorial
Published: 2022-09-27 14:41:54

**"JavaScript Core Concepts"** is a 5-Section Series consisting of:

Section 1 Data Types & Variables 
**Part 1** ***Variables***
Part 2 Primitive Data Types
Part 3 Complex/Composite Data Types 

Section 2 Functions & Methods
Section 3 Control Flow & Conditional Statements 
Section 4 Past, Present & Future 
Section 5 Data Structures & Algorithms

The most important thing to learn about any new programming language is its Data Types & Variables. And that is what we are starting off with. 

...

## JavaScript Variables
### What is the purpose of variables?
JavaScript variables are used to hold data in memory, so that you can access and manipulate it later on. 

### How can you define variables?
There are 3 ways of defining a JavaScript variable:
1. `var`
This may or may not be reassigned, and may or may not be used for an entire function, or just for the purpose of a block or loop. This is the weakest method, which should not be used, but is still valid.

2. `let`
Used when you need to re-assign the variable later on, and is particularly useful in loops. It signals that the variable will only be used within the block that it’s defined in, and this may not always be the entire containing function.

3. `const`
Used when the variable does not need to be re-assigned later on, and means that the variable remains constant throughout the script/code block. This does not mean that it has immutable values, as an object can still have its properties mutated. 

### Which should you use?
When in doubt, use `const`, as this allows the usage to be as clear as possible. If later on, you realise that you need to modify the variable, you can always go back and change the definition to `let`. 

`let` tends to be used for loops or mathematical algorithms to take the place of one thing. This means that it is possible to deallocate the value by unsetting it. For example, it can be used for a counter in a loop or a value swap in an algorithm. 

### How does block scope interact with variables in JS? 
All code within curly braces {} is a code block. If a variable is created with `let` or `const` inside a code block, it will not be available outside of the block. However, variables outside the block will be available inside the block.

If a variable with the same name as one pre-existing in the global scope is created inside a code block and the variable is defined with `let` or `const`, then it will be completely separate. If it is defined with `var`, then it will override the global variable. 

### When should you define a new variable?
One variable should be used to represent a single concept. It is important to be careful not store multiple values within one identifier. For example, to parse a query string parameter value, it is best to create one identifier for the URL, one for the query string, and another for the parameter value. 

...

## Resources for Further Exploration:

[JavaScript ES6+: var, let, or const?](https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75)
Devart Tops in Multiple Categories at DBTA 2022 Readers' Choice Awards
Tags: dbforge, dbforgestudio, devart, dbta
Published: 2022-09-27 14:34:23

---
title: Devart Tops in Multiple Categories at DBTA 2022 Readers' Choice Awards
published: true
description: Three DBTA 2022 Readers' Choice Awards went to the dbForge Studio product line, the IDEs that help users streamline all their database activities with a single integrated solution. Another one of Devart's top-ranked products is SecureBridge, a set of client and server components for SSH, SFTP, FTPS, HTTP/HTTPS, SSL, WebSocket and SignalR protocols.
tags: #dbforge #dbforgestudio #devart #dbta
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Devart, one of the leading developers of database management software, ALM solutions and data providers for most popular database servers, is recognized as DBTA Readers' Choice Finalist for the fourth consecutive year.

Devart solutions were awarded in the following categories:

- Best Database Administration Solution - silver awards for dbForge Studio for SQL Server, dbForge Studio for MySQL, dbForge Studio for Oracle
- Best Database Development Solution - bronze awards for dbForge Studio for MySQL, dbForge Studio for SQL Server, dbForge Studio for Oracle and dbForge Studio for PostgreSQL
- Best Database Performance Solutions - bronze awards for dbForge Studio for MySQL, dbForge Studio for SQL Server, dbForge Studio for Oracle and dbForge Studio for PostgreSQL
- Best Data Security Solution - a bronze award for SecureBridge

To learn more, please visit 
https://blog.devart.com/devart-products-become-the-winners-of-dbta-2022-readers-choice-awards.html

About Devart

Devart is a multi-product company that develops advanced tools for database development and administration, ALM solutions, data providers for database servers, as well as data integration and backup solutions.

For additional information about Devart, visit https://www.devart.com/.
How to find a repository for Hacktoberfest 2022
Tags: opensource, hacktoberfest, github, tutorial
Published: 2022-09-27 14:33:01

Hacktoberfest will start in a few days, are you ready??

Let me check my gear... git updated to the latest version, RGB ram is shining in my desktop case and I've already signed up on the official website. What else?

Ah right, I'd like to take the chance of getting to know new amazing projects with Hacktoberfest, but how can I find them?

Well, here's a video on this topic!

{% embed https://youtu.be/YcOVmk-PSAI %}

---

Basically I'd suggest to navigate to the Hacktoberfest topic on GitHub (and maybe star it) to have a huuuuge list of repos.

Using the search feature for issues using the labels as filters is good, but the advanced search for both issues and repos can be a good idea too!

Those are good tricks to find projects for hacktoberfest, but all the other ways to find new repos remain valid.

I go more in detail on these tips on the [video](https://youtu.be/YcOVmk-PSAI), if you want to have a look ;)

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}

Do you like my content? You might consider subscribing to my YouTube channel!
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)
Free Ebook: Transitioning from Monolith to Microservices Handbook
Tags: learn, microservices, webdev, programming
Published: 2022-09-27 14:14:53

We have a gift for you! A free, 80-page ebook on effective microservice design. The book is [open source](https://github.com/semaphoreci/book-microservices), and you can [download it today](https://semaphoreci.com/resources/microservices).

![Book Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcnrviv0bibwtgmhnkgb.png)

## Why we wrote the book?

The growth of a company inevitably calls for cultural and technological changes. Companies that started with a monolith might find that what worked in the past no longer works today. Products and services must adapt and scale up to meet the rising demands. Microservice architecture is one of the possible ways forward.

This book helps you bridge the gap between monoliths and microservices. We start from the basics: what is a microservice? And evaluate all the pros and cons they entail, helping decide if this is the correct path for you and your organization.

Then, we move to design patterns applicable to microservices and discuss the cultural changes the organization must walk to be effective in this new paradigm.

Finally, we move to the deep technical end. We discuss ways of preparing the monolith for migration and methods for testing and running the new microservices.

## Who is it for?

This book is intended for software engineers at every level, CTOs, and tech leaders who either explore microservice architecture or facing serious scalability problems in their monolith applications.

## Download it today for free

No previous microservice knowledge is needed. Learn all you need to start your journey to microservices today.

[Get your free copy of the handbook](https://semaphoreci.com/resources/microservices).
Make Your Own Custom LinkedIn Frame in 1 Minute
Tags: linkedin, linkedintips, linkedinframe, webdev
Published: 2022-09-27 13:54:25

Not long ago LinkedIn added a feature that allows adding a frame to your profile picture, letting everyone know if your are #hiring or #opentowork.

Now, you can create your own custom frames, adding a little more character to your LinkedIn profile.

Use the image offset and to center your image (and create your cubic frame)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv50plgzj64tiyptf7n6.png)


You have full control over color (text and frame) and font-size.

Have fun!

https://yardenporat.github.io/linkedin-frame/
How to Append Multiple Elements at Once in JavaScript DOM
Tags: javascript, webdev, beginners, tutorial
Published: 2022-09-27 13:32:24

In today's post, I'll be taking you through 2 of my favourite ways to append **multiple** child elements to a parent element with the JavaScript DOM.

## 1. [`insertAdjacentHTML()`](https://youtu.be/E6B-ig8NHQE)

This is one of the most underrated methods in JavaScript. You can use `insertAdjacentHTML()` to insert an HTML string at a specified position relative to a parent element.

It supports a total of 4 positions, but the one we're interested in for appending elements is `beforeend` (insert **before the end** of the parent element).

Let's see it in action.

```js
/*
    HTML:

    <ul id="fruit">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");

// Add 3 new <li>'s to the list of fruits
fruitList.insertAdjacentHTML("beforeend", `
    <li>Pear</li>
    <li>Orange</li>
    <li>Grape</li>
`);
```

As you can see, it's easy to append multiple elements using plain HTML. To make it even simpler, you can use template literals to take advantage of multi-line HTML as I've done above 👆

## 2. [`append()`](https://youtu.be/XMjs2jQ9SXU)

The above technique uses HTML strings, but what if you wanted to build the **DOM elements manually**? Sometimes, doing it this way makes it easy to add event listeners or perform operations on the elements.

Let's explore the same example as above, this time using the `append()` method which works like `appendChild()` but lets you pass in **multiple** items.

```js
/*
    HTML:

    <ul id="fruit">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");

const pearListItem = document.createElement("li");
const orangeListItem = document.createElement("li");
const grapeListItem = document.createElement("li");

pearListItem.textContent = "Pear";
orangeListItem.textContent = "Orange";
grapeListItem.textContent = "Grape";

// Add 3 new <li>'s to the list of fruits
fruitList.append(pearListItem, orangeListItem, grapeListItem);
```

It's also worth noting that the `append()` method also lets you pass in text nodes or plain-text strings.

If you have any other techniques, please leave them down below!

## [Enrol Now 👉 JavaScript DOM Crash Course](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇

[https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1)

![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svof0kxvtm28c5ki4ios.jpg)

Happy coding 😎