teleren/devto huggingface dataset:
Hugo - sending hugs you really feel - The backend
Tags: dohackathon, javascript, node, postgres
Published: 2021-01-08 19:51:42

#The API 🤖
For the backend, I decided to go with a Node and Express combination.
My idea is to have 3 endpoints

|Endpoint|Behavior|
|:-----|:-----|
|GET api/:id|responds with the given hug's data|
|POST api/?pattern={}&name=""|adds a new hug to the database|
|POST api/:id|increments the number of plays in the database|

and to make calls from the HTML page to these.

Coding the backend was pretty straightforward because I worked with this kind of environment before.
The one issue I ran into multiple times tho was to do with CORS when connecting to the api from localhost. This time the api was on the DigitalOcean servers so I expected to encounter some issues.
I fixed these by adding this regex rule in the DigitalOcean panel `.*` which basically enables every source.

#The database 🛢
I initially wanted to use a NoSQL database, but since I was running out of time quickly, I decided to go with PostgreSQL because that was the only option on the app platform.

I worked with SQL databases before, but one new thing I learned about was the JSONB Datatype. Turns out, you can conveniently store JSON data in traditional SQL databases. 😅
At first, I actually tried using JSON instead, but since I saved my patterns in a JSON array it couldn't be done.

#Final thoughts 💭
Overall I managed to finish everything in a day or so!

Oh and, I haven't told you about the JavaScript behind the websites. Honestly they are pretty boring, just getting states from buttons and API calls, nothing fancy.

