teleren/devto huggingface dataset:
Docker Node Image Variants
Published: 2022-05-12 05:58:05

## `node:<version>`
사실상 default 이미지.
요구 사항이 무엇인지 확실하지 않을 때(필요한 이미지가 불확실할때) 사용하는 것이 좋습니다. 이 이미지는 버리는 용도의 컨테이너(소스코드를 마운트하고 앱을 실행하기 위한 컨테이너)로 사용되기도 하고 다른 이미지 빌드용으로 사용될 수도 있습니다.

몇몇 태그들은 `bullseye`, `buster` 또는 `stretch`와 같은 이름을 포함하고 있는 태그들이 있는데 Debian 릴리즈 코드의 이름이고 이 이미지들은 해당 릴리즈 버전 기반의 이미지들 입니다.

이 태그는 `buildpack-deps`이미지 기반입니다. `buildpack-deps`는 시스템에 많은 도커 이미지를 가진 도커 사용자를 위해 설계되었습니다. 매우 많은 Debian 패키지들이 있으나, 패키지에서 파생된 이미지가 설치해야 하는 패키지 수가 줄어들어 시스템에 있는 모든 이미지의 전체 크기가 줄어듭니다.

## `node:<version>-alpine`
`Alpine Linux` 프로젝트 기반. `Alpine Linux`는 대부분의 배포 기반 이미지 보다 작아서 작은 이미지를 만들 수 있음.

이 Variants는 최종 이미지 크기가 가능한 한 작은 것이 주요 목표일 때 유용함.

## `node:<version>-slim`
기본 태그에 포함된 공통 패키지를 포함하지 않으며 node를 실행하기 위한 최소한의 패키지만 포함.

[Node official Image - dockerhub](https://hub.docker.com/_/node)
Adding tailwind typography plugin in Remix
Tags: react, tailwindcss
Published: 2022-05-12 05:54:06

Now that we added some markdown files to our Remix website, we saw the issue of the actual content not rendering the headings.

This is because Tailwind doesn't really know what to render this as.
Thus, we can use the [Tailwind Typography plugin](https://daily-dev-tips.com/posts/make-your-life-easy-with-the-tailwind-typography-plugin/) to help with this issue.

## Installing the Tailwind Typography plugin in Remix

The installation of this plugin is super straightforward, as we simply have to install the dependency with NPM:

```bash
npm install -D @tailwindcss/typography
```

Once this is done, we need to register it in our tailwind config file. This file is located at the root of our project named: `tailwind.config.js`.

Inside this file add the plugin:

```js
module.exports = {
  content: ['./app/**/*.{ts,tsx,jsx,js}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography')],
};
```

We can add the prose class to any element we want to use this plugin on.

In our case, let's add it to our root file so we can use it for our markdown files.

```js
export default function App() {
  return (
    <html lang='en' className='h-full'>
      ...
      <body className='h-full p-4 prose'>
        <Outlet />
        ...
      </body>
    </html>
  );
}
```

Note the `prose` class on the body. This is what will make it active.
If we now run our website and view a markdown rendered post, we see it in action.

![Screenshot 2022-05-02 at 07.19.04.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1651468768701/iqX5mMdLj.png)

You can also find the completed code on [GitHub](https://github.com/rebelchris/remix-starter/tree/typography).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Merging two arrays and sort the resultant without sort functions using recursion in Javascript
Tags: javascript, dsa, algorithms, webdev
Published: 2022-05-12 05:32:50

_Long ago, during an interview for one of the product-based companies, the interviewer asked me a DSA question, which triggered my sixth sense._

**So the question was to merge two arrays and sort the resultant array in ascending order.** 
Example:-

```
const arr1 = [2,4,8,7, 10, 25, 17, 13, 12 ];
const arr2 = [1,4,6,9,8, 11, 13, 3, 0];
So I used spread operator to merge two arrays and  Array.sort() function to sort the values.
const resultant = [...arr1, ...arr2].sort((a, b) => a-b);
```
This will give the desired result.

> The interviewer then asked me not to use the sort function and to create one on my own, explaining that it would require two loops.
> So I had to demonstrate the power of javascript to him, and I used recursion instead of two loops.

```
const result = [...arr1, ...arr2];
let count = 0;
function sorting(){
// to break the recursion when sorting is done.
if(count ===result.length) return true; 

//else do
for(let i = 0; i< result.length; i++){
  if(result[i] > result[i+1]){

//used array destructing to swap values
   [ result[i+1],  result[i]]= [result[i],result[i+1]]; 
  }
}
count++;
sorting();
}
sorting();
```

_In javascript, recursion is the most underappreciated concept. When DSA is used with javascript, this becomes quite strong. It can flatten arrays, objects, and construct tree structures like UI, among other things._

_**That's all for now, folks. Continue to learn and have faith in Javascript.**_
Selection Sort
Tags: javascript, programming, algorithms
Published: 2022-05-12 05:09:29

What do we understand about Selection Sort?
 - Pretty simple once we understand the concept.
 - Mutates original Array rather than returning a new Array
 - Similar to Bubble Sort
 - Both use 2 for-loops and also does the same standard swapping logic
   - Outer loop holds the index pointer of the "smallest" comparison value
   - Inner loop searches for a smaller value than the current "smallest" pointer value
 - Get new smallest value's index
 - Swap in the outer loop by index of new smallest value with current "smallest" pointer value.
 - Time Complexity:
    - Best   : O(n^2)
    - Average: O(n^2)
    - Worst  : O(n^2)
 - Space Complexity:
    - O(1)

```js
    function SelectionSort(arr) {
        const arrayLength = arr.length;

        for (let i = 0; i < arrayLength - 1; i++) {
            let smallestIndexPointer = i;
            for (let j = i + 1; j < arrayLength; j++) {
                if (arr[j] < arr[smallestIndexPointer]>) {
                    smallestIndexPointer = j;
                }
            }
            if (smallestIndexPointer !== i) {
                [arr[i], arr[smallestIndexPointer]] = [arr[smallestIndexPointer], arr[i]];
            }
        }
        
        return arr;
    }
```
Arrays in Javascript
Tags: javascript, codenewbie, wecoded, webdev
Published: 2022-05-12 05:05:14

Let us see how we can do the following in javascript -

- How to store `collections` of `values` in arrays

- How to `loop` over an` array ` to apply repetitive code to each value in a `collection`

- How to create and call `functions` to execute sequel blocks of code on demand

- How to `pass values into functions` to create dynamic results

 We have been storing one piece of data in variables

```
var name = "Arya";
var books = 4; 
var isStudent = true;
```
Arrays are used to store groups of data in a single variable. 


```
var names = ["Arya", "Krishna", "Manvi", "Amogh"];
```
We name arrays in the same way as we did for a single variable. We name a variable, use the assignment operator and assign a value to the array list. The key syntax or the way we assign the value to an array is that we type a set of `[]`as a value and with coma separating values we write each elements in an array list.

In the above example of var names, we have created a sequence collection of 4 string values inside square brackets. 

Remember that arrays are an ordered list means all the elements are assigned a position.

> Arrays are zero-indexed, so the index of first element in the array is 0.
That means when we are trying to assign a position in an array, we count up from zero. 

If we have to go and access a specific value, then we will go ahead and use the variable name again and extending it with square brackets and using the index pointer to point towards a specific item in the array. 
That means to log a single element, we use the name of the array with the index in brackets

```
console.log(names[1]); 
```
4th day of code complete
Tags: 100daysofcode, beginners, programming
Published: 2022-05-12 04:54:10

Day 4/100 complete. Currently learning the basics of programming through the CS50 course. I’m almost done building a short basketball game on scratch. My goal in these 100 days is to learn the main languages of code as well as build and automate some processes.  #100DaysOfCode
#SWAanniversary is around the corner!🎉
Tags: javascript, staticwebapps, webdev, event
Published: 2022-05-12 04:41:30

## Hey Hey hey!! It's our birthday! 

Yes, you heard it right! Azure Static Web Apps Turns One Today!!🎉🎉❤️❤️🎉🎉 
The last one year has seen very rich experiences - new features, support for many more languages and frameworks, and lots of Community engagement!🔥

***A BIG Thank you to all of you for being a part of this wonderful journey!*** ❤️🙏🏾

Now, would you like to celebrate the birthday too? ***Come join us on 19th May at 10 AM and 10 PM PST to learn more about Static Web Apps with our very own Developer community.***

Visit [aka.ms/swaanniversary](https://aka.ms/swanniversary) to check out the fun-packed schedule of the speakers and their amazing sessions you'd get to witness! Feel free to stream it at your own favorite link - [LearnTV](https://docs.microsoft.com/en-us/learn/tv/?WT.mc_id=30daysofswa-61155-cxall), [YouTube](https://www.youtube.com/watch?v=1e6k5HNK4F8), [Twitter](https://twitter.com/LearnTV) or [Twitch](https://www.twitch.tv/MicrosoftDeveloper).

For more details, check out the blog below:

{% link https://dev.to/azure/join-us-live-on-may-19-for-the-azure-static-web-apps-anniversary-3aih %}

### So see you at the #SWAanniversary!🎉🎉
Appwrite Template Clean MVVM
Tags: appwritehack, flutter, opensource, template
Published: 2022-05-12 04:34:36

### Overview of My Submission
The purpose of this project is to provide a template for starting a flutter project that integrates appwrite.


### Submission Category: 

Web2 Wizards, Mobile Moguls


### Link to Code

[code] (https://github.com/rodgav/appwrite_template_clean_mvvm)


### Additional Resources / Info
#### open source projects used
- [appwrite](https://github.com/appwrite/appwrite)
- [dartz](https://github.com/spebbe/dartz)
- [internet_connection_checker](https://github.com/RounakTadvi/internet_connection_checker)
- [get_it](https://github.com/fluttercommunity/get_it)
- [shared_preferences](https://github.com/flutter/plugins/tree/main/packages/shared_preferences/shared_preferences)
- [rxdart](https://github.com/ReactiveX/rxdart)
- [encrypt](https://github.com/leocavalcante/encrypt)
- [go_router](https://github.com/flutter/packages/tree/main/packages/go_router)
- [intl](https://github.com/dart-lang/intl)
- [flutter_phoenix](https://github.com/mobiten/flutter_phoenix)

## Screenshots
- [screenshots](https://drive.google.com/drive/folders/1f_6HmzBcbQKTuuygpvBl5AfPzRATA-c3?usp=sharing)
Appwrite Places
Tags: appwritehack, flutter, opensource
Published: 2022-05-12 04:21:47

### Overview of My Submission
appwrite_places is a demo example made with flutter and appwrite to show: sites, businesses, shops and everything you can imagine. in an area defined by latitudes and exact longitudes (northeast, southeast, southwest, northwest) in your apps or website.


### Submission Category: 

Web2 Wizards, Mobile Moguls


### Link to Code
[code](https://github.com/rodgav/appwrite_places)

### Additional Resources / Info

#### open source projects used
- [appwrite](https://github.com/appwrite/appwrite)
- [dartz](https://github.com/spebbe/dartz)
- [internet_connection_checker](https://github.com/RounakTadvi/internet_connection_checker)
- [get_it](https://github.com/fluttercommunity/get_it)
- [shared_preferences](https://github.com/flutter/plugins/tree/main/packages/shared_preferences/shared_preferences)
- [rxdart](https://github.com/ReactiveX/rxdart)
- [encrypt](https://github.com/leocavalcante/encrypt)
- [go_router](https://github.com/flutter/packages/tree/main/packages/go_router)
- [intl](https://github.com/dart-lang/intl)
- [flutter_phoenix](https://github.com/mobiten/flutter_phoenix)
- [image_picker](https://github.com/flutter/plugins/tree/main/packages/image_picker/image_picker)
- [build_runner](https://github.com/dart-lang/build/tree/master/build_runner)
- [freezed](https://github.com/rrousselGit/freezed)
- [file_picker](https://github.com/miguelpruivo/flutter_file_picker)
- [geolocator](https://github.com/baseflow/flutter-geolocator/tree/main/geolocator)
- [permission_handler](https://github.com/baseflow/flutter-permission-handler)
- [mapbox_gl](https://github.com/flutter-mapbox-gl/maps)

### Screenshots/demo videos

- [screenshot](https://raw.githubusercontent.com/rodgav/appwrite_places/master/screenshots/1.png)
- [video] (https://youtu.be/DGU0WcwllLY)
Incidences App
Tags: appwritehack, flutter, opensource
Published: 2022-05-12 04:13:47

### Overview of My Submission
Incidences app, is an application built in flutter with a responsive design, the construction of this app was for those incidents that come to occur at work, offices, even in specific areas of a company or business. many times we have to solve them ourselves, or simply let them pass. Incidence app allows us to report incidents or incidences, at work, so that a supervisor can review and resolve them, also has an administrator to create, update and reopen an incidence, allows you to create areas and users and edit them. 

* clean architecture
* MVVM
* Responsive (mobile and web)
* internationalization (es-en)

### Submission Category: 
Web2 Wizards, Mobile Moguls.


### Link to Code
[admin code](https://github.com/rodgav/appwrite_incidence)
[employe code](https://github.com/rodgav/appwrite_incidence_employe)
[supervisor code](https://github.com/rodgav/appwrite_incidence_supervisor)

### Additional Resources / Info
#### open source projects used
- [appwrite](https://github.com/appwrite/appwrite)
- [dartz](https://github.com/spebbe/dartz)
- [internet_connection_checker](https://github.com/RounakTadvi/internet_connection_checker)
- [get_it](https://github.com/fluttercommunity/get_it)
- [shared_preferences](https://github.com/flutter/plugins/tree/main/packages/shared_preferences/shared_preferences)
- [rxdart](https://github.com/ReactiveX/rxdart)
- [encrypt](https://github.com/leocavalcante/encrypt)
- [go_router](https://github.com/flutter/packages/tree/main/packages/go_router)
- [intl](https://github.com/dart-lang/intl)
- [flutter_phoenix](https://github.com/mobiten/flutter_phoenix)
- [image_picker](https://github.com/flutter/plugins/tree/main/packages/image_picker/image_picker)
- [build_runner](https://github.com/dart-lang/build/tree/master/build_runner)
- [freezed](https://github.com/rrousselGit/freezed)
- [file_picker](https://github.com/miguelpruivo/flutter_file_picker)


#### Screenshots/demo videos
- [screenshots admin](https://drive.google.com/drive/folders/1Cyhcp2N_YaY2s0zswi5E07kPRxHHF6Zi?usp=sharing)
- [screenshots employe](https://drive.google.com/drive/folders/1HvWZ7VJhneGRtA5WcWgwPL7EkjuxTUA7?usp=sharing)
- [screenshots supervisor](https://drive.google.com/drive/folders/1kKLSFBcTlQIP9ElMWHAzUts_wuyJEeuP?usp=sharing)
- [video admin](https://youtu.be/9fmrrKuPxL0)
- [video employe](https://youtu.be/El5Cr9KzLJA)
- [video supervisor](https://youtu.be/cq4ZhUp0AFg)
Laravel 8 Query Log Example
Tags: laravel, php, beginners, tutorial
Published: 2022-05-12 03:50:51

Originally posted @ https://codeanddeploy.com visit and download the sample code:
https://codeanddeploy.com/blog/laravel/laravel-8-query-log-example

In this post, I will show you how to implement **Laravel 8 Query log**. Sometimes need to show the query log and to determine what was the last executed. This is useful when you want to debug the multiple queries in your Laravel application.

 

In this example I will show you a 3 methods that you can apply in your project.

 

## Example #1

```php
$user = User::select("*")->toSql();
dd($user);
```

Output:

```
select * from `users`
```

## Example #2:


```php
DB::enableQueryLog();
$user = User::get();
$query = DB::getQueryLog();
dd($query);
```

Output:

```
array:1 [▼
  0 => array:3 [▼
    "query" => "select * from `users`"
    "bindings" => []
    "time" => 30.66
  ]
]
```


## Example #3

```php
DB::enableQueryLog();
$user = User::get();
$query = DB::getQueryLog();
$query = end($query);
dd($query);
```

Output:

```
array:3 [▼
  "query" => "select * from `users`"
  "bindings" => []
  "time" => 22.04
]
```

## Example #4

```php
\DB::enableQueryLog();
$users = \DB::table("users")->get();
$query = \DB::getQueryLog();
dd(end($query));
```

Output:


```
array:3 [▼
  "query" => "select * from `users`"
  "bindings" => []
  "time" => 26.94
]
```

That's it you have now the basic on how to implement Laravel query log.

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/laravel-8-query-log-example if you want to download this code.

Happy coding :)
Laravel 8 If Else Condition Blade Example
Tags: laravel, beginners, tutorial, programming
Published: 2022-05-12 03:39:05

Originally posted @ https://codeanddeploy.com visit and download the sample code:
https://codeanddeploy.com/blog/laravel/laravel-8-if-else-condition-blade-example

In this post, I will show you an example of **Laravel 8 If Else Condition Blade**. This is most important to learn when studying Laravel because we will use it to put logic in our Laravel application.

 

## Example #1: if..endif Condition
Below is our sample of if..endif condition for our blade.

 

**Syntax:**

```php
@if (condition)
    // Statements inside body of if
@endif


```
**Example:**


```php
@if (count($posts))
    You have a post!
@endif
```

## Example #2: if..else..endif Condition
Below is our example of if..else..endif condition this is helpful if the condition is false then show else result.

 

**Syntax:**


```php
@if (condition)
    // Statements inside body of if
@else
    //Statements inside body of else
@endif
```
**Example:**

```php

@if (count($posts))
    You have a post!
@else
    You don't have a post!
@endif
```

## Example #3: if..elseif..else..endif Condition

Now let's do the multiple condition. See below example:

 

**Syntax:**

```php
@if (condition)
    // Statements inside body of if
@elseif (condition)
    // Statements inside body of else if
@else
    //Statements inside body of else
@endif
```

**Example:**

```php
@if (count($posts) == 1)
    You have a post!
@elseif(count($posts)>1)
    You have more than one posts!
@else
    You don't have a post!
@endif
```

That's it you have now the basic knowledge of Laravel if else condition. 

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/laravel-8-if-else-condition-blade-example if you want to download this code.

Happy coding :)
Ecosystem and Frameworks: My Role at Netlify
Tags: frontend, javascript, career, opensource
Published: 2022-05-12 03:29:20

I'm curious what frontend frameworks you're all interested in these days? Powerful meta frameworks have been built using libraries like Vue and React. [Next.js](https://nextjs.org/) comes to mind: [Remix](https://remix.run) is a new contender, and we have other notable projects like [SvelteKit](https://github.com/sveltejs/kit), [Astro](https://github.com/withastro/astro), [Eleventy](https://github.com/11ty/eleventy), etc.

I'm on the ecosystem team working on frameworks in my new role at [Netlify](https://netlify.com). Our job, at the moment, because I'm sure it will evolve, is to ensure whatever you deploy to Netlify deploys seamlessly. I'm not saying this to promote Netlify, although it is incredible. It's to express my excitement at this type of role.

I need to know/learn how all these frameworks work, which is exciting.

For example, if you weren't aware, Netlify released their [Edge functions offering](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/) a couple of weeks ago. My coworker Salma has a great post about them.

{% embed https://dev.to/whitep4nth3r/were-all-living-on-it-but-what-exactly-is-the-edge-4n5l %}

My other awesome coworker Eduardo released a [deep dive article about Netlify Edge functions](https://www.netlify.com/blog/deep-dive-into-netlify-edge-functions/) if you want to check that out as well.

I bring this up because I get to continue to work in open source in my role at Netlify. For some background, Edge functions use the amazing [Deno](https://deno.land/) project, a modern open-source runtime for JavaScript and Typescript. We're big fans of OSS at Netlify. ♥️

{% embed https://github.com/denoland %}

I was [looking into an issue with Netlify Edge functions within the Remix framework](https://github.com/remix-run/remix/issues/3003).

{%embed https://github.com/remix-run/remix %}

One of the core team members had issues getting Edge functions to work with Remix. After some fun detective work, I figured out the issue. TLDR; a polyfill wasn't web standards compliant, so the bug only occurred when Edge functions were enabled because Deno is compliant. In contrast, regular serverless functions use the non-web standards compliant polyfill in Node.js land.

It's not fixed yet, at least when writing this post, but the Remix core team is working on it. It was tons of fun to figure things out publicly and share my findings, as this is open-source baby!

I'm stoked to continue exploring this role, working with the developer community, our customers, my coworkers, and open-source community!

Peace peeps!

Photo by [Alex Kondratiev](https://unsplash.com/@alexkondratiev?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/experiment?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Codecademy Final Project: CPU Simulator
Tags: codecademy, architecture, python, codenewbie
Published: 2022-05-12 03:27:33

The portfolio project for Codecademy's computer architecture course in computer science is to make a CPU simulator that shows the inner workings of a CPU and its connection to memory by processing instructions and providing console output of input processing. I chose to make an assembler to parse instruction and data input for a memory bus to store and the CPU to process using MIPS32 instruction set architecture.

##Python Code
I wrote the program in VS Code using three files to split up the different parts of the simulator. The main CPU simulator file contains the assembler and CPU classes. The assembler class parses assembly language text files and outputs machine code for the CPU to process and the CPU class is the main class to operate the simulator and call the functionality of its components. 

The CPU components file contains classes for the three main components of the CPU, the control unit, registers, and arithmetic logic unit (ALU). The memory file contains the parent memory class, the cache and main memory classes that inherit from the memory class, and the memory bus class that connects the CPU to memory.  

The data values and instructions for the CPU are modified Codecademy files and I added an instruction file to load the data values to CPU registers from memory instead of manually moving them to the registers. This is the data instruction input file and instruction input file contains the main instructions, which include a cache operation, immediate and register addition, a jump instruction, and a halt termination instruction. 

The main program file only calls instances of the assembler and CPU classes and the CPU class calls the control unit which contains the rest of the CPU component instances, including the memory bus. The memory bus then calls the cache and main memory instances, connecting the CPU to memory.

See code on [GitHub](https://github.com/cli-cd-ca/cpu_simulator)