teleren/devto huggingface dataset:
A Palace of Palettes with Appwrite
Tags: appwritehack
Published: 2022-05-12 20:42:55

### Overview of My Submission

My submission for the [Appwrite Hackathon][hack] is [**Palace**][demo], a palette organising playground for people dealing with colour *at palatial scale* 😎🤪

![Screenshot 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kccopv8venpvwk4k3d1.png)

+ [🐙 GitHub Repo][repo]
+ [🏯 Live Demo][demo]

[hack]: https://dev.to/devteam/announcing-the-appwrite-hackathon-on-dev-1oc0
[repo]: https://github.com/stegriff/palace
[demo]: https://palace.sign.me.uk/

This is borne out of my need for a tool to let me import, tweak, and export lots of palettes. And I thought it would be a great opportunity to try out the auth and database features of Appwrite for this hackathon!

The Appwrite features it uses are:

* Anonymous sessions
* Accounts
* Database

I can tell I've only scratched the surface, as there's a lot of backend support in Appwrite too, which was just outside the scope of this project.

But it was great to be able to add server-backed save features for relatively little effort.

### Submission Category: 

Web2 Wizards

### Link to Code

{% embed https://github.com/stegriff/palace %}

### Additional Resources / Info

I [wrote about the creation process][blog] in a previous post, but the tall and short of it is:

+ Built with [my Vue3 starter][sv3] and [Pinia][p]
+ Made lots of use of the great Appwrite [demo-todo-with-vue][sample-readme] 
+ Used packages like [vue3-colorpicker](https://aesoper101.github.io/vue3-colorpicker/) and [colord](https://www.npmjs.com/package/colord)
+ Deployed the backend on DigitalOcean with the [Appwrite one-click droplet][oneclick]
+ Deployed the UI on Netlify

![Screenshot 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq9da8ndips733d2l61r.png)

[sv3]: https://github.com/SteGriff/ste-vue-3
[p]: https://pinia.vuejs.org/introduction.html#basic-example
[oneclick]: https://marketplace.digitalocean.com/apps/appwrite
[sample-readme]: https://github.com/appwrite/demo-todo-with-vue/
[blog]: https://dev.to/stegriff/walking-appwrite-starting-my-appwrite-project-4ikn

### Challenges

I wanted Palace to have import/export to JSON and CSS, but didn't have time inside the hackathon. Those will come later 😊

AI had to use a spare domain to get the backend talking to the frontend over HTTPS; that was an unexpected challenge but it worked eventually.

Palace has one **really big bug** which is that data isn't isolated per user... everyone can edit everyone's data 😅... I set everything up as I thought I should in appwrite, and manually set permissions with `user:$userId` but still, the data leaks. Maybe somebody will comment and tell me what I did wrong!

Thanks for reading my entry -- happy hacking 😊
Discussion and Comment of the Week - v4
Tags: bestofdev
Published: 2022-05-12 20:42:46

**This weekly roundup highlights what we believe to be the most thoughtful and/or interesting discussion of the week. We're also be highlighting one particularly cool comment in each installment. 🙌**

The DEV Community is particularly special because of the kind and thoughtful discussions happening between community members. As such, we want to encourage folks to participate in discussions and reward those who are initiating or taking part in conversations across the community. After all, a community is made possible by the people interacting inside it.

## Discussion of the Week

This week, I'm feeling like we have a tie. So, co-winners @adiatiayu and @joelbonetr, I hope you're both cool with sharing this digital trophy-moji. 🏆 😀

Ayu wrote a really thoughtful prompt asking folks for their opinions on  whether or not they believe devs should "put themselves out there": 

{% embed https://dev.to/adiatiayu/should-developers-put-themselves-out-there-1922 %}

This triggered lots of folks dropping their personal takes on why they write and learn in public. And it was also refreshing to hear the other side... plenty of folks made a solid case for carrying on quietly. One pretty constant suggestion was to let folks decide for themselves when they wanna speak up!

Meanwhile, Joel fired up a convo around folks' favorite reusable functions:

{% embed https://dev.to/joelbonetr/which-functionsmethods-do-you-484m %}

It's always entertaining to see a list of folks' frequently used snippets!

## Comment of the Week

There are so many awesome comments out there, but for this week's selection, we're gonna go with the following comment by @bytebodger in response to "[How do you work with computers and the web that is different from non-developers?](https://dev.to/ben/how-do-you-work-with-computers-and-the-web-that-is-different-from-non-developers-57c8)"

{% embed https://dev.to/bytebodger/comment/1o902 %}

This comment was thorough and just plain ole fun to read. As a non-developer, I found it quite helpful too. 🙌  As others noted in response, the icon-only bookmark bar trick is so dang clever. Thanks for sharing!

## What are your picks?

There's loads of great discussions and comments floating about in this community. These are just a few we chose to highlight. 🙂

I urge you all to share your favorite comment and/or discussion of the past week below in the comments. And if you're up for it, give the author an @mention — it'll probably make 'em feel good. 💚
Stupid Things Orgs Do That Kill Productivity w/ Netflix, FloSports & Refactoring.club
Tags: devops, podcast, techtalks, productivity
Published: 2022-05-12 20:15:47

*We want to make the Dev Interrupted podcast a vital, enjoyable part of your week.* ***Please take 2 minutes and answer our new [Listener Survey](https://www.surveymonkey.com/r/PRYRNC5).*** *It lets us know a bit about you, what you want from Dev Interrupted and what you want from podcasts in general!*

At LinearB, we like to think we spend all our time figuring out how to unlock developer potential. To find ways to let devs do more of the work they love and reduce the amount of time they spend dealing with needless hurdles, idling and churn.

We’re not the only ones thinking about how to do this, though. At our recent INTERACT panel, we assembled amazing engineering leaders from Netflix, FloSports and the Refactoring.club newsletter to give us their inside knowledge on how they increase productivity and promote creativity in their own organizations.

One of the highlights of our INTERACT conference, this panel conversation is filled with real wisdom and takeaways we hope you can apply to your own teams the moment it’s over.

Enjoy - and don't forget to fill out our very first listener survey!

{% spotify spotify:episode:4RkWP9jmHnH3wfa9ZVXDEW %}

## Episode Highlights Include:
* (2:38) How Netflix defines developer productivity
* (9:00) Cultural changes for remote-first dev teams
* (18:03) Why daily ceremonies are "stupid and arbitrary" 
* (18:32) Creating a product mindset for developers
* (27:24) Say "no" to status updates
* (32:10) Improving non-coding time
* (38:00) Tracking idle time and cognitive reload

***Starved for top-level software engineering content? Need some good tips on how to manage your team? This article is inspired by [Dev Interrupted](https://devinterrupted.com/podcasts/) - the go-to podcast for engineering leaders.***

*Dev Interrupted features expert guests from around the world to explore strategy and day-to-day topics ranging from dev team metrics to accelerating delivery. With new guests every week from Google to small startups, the Dev Interrupted Podcast is a fresh look at the world of software engineering and engineering management.*

[***Listen and subscribe on your streaming service of choice today.***](https://devinterrupted.com/podcasts/)

![https://devinterrupted.com/podcasts/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gl8yy3hpnevlyboet97b.png)
Flatiron Phase1
Tags: javascript, html, algorithms
Published: 2022-05-12 20:13:12

In this blog, I will take a look at 2 commonly used algorithms and address the benefits and caveats for each algorithm:

- Bubble Sort

- Quick Sort

**Bubble sort** is a simple sorting algorithm.
It iterates through the list and find two item i and i + 1, if list[i] is larger than list[i + 1], swap the two item.
The worst complexity it can reach is O(n^2).
It's easier to understand but not useful for large amount of data. One possible application is to list mostly sorted.

Below is what I wrote based on my understanding
while sorted == False:
    sorted = True
    for i in range(len(list) - 1):
        if list[i] > list[i + 1]:
            list[i], list[i + 1] = list[i + 1], list[i]
            sorted = False
print(list)

**Quick Sort** has an average complexity of O(nlog(n)) but worst case is O(n^2). It's one of the most often used divide and conquer algorithm. The pseudo code is below 

1. Select a pivot for the array, I will use rightmost element in this case
2. Partitioning: this is an important step, elements smaller than pivot at partitioned to the left, and elements greater than pivot are partitioned to the right. 
3.Once all elements are iterated, pivot will be switched with the last item larger than pivot. So that on the left, all elements are smaller than pivot. On the right, all elements are larger than pivot. Neither side needs to be in order.
4. After partitioning, the process will be run again for the left and right partition of the array.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yy394lcyolophix759m1.png)
 
Quick sort is efficient and doesn't require extra memory to do the recursion (like merge sort)
Paracetamol.js💊| #115: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-05-12 20:06:03

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
console.log("Hola");
setTimeout(() => {
  console.log("bello");
},0)
console.log("mundo");
```

A. `Hola bello mundo`
B. `Hola mundo`
C. `mundo Hola bello`
D. `Hola mundo bello`

Respuesta en el primer comentario.

---
Internal Architecture of HydePHP - Part 2: Services
Tags: hydephp, programming, architecture, php
Published: 2022-05-12 20:05:03

## A Deep Dive into Services


> Deep-Dives takes a closer look at the codebase and tries to explain what's going on.

This article is the second installation in my series on the internal architecture of HydePHP.
If you haven't read part one already, you should do that first. Here is a quick link [Internal Architecture of HydePHP - Part 1: Introduction](https://dev.to/stresseddev/internal-architecture-of-hydephp-part-1-268i).

## Taking a look at a Service

Let's take a look at a relatively new Service Class, the DocumentationSidebarService, to get a better understanding of how a Service is used through practical examples.

> Here is a link to the [source code on GitHub](https://github.com/hydephp/framework/blob/v0.24.0-beta/src/Services/DocumentationSidebarService.php).

This Service is as you may have guessed used to manage the sidebar in documentation pages!

When using sidebar data in the Blade views, we interact with the Service to get the data we need.


You are of course free to take a [look at the source code](https://github.com/hydephp/framework/blob/v0.24.0-beta/resources/views/layouts/docs.blade.php) to get a better understanding of how it all fits together, however here are some examples loosely plucked from the code.

```blade
$sidebar = Hyde\Framework\Services\DocumentationSidebarService::create();

@if($sidebar->hasCategories())
    @foreach ($sidebar->getCategories() as $category)
        @foreach ($sidebar->getItemsInCategory($category) as $item)

@else
    @foreach ($sidebar->getSidebar() as $item)
```

As you can see, the Service gives access to a lot of data and logic.
However, the Service does not do much of the heavy lifting. True, the Service contains methods to create and modify data,
and while it is responsible for generating the sidebar, it actually leverages other components to do the heavy lifting.

For example, the `DocumentationSidebarService::create()` method is used to create a new instance of the Service containing
a freshly generated sidebar, but the fetching of items to put in the sidebar is done by the `CollectionService`, the
actual parsing to get front matter data is done in the sidebar item model. The categorization is handled in a Concern. 

```php
/**
 * @example Hyde\Framework\Services\DocumentationSidebarService::create()
 **/
public static function create(): static
{
    return (new static)->createSidebar()->withoutIndex()->withoutHidden();
}
```

## Next Up

Make sure to check out the **How Hyde knows what to do with your Markdown** post (launching tomorrow).
Store-in-Svelte : unsubscribe method pseudo-c0de
Tags: svelte, store, pseudocode
Published: 2022-05-12 20:03:03

This snippet revise simplified version of `svelte/store`, the pseudo-c0de :

> TIP: it requires to open Console on CodeSandbox IDE, in case it throws any error, open the IDE in dedicated tab or just refresh the browser window inside the IDE . Thanks !

{% codesandbox svelte-store--pseudo-c0de-rgwzto %}
NFT-fair
Tags: appwritehack
Published: 2022-05-12 19:01:38


### Overview of Submission
You've probably seen numerous articles, dedicated websites, and even movies detailing what these NFTs are and how to obtain one . However, there should be a location where you can get your hands dirty, mint some NFTs, sell or buy your work of art, and even play with them.

What did we use to build this:
- Backend - **Appwrite**
- React Framework - NextJs
- Everything Web3 - Thirdweb
- UI Components - Chakra UI
- CSS Framework - Tailwind CSS

## Submission Category: 

### Web3 Wunderkinds, Wacky Wildcards


### Link to Code

[Github](https://github.com/starwiz-7/nft-write)


### Additional Resources / Info

### The flow of the app
- First, connect your wallet, right now only metamask support has been provided.

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

- You can create your own pixelated NFT by going into the create tab.

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

- Give the name, description and price of your very own NFT.

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

- If you visit the Marketplace tab, you can see our marketplace and buy any NFT that you like.


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

- You can also view the NFTs price, description on the specific NFT page.


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

- To view the NFTs that you have owned, just click on the tab where you can see your account address.


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

- You can edit your profile for giving it a personal touch!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2xzxeopfka9cqcavv36.png)
 
### Appwrite usage 
 - We have used database to store the profile details of the user

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

- We have used storage to store the profile picture of the users

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

### Disclaimer
We look forward to deploy this so that anyone can use this! Currently it won't work without the private key :(

### Team:

- Me (Aryan Yadav)
- Charles (@charlesvj )
- Cyril (@cyril2019 )
Javascript reserved keywords || Javascriptdagi ta'qiqlangan kalit so'zlar
Tags: javascript, programming, tutorial, beginners
Published: 2022-05-12 19:46:44

Javascriptda foydalanish mumkin bo'lmagan ba'zi kalit so'zlar mavjud. Quyida siz barcha ta'qiqlangan kalit so'zlarni ko'rishingiz mumkin.

O'zgaruvchilar nomlari va identifikatorlar uchun foydalanish mumkin bo'lmagan Javascriptdagi kalit so'zlar:

`await`, `break`, `case`, `catch`, `class`, `const`, `continue`, `debugger`, `default`, `delete`, `do`, `else`, `enum`, `export`, `extends`, `false`, `finally`, `for`, `function`, `if`, `implements`, `import`, `in`, `instanceof`, `interface`, `new`, `null`, `package`, `private`, `protected`, `public`, `return`, `super`, `switch`, `this`, `throw`, `true`, `try`, `typeof`, `var`, `void`, `while`, `with`, `yield`.
 
*Hech qachon o'zgaruvchilarni yuqoridagi nomlar bilan nomlamang.

Bundan tashqari ushbu **HTML event**'lardan identifikator sifatida foydalanmasligingiz kerak:

`onblur`, `onclick`, `onerror`, `onfocus`, `onkeydown`, `onkeypress`, `onkeyup`, `onmouseover`, `onload`, `onmouseup`, `onmousedown`, `onsubmit`.
Best time to buy and sell stock
Tags: javascript, beginners, webdev
Published: 2022-05-12 19:44:07

Tried to solve another question from leetcode involing buy and selling a stock at a specific price. The details are outlined below. 

Need some guidance because the code dosen't work but i'm sure my logic is correct here. The comments outline what i am doing step by step for this question.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hubv2ovrw8wtznbdjah.jpg)

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

```
var maxProfit = function(prices) {
    const buy = Math.min(prices);                   //finding the lowest value/ buy price
    const index = prices.indexOf(buy);              //get the index of the buy price
    let temp = [];                                  //temporary array to store possible sell prices
    for (let i=index; i<prices.length-1; i++) {
        if (prices[i] > prices[index]) {            //iterate for every element in prices later than buy price
            temp.push(prices[i]);                   //add the values to the temp array
        }
    }
    const sell = Math.max(temp);                    //get the highest value in this temp array
    const profit = sell-buy;                        //get profit 
    if (sell == null) {
        return 0;
    }
    return profit;
};
```
Make an awesome 3D model of your Github contributions!
Published: 2022-05-12 19:36:36

![My Skyline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgoqnhli4llg83pzhu37.jpg)
 Hey,

If you haven't seem this yet, Github now lets you generate a very cool 3D model from your Github contributions graph.

Check mine here: https://skyline.github.com/omar-dulaimi/2021

Make yours: https://skyline.github.com/
DKIM FAQs (Frequently Asked Questions)
Published: 2022-05-11 03:02:07

![DKIM FAQs (Frequently Asked Questions)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwaqofx1ndjwzd9hxa03.png)
**_What is DKIM?_**

DKIM, which stands for **DomainKeys Identified Mail**, is an email authentication method designed to detect forged header fields and content in emails. DKIM enables the receiver to check if email headers and content have been altered in transit.

**_Why use DKIM?_**

DKIM enables the receiving email server to check if the email headers and content have been altered in transit. If that's true, a DKIM check will return the _fail_ result, indicating the message's integrity has been compromised.

On the DMARC level, you can specify a p=reject policy to reject messages that have failed DKIM authentication (and SPF authentication). This way, you can prevent malicious emails from reaching your recipients' inboxes.

**_Who signs the email message?_**

The outgoing server that actually sends the email message by initiating an SMTP session does. It signs the message using a private key saved locally on the same machine.

**_How does DKIM signing work?_**

DKIM signing an email message on the originating email server involves these steps:
1. choose which header fields and/or body to be included in the data;
2. compute the hash sum of the data, including message headers and message body;
3. encrypt the hash sum with the private key. The result is called the "signature";
4. append a DKIM-Signature header containing the signature to the email.

**_Who verifies the email messages?_**

The receiving server of the email message does.

After the verification, it returns one of these results (possibly to a controlling module like DMARC): _none_, _pass_, _fail_, _policy_, _neutral_, _temperror_, and _permerror_.

**_How does DKIM verification work?_**

When the email reaches the destination, the receiver checks if a DKIM-Signature field exists in the header.

If a DKIM-signature field is found, the server verifies the authenticity of the email:
1. look up the DKIM record of the domain in the DNS, using the selector in DKIM-Signature specified by the s= tag;
2. if found, extract the public key which is part of the keypair from the record;
3. compute a hash sum using the algorithm specified by the a= tag, of the incoming data specified by the h= tag;
4. decrypt the signature with the public key to reveal the hash sum computed by the sender;
5. if hash sum in 4 is equal to hash sum in 3, it passes the check, meaning the message hasn't been tampered with; otherwise it fails.

Learn more about [DKIM verification](https://dmarcly.com/blog/how-to-implement-dmarc-dkim-spf-to-stop-email-spoofing-phishing-the-definitive-guide#dkim-verification).

**_What if there are multiple DKIM signatures?_**

Multiple DKIM signatures can be found if an email message is forwarded. Learn more [here](https://dmarcly.com/blog/multiple-dkim-signatures).
A "Quick edit" bookmarklet to edit any web site
Tags: webdesign, tricks, editing
Published: 2022-05-12 19:27:51

---
title: A "Quick edit" bookmarklet to edit any web site
published: true
description: Edit any web site with a click of a button before making screenshots.
tags: webdesign, tricks, editing
//cover_image: https://direct_url_to_image.jpg
---

Using the [Quick edit bookmarklet](https://codepo8.github.io/Quick-edit-bookmarklet/) you can make any web site editable. Drag it to your favourites toolbar, click it and you get into edit mode. You can edit, copy and paste, delete and anything else. Hitting `ESC` will end edit mode.

![Quick edit in action - drag it to your toolbar, click it and start editing the page. Hitting ESC end the editing mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdj821a77e72embukh3c.gif)

You can use this to quickly edit web sites before taking a screenshot, for example. 

The [source code is available on GitHub](https://github.com/codepo8/Quick-edit-bookmarklet)