Anyways take care, and have a hug! 👻
![hug gif](https://media1.giphy.com/media/Yle9Yz9izeVRyiwavn/giphy.gif?cid=ecf05e478aitq87ozyk4924wybjyhimg713g31jxsa4tkq58&rid=giphy.gif)
Hugo - sending hugs you really feel - The frontend
Tags: dohackathon, css, html, javascript
Published: 2021-01-08 19:51:17

#The mockup ✏
After writing down the initial ideas, I started making the mockups in Adobe XD.
First I made my mood board using Dribbble, and looked at some fonts from [FontPair](https://fontpair.co/). I've also searched for some free graphics and found just the right ones on [Storyset](https://storyset.com/).
Here are the final mockups
![design mockups](https://dev-to-uploads.s3.amazonaws.com/i/xpiuvjuyhxift65cs4xh.jpg)

#Making the page 💻
First I set up Tailwind, following the instructions from the official documentation, and everything went smoothly!
Then I set up my custom theme by following the tutorial mentioned in the last post.
```javascript
theme: {
    extend: {
      colors:{
        background: "#FF979E",
        primary: "#162A40",
        secondary: "#FFFFFF"
      },
      fontFamily:{
        header: ["Pacifico","cursive"],
        body: ["Cabin", "sans-serif"]
      }
    },
  }
```
And just like that I was ready to start making the webpage.

At first things seemed a bit out of hand, having really long class names like
```javascript
class="block rounded-full bg-primary text-secondary px-10 py-2 text-base"
```
But then I remembered I can compress it down to a single class using the `@apply` directive just like this
```javascript
.btn{
    @apply block rounded-full bg-primary text-secondary px-10 py-2 text-base;
}
```
Neat!

The layout is made using CSS grids, which I always found to be a bit complicated but Tailwind really made them simple with classes like `grid-cols-1`.
Making the whole page responsive was a breeze thanks to the responsive breakpoints, namely `sm: md: lg:` and so on. 
So my responsiveness is driven solely by
```javascript
class="grid grid-cols-1 md:grid-cols-2"
```
also very neat!

#But there was one problem 🤯
![big file size](https://dev-to-uploads.s3.amazonaws.com/i/r9jv7bnxpgfq9t4d0gyp.jpg)
The Tailwind stylesheet was hugee!
I knew I couldn't let this be that big in production, so I started searching again.

It turns out, I haven't read the documentation well enough, and I missed a crucial step: [optimizing for production](https://tailwindcss.com/docs/optimizing-for-production).

I quickly set up [PurgeCSS](https://purgecss.com/) as mentioned, making sure to include a safelist. This is to make sure my dynamically created classes get added to the final file as well. 
So my tailwind config file needed the following lines
```javascript
  purge: {
    content: ['./public/**/*.html'],
    options: {
      safelist: ["grid-cols-3","animate-ping"]
    }
  }
```
One last command later, everything worked and I can finally call it a day! 🎉
![small file size](https://dev-to-uploads.s3.amazonaws.com/i/6prssgdzf2gpczpktexh.jpg)

P.S. Take care, here's another hug! 👻
![hug gif](https://media3.giphy.com/media/VhRU9RvKZWKujYXhlJ/giphy.gif)
Hugo - sending hugs you really feel - First ideas
Tags: dohackathon, javascript, css, html
Published: 2021-01-08 19:50:59

If you ever wanted to send someone a hug online, you most likely have come across this gif. It's a cute and kind way of sending some love, but it lacks the *feel* part of a hug.
![hug gif](https://i.imgur.com/jJ8NnQ4.gif)
### This is where Hugo comes in place!
The idea behind it, is sending a hug that you can *really feel*.
How? you may ask, well it's simple, **haptic feedback** (more specifically vibration).
You can record a hug, and send it to your loved ones, then all they have to do, is place their phones on their chest, and *feel* your special hug! 😄

#Well, let's get started! 🚀
First of all, I started my project on paper, sketching and writing down ideas.
![sketch of the design](https://dev-to-uploads.s3.amazonaws.com/i/z9w0e3nls3uncolr3yvh.png)
🧠 I came up with an editor that's made out of toggleable boxes, each representing a step. These can be either a pause `o` or a vibration `~`, and they also add up, meaning if you have the following pattern: 
`~ ~ o ~ ~ ~` the phone will vibrate for 2 seconds, pause for 1 then vibrate for 3 more.

🛠 I did not want to overcomplicate the layout, so it's really simple, being one column on mobile, and two on desktop.
Also, I usually build websites using Bootstrap, but I thought it would be overkill for this project, so I started looking for alternatives.

🌟 Somehow Tailwind popped up in my YouTube recommended, and I thought I'd give it a try. After watching [this series](https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw) by The Net Ninja I decided it would be fun to try it out! (I really encourage you to check out his videos if you're interested, they're great!)

### Woho! you made it to the end!
This is my first ever post in here, so any kind of feedback is appreciated, take care, here's a hug! 👻
![hug gif](https://media1.tenor.com/images/4585dc5fe74383a2008d7e730d8b96d7/tenor.gif)
How to deploy your Angular App to AWS S3
Tags: angular, aws, webdev, deploy
Published: 2021-01-08 19:39:08

Deploying your Angular app to AWS S3 can be a great choice if you're looking for an inexpensive hosting option that just scales with your audience and/or you're already using AWS for other things anyways. In this post I'll show you how to use the AWS CLI to deploy your Angular app to AWS S3 with just a few simple commands.


Prerequisites:
- [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2.html)

# 1. Create an AWS S3 bucket

Creating a new AWS S3 bucket using the AWS CLI is as easy as it gets, just run the following command and make sure to replace <bucket_name> with your own bucket name and <region> with the region that you want to create the bucket in:

```bash
aws s3 mb s3://<bucket_name> --region=<region>
```

# 2. Configure AWS S3 bucket for static web hosting

Next, the bucket needs to be configured for static web hosting. Luckily, the AWS CLI has a single command that does most of the work for you:

```bash
aws s3 website s3://<bucket_name> --index-document index.html --error-document index.html
```

To make your Angular app available to the public, all objects in the S3 bucket need to be publicly accessible. To set that up, create a document `policy.json` with the following content and make sure to fill in your bucket name:

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


Then run this command to attach the policy to your S3 bucket:

```bash
aws s3api put-bucket-policy --bucket=<bucket_name> --policy file://policy.json
```

# 3. Deploy your Angular app to AWS S3

Now you're ready to deploy your Angular app to the S3 bucket. Navigate to the root directory of your Angular app and run the following commands to build and deploy your Angular app:

```bash
ng build
aws s3 sync dist/<app_name> s3://<bucket_name>
```



That's it! Open `http://<bucket_name>.s3-website.<region>.amazonaws.com` in your browser and you'll see your Angular app deployed to AWS S3 🎉
DO Hackathon Runner DevLog #2
Tags: dohackathon, javascript, webdev, games
Published: 2021-01-08 19:38:00

---
title: DO Hackathon Runner DevLog #2
published: true
description: Second post detailing my progress in the Digital Ocean hackathon
tags: dohackathon,javascript,webdev,games
series: do-hackathon-runner
---

I've been toying away at my small game for the DigitalOcean hackathon but promptly forgot to add another post to this series so here we go!

Since the first post in the series I've worked on a lot of stuff, but let's focus on the actual game for now. Some of the new stuff includes:

- Collectible gems
- Bouncy pads
- Water
- Keys and locked doors
- Wind from fans
- An actual goal :D

It's been a lot of fun and easier than I anticipated to implement. I doubt I'll ever build a large scale game in the future but if I did the Phaser3 engine seems like a good choice!

I also added React to add some better styling around the game but mainly to support a few other ideas I have.

https://hackathon-runner-v2-hahqf.ondigitalocean.app
![game3](https://dev-to-uploads.s3.amazonaws.com/i/69d27mhk6lfbotzh7w66.gif)
 
Next up I wanna take advantage of the DO App Platform some more, so I'm looking into adding top lists or similar features. Feels exciting!
THE DEVELOPER👨‍💻 MINDSET🤔: )
Tags: javascript, python, beginners, programming
Published: 2021-01-08 19:36:13

The mindset🤔 of a man👨 is who he is, because no man is ever greater than his thought💭. The mindset geared towards➡ anything both great and small mostly determine how successful🎉 it will ever become.

Mindset has a great role to play in the journey🏁 of man in all ramifications, but this will be nailed📌 to the journey of a man as a developer.

THE DEVELOPER MINDSET; If a developer👨‍💻 fails to have this embedded in him/her, failure❌ has already began from the taking-off🚀 of the journey🏁.

📌Firstly, a developer👨‍💻 is not just a writer of codes but a problem solver. You've got to write less code and discover👁 elegant solution to tasks.

📌See codes like human beings👨‍👩‍👧‍👦 who are prone to making mistake❓, striving to walk🚶‍♂️ through challenges slowly at their own pace. This said above is an illustration✔ to how codes work📍(codes circle⭕).

📌The best strategy is to prepare to fail well ❌ but not giving up💪. Bugs🐛 would surely appear in your codes but you need to unravel👁 what and where things have gotten wrong❌

📌Knowing that coding is all about trial❓, error❗ and challenging💪 yourself to achieve complicatedヾ(≧▽≦*)o, intellectual🤔 and demanding things.

📌Take this out⛔ from your mind 🤔; hmm, i have been coding for years. Stop that🚫, never stop learning📖


Please kindly like and comment below for feedback and you can also follow me on [Twitter](https://twitter.com/chryz_codez) and on this platform for more engagement, motivation and support as a developer.
How to create a custom header menu in Shopify
Tags: shopify, beginners
Published: 2021-01-08 19:35:05

<p>A nested navigation or nested menu is a popular solution for effectively organizing collections, products, and pages. This example will output a nested menu of links in an unordered list up to three levels deep, all of which can be easily updated using the Shopify Admin. Nested navigation uses the Shopify linklist object.</p>

<ol>
<li>Place the following code in the <code class="language-text">Sections/header.liquid</code> file, or wherever you wish the nested navigation to appear.</li>

<li>If used in a section, you can also create a settings option in the section schema, and replace the for-loop in this example with 
``` {% for link in linklists[section.settings.main_linklist].links %} ```
where main_linklist is the id of the schema setting. This setting would specify a link_list picker, and the default value would be set to main-menu.</li>

<li>Add relevant classes and styles to create dropdown functionality via CSS.</li>
</ol>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w793g73aoix6jy1dyut5.png)
https://shopify.github.io/liquid-code-examples/example/nested-navigation

<p><strong>Please note: </strong>We have intentionally limited CSS and JavaScript and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.</p>
How to convert videos without uploading or downloading anything (on your browser)
Tags: webassembly, video, tutorial, opensource
Published: 2021-01-08 19:31:38

Something as simple as converting a video file can be quite an annoying task. Layers of ads, super long upload and download times, and so much more. And with all this, the fear of not knowing what happens to your video after it's uploaded. Like, what exactly will the CIA do with your cat videos?

So, after a solution popped up on the internet, I thought I'd write this to help anyone else facing the same problems.

The procedure is quite straight forward:

Hop onto [modfy.video](modfy.video)

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

Click on the button "Try modfy now!"

This takes us to the actual application itself. Or, you can go to [app.modfy.video](app.modfy.video) directly. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6krn5cfzzmrwggmfldsn.png)
As evident from the page, there's a whole lot this application can do. As of now, we're only interested in converting; but feel free to try the rest out too. 

Remember: __Your files are not uploaded anywhere!__

Just click anywhere on the box on the left, select the file, and it's ready.

Choose the format you'd like to convert the file to, and the codec (leave it on H.264 if you're unsure).

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

Hit submit and let the magic happen.

And voila! You've just converted your cat video from a weird string of letters (and maybe numbers) to whatever you'd like! 

All that with no ads, not having to upload your files on any servers, and no accounts, AND not having to download any software. Pretty cool if you ask me.

Enjoy this gif I made on the website for making it this far.

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

Questions? Suggestions? Opinions? Cat Videos? Just @ us on [Twitter](https://twitter.com/modfydotvideo) or on [Discord](https://discord.com/invite/Afv5EdsxzZ)

And if you haven't already, check out [modfy.video](modfy.video). It's free!
{% github modfy/modfy.video %}
How responsible are devs for how their software is used?
Tags: discuss, watercooler, rudderstack
Published: 2021-01-08 19:16:03

After the events that unfolded this Wednesday in Washington, D.C., and the responses by the social networks that were used to organize and promote these actions as well as document the lawlessness and destruction they caused, how responsible do you feel for how your software is used?

Do you think that devs and tech companies should be treated like gun manufacturers, where they build a product that can be co-opted by bad actors but aren’t responsible in any way for how those bad actors use their product?

Or do you think that we, as developers, should be more responsible about what we build and establish the guardrails necessary to dissuade or block bad actors from taking advantage of our software?

Cover photo by [Joe](https://unsplash.com/@ripster8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/ei-cl8xcbco?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink).
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-01-08 18:56:20

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Happy Friday!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Landing a new job
- Cooking something new... or whatever else might spark joy ❤️

---

Have a great weekend!

![Dancing Gameboy](https://media.giphy.com/media/pO4UHglOY2vII/giphy.gif)
I Merged My First PRs at Work!
Tags: devjournal, womenintech, codenewbie, career
Published: 2021-01-08 18:39:17

_This post was originally published on January 8, 2021 on [my blog] (https://alexlsalt.github.io/blog)._

Wow, I don't know if you can tell from my posts this week, but I am *living*

Going through all the emotions, and yesterday was one of pure exaltation as I not only merged my first, but my first *two* pull requests!

Just small things for now (added myself and a teammate to [Orbit's About Us page](www.orbit.love/about-us) and added a link to another page), but I'm seriously so keenly aware of how this is such a monumental moment in the beginning of my career as a software engineer.

While it's easy to brush these moments off as being 'just small things,' though, isn't it so much more magnificent to really and truly appreciate them as the more significant building blocks of a wild, new adventure?

I think so...


-------

P.S. I send weekly newsletters via email about the self-taught coding journey and my own coding adventures (and misadventures!)  [Sign up here if you want in on that! >>](https://ladies-code-collective.ck.page/e53b5fca44)
how would you build it?
Tags: saas, help, beginners, javascript
Published: 2021-01-08 18:28:29

hey, new guy here. inspired by seeing so many experts here and aiming to build something of my own, but i don't see myself as a web developer, tech-curious tinkerer at best.

Imagine you're **building a (static) website to sell your stock videos for a subscription fee**. How would you build it in a most simple way - “nocode” tools allowed, but price is an issue, since you don't have any sales.

Does this stack makes sense, how would you improve it?:

1. static site generator, like 11ty (no React, since i dont know it). 
2. Firebase for user authentication (and gated content?).
3. Paddle for payments (Stripe does not help with EU sales/VAT tax etc), but does it integrate with Firebase easily? How about Netlify?
4. Jamstack search library - seen a few of those here.
5. Video content stream/download also from firebase?

I'm sure i'm missing something. But more importantly, could it be simpler? (aside from memberstack or gumroad)
Should you be a Full Stack Web Developer in 2021?
Tags: discuss, showdev
Published: 2021-01-08 18:04:28

>*Hello everyone, I’m Ghazi Khan, working at HCL Technologies as Technical Lead. I have been a Full Stack Web Developer in my career and want to tell you guys why and how you should be a full stack web developer in 2021. This article is my opinion and what I have felt about being a full stack developer have been.*

## Who is a Full Stack Web Developer?
A person who works on both sides of the web development which is Backend and Frontend. As both Backend and Frontend web development is a specialized part or we can say specialized branches of web development and a Full stack web developer manages to work on both and he/she delivers the complete application. Also, some full stack developer learns project management, visual designing, DevOps, etc which makes them stronger and independent in their profession

**[Read full article here](https://codewithghazi.com/should-you-be-a-full-stack-web-developer-in-2021/)**
Updates to TLS in the foreseeable future
Tags: watercooler, security
Published: 2021-01-08 18:02:18

This is a *#watercooler* post because I'm not sharing any news about future updates to TLS 😅. I'm actually interested in knowing if anyone here is aware of any major updates to the protocol in the foreseeable future.

I've been thinking about tattoo ideas for a while. I'm not a "meaningful story behind my tattoo" person, I'm going for something punny instead.

I have this play of words idea that includes something about the [TLS protocol actual implementation](https://tools.ietf.org/html/rfc8446). It's got to do with the handshake part of the protocol (it's going in my forearm).

The reason I'm asking is to double check and avoid doing this tattoo if there already is a Work in Progress on the replacement or major update (1.4? 2.0?) for TLS that I'm not aware.

I know that 10, 20 or 30 years from now it's almost certainly not going to be in use, but it will be a cool memory of this era. If you are aware of anything about this let me know in the comments! 😄
Execute Python Weekly Automatically and Free!
Published: 2021-01-08 18:01:02

Introduction
------------

One of the easiest things to do with WayScript is setting a program to run daily, weekly, or even monthly. This is a great benefit when it comes to running a Python script since it uses a third party instead of potentially slowing down your computer. In this super quick and easy tutorial, we’ll show you exactly how to do this. Keep reading to follow along!

Building our Script
-------------------

In order to get the script to run on a specified cadence, the Time Trigger module is added. In the left screen toolbar, there are several options to determine how often to run the script, what time to run it, and even what time zone you’re using. We’ll select weekly for this script, but you can choose whatever option best fits your applications.  
  
The next module to add is the Python module, where we’ll enter in the code. Click on “Enter Edit Code Mode” in the toolbar, where a code editor will appear. This editor that WayScript provides makes it easy to copy and paste your code or write it directly on the page. Click done in the top right corner once you’re done editing the code. Lastly, activate the Time Trigger by switching it to the on position to run the program.  
  
WayScript’s platform gives users a great third party to run Python code and other programs at specified time intervals. As we’ve seen from this tutorial, it’s also efficient and only takes a minute to build. Let WayScript take care of your Python scripts and save computer space and time!

Conclusion
----------

Questions about this script or anything else? Join our [discord](https://discord.gg/VWbXSbj). We're always around to help. If you want to work the full script template, just find it [here](https://wayscript.com/shared/K7UIc8WP).
Tiny mini galaxy (live demo)
Tags: lume, webdev, html, javascript
Published: 2021-01-08 17:56:33

While I write documentation for LUME, a [3D HTML toolkit](https://github.com/lume/lume), I will be posting demos that I create for the docs. I am posting one demo per day all 2021.

This demo is a tiny mini galaxy!

It shows the basics of the `<lume-node>` element, which is a primitive element for making a hierarchy in 3D space.

A `<lume-node>` element can contain child LUME elements. Each child LUME element transforms relative to its parent. A `<lume-node>` element can also contain any regular HTML content that will not be decorated with WebGL rendering.

{% codepen https://codepen.io/trusktr/pen/jOMpPJR %}

For WebGL rendering you can use `<lume-dom-plane>` for mixing HTML content with WebGL content such as `<lume-mesh>`, `<lume-gltf-model>`, etc. More info will be landing in the docs!

Made with LUME:

{% github lume/lume %}

topics: #CSS3D #HTML #JavaScript