teleren/devto huggingface dataset:
Follow Friday: Hackathon Edition (9 December 2022)
Tags: meta, writing, hackathon, challenge
Published: 2022-12-09 14:48:00

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

We just finished our latest MongoDB [#AtlasHackathon22](https://dev.to/t/atlashackathon22) on DEV, and we're so excited to review your submissions! ✨

In fact, one of the coolest things about the DEV Community (imho) is how many members participate in hackathons and coding contests. It's such a great opportunity to get creative, learn new tools, and flex your skills for prizes. 

So, devs: who are your favorite DEV Community hackathoners? They can be first-time submitters or multi-contest winners — and, yes, you're allowed to tag yourself!!

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite person to follow for amazing hackathon submissions (and letting us know why you love their posts!) ⤵️
QuantiMat - Reduce of 20x some colors within 88ms ! (500K+ Ops / Sec)
Published: 2022-12-09 14:43:52

## Description

It performs 500K OPS / SEC, one operation is matching or not two colors from their distance and then blend them according to some weight we process from the number of their clones in the image, if a color doesn't match their is no change and it is not counted as one operation here above.

Between attempts to blend colors if they match a certain distance that change what does the attempts differ from others one so we can use small or bigger step to reduce the color gravy! Each attempts or steps colors are putted in a cluster and reduced down to a palette and indexes to constitute the image data that change...

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

[EDIT Updated link] The code is here :https://github.com/pixa-pics/pixa-pics.github.io/blob/main/src/js/utils/quantimat/QuantiMat.js

We used tactics that really kill the king WebAssembly, look, for color's operation we use a class and operative architecture close to "Single Instruction Multiple Data" SIMD tactic which enables to use lanes of same instruction that gets cached in the micro-cpu-cache to operate better than scalar operations...


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

And well, for color quantization except that everything that stays an Integer in code is coerced with "| 0" to tells the compiler here will always be a Integer.. just as ASM.JS does and that we reuse the Typed Arrays (within JS) we allocate at first initialization to avoid getting the garbage collector working in-between our operations, yeah it uses some kind of a HEAP and that's it, a few garbage collecting tasks, all Integer explicitly coerced into Integer that are so (We know JS behavior..." and using slices to operate in near-parallel. A very well implemented SIMD functioning is already 3.5x faster, my source are https://github.com/tc39/ecmascript_simd
Awesome way to present your code!
Tags: codenewbie, programming, beginners, tutorial
Published: 2022-12-09 14:29:32

There might come various times when you need to present your code to others, it might be a meeting, a presentation, or even school/college assignments!

What do normal people do, they fire up the code editor and take a screenshot or copy paste the code when needed.

What you can do however is to make it the most beautiful code one would have ever seen.

Now focus!!😐

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

Now look at this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnk5rt0t6xvp45esxv6w.png)



I think its pretty clear which one looks better.

## So how to make your code look awesome?
Its pretty simple.
Head over to [Carbon](https://carbon.now.sh/)
Its an open source code beautifier (that's what I like to call it)

Once you have are on the site, its pretty straight forward, you don't need to create any accounts or anything like that.

Just type in your code, change the themes and colors according to your choice and click Export!

Check my website out at [pcoder.me](https://pcoder.me)
Make sure to leave a heart❤️
AWS S3 Tutorial For Beginners | AWS S3 Bucket Tutorial | AWS Training
Tags: aws, cloud, s3, tutorial
Published: 2022-12-09 14:23:59

This "AWS S3 Tutorial for Beginners" video by Edureka will help you understand one of the most popular storage service, Amazon S3, and related concepts in detail. Following are the offerings of this video:
1.  AWS Storage Services
2.  What is AWS S3?
3.  Buckets & Objects
4.  Versioning & Cross Region Replication
5.  Transfer Acceleration
6.  S3 Demo and Use Case

{% embed https://www.youtube.com/watch?v=9HsEMyKrlnw %}
How to install an already made Laravel script on cPanel
Tags: paymentgatewayscript, installlaraveloncpanel, laravel, cpanel
Published: 2022-12-09 14:09:47

Good Day !

In this article I am going to teach how to install an already made Laravel script in a cPanel hosting service. 

for this tutorial, we will install a Laravel rest API for the Artemis payment gateway script.

the Artemis Payment Gateway Script is a Full Stack  Application that uses Laravel for its Backend and NextJs 12 for frontend, and today we are going to setup the backend ( the Laravel Rest API ) on a cPanel.

to start I have already downloaded the script from codester and unziped the rest API files in the server root directory, (.../www or .../public_html )
How to Hack & Protect Flutter Apps (Pt. 2/3)
Tags: flutter, reverseengineering, security, mobile
Published: 2022-12-09 13:28:36

I am working on a short guide, "How to Hack & Protect Flutter Apps" aimed at junior and medior Flutter devs and reverse engineers who'd like to get acquainted with App protection for Flutter-based apps. I am happy to announce the part 2 is released!
-> https://lnkd.in/emzZXzQd

![Flutter Mobile Security](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/souqgeko7emapxloy63n.png)

The part 1 was a huge success with a great feedback on r/FlutterDev: https://lnkd.in/e4guhduw

Part 1 ↓
https://lnkd.in/eXA9WKzj

- Disassemble app.
- Extract its secrets.

Part 2 ↓
https://lnkd.in/emzZXzQd

- Make a fake clone.
- Check every transmitted JSON.
- Inject code.

Part 3 (coming soon) ↓
- Steal authentication tokens.
and attack the API.
Amazon S3: Example Bucket Policy for Static Website Hosting
Published: 2022-12-09 13:55:53

Since I have to look it *every time*, I'm posting it here, for my own--and possibly also your--reference: A reusable bucket policy for S3 to grant read access for static websites. Simply copy, paste it in your bucket's policy editor, and replace `BUCKET_NAME` with your bucket's name.

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}
```

*Note: Make sure to also disable block public access settings for your bucket. Before doing this though, please review [Blocking public access to your Amazon S3 storage](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-control-block-public-access.html) to ensure that you understand and accept the risks involved with allowing public access. When you turn off block public access settings to make your bucket public, anyone on the internet can access your bucket.*
Adding Tailwind to Nuxt 3
Tags: webdev, javascript, node
Published: 2022-12-09 13:50:33

This week, I was setting up a Nuxt 3 application and I googled how to add tailwind to a Nuxt 3 application, I saw lots of results that almost worked. I guess the writers didn't really test what they wrote or better yet they're not developers, just technical writers (I'm not throwing shades at anyone 🤓). I decided to drop this little post so I could reference in the future and it can also help others as well.

### Install Tailwind dependencies
To get started, install the tailwind dependencies
```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

###  Generate Tailwind config file
```bash
npx tailwindcss init -p
```
The above command generates a `tailwind.config.js` file in the root of your project.

### Configuring Tailwind
Open the tailwind.config.js file in your editor and modify to match the code below.

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue"
  ],  theme: {
    extend: {},
  },
  plugins: [],
}
```
### Add Tailwind to Style
Add the following to a assets/css/styles.css file (Create file if it doesn't exit).

```js
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Update Nuxt config
Finally we update our Nuxt config to include our css in the build process and also make use of tailwind plugin in postcss (Postcss supercharges our css with JavaScript). Autoprefixer helps us write css without worrying about vendor prefixes.

```js
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    '@/assets/css/main.css',
  ],

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})
```
Just like that, I was able to use tailwind with Nuxt 3. Feel free to drop comments or request modification.
Make Mysterious Shape from SHADOW 🤯
Tags: css, tutorial, beginners
Published: 2022-12-09 13:48:51

{% youtube 2omJ01SbCW4 %}

In this video, I will show you how to create mysterious shapes with css box-shadow

CSS Battle 136 - https://cssbattle.dev/play/136
CSS Battle 129 - https://cssbattle.dev/play/129
Make Mysterious Shape from SHADOW 🤯
Tags: css, tutorial, beginners
Published: 2022-12-09 13:42:41

{% youtube 2omJ01SbCW4 %}

In this video, I will show you how to create mysterious shapes with css box-shadow

CSS Battle 136 - https://cssbattle.dev/play/136
CSS Battle 129 - https://cssbattle.dev/play/129
This Week @ Grafbase - Dec 9
Tags: graphql, webdev, javascript, api
Published: 2022-12-09 13:18:26

Happy Friday 🥳

It’s been a few weeks since our last update about what’s going on at [Grafbase](https://grafbase.com), and for good reason...

## What’s new?

🎮 **Dashboard tweaks**
We’ve made some significant changes to our Dashboard UI. You should start to see updates rolling out every few days.

![Grafbase Project Card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inbsoafrs23samluwu2h.png)

🛠️ **Bulk Environment Variables**
We've made it even easier to add environment variables. Check it out! 

![Environment variables UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhunzrry29kxno1wb1b8.png)

🛰️ **GraphQL Galaxy**
Grafbase Founder & CEO Fredrik Björk spoke at GraphQL Galaxy with other industry experts on the future of server-side GraphQL.

![GraphQL Galaxy Panel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e00q64jri43lk50c3nam.jpeg)

📢 **Base64 cursors**
Collection queries returning edges will now return a base64 encoded `cursor` value you can use with the `before`/`after` pagination arguments. [Learn more about pagination](https://grafbase.com/docs/reference/pagination).

🧰 **New home for examples**
There's a [new GitHub repo](https://github.com/grafbase/examples/) for all examples! Go check it out.

## What’s next?

⚡️ **Live Queries**
We’re putting the final touches on our realtime GraphQL support. Next week we will introduce this officially. For those keen enough, you can try it out today if you dig around the documentation 😉.

🔢 **Improved numeric operations**
We’ve made it easier to increment and decrement numeric fields. This change is live in production now but coming to CLI support next week with an official changelog.

**GraphQL Galaxy Workshop**
In this workshop, we'll cover the basics of GraphQL, and then use that knowledge to build a backend using SDL. Once we've created our schema, we'll run it locally, deploy to production, and create deployment branches for any changes to our schema. We'll finish the workshop by fetching data from our backend from the frontend, as well as adding authentication to lock down data access!
https://graphqlgalaxy.com/workshops-3h

Next week we will introduce some significant changes, including Live Queries, Numeric operations, Improved Documentation, and lots more!

---

We love to hear from our users what we can be doing better. No matter how small you might think it is, we want to hear from you!

Make sure to click **Feedback** once logged in and share your thoughts. **We read them all!**

![Feedback form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y02jeblz7znfkvm3qx81.png)

Have a great weekend! 💚
What type of monitor is best for gaming?
Published: 2022-12-09 13:03:08

Gaming Monitors are specifically built for the needs of gamers. These monitors have high refresh rates, fast response times, and high contrast ratios. They also have a wide color gamut which helps enhance the visual experience for gamers. Lenovo's [Gaming Monitor](https://www.lenovo.com/us/en/d/gaming-monitor/) features a 144Hz refresh rate, 1ms response time and AMD Adaptive Sync technology to create the optimal gaming environment.
Search in Rotated Sorted Array II
Tags: javascript, leetcode
Published: 2022-12-09 13:00:35

[Search in Rotated Sorted Array II](https://leetcode.com/problems/search-in-rotated-sorted-array-ii/description/)

```js
/**
 * @param {number[]} nums
 * @param {number} target
 * @return {boolean}
 */
var search = function (arr, target) {
  let low = 0;
  let high = arr.length - 1;

  while (low <= high) {
    let mid = parseInt((low + high) / 2);

    if (arr[mid] === target) {
      return true;
    }

    // check search in first Half & as low  < mid mean it is sorted
    if (arr[mid] === arr[high]) {
      high--;
    } else if (arr[low] <= arr[mid]) {
      if (target <= arr[mid] && target >= arr[low]) {
        high = mid - 1;
      } else {
        low = mid + 1;
      }
    } // check search in 2nd Half
    else {
      if (target <= arr[high] && target >= arr[mid]) {
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }
  }

  return false;
};
console.log(search([2, 5, 6, 0, 0, 1, 2], 3));
console.log(search([1, 0, 1, 1, 1], 0));
console.log(search([3, 1], 1));


```
Thank you 😍
Tags: watercooler, webdev, codenewbie
Published: 2022-12-09 12:58:12

Hello Everyone, I have just crossed 5000 followers mark today. I am writing this post to thank you all for supporting me from that start. 

I am genuinely grateful to all my fellow DEVs and followers for their care and support. I promise to keep posting my blogs. I am so lucky to have an amazing community.  

Although the journey was not easy, you all made it possible. Can’t hide my feeling anymore after watching the number of followers. I never thought I would have come this far, but here we are and we have a long way to go.  I am very obliged for your enormous help, likes and comments. It's an honor to be a part of this community. 

{% tweet https://twitter.com/j471n_/status/1601198588931244033?t=dRy6U01rToDBrqN0LHKdTg&s=19 %}

If you want to share any advice or have an opinion, then don't hesitate to share with me. 

Keep loving and commenting!

{% user j471n %}
How to use Retool to build an internal tooling platform [webinar]
Tags: retool, internaltools, lowcode, automation
Published: 2022-12-09 12:53:01

Recently FINN business automation engineer [Cornelius Schramm](https://www.linkedin.com/in/cornelius-schramm-450759150/) and software engineer [Leander Peter](https://www.linkedin.com/in/leander-peter-943b021a7/) got together with  engineer [Julie Chen](https://www.linkedin.com/in/julielchen/) and growth marketing manager [Vasundhara Singh](https://www.linkedin.com/in/vasundhara-singh-803984119/), both from Retool, to talk about their collaboration in building the internal tooling platform that is FINN's operational hub. 

You can watch the webinar right here:

{% youtube k1FcnxMhNks %}

Any thoughts or feedback? Let us know in the comments 😀
React useMemo for optimization
Tags: webdev, react, node, javascript
Published: 2022-12-09 12:50:11

Have you ever used useMemo() hook in your react application ?.

useMemo is an amazing react hook that helps us to optimize our components in react.In this blog, i will show you how we can implement useMemo in our components to make our application more efficent and optimized.

Basically what useMemo do is it catches the data or result of a specific operation.In react, when we changes the state of a variable, the component is rerendered.Each time when the component is rendered, all the operations/calculations are performed again.
This will ultimately affect performance of our app if the operation is an expensive one.
                          We can avoid this by using useMemo.It takes a callback function and a dependency as arguments.All the operations that have to be performed is wrapped inside callback.Here, the operation is performed only if the state of dependency variable changes even if the component is rerendered.

<u>**useMemo implementation**</u>

```
import { useMemo, useState } from "react";

export default function App() {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  const [check1, setCheck1] = useState(false);
  const [check2, setCheck2] = useState(false);

  const sum = useMemo(() => {
    console.log("Calculating");
    return data.reduce((acc, data) => acc + data, 0);
  }, [check1]);
  console.log(sum);
  return (
    <div style={{ height: "100vh", display: "grid", placeContent: "center" }}>
      <button 
        onClick={() => setCheck1((p) => !p)}>Button1</button>
                 
      <button 
        onClick={() => setCheck2((p) => !p)}>Button2</button>
    </div>
  );
}
```

When the above component is rendered,if you look in the console,it will print "Calculating sum " only when Button1 is clicked.When Button2 is clicked only the sum is printed in the console.This is because i passed the variable check1 as the dependency to the useMemo hook.Hence the sum is calculated only when the state of check1 changes.

**<u>Conclusion</u>**
Consider using using useMemo in your next react project.It will help you to optimize complex architectures.
Advent of Code 2022 - Day 8
Published: 2022-12-09 12:45:16

---
title: Advent of Code 2022 - Day 8
published: true
description: I'm trying to solve all the Advent of Code puzzles in this video series.
tags:
cover_image: https://i.ytimg.com/vi/WWqlpQP8eLc/maxresdefault.jpg
---

{% youtube WWqlpQP8eLc %}

I'm trying to solve all the Advent of Code puzzles in this video series.
What is a Hybrid App?
Tags: programming, mobile, ios, hybirdap
Published: 2022-12-09 12:12:21

Before explaining Hybrid [mobile app development](https://www.uplogictech.com/mobile-app-development-company), you should know about Web applications.  Web applications are programs that can be stored on a server and accessed remotely through a website. Simply, Web apps are nothing but upgraded websites that can act as mobile apps.

Now, let's get back to the topic.

Hybrid app development is an app solution that collaborates web applications and native applications. That means, the Hybrid app developers embed the code of web apps (usually CSS, HTML, JavaScript) within the structure of native applications. 

So, the user who accesses a Hybrid application can use the Web app through the interface of a typical mobile application. 

It is possible with a few plugins like **Capacitor, Apache Cordova**and others.  Due to this, Hybrid mobile applications can be accessed through any OS. It’s the highlighted selling point of Hybrid applications. 
Famous applications like **Instagram, Evernote, Gmail** and others are great examples of Hybrid applications.

To Know more: [http://bitly.ws/xEEF](http://bitly.ws/xEEF)
LBX1870
Tags: lbx1870, lbx1700
Published: 2022-12-09 11:30:09

The **[LBX2040](https://www.labifix.com/lbx2040-superior-shielding-rf-test-box/)** RF shield Box is a versatile, manual front-loading bench top shielding box that supports excellent shielding performance for a wide range of testing requirements and frequency ranges. Engineers can customize I/O connectors, EMI filter data ports and power line filters according to their specific testing needs, making it an ideal solution for a variety of RF testing applications.
Solving day 09 of Advent of Code 2022 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2022-12-09 11:29:22

---
title: Solving day 09 of Advent of Code 2022 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2022 (day 09)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2022 in Javascript
---

{% youtube aOwu5p55PFc %}
How to Do Things With SDL2
Tags: codenewbie, odinlang, tutorial, beginners
Published: 2022-12-09 11:29:19

---
title: How to Do Things With SDL2
series: SDL2 and the Odin Programming Language
published: true
description: Learn to use SDL2 with concise e
tags: codenewbie, odinlang, tutorial, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfylnxdy4a9cnugx0ksm.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-09 11:05 +0000
---

Today I started a new project for sharing concise examples on how to do things with [SDL2 and the Odin programming language](https://github.com/patrickodacre/sdl2-odin-examples).

I'm on a mission to help others program games from scratch. I publish content for complete beginners to programming, and those just new to game programming.

## Beginners Learning to Code

Most people interested in learning how to code end up learning to program in the context of web development.

While web development can be fun, it is complex, and beginners are usually forced to learn a lot of secondary technology before they can start writing interesting programs.

In the earlier days of computing, many skilled programmers got their start by programming their own games. It is a fun, creative, challenging, and very effective way to learn how to code.

## Learn to Code by Making Games

If you'd like to learn how to code, follow me on [YouTube](https://www.youtube.com/@handmadegamesdev) and [Twitter](https://twitter.com/_handmadegames). I'm really busy making a mix of beginner and intermediate-level content to help you learn programming in a unique and fun way.