teleren/devto huggingface dataset:
My beloved Stimulus.js cheat sheet
Tags: javascript, rails, ruby, beginners
Published: 2021-01-11 07:47:30

---
title: My beloved Stimulus.js cheat sheet
published: true
description: 
tags: javascript, rails, ruby, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eachpieozmgtimw0gmkl.png
---

Hi, I use Stimulus once in awhile in my Rails app. I made this little cheat sheet to help me remember the basic concepts.

HTML atributes
```html

<!-- Initialize/name data controller -->
<div data-controller="hello">

<!-- Reference map a DOM field -->
<input data-hello-target="name">

<!-- Reference value -->
<div data-hello-url-value="/test">

<!-- Reference class -->
<div data-hello-loading-class="search--busy">

<!-- On event -> Call controller#method -->
<button data-action="click->hello#sayHello">

```

Javascript
```js
// use stimulus library  
import { Controller } from "stimulus"

// Extends Controller base class
export default class extends Controller {

// Link references map DOM fields
static targets = [ "name", "output" ]
 
// use map DOM field 
sayHello() {
  this.outputTarget.textContent = 
      `Hello, ${this.nameTarget.value}!`
  }
}

// Multiple Map of the same name
this.nameTargets

// Iterations
showAllNames() {
    this.nameTargets.forEach((element, index) => {
      console.log(`${index}. ${element.value}`)
    })
  }

// Check if a map exist 
this.hasNameTarget // return true or false

// Ref current element (event->controller#action)
this.element.innerHTML

// Reference Values
static values = { url: String }
console.log(this.urlValue)

// Reference Classes
static classes = [ "loading" ]

// Add class name to current element
this.element.classList.add(this.loadingClass)

// Remove class name to current element
this.element.classList.remove(this.loadingClass)

// Event object
sayHello(event) {
    // cancel normal flow
    event.preventDefault()

    // Stop event before it bubble up to parent
    event.stopPropagation()
  
    // Event element
    event.target.textContent
}

// Lifecycle Callbacks methods

initialize() //	Once, when the controller is first instantiated
connect() // Anytime the controller is connected to the DOM
disconnect() // Anytime the controller is disconnected from the DOM
```
DigitalOcean Hackathon Submission: Meal Match
Tags: dohackathon
Published: 2021-01-11 06:26:07

---
title: DigitalOcean Hackathon Submission: Meal Match
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon
---

## What I built

An App to help families and friends decide what to eat.

### Category Submission: 

Random Roulette

### App Link

https://mealmatch.mydemo.dev/

### Screenshots

