teleren/devto huggingface dataset:
Frozonic: Code freeze management for your repositories
Tags: showdev, developertools, productivity
Published: 2019-04-29 18:02:21

---
title: Frozonic: Code freeze management for your repositories
published: true
description: Discover how you can manage code freeze windows in your development cycle.
tags: showdev,developertools,productivity
---

Frozonic is a tool development teams use to communicate code freeze windows and avoid undesired product behavior changes.

It is a common practice across companies to let people know via Slack or email that there is a code freeze window happening and that merging code to production is not allowed. Sometimes it is very hard to keep this in mind as teams move forward. Frozonic integrates code freeze checks into your software development cycle to help you communicate code freeze windows accurately, openly and explicitly.

We're being featured today on [ProductHunt](https://www.producthunt.com/). Please take a look and let us know what your thoughts are :)

Don't forget to come by our [home](https://www.frozonic.app/?ref=dev.to) and explore!
What's the Worst Code You've Ever Seen or Written?
Tags: discuss
Published: 2019-04-29 17:45:03

---
title: What's the Worst Code You've Ever Seen or Written?
published: true
description: As a developer, I've seen my fair share of bad code. How about you?
tags: discuss
---

Earlier today, I published an article about the [struggles of working in teams][1] (it's a little personal, so apologies for the paywall). In that article, I wrote about a time when I was on a game development team, and I noticed someone do something I felt was truly horrific: they built a 100 by 100 game grid entirely by hand. 

In other words, they created tile objects and hand positioned all 100 of them into a grid. Then, they gave each tile a name which corresponded to its position (i.e. `(0, 0)`, `(1, 0)`, etc.). From there, they wrote a script to find all tile objects in the scene, parse their names, and place them at the appropriate indices in a set of nested arrays. Naturally, the solution was unscalable, so we were stuck with that initial grid.

Honestly, I wanted to write a whole article about that story, but I don't really remember all the details. That said, I thought it would be fun to share what I could remember and see if anyone else had similar experiences. 

I should mention that I'm not the first one to kick off this kind of discussion on the platform. [Meghan Denny held a similar discussion][2] over a year ago, so check it out! 

Also, I don't intend for this to be a huge rant. I'm more interested in some of the lessons learned, so try to keep things positive and light.

[1]: https://therenegadecoder.com/blog/the-problem-with-working-in-teams/
[2]: https://dev.to/nektro/whats-is-the-worst-code-you-have-ever-seenwritten--13nd
Watch out for Unexpected S3 cost when using Athena.
Tags: aws, finops, athena, s3
Published: 2019-04-29 17:39:59

---
title: Watch out for Unexpected S3 cost when using Athena.
published: true
description: "Watch out for Unexpected S3 cost when using Athena."
tags: [AWS, FinOps, Athena, S3]
---
*Originally published at [cloudforecast.io/blog](https://cloudforecast.io/blog/unexpected-s3-cost-when-using-athena/)*

Following up on my last blog post ([Using Parquet on Athena to Save Money on AWS](https://cloudforecast.io/blog/using-parquet-on-athena-to-save-money-on-aws/)), I wanted to share another thought about Athena, specifically how the S3 bucket is being used by Athena to store query results.

On the first use of Athena, AWS will automatically create a new bucket to store the query results (bucket name `aws-athena-query-results-<ACCOUNTID>-<REGION>`). Athena will store a raw result file (`QueryId.csv`) and a metadata file (`QueryId.csv.metadata`). 

By storing the data using the `QueryId`, it allows you to access previous query's result without re-running them (saving you money since you don't need to rescan the data).

However, you are the owner of the bucket and therefore responsible for the storage on this bucket and here is a couple of reasons why it could cost you a LOT of money:

**#1 All the queries are being stored! ALL OF THEM!**  
Athena store every query results in the bucket. Query data will just accumulate forever costing more and more $$$.

**#2 Your data may be compressed but the results are not**  
S3 is storing the results in raw CSV. Your data may be compressed (GZIP, Snappy, ...) but the results will be in raw CSV. As an example, I ran an *accidental* `SELECT * FROM flights.parquet_snappy_data` on a 84M dataset using Parquet which resulted on a **977MB** file on S3. 

**How to fix this?**  
*It's actually pretty easy*. If (and only if) you don't plan to re-use old query results, make sure to setup [Lifecycle](https://docs.aws.amazon.com/AmazonS3/latest/dev/object-lifecycle-mgmt.html) on your bucket using a Transition or Expiration actions. For example, you could delete query results after 1 or 7 days. At CloudForecast, we actually don't persist `QueryIds` since it's not useful to us so we expire the S3 files after 1 day.

_Feel free to reach out if you have any questions at  [francois@cloudforecast.io](mailto:francois@cloudforecast.io)  or by Twitter:  [@francoislagier](https://twitter.com/francoislagier). Also, follow our journey  [@cloudforecast](https://twitter.com/cloudforecast)_
Weekly Coding Challenge - Week #9 - Modal
Tags: challenge, html, css, javascript
Published: 2019-04-29 16:39:52

---
title: Weekly Coding Challenge - Week #9 - Modal
published: true
description: Week #9 of the Weekly Coding Challenge program - Modal
tags: challenge, html, css, javascript
canonical_url: https://www.florin-pop.com/blog/2019/04/how-to-create-a-modal/
cover_image: https://www.florin-pop.com/static/9e3e2198c6920f85b2f570efe70d9472/ff993/how-to-create-a-modal.png
series: Weekly Coding Challenge
---

Theme of the week: **Modal**

### Description

We have another one of the main components that is found on most of the websites. A modal is used to attract the users attention to some special information that you want to highlight.

It's best to make sure that the information presented in the modal is really important otherwise it might annoy the users and they'll close it in a heartbeat without reading the information or even worse, they'll leave the website.

## Useful Resources

Check out my submission for this challenge: [How to create a Modal](https://www.florin-pop.com/blog/2019/04/how-to-create-a-modal/).

See all the submissions in this [Codepen Collection](https://codepen.io/collection/XPjzWZ).

Are you interested in joining the challenge? :smiley: Read [The Complete Guide](https://www.florin-pop.com/blog/2019/03/weekly-coding-challenge/) to find out how. Don't forget to share your creation! :wink:

Happy Coding! :innocent:
Are we pretentious and arrogant?
Tags: discuss, beginners, career, webdev
Published: 2019-04-29 16:11:04

---
title: Are we pretentious and arrogant?
published: true
description: Do you think that we, as developers, have a slighly tendency to become quite selfish because of our so specific-skills?
tags: discussion, beginners, career, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/iu2lw5xu2xujhwg3gheb.jpg
---

The other day i had this conversation on a Facebook group with another developer who claimed that you can ignore HTTPS if your website doesn't handle any data transfer.

I replied that, even if "technically" this might be true, it just isn't, due to infinite reasons. Primarily the fact that Google just penalizes websites not on SSL.

At this point this guy kept on arguing with a very annoying/aggressive behaviour, claiming that he did hundreds of migrations from HTTP to HTTPS, that i was probably one of those fools who believed security is only a matter of SSL and so on...

Eventually other people joined the discussion and stood by my side. Didn't need that, but i apprieciated it.

**Then a simple thought.**

That wasn't the first time that, when discussing IT stuff with other developers, things started to heat up, turning out on an aggressive, i-know-everything tone.

It seems like many devs out there just can't wait the moment to pretentiously show their knowledge, without even trying to understand if there's some bug in theirs.

The only thing i know, after many years in this industry, is that i *know nothing*... 

Did you ever found yourself in a situation like this?
Do you think that we, as developers, have a slighly tendency to become quite selfish because of our so specific-skills?

Let me know, DEV people. Let me know.

---

*This article was written while listening to* [La Casa Elettrica #01](https://soundcloud.com/lucagrandicelli/sets/la-casa-elettrica-01).{% soundcloud https://soundcloud.com/lucagrandicelli/sets/la-casa-elettrica-01 %}

*Cover image by* [Tomasz Mrozkiewicz](https://www.artstation.com/tomaszmro)
How to build Typescript String literal Types from Objects
Tags: typescript
Published: 2019-04-29 15:26:16

---
title: How to build Typescript String literal Types from Objects
published: true
description: A quick tidbit on how to create String literal Types in typescript from javascript Objects.
tags: #typescript
---

With typescript 3.4 we get const assertions. This makes it easier to create enums from Javascript objects. Without const assertions its difficult to create a type with would be a String literal of some object values. It is however, fairly trivial to do this with keys.

```ts
const translations = {
    header_title: "DEV.to",
    footer_cta: "about us",
    header_subtext: "",
};

// "header_title" | "footer_cta" | "header_subtext"
type TranslationsKeys = keyof typeof translations;

```
But lets say that would to create a type based on the values of a constant. For example, in the case below we want the values of the routes rather the keys.

There is where const assertions come into play. In the example below if we did not have the `as const` the type of `RoutesEnum` would just be `string`.

```ts
const Routes = {
    home: "/",
    about: "/about-us",
    cart: "/cart",
};

type ValueOf<T> = T[keyof T];

 // string
type RoutesEnum = ValueOf<typeof Routes>;

```

Sometimes this is enough but not quite for our use case. The const assertion will make all the properties read only and turn them into String literals. We can then use the `ValueOf` function to create a type of all the values of the object.

```ts
const Routes = {
    home: "/",
    about: "/about-us",
    cart: "/cart",
} as const;

type ValueOf<T> = T[keyof T];

// "/" | "about-us" | "/cart"
type RoutesEnum = ValueOf<typeof Routes>;

```

[Playground link] (https://www.typescriptlang.org/play/#src=export%20const%20Colors%20%3D%20%7B%0D%0A%20%20%20%20red%3A%20%22RED%22%2C%0D%0A%20%20%20%20blue%3A%20%22BLUE%22%2C%0D%0A%20%20%20%20green%3A%20%22GREEN%22%2C%0D%0A%7D%20as%20const%3B%0D%0A%0D%0Atype%20ValueOf%3CT%3E%20%3D%20T%5Bkeyof%20T%5D%3B%0D%0Atype%20ColorsType%20%3D%20ValueOf%3Ctypeof%20Colors%3E%3B%0D%0A%0D%0Afunction%20hi(hi%3A%20ColorsType)%20%7B%0D%0A%20%20%20%20return%20hi%0D%0A%7D%0D%0A%0D%0Ahi(Colors.blue))

Glossary:
[String literals](https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types)
[const assertions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html)
[keyof](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#keyof-and-lookup-types)
Flex grid, Responsive table, About me | Module Monday 37
Tags: showdev, opensource, webdev, javascript
Published: 2019-04-29 15:06:52

---
title: Flex grid, Responsive table, About me | Module Monday 37
published: true
description: Module Monday 37
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1555637412/animate-flex_edoi9g.gif
canonical_url: https://guide.anymod.com/module-monday/37.html
---

## Modular code you can add anywhere

All the mods below are open source and free to use in any project you choose -- they work on any website or web app because of [Anymod](https://anymod.com).

Click a mod to see it in action along with its source code.

## Animate flex grid
Hover to show off your images
<a class="btn btn-sm" href="https://anymod.com/mod/animate-flex-grid-ramkmb">View mod</a>
<a href="https://anymod.com/mod/animate-flex-grid-ramkmb">
  <img src="https://res.cloudinary.com/component/image/upload/v1555637412/animate-flex_edoi9g.gif"/>
</a>

## Responsive table
Rearranges from standard table to list format for much better mobile viewing.
<a class="btn btn-sm" href="https://anymod.com/mod/responsive-table-mlndna?v=29">View mod</a>
<a href="https://anymod.com/mod/responsive-table-mlndna?v=29">
  <img src="https://res.cloudinary.com/component/image/upload/v1556514345/responsive-table_equl2j.gif"/>
</a>

## About me section
A beautiful, responsive section that can go anywhere.
<a class="btn btn-sm" href="https://anymod.com/mod/about-me-section-lldnda?v=20">View mod</a>
<a href="https://anymod.com/mod/about-me-section-lldnda?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1556514345/about-me_jbmese.png"/>
</a>

## Squares gallery
Great way to showcase images on any page.
<a class="btn btn-sm" href="https://anymod.com/mod/basic-gallery-squares-bamomk?v=20">View mod</a>
<a href="https://anymod.com/mod/basic-gallery-squares-bamomk?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1556514346/square-gallery_ykw7z5.gif"/>
</a>

## Snapshot hero
Open source hero unit from Templated.co.
<a class="btn btn-sm" href="https://anymod.com/mod/snapshot-hero-kdlmbm?v=20">View mod</a>
<a href="https://anymod.com/mod/snapshot-hero-kdlmbm?v=20">
  <img src="https://res.cloudinary.com/component/image/upload/v1556514344/snapshot-hero_he4wsz.png"/>
</a>

<hr>

I post new modules [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Has Many Objects Through Lab
Tags: replit, ruby
Published: 2019-04-29 15:06:21

---
title: Has Many Objects Through Lab
published: true
tags: replit, ruby
---

Write classes that are related to each other via the "has-many-through" relationship.
Write methods that use the "has-many-through" relationship to deliver information on related objects.

{% replit @Poliarddjimmy/Has-Many-Objects-Through-Lab %}
Modals and Scrollbars
Tags: javascript, webdev, tutorial, css
Published: 2019-04-29 15:05:47

---
title: Modals and Scrollbars
published: true
description: How should a modal work with scrollbars
tags: javascript, webdev, tutorial, css
---

Today while building a modal I experimented with a different layout that solves a few issues with the scrollbar, in a simple way. Jump to the [final version](#modal-over-everything), or read on.

## Basic Modal

The most basic modal is 2 `<div>` elements:

1. an overlay `position: fixed;` in the `<body>`
1. and the content, nested in the overlay

{% codepen https://codepen.io/kevinkace/pen/PgLwPM %}

## Scrollbar

There's an issue with this simple modal: the vertical scrollbar of the main content persists when the modal is opened.

![main content scrolling behind modal](https://media.giphy.com/media/PkEYdfMJXwffgF8eTw/giphy.gif)

Opening a modal should fully switch context away from the underlying content to the modal. Scrolling presentation and interaction need to follow this context switch.

A common solution is to add `overflow: hidden` on `<html>` or `<body>`, removing the scrollbar entirely. This also works if the modal content is scrollable.

{% codepen https://codepen.io/kevinkace/pen/oOVgyO %}

## Content Shift

Removing the scrollbar fixes one problem, but introduces another: the underlying content shifts position.

![content shifting behind modal](https://media.giphy.com/media/RgyO9SIWdyFS1SgmjG/giphy.gif)


When the scrollbar is removed, the content takes up that extra width, leading to text and content reflowing, and backgrounds repositioning.

In the past I've solved this in two ways: adding `padding`/`margin` on `<html>`, or setting the `width` of `<html>`.

{% codepen https://codepen.io/kevinkace/pen/GLeQOr %}

These values have to be recalculated and updated when the `window` is resized, or as content is added/removed.

## Modal Over Everything
[](#modal-over-everything)

So today as I was building a modal I got to this stage and thought about why the modal exists within the scrollable content. It should be fully separate, and *on top* of the scrollbar. This is possible by restructuring the document.

The modal has to be outside the scrollable content; it's added to the `<body>` and can't be any higher up the DOM, so the scrollable content will need to be a child of `<body>`.

{% codepen https://codepen.io/kevinkace/pen/gyEpQX %}

What I like about this:

1. no code to remove/add scrollbars
1. no code to set width/margin to account for the scrollbar
1. no recalculations when resized

It just works.

## Lastly

One drawback with this setup is that it's atypical. Any other code expecting `overflow` to be on `<html>` or `<body>` will need to be refactored. This and other issues likely wouldn't be hard to resolve.

I plan to test this solution further for browser and device compatibility, and hopefully it proves out.
Seeking suggestions for leveling up web design skills
Tags: help, design, web
Published: 2019-04-29 15:03:57

---
title: Seeking suggestions for leveling up web design skills 
published: true
tags: help, design, web
---

Hello DEV community,

I am seeking to level up my abilities as a designer to be able to boost my confidence building visually pleasing (Sorry I know this is vague) websites & UI. 

I believe I exercise a good amount of HTML & CSS as I can take a design given to me and create it in code. I'd like to be able to start designing web UIs that I can myself translate into code. I was wondering if there are courses, resources, tips on how I can get better..

Thanks a ton!
Don’t let your emotions dictate your decisions
Tags: career, mistakes
Published: 2019-04-29 14:35:25

---
title: Don’t let your emotions dictate your decisions
published: true
description: I've recently decided to change the course of my career and I've made a huge mistake 
tags: career, mistakes
---

I have been working in a packaging company for the last 2 and a half years as a web designer. Recently I've decided to move on with my career to work as a front end developer in a technology company.

I applied to some companies and to my surprise 6 out of 8 companies were interested in my profile, requesting a first interview to get to know me.

All the interviews went well but only 2 of them asked me to move to the second interview.

One of those companies, which I loved, told me they wanted to sign a contract with me.

Since I was thrilled, I rushed to say yes and refused the other company's proposal.

BIG MISTAKE.
The company that I accepted to work for, provides outsourcing services, so I'd be working as a consultant for other companies, which its not the type of job I want at the moment.

I had to step back, tell them I didn't want to work for them and had to tell the previous company that I was working for that I'd be coming back if they'd still accept me.

![I don't always accept a job](https://thepracticaldev.s3.amazonaws.com/i/dii3uekicgl8i3w0w985.jpg)

Everything went well for me as my previous company took me back.

Here I am now, feeling embarassed that I did a really bad decision because I was impulsive.

I don't feel motivated to keep searching for a new job right now but in a few months I'll continue searching to kick start my developer career and surely, by then, I won't be making the same mistake.

BIG ALERT.
To anyone who's reading this, don't let your emotions dictate your decisions.

If you ever feel like me try to settle down and really think about the problem and the options around you.

Always search more information about the company you are applying for.
Radix: Creating Node IDs & Basic Sybil Prevention
Tags: dlt, blockchain, opensource, nodes
Published: 2019-04-29 14:20:19

---
title: Radix: Creating Node IDs & Basic Sybil Prevention
published: true
description: 
tags: #dlt #blockchain #opensource #nodes
---

How will the Radix Ledger deal with Sybil and eclipse attacks? Learn more about how the Node IDs will be created!

{% youtube EOisSoQ9Oa4 %}

If you have any questions - join The Radix Community!

[Telegram] (https://t.me/radix_dlt) for general chat
[Telegram Announcement Channel] (https://t.me/RadixAnnouncements) for announcements
[​Discord] (https://discord.gg/7Q7HSZZ) for developers chat
[​Reddit] (https://reddit.com/r/radix) for general discussion
[Forum] (https://forum.radixdlt.com/) for technical discussion
​[Twitter] (https://twitter.com/radixdlt) for announcements
[​Email] (https://radixdlt.typeform.com/to/nyKvMV) newsletter for weekly updates
Mail to [hello@radixdlt.com] (hello@radixdlt.com) for general enquiries
Launch story: 2 weeks later
Tags: product, react, node, launch
Published: 2019-04-29 14:18:36

---
title: Launch story: 2 weeks later
published: true
description: Is this thing still on?
tags: product, react, node, launch
series: InvoiceMaker
---

# Introduction

About 2 weeks ago, I published <a href="https://dev.to/damcosset/on-finally-launching-something-1i39" target="_blank">an article</a> about the launch of <a href="https://invoicemaker.xyz" target="_blank">InvoiceMaker</a>. There, I especially insisted on launching something as soon as possible, to keep the momentum going and the project alive. Well, it wasn't all great :D

# The (stupid) bug :bug:

So, the application is using puppeteer to generate a PDF from HTML. Soon after the launch, I realised that something was not right. The PDF generation was taking waaaaaay too long. And I mean, 8 seconds too long... The problem only occured in production, and had me quite confused. After hours of googling, soul searching and praying to the God of geeks itself, I managed to solve it...

I had forgotten to close the *Browser* instance I had created with puppeteer for the PDF creation.

Yeah.:massage:

So, I added `await browser.close()` where it was needed. Done. :+1:

I should just read the documentation more carefully next time, because it was all in there... Oh well.

# New features and stuff :heavy_plus_sign:

Obviously, I added a few more features and tried to improve certain things:

### https

This one took me a litte bit of time. I've never done this from scratch before. There was always someone telling me to run certain commands and boom, that was it. Not the same story when you don't have a safety net.

There are some great tutorials out there that helped me greatly. I do feel my lack of experience in managing servers and such is slowing me down quite a bit here.:grimacing:

### French translation

Well, I'm French and I wanted my application to also be in French, so... sue me.

### Little things

- Changed the favicon
- Loading screen when generating the PDF
- Changed some styles on the invoice

# Special time :hourglass:

The application is progressing, slowly, but it is still alive in my mind. One thing that I believe I should do for the near future is to set a time where I will work on this project. Dedicating a special window of time for this will help me be more focused about it. Right now, it's more like half an hour here, 20 minutes there... It's erratic, and the pace I could have is suffering.

# Conclusion

Launching quickly, and not having a lot of experience on many fronts means that I'm still figuring out a lot of stuff. It will most likely take a lot more time to fully grasp certain concepts. But, as long as I'm able to keep adding features, one by one, I believe I'll keep enjoying myself working on this project.