teleren/devto huggingface dataset:
Infinite Scrolling with Rails's Turbo/Hotwire
Tags: rails, turbo, hotwire
Published: 2021-11-19 23:23:24

Before we begin, I need to acknowledge that this is not a full proof solution. There's a lot of features lacking.
However, my goal was to achieve a basic infinite scrolling using only Turbo, without any JavaScript or Stimulus.

You can view it Live at: https://games.directory/u/pacmakaveli/c/library

For this, I'm using Rails, Pagy, TailwindCSS, and, Turbo Rails.

Implementation is quite simple, knowing that Turbo's `turbo_frame_tag(loading: :lazy)` is only loaded when the element is visible in the DOM.

```ruby

  def library
    @pagy, @collections = pagy(user.collections, items: 18, page: params[:page])

    if params[:page]
      render(turbo_stream: turbo_stream.append('user:collections:library', partial: 'user/collections/collections.library'))

      # Ensure we return, otherwise it will complain about double rendering!
      #
      return
    end

    render(template: 'user/collections/index.library')
  end
```
Because I'm not using Rails's naming convention when it comes to partials, I have to manually declare the render.
In most apps this won't probably be needed.

Next up is the views:

This is my `index.library.slim` view:
```slim
.cell-auto
  .column
    = turbo_frame_tag('user:collections:library') do
      = render(partial: 'collections.library')
```
And this is the `_collections.library.slim` partial:
```slim
.grid.grid-cols-6 class='gap-0.5'

  - @collections.each do |collection|

    = turbo_frame_tag(collection, class: 'col-span-1') do
      = link_to(user_collection_url(user, collection), class: 'column card relative', target: :_top) do
        = lazy_image_tag(collection.cover, class: 'w-full h-60 rounded-md object-cover') if collection.cover.attached?

        = collection.name unless collection.cover.attached?
        
        .bg-main.rounded.bg-opacity-50.w-10.h-10.absolute.z-10 class='bottom-1 left-1 p-1.5'
          = image_tag("logos/#{ collection.network.class.name.split('::').first.downcase }", class: 'w-full h-full')

= turbo_frame_tag(@pagy.next, loading: :lazy, src: library_user_collections_path(page: @pagy.next)) if @pagy.next
```
The magic is on the last line, where `turbo_frame_tag` will load the next set of results when it becomes visible in the DOM.

And that's it! Turbo is quite powerful, in my opinion, when it comes to stuff like this.

In the near future I want to explore this and introduce a couple of new features, like the pagination on the page reducing the number of pages as it loads, the URL adding the page number on each load and, probably the most important one, removing previous entries from the DOM as the page keeps loading more entries.
It tends to become really slow when you have too many library items loaded on the page since the Images are high quality.

Let me know what you think!

:)
⚡💾⚡ Storing your Terraform statefile as a Github workflow artifact with the terraform_state_artifact action !
Tags: actionshackathon21, opensource, githubactions, terraform
Published: 2021-11-19 23:21:49

### My Workflow :

When I wanted to start [managing my Github](https://github.com/sturlabragason/sturlabragason_github_managment) with [Terraform](https://www.terraform.io/) using the [integrations/terraform-provider-github](https://github.com/integrations/terraform-provider-github) I felt that my terraform statefile should belong with the code, and not as a remote state in Azure/AWS/etc. 

#### I couldn't find a suitable solution so I decided to roll my own:

It took me a while to figure out but I finally settled on keeping my state as a workflow artifact that is de/encrypted on each run. I decided to create my first action out of the whole thing only to find out that there actually was an [#ActionsHackathon21](https://dev.to/t/actionshackathon21) going on! 

#### :rocket: What this action does: :rocket:
- 🛠️ First off, it downloads your repository with [`actions/checkout@v2`](https://github.com/actions/checkout) and then installs terraform using [`hashicorp/setup-terraform@v1`](https://github.com/hashicorp/setup-terraform).
- :inbox_tray: Using [environment variables](https://docs.github.com/en/actions/learn-github-actions/environment-variables) it downloads the most recent [workflow artifact](https://docs.github.com/en/actions/advanced-guides/storing-workflow-data-as-artifacts) called `terraformstatefile` and decrypts using the user input variable `encryptionkey`.
  - If no artifact with that name is found (maybe it's your first run) then it proceeds with the following.
- :building_construction: It then proceeds to run `terraform plan` with any flags from the optional variable `custom_plan_flags`
- 🏢 Next it runs `terraform apply` with any flags from the optional variable`custom_apply_flags`.
  - This can be skipped by setting the optional variable `apply` to `false`.
- 🗃️ If all is well then Terraform has now produced a statefile `./terraform.tfstate`. This file is encrypted using the provided `encryptionkey`.
    - 🤫 I'd recommend getting this from a [`${{secret.variable}}`](https://docs.github.com/en/actions/security-guides/encrypted-secrets) since the output isn't hidden.
- 💾 Finally the new statefile is uploaded as an artifact!
#### - :tada: Lather, rinse, repeat! :tada:


### Submission Category: 

DIY Deployments

### Yaml File or Link to Code : 

Here is an example to get you started:

```yaml
steps:
- uses: sturlabragason/terraform_state_artifact@v1
    with:
        encryptionkey: ${{ secrets.encryptionkey }}
```


{% github https://github.com/sturlabragason/terraform_state_artifact/ %}
Reviewing Github pull requests - OSD600
Tags: beginners
Published: 2021-11-19 23:14:05

## Introduction
Hello everyone, my name is Dustin. Today, I'd like to talk about my experience of reviewing other people's code. 

## Progress
In my recent pull request, it was actually one pull request broken into 2 small parts for 2 people, me and one of my friend. The issues needed to be solved are quite relevant to each other, so we would know what problem each other's having and facing right now. 

[My friend's pull request](https://github.com/Seneca-CDOT/telescope/pull/2476)
[My pull request](https://github.com/Seneca-CDOT/telescope/pull/2471#issuecomment-974373488)

The experience was fantastic as I got to talk with a lot of great developers and learn more from them. Reviewing is also a way to improve each other's code as nobody's code is perfect and it needs to be tested and run multiple times by multiple people. 

As I said, these 2 pull requests are relevant to each other and it should have the same coding style as if one made it. 

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


This is the problem I've mentioned in my previous blog when `window.onload` should be changed as it would override the other one. Thanks to reviewing other people's code, I also benefit from it.

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

## Wrap up
Thank you for reading my blog, reviewing code is another good way of learning new things and help each other produce better code.
Day 482 : Cowboy
Tags: hiphop, code, coding, lifelongdev
Published: 2021-11-19 23:05:19

_liner notes_:
- Professional : Pretty chill day. Since I got the sample application working yesterday, I decided to try and see if I can get it working for my use case. Had to decide where my application is different from the sample and then dive into the documentation and examples to piece together a solution. I think I made some pretty good progress. Good news is that I don't think I'll need to really change my demo code to get it working. We'll see. Also got a chance to chat with some coworkers. We spoke about going to Japan and one of them has actually been learning Japanese and gave me some pointers and an application they use to learn.

- Personal : Last night, I went through a bunch of tracks for the radio show. While doing that, I was sort of listening to the Chaka Khan and Stephanie Mills Verzuz show. I was also tuning into a couple of Twitter Spaces where one was about people not liking a certain section of Twitter which spawned another Space where the people talked about how much they loved that section. I don't know. I don't Twitter much. haha.

![The desert plains of Vulcano El Teide, Spain with some shrubs and mountains in the distance at nightfall with a night sky full of stars](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdjdt6r7xs4kaqthdlc5.jpg)

Going to eat dinner. Finish putting together the radio show. I really need to do it tonight because we will be broadcasting from the station and it takes like 90 minutes to get there from where I am. I'm thinking I'll be spending the night by the station since it'll be dark by the time we are finished. Get up Sunday morning to do the first half of the Sunday show and then get back to my spot before the second half starts. We'll see how it goes. I'll also need to make sure I have all the equipment I'll need as well, since my co-host will be there in person. After getting radio show together, I want to watch at least one episode of Cowboy Bebop on Netflix.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube MK8zU_zVybs %}
My First code review
Published: 2021-11-19 23:02:00

This is my first code review for release 0.3. I was looking for a pull request on the [telescope](https://github.com/Seneca-CDOT/telescope). Because, I am working on the issue of the project which means, I can understand the code easily compare to another project. And I found an [pull request](https://github.com/Seneca-CDOT/telescope/pull/2466#discussion_r749710665) from the page which was an issue from the same page that I am working on. So, I went into the pull request and I was surprised because I was assigned to review the pull request. And I found that the professor assigned me to this issue to review it. 
This is the screenshot of the page.

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

After I looked into the code changes, I saw two parts it will be great to fix.
The first issue was not wrong at all, but, it will be better if it is fixed. the part was the person's name in the last contributor was not synchronized. Some are in small letters and some are capitalized. If it is just a GitHub id it is okay to keep it like what the user decided to have. But it is a name of a GitHub account owner, so, I left a comment that it will be better if the name is synchronized to the same format. And as there is a styled class which is "text-capitalize", I added to comment to just simply add that class can fix this error. 


And the second one was the length of the GitHub status cards is not the same. All the heights were different. So, I think to left this comment on the pull request. However, just before I leave a new comment. I decided to read the previous comment and it really helped because there was a person who already left this comment on the pull request. So, I just ended up leaving the first on this pull request.

It was interested because I am reviewing another person's pull request which is a page that I am currently working on. It means that there are some more people who are currently working on the same page as me. That makes me motivated to work hard on this pull request and the issue that I am currently working on.
Participate on internal project
Published: 2021-11-19 22:46:46


This is my first blog for release 0.1. The project that I worked on was the [telescope Project](https://dev.api.telescope.cdot.systems/v1/status) which is Seneca college open source Project. I found one [issue](https://github.com/Seneca-CDOT/telescope/issues/2433) for the project and started to work on it. The issue was about customizing the dashboard so it looks like it belongs to Telescope. And in the issue, I need to change:

- use the Telescope logo
- use the Telescope favicon
- Change "Material Dashboard 2" to "Telescope Dashboard"
- Get rid of the "Upgrade to Pro" button
- Get rid of copyright and other links in the footer
- Change the primary color from reddish/purple to use the primary 
Telescope color

This is the previous version that I changed.
![before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arnvm7063koazsko7hmc.png)

I fixed those criteria and Created a [pull request](https://github.com/Seneca-CDOT/telescope/pull/2472).
And this is the screenshot of when the pull request was created.
![pr1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxzmrpeqdxzvdarantwt.png)
 
 ![pr2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjite4iqccrg5ijyj1bu.png)
 After that, I got lots of comments and I keep doing the cycle of check comments, editing code based on the comments, and pushing it to the github until there are no comments left.
And this is the final result after it merged.
 ![final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21i0ip1e8rll4rlsho0i.png)

      
 This Pull request was the most active PR ever I had in this course. After I the Pull request was merged. the number of comments in this PR was 58. It was hard for me. because I usually, if I create a pull request, there were some comments are there and in next 2~3 new commits make the pr merged to the program. However, this one takes more time than usual. Even though it was a long process. it was very helpful to me to experience active code review on my code. 

While I am working on this issue, there was a person who created the same change requests which are already discussed in previous comments. There was one person who commented on the same thing which was already discussed above. Before, when I write comments on the other's pr I usually read the previous comments but not always. Maybe for him, it was a few comments that he put on a random pull request, but for me, it was a pr that I working on. And it takes my extra time to explain to him to look at the discussion above. For next time, I think I will carefully read the previous comments every time on the other's pr when I want to add new comments to prevent double work which is unnecessary. 

But most of the comments were very useful and most of the comments were about the side menu bar. There were comments that ask me to add and remove the item, remove the scroll bar, change the icon and color of the active tab. To be honest, while I am working on it I felt like its too much work for a single issue. But, after I finished everything and look at the result. It was very satisfying to me.
Learning Workflows: Using the Number Card to Work With Numbers
Tags: nocode, workflows, identity
Published: 2022-02-25 18:43:08

---
title: Learning Workflows: Using the Number Card to Work With Numbers
published: true
date: 2021-11-19 22:35:01 UTC
tags: NoCode,Workflows, Identity
canonical_url: https://maxkatz.org/2021/11/19/learning-workflows-using-the-number-card-to-work-with-numbers/
---

This short video shows how to use functions from the Number card. The Number card allow to perform various math operations.

[![Using the Number card](https://katzmax.files.wordpress.com/2021/11/learningworkflows_using_number_card.png?w=1024)](https://katzmax.files.wordpress.com/2021/11/learningworkflows_using_number_card.png)

{% youtube JUY3j-RJick %}


Want to learn more? Watch other videos in the [Learning Workflows series](https://www.youtube.com/playlist?list=PLSAWywyhniCM6CKkp5vIiD0-pxSbdX71y).
Optimization of images with FastAPI
Tags: fastapi, python, backend, nelsoncode
Published: 2021-11-19 22:32:39


In this example we will see how to upload images and use background tasks to generate resolutions for different 
devices

### Dependencies

```bash
pip3 install fastapi uvicorn Pillow
```
### Background Tasks

You can define background tasks to be run after returning a response.

```python
from fastapi import FastAPI, UploadFile, File, BackgroundTasks
from fastapi.responses import JSONResponse
from os import getcwd
from PIL import Image

app = FastAPI()

PATH_FILES = getcwd() + "/"


# RESIZE IMAGES FOR DIFFERENT DEVICES

def resize_image(filename: str):
    sizes = [{
        "width": 1280,
        "height": 720
    }, {
        "width": 640,
        "height": 480
    }]

    for size in sizes:
        size_defined = size['width'], size['height']

        image = Image.open(PATH_FILES + filename, mode="r")
        image.thumbnail(size_defined)
        image.save(PATH_FILES + str(size['height']) + "_" + filename)
    print("success")


@app.post("/upload/file")
async def upload_file(background_tasks: BackgroundTasks, file: UploadFile = File(...)):

    # SAVE FILE ORIGINAL
    with open(PATH_FILES + file.filename, "wb") as myfile:
        content = await file.read()
        myfile.write(content)
        myfile.close()

    # RESIZE IMAGES
    background_tasks.add_task(resize_image, filename=file.filename)
    return JSONResponse(content={"message": "success"})
```

### Output

```
dogs.jpg # Original Image

720_dogs.jpg # Resolution 1280 x 720

480_dogs.jpg # Resolution 640 x 480
```

Example in GitHub Gist

https://gist.github.com/nelsoncode019/35910eff9c09ca015cfb4748be345133
Day 14 of #100daysofcode: MVP App Planning
Tags: 100daysofcode, react, python, beginners
Published: 2021-11-19 22:30:05

Short update today, expect more exciting updates in the coming days. 

## Today
* Started today with Interview Prep problems 
* Completed a few more ES6 FreeCodeCamp tutorials
* Created a basic Django-based app
* Started the MVP Planning of my upcoming Study Aid App

## Upcoming
I'm rephrasing the "Tomorrow" section to be an "Upcoming" section. This way, I give myself a list of things to pick from on the next day so I don't feel so pigeonholed in my projects. I have limited time daily to work on this, so I want to enjoy/get the most out of each days work.

* Work on the Django app which I made today; I want to try to use React routing with Django.
* Read on comparing Flask vs. Django
* Finish MVP plan for the upcoming Study Aid app
* Start looking into Material UI! I have put some time into learning Bootstrap, specifically the React-bootstrap extension and now I would like to try my hand at learning some about Material UI!
* I also want to look into Material IO and see how it compares to MUI (or if its basically the same, I have no idea about it)


### Resources
[JS Course - FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
[Material UI](https://mui.com)
[Django Tutorial](https://docs.djangoproject.com/en/3.2/intro/tutorial01/)
[Material IO](https://material.io/resources/get-started#web)
OSD600 - Adding Continuous Integration (CI)
Tags: opensource, testing
Published: 2021-11-19 21:51:38

#1. Lab9 requirement
In this lab, I am required to create a GitHub Actions Workflow to my repo. By doing so, the tests I created in the previous lab will be triggered and run whenever a PR is submitted or a commit is pushed.  

In addition, I need to add tests to Dustin's project.
#2. Setup process
To set up the GitHub workflow, I came to the `Action` tab and clicked `set up this workflow` button in the `Node.js` section. 

After that, a new file called `node.js.yml` is created, I modified some parts to make the `build` suit my purpose. And its content is:

```
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: "npm"
      - run: npm ci
      - run: npm test
```
Next, I created some e2e tests. Then, submitting a PR to make sure that it did trigger the CI Workflow. After a couple of times modifying the source code. My tests were passed successfully. [Successful GitHub Action Run](https://github.com/hlavu/my-ssg/runs/4247846019?check_suite_focus=true) 

#3. Adding Tests To Another Project
After forking and cloning [Dustin's repo](https://github.com/tuanthanh2067/cv-ssg) to my local machine, I read through the `CONTRIBUTING.md` to set up and run the tool to make sure it work correctly.

I saw the `init()` in the `readPath` module did not have any test so I created a new branch and started working on it.
 
After all, here are 4 tests I came up with:
- Constructor should set the value of `path` equals to the link passed from arg.
- `readFile()` should return `1` if file path is invalid .
- `init()` should set `ext` and `result` values correctly for text file.
- `init()` should set `ext` and `result` values correctly for markdown file.

When newly created tests run successfully in the local machine, I submitted a [PR](https://github.com/tuanthanh2067/cv-ssg/pull/34) to the repo and make sure it passed the repo's CI workflow.

#4. Overall
It's interesting to work and learn about CI. I definitely make use of this tool to my future projects.

All in all, thank you for reading the post.

Happy coding!
Code Reviews
Tags: opensource, c, github
Published: 2021-11-19 21:49:14

In this __Release 0.3__, there are 3 different requirements. And the ___third one__ is about __Code Review__. For this code review, we are required to review some `PR` from __other students created__. And the main __purpose__ of this is to help __improve__ their PR so that they can get merged. And for me, I had made __two__ code reviews in two different PR. However, they are having a __same issue__. 

###Procedure
For the code review section. __The first step__ I made was to check the PR that opened which means that they haven't got merged. And __then__ I just selected one of them. The `first PR` I picked was called [[Fix and Audit types.md](https://github.com/Seneca-ICTOER/IPC144/pull/102)]. And for the `second PR` I picked was called[[records-and-files.md](https://github.com/Seneca-ICTOER/IPC144/pull/116)].
These two PRs had a same issue. And that is they didn't check the sentences in each paragraph __carefully__. Due to all of these `md` files generated by a [Docusaurus](https://docusaurus.io/) -- a modern static website generator. And I found that each sentence that in a paragraph was break with __2 spaces__ which is not a normal practice in our daily life or even coding. This is a __small issue__ because although with two spaces to break sentences, it looks good in a real webpage. However, I believe that we should fix this issue because sometimes __small issues matter__, especially when it comes to coding!

Here is my suggestion:
__①__:
![Suggestion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36zduuplplnomxt7iupb.png)

__②__:
![Code_Review](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id662zalzcolht7npos0.png)

###My Feelings
What I had found is not a huge issue but a really __tiny issue__. However, sometimes a tiny issue could cause a __huge problem__. I think I would treat this code review as a __reminder__ to myself.
__"Never miss any small details!"__