![Main Page Screenshot](https://github.com/mealmatch/app/raw/main/screenshots/screenshot1.png)

![Voting Screenshot](https://github.com/mealmatch/app/raw/main/screenshots/screenshot2.png)

![Results Screenshot](https://github.com/mealmatch/app/raw/main/screenshots/screenshot3.png)

### Description

Day after day, families, couples, and any group of people wanting to eat together face the age-old question:

> What's for dinner tonight?

This app can help. Build your own list of options, or search and copy results from Yelp. Share a link and see what people like! The vote can be set to automatically end when enough matches are found.

### Link to Source Code

https://github.com/mealmatch/app

### Permissive License

MIT

## Background

My brother-in-law came up with this idea: Wouldn't it be great if there was something like a dating app, but for deciding what to eat?

### How I built it

I started building this app in .net core because that is what I'm most comfortable with. The front page needed a bit of client-side magic, so I threw in some VueJS to handle that. The VueJS was simple enough that I could add it without any addition build (webpack) step.

I also wanted to try to build an app that respects privacy and doesn't even ask users for their emails. Vote sessions are assigned a random GUID. The user can bookmark the URL if they want to return to the page.

For data storage I used Azure Table Storage. It's a basic NoSQL database that's easy to use.

For getting Yelp results, I created a developer account at Yelp and used their REST API. I tried my best to follow their usage guidelines and make clear which results came from their data.

I tested the app locally until I got everything working. From there I created a Docker file to build it, put it on GitHub and created the Digital Ocean App instance.

I was pleasantly surprised at how seamless Digital Ocean App was. The platform automatically built my docker image and deployed it. Adding the needed environment variables and a custom domain was intuitive and took very little effort.

### Additional Resources/Info 

https://dotnet.microsoft.com/
https://vuejs.org/
https://www.yelp.com/developers/documentation/v3/business_search
https://azure.microsoft.com/en-us/services/storage/tables
Portfolio with DO
Tags: dohackathon
Published: 2021-01-11 07:37:03

## What I built
A portfolio website
### Category Submission: 
Personal Site/Portfolio

### App Link
https://nsedrickm-ezky8.ondigitalocean.app/

### Screenshots
![My Portfolio](https://dev-to-uploads.s3.amazonaws.com/i/1ubrjw373mfzuwfada0w.png)

### Description
 A single-page website built with parcel.js to serve as my portfolio 

### Link to Source Code
https://github.com/nSedrickm/nsedrickm.github.io
### Permissive License
BSD 2-Clause "Simplified" License

## Background
Found this a good opportunity to try out some new things. Stumbled across some cool animation libraries I will be looking into later.

### How I built it 
The new DO app platform is awesome. I had to think hard about how to deploy my site from the dist directory only to find the app platform has the option to specify my build directory. In addition, the entire build took less than 2minutes and the site was live. Wow

The integration with Github is downright seamless. I don't have a lot of experience with software deployment but I can tell DO App platform is quite straightforward.


### Additional Resources/Info
Found the App platforms documentation very usefull. Thanks
Minimalist Porfolio - Submission
Tags: dohackathon, webdev, react, portfolio
Published: 2021-01-11 07:29:37

## What I built
Here is my clutter free, minimal portfolio as a part of the DO Hackathon. No distractions in the background by some fancy graphics, no unnecessary interactions required. Click on `tl;dr` section to get to know me in a couple of minutes.

### Category Submission:
Personal Portfolio


### App Link
Custom domain - [https://beyondtheinferno.me](https://beyondtheinferno.me/)

DO domain - [https://beyondtheinferno-v-2-7czxf.ondigitalocean.app](https://beyondtheinferno-v-2-7czxf.ondigitalocean.app/)


### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pcdyxwi2kq0hpziku6br.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/alvp5nxcn9eevzwkqdd1.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kutcbka35wqhijhuctik.png)

### Description
* The landing page needs all the details you need to get to know me in the professional formats - LinkedIn, Github etc.
* tldr; section - an elevator pitch of myself, using kinetic typography using DOM nodes
* Fully responsive animations with fluid typography

### Link to Source Code
[GitHub repo](https://github.com/beyondtheinferno/beyondtheinferno-v2)

### Permissive License
MIT license

## Background
Summary can be found in previous posts

### How I built it 
Summary can be found in previous posts
Kushak's Portfolio
Tags: dohackathon, webdev, showdev, angular
Published: 2021-01-11 07:16:14

## What I built
I built a portfolio for myself using Angular/ Universal and Strapi.
### Category Submission: 
Personal Site/Portfolio

### App Link
#### FrontEnd
[https://kushakjafry.tech/](https://kushakjafry.tech/)
[https://portfolio-jdo2v.ondigitalocean.app/](https://portfolio-jdo2v.ondigitalocean.app/)
#### Backend
[https://portfolio-backend-9fful.ondigitalocean.app/](https://portfolio-backend-9fful.ondigitalocean.app/)

### Screenshots
![Home Page](https://dev-to-uploads.s3.amazonaws.com/i/s666ulb0mo92p76pqyjs.jpg)
![About Page](https://dev-to-uploads.s3.amazonaws.com/i/u0qrboehf14vadsuoqfc.jpg)
![Portfolio Page](https://dev-to-uploads.s3.amazonaws.com/i/kepni3jf8ohnioqp8ic3.jpg)
![Contact Page](https://dev-to-uploads.s3.amazonaws.com/i/sfp0hdyu11njlkaj4qhk.jpg)

### Description
 I was planning to make my personal portfolio for a long time.
After seeing the hackathon, I was very excited and decided to start
making my own portfolio.
After my failed attempts to design the UI, I decided to go by design, inspired by a template.

I picked the design idea and started designing my own site on Adobe site.

After the UI designing part was completed, it was time for Frontend and Backend.

I thought of using strapi as backend as it seemed pretty good and was also provided in the hackathon description.
Being a newbie at strapi, it was pretty hard to grasp it initially.

For the frontend, I decided to use Angular with Universal for Server Side Rendering. I decided not to use any jquery or jquery based library. Developing the frontend from scratch using HTML/CSS and TS according to design was a pretty tough task.  

### Link to Source Code
#### Frontend
[https://github.com/kushakjafry/portfolio](https://github.com/kushakjafry/portfolio)
#### Backend
[https://github.com/kushakjafry/portfolio-backend](https://github.com/kushakjafry/portfolio-backend)

### Permissive License
#### Frontend
[MIT](https://github.com/kushakjafry/portfolio)
#### Backend
[MIT](https://github.com/kushakjafry/portfolio-backend)

## Background
I was always planning to make my own personal portfolio site for a long time. And the idea of a hackathon excited me to build the site.
I learned a lot about Strapi, the digitalocean App platform, adding Deploy to do buttons to GitHub repositories, and learned to connect the app to custom domains.

### How I built it 
I used ADOBE XD for designing UI.
Angular for developing frontend.
Strapi for developing the backend.
Angular Universal for SSR.

### Additional Resources/Info
Expense Tracker App DOHackathon Submission
Tags: dohackathon, javascript, react, redux
Published: 2021-01-11 07:15:05

## What I built

Expense tracker app built with React, Redux & Firebase

### Category Submission: 

Random Roulette

### App Link

[App Link](https://expense-tracker-76x8h.ondigitalocean.app/)

### Screenshots

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zv8tvnvvta94bsf2best.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2om9s5m4cm01yle2k1ic.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sx6rjysiyckx9qhlmpng.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qnqasrybi34qoxeq4s0w.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ic7l03drugnwnb50j6qd.png)


### Description

Have you ever wondered where your money goes?

Expense tracker helps you to track all your expenses.

This app uses a modern, and in demand, js libraries and realtime database.

### Link to Source Code

[Source Code](https://github.com/kurugantivenkat/expense-tracker)

### Permissive License

MIT License

## Background

I wanted to built an end to end app using React, redux, react-router, express, Node, Sass, webpack and integrates with Realtime firebase database.

### How I built it 

This was my first time using Digital App Platform for deployment and it was good experience.
Minimalist Portfolio - Wrapping up
Tags: dohackathon, react, webdev, portfolio
Published: 2021-01-11 07:12:27

So, development was done. Time to submit? Not yet.

### Optimizations and Testing
1. The major issue was that everything was powered by react-spring, so JS was handling all the animation. Which was causing the fans to go crazy. So, I switched the circles animation on landing page to plain CSS animations, and performance increased by a lot.
2. All the elements on the landing page need to be clearly visible in both the modes. I ended up switching the icons in dark mode and changed the hover color for GitHub as it was not very easily distinguished from the dark mode's background
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/stgngs4933gxfngiwxdm.png)

3. Using react-spring to switch between the two routes `/` and `/summary`, I noticed that each time, there was a varied difference in different browsers and different devices. So, I added a play button and removed the auto start so that irrespective of load time, users can view the tldr; when they are ready and not miss a thing.
4. While testing across different browsers / different devices, I realised I had missed to put a overflow on the parent container for the Languages section in `summary`, which had resulted in a really big container being rendered in mobile views. Testing is important indeed.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c0pg8010aku55cp5a8e5.png)

5. Found this beautiful [website](https://metatags.io/) that handles all meta tags for the major social media sites for the link preview. Also added a dynamic favicon that will change color when the OS' preferred color scheme changes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6hkrpo2xj4t6oa4ze0l8.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yhjirviwjvdrp5hvlaw9.png)

### Finally, Deployment
What better way to check if DO really were true to their word about quick account creation and quicker deployments than to start the entire process the night of the deadline? 😂 But super hassle free deployment and a really good experience overall. Coming from a role where you are constantly filtering out old StackOverflow solutions from 2010 so that you don't end up using outdated solutions, it was a welcome sight to not have to go beyond the one DO article page that helped me get all my doubts clarified.

And that's a wrap, submission in the next post.
Problem Image load on my website
Tags: wordpress, image, problem, plasoutdoor
Published: 2021-01-11 07:10:37

When I open my page in user view it did not show any image but when I go to admin view it show images could you guide what is problem. I use Thrive Architect
 Here are my page link and screen print. 
https://plansoutdoor.com/best-hunting-knife-sharpeners/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n56h677748lt615bve1w.jpg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w1t4xkxg6rz4cnyri5xi.jpg)
Tribute Page
Tags: programming, html, learner
Published: 2021-01-11 07:10:34

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cqpq0rtvdp8elgutn8nk.PNG)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bsxbl9wwmm2ishegilnd.PNG)

This is my first basic project of the HTML and CSS. Really enjoying the start in this feild. 
Special thanks to the freecodecamp for such good content and practise set.
Soon will be back with another one.
Building A Gem
Published: 2021-01-11 06:56:37

   After the experience of following pre-structured labs, I found myself feeling unprepared in facing an assignment with a blank page and no tests to guide me. Reflecting on the techniques I have learned throughout this program so far and relying on my cohort for some occasional assistance, I was able to complete my project. It was a valuable lesson, and I believe it helped to round out my previous and newly attained skills. 
 
   One skill that I was proud to have further developed is how I planned my project. In my notebook, I wrote out the basic functions of my Gem. Then I expanded on those functions, describing in detail what information was searchable and how you could search for that Pokemon. After breaking down the search components, I moved on to the phrases that would be used within the Gem. I wanted them to be upbeat, informational, and friendly. With this in mind, I chose phrases such as "Thank you for using CLIDex!". My data was centered mainly around different species of Pokemon, their names, types, and regions. So I also conducted a lot of research on the various types of Pokemon. 

  Another skill I honed in on was my time management. Due to covid-19, I am at home with my wife, our two young children and our two dogs. With this in mind, I found that the best time for me to research information for my project and work on my coding was in the afternoons and evenings- this would allow me longer stretches of work time and therefor, I could complete more of my project in one sitting. Some days I had to adjust when I would be working on my project and helping my family, but I think this contributed positivity in how I adjust to changes and can still stay focused.
Minimalist Portfolio - tl;dr section
Tags: dohackathon, react, webdev, portfolio
Published: 2021-01-11 06:51:32

TBH I was pretty pleased with myself after the landing page came out so good. It was clean, to the point, and the user's focus was right where I needed it to be - on my name and on the icons.

But I realised I wanted to do more than just create a portal for users to go to other sites. So came the idea of tl;dr section.

### Ideation and inspiration
I was always fascinated by fancy typography and the lyrics music videos that made use of kinetic typography. 

* [This](https://www.creativebloq.com/typography/examples-kinetic-typography-11121304) website had a collection of good examples, had them as my source
* Who could forget Apple's [Don't Blink](https://www.youtube.com/watch?v=jk6sz25OZgw)? I knew from the start I was going to keep it simple and clean like this

So, I decided to make one, but not as a video, but in a website format with actual DOM elements. Why? Because I am a web developer, and also because I can :)

Some mental notes I made to myself before development - 
1. Time the words in a bit relaxed fashion so that even people who don't speak English as their first language could follow and read.
2. It needed to be short, it was after all a tl;dr
3. Syncing the text to music would be impossible, so no background music

### Pre-development
[react-spring](https://www.react-spring.io/) was the perfect choice for animation as the spring based animation would make it more realistic and like the entire thing is a video without audio. The hooks and the docs made it easy to stop the animation at any time, chain animations together and configure each animation separately without any hassles.

The story I wanted to tell - 
1. Intro section
2. What I do _(with proof)_
3. A quick overview of technologies I knew
4. Conclusion

### Major Hurdle
Figuring out how to make the text appear smoothly and glide over to the left while also not disturbing the centering was tough.

My initial idea was to render an invisible node and let it render the _(n+1)th_ step while the real node was rendering the _(n)th_ step and I could use the width of the invisible node to calculate the position of the real node and `transform: translate()` it. But I soon realized that making that calculation and updating the value in the state from which the real node could use it before the next animation in the chain of animation happens, was difficult.

I ended up trading a bit of horizontal alignment for the smooth glide to the left. After all, it was just a couple of pixels, and it didn't seem to look skewed to the left / right in any device.

**Desktop version**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1yq8ikcfaaod6efssph3.png)

**Mobile version**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59qt58p97xu17pepw0n3.png)


And with this section ready, it was time to put up a tl;dr button right next to dark mode toggle in the landing page.
How to override Material UI button styles 
Tags: react
Published: 2021-01-10 07:22:53

I was trying to change 
```
border-radius: 
```
for my button and I somehow could not change. I found out that Material UI button has default styles and you have to override it in order to change things. So when you change some styles and they are not applied, you should 'inspect' and check if the styles are crossed. Then that means the default styles won over your styles! 

I looked at many articled and this worked. 

https://material-ui.com/customization/components/ Please look at this document too! 

This document says 'When the className property isn't enough, and you need to access deeper elements, you can take advantage of the classes object property to customize all the CSS injected by Material-UI for a given component'.

```
 <Button classes={{root: classes.button1,}}>
     Confirm
 </Button>

```

Some articles were suggesting 
```
import { StylesProvider } from "@material-ui/core/styles";

const StyledButton = styled(Button)`
  background-color: red;
  border-radius: 0;
`;

export default function App() {
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <StyledButton>Hello</StyledButton>
      </div>
    </StylesProvider>
  );
}
```
But this did not work for me. Since the way I followed is from Material UI official document, I guess it is more reliable. 

Give me suggestions or comments if you know better ways or something! Hope this helps :)
DO Hackathon: DjangoGreen - Server Management - Submission
Tags: dohackathon, django
Published: 2021-01-11 06:50:50

---
series: Building GoGreen on DigitalOcean App Platform Hackathon Series
---
First Submitted at 2021-01-11 15:00 SGT or 2021-01-11 7:00 UTC

Last Posted at 2021-01-11 15:24 SGT or 2021-01-11 7:24 UTC

## What I built

DjangoGreen is a Django-based, server management panel for DigitalOcean Droplets

### Category Submission: 
Built for Business

### App Link
https://djangogreen.com

### Screenshots


![login-via-do](https://dev-to-uploads.s3.amazonaws.com/i/72fkferq0nzqi90wq4aq.gif)
if the gif is not loading on dev.to then [open in a new tab](https://dev-to-uploads.s3.amazonaws.com/i/72fkferq0nzqi90wq4aq.gif)
**Login and create new account using DigitalOcean**


![create-two-droplets](https://dev-to-uploads.s3.amazonaws.com/i/gb0g9d440c0x988u02fu.gif)
 
If the gif is not loading properly on dev.to then [open in a new tab](https://dev-to-uploads.s3.amazonaws.com/i/gb0g9d440c0x988u02fu.gif)
**Create new droplets easily with just a single click**

![destroy-droplets](https://dev-to-uploads.s3.amazonaws.com/i/a0vx6abppm24h9zy7qz8.gif)

If the gif is not loading properly on dev.to then [open in a new tab](https://dev-to-uploads.s3.amazonaws.com/i/a0vx6abppm24h9zy7qz8.gif)
**Destroy droplets just as easily with a single click and a confirm dialog**
 

### Description

This is to be a MVP for a server management panel for Django developers. They can easily spin up and deploy new Django apps. I got the server management panel done just in time for the submission. Will add more features going forward after the submission.

### Link to Source Code 
https://github.com/oppoin/django-green

The branch is : `upgrade-everything`

### Permissive License

[MIT](https://github.com/Oppoin/django-green/blob/upgrade-everything/LICENSE)

## Background

I've always a desire to build my own product business. So I decide to scratch my own itch in terms of making it easier to spin up servers and deploy version 1 Django apps.

### How I built it 

I built using Django 3.1 and started to use this new thing called htmx. Also, I used a python wrapper for DigitalOcean API as well

## Additional Resources/Info
Technologies that I used for this project include:

- [DigitalOcean API](https://developers.digitalocean.com/documentation/v2/#droplets)
- [python-digitalocean](https://github.com/koalalorenzo/python-digitalocean) the wrapper for DO API
- [DigitalOcean App Platform](https://cloud.digitalocean.com/apps)
- [htmx 1.1.0](https://htmx.org/)
- [Django 3.1](https://docs.djangoproject.com/en/3.1/releases/3.1/)


Feedback always appreciated!