teleren/devto huggingface dataset:
Sinatra on Heroku
Published: 2021-02-24 22:21:57

# Building my first Sinatra Application
I needed to create an application with a basic MVC structure. I chose to go with a Trail rating application that would let users browse and leave reviews on a number of trails. 

You can view the project hosted on heroku here: [hike-it-up.herokuapp.com](https://hike-it-up.herokuapp.com/)

![Hike-It-Up Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft9onjupbaogtjpvkyjs.png)

## Development
Starting out I used a gem called [Corneal](https://github.com/thebrianemory/corneal) which is used to generate scaffolding for a basic Sinatra application. Very useful and exactly what I needed to get started.

I wanted to use [Puma](https://github.com/puma/puma) over Thin as a webserver which limited me from using `shotgun`. Puma is recommended for the production environment over Thin on [Heroku](https://devcenter.heroku.com/articles/deploying-rails-applications-with-the-puma-web-server). As well as Heroku not supporting SQLite3, I had to switch to PostgreSQL and for this reason I just all in all removed thin and shotgun from my project.

As in the development environment puma automatically would update like shotgun would if the changes were to html files.

As for the database, PostgreSQL is faster, so might as well go with the more optimized option.

## Production
To deploy this project to Heroku I needed to learn how to correctly configure a Puma web server using workers. Luckily their guide was thorough and helpful when running into errors.

Heroku also automatically will redeploy your app if you link it to a github repository. This made production even easier once the initial setup was done.

## Conclusion
After building this project I am extremely excited for the automation of Rails to build models, views, and controllers as well as dynamically building routes. After learning Sinatra I thought that it felt like magic, yet Rails takes things to a whole new level. 

**P.S.** If you made it this far... thank you! Feel free to check out more information in the projects [README](https://github.com/CoachLuck/hike-it-up) on github.
"Mouse Parallax" Moon animation 🌑
Tags: codepen
Published: 2021-02-24 22:20:46

<p>Drawins and events with canvas. I like to do this effect, this time i did with canvas 🖤</p>

<p>Some feedback would be great ✌️</p>

{% codepen https://codepen.io/romerof/pen/RwojqBq %}
Code Splitting with Laurie Barth
Tags: discuss, podcast
Published: 2021-02-24 21:54:31

---
title: Code Splitting with Laurie Barth
published: true
description: Listen to S4E3 of DevDiscuss!
tags: discuss, podcast
series: DevDiscuss Season 4
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rclqxhawbzj87orxj3wa.png
---

> **If you have a code splitting-headache, S4E3 of DevDiscuss might help**

{% podcast https://dev.to/devdiscuss/s4-e3-code-splitting-and-the-long-list-of-things-you-need-to-know-about-writing-javascript %}

In this week's DevDiscuss, I was joined by special guest co-host Katie Davis, a front end developer who has previously worked at Shopify and League Inc. Katie and I tackled the topic of code splitting and the long list of things you need to know about writing JavaScript with [Laurie Barth](https://dev.to/laurieontech), staff software engineer at Gatsby and instructor at egghead.io.

Laurie authored an amazing intro to code splitting here on DEV in January. I highly recommend checking it out as a supplement to this episode: 


{% link https://dev.to/laurieontech/code-splitting-explained-3ijl %}

**Excerpt:** 

> _"According to MDN, 'Code splitting is the splitting of code into various bundles or components which can then be loaded on-demand or in parallel.'_

> _In other words, when you have different chunks of code you can make choices about how you load them. When you only have one big one, your hands are tied."_

I hope you learn a lot from this episode. I know I did 📚  

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s4-e3-code-splitting-long-list-things-you-need-to-know/id1513053883?i=1000510440019)
- [Spotify](https://open.spotify.com/episode/48vL6XgSc8lM4ePquUM86X)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzI4?sa=X&ved=0CAQQkfYCahcKEwioqdn_o4PvAhUAAAAAHQAAAAAQAw)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s4e3-code-splitting-and-the-bgTc8EmS-WV/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=161067584)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](https://devpods.herokuapp.com/podcasts/devdiscuss/episodes/117)
- [Pocket Casts](https://pca.st/uy6tyftt)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season four sponsors: DataStax, New Relic, Educative, and Ambassador Labs!_

# 🗣️🗣️🗣️
GitHub vs. GitLab - Explained for Dumb People Like Me
Published: 2021-02-24 21:43:11

If you're anything like me, maneuvering through the complicating technological world of coding can be tough. There are so many websites and services, and they all sound so similar (why - I don't know). But, you might find yourself wondering, what's the difference between GitHub and GitLab, and why should I even know what they are? 

Well, in one quick analogy, I'm going to try explaining the difference to you. If you've ever been on Minecraft, you'll know there's public and private servers. Think of GitHub as a public server, and GitLab as a private server. In a private server on Minecraft, you can set administrative access to things like who's allowed to break which blocks, who are allowed to enter the server or not, etc. GitLab is the same way.

GitLab allows users to edit code in realtime privately, whereas GitHub anyone is allowed to edit (much more public)

You may now be wondering, "gee, how do I use GitLab on my computer?"...well that's a wonderful question! Here's how...

1) Utilize a cloud service that allows you to host the GitLab software. In my specific scenario, I used Reclaim Cloud since it allows users to "pay while they go" rather than paying for a set price (think: similar fairness to paying for an electric bill). 

2) When you make a Reclaim Cloud account, upgrade to premium, you're going to want to load money up too!

3) When you're on the main website, go to the "Applications" tab and then enter your email into GitLab to download it onto your Reclaim Cloud. Eventually, it will download and you will have the GitLab link on your dashboard. 

4) Go into "Change Environment Topology" and toggle the panel of "cloudlets" to maximum capacity. Although this is more expensive, it will allow your server to run much more smoothly and effectively; it's worth the extra cash. 

5) Add whichever repositories you want to the account! And then you're off! 

Watch this video of me attempting to do this all here: https://www.youtube.com/watch?v=4fAWWV0phdI&feature=youtu.be
More on LaTeX tables: Rotated text and Merging rows
Tags: latex, codenewbie
Published: 2021-02-24 21:10:43

Hello, in [this](https://dev.to/latexteada/latex-tables-the-tabular-environment-4f0a) post you can check how to create a table in LaTeX, and some examples at the end of the document.

I hope you have explored that environment, here, in this post, I bring you two useful tools that you may require while doing tables

# Rotated Text

We need to import the `rotating` package and we need to use the command `sideways`

> If you want to know more about some packages, you can check [this](https://dev.to/latexteada/a-primer-to-your-first-document-the-sheet-and-language-5b4n) post.

We must put the text which will be rotated in the `sideways` command, this command must be *inside* the column, as in the following example

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

Produces 

![Screenshot from 2021-02-23 10-19-20](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7broi7us7x7ar521cdg.png)
 
Another example is 

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

Produces

![Screenshot from 2021-02-23 10-23-31](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ak6e1yug8u29nc5nn5k9.png)

# Merging Rows and Columns

We need to import the `multirow` package
* We need to use `multicolumn` to merge columns, its structure is 
```
\multicolumn{numberOfColumns}{Alignment}{text}
```

* We need to use `multirow` to merge rows, its structure is

```
\multirow{numberOfRows}{width}{text}
```

We can put `*` in *width* to set a natural width 

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

Produces

![Screenshot from 2021-02-23 10-45-24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hognjw03n1j1idhmicop.png)


**WAIT!!!** What is this!? Why there are lines in that column, it is not supposed that there would not need to be lines in that column. Well, we have discovered a property of the `\hline` command. 
* The `\hline` command puts a line from the first column to the last column. we need to explore another command 

## `cline` Command

With this command, we can draw a horizontal line across the columns, its structure is `\cline{i-j}` where *i* is the first column and *j* the ending column

* We start counting in 1

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85y93zzkn4pep7iwwxek.png) 

Produces

![Screenshot from 2021-02-23 10-59-27](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07xm2jrwng1t73l2mx42.png)
 
So, now we can modify our last example and obtain

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

Produces

![Screenshot from 2021-02-23 11-01-25](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5zosalttgaqut2tejzh.png)

I encourage you to play with these commands.

Do not forget to follow me on Twitter `@latexteada`

Thanks, see you :)
Shaping idea into Proof Of Concept
Tags: showdev, writing, startup, buildinpublic
Published: 2021-02-24 21:07:58

While working on MeetingBar, I noticed that I refresh the statistic pages on GitHub very often. I even wrote a telegram bot that sends me a count of installs and repository stars every morning. So I decided to make a service for analytics and reports for open-source projects.

### Let's start from a blank page

When I open my project page, I have two needs: dopamine and useful information.

Dopamine is stored in numbers. Downloads, stars, views. I want to receive this data often and to be able to compare their values with the previous ones.

Useful information lies deeper. In comments on the issues, updates to the pull requests, new project referrers. It already comes in GitHub notifications, but they are generated for each action. So it would be convenient to receive a full report for a certain time instead of viewing a dozen notifications during the day.

In addition to all this, it would be nice to have a project status visualization that can be shared. Thus, every project on GitHub can get the basis to become an open startup without additional effort.

So I need to build a platform that collects&stores data from GitHub, makes dashboards, and sends reports. It looks like a great bunch of work!

### Scoping

Let's start with simple Proof Of Concept.

The easiest way to validate an idea is to build a service that periodically collects necessary data and sends an email report. At this point, we will skip the UI part with dashboards and data storing for metrics comparison.

This data will be collected every morning and send to me by email.

The letter will have the following structure:

* First, there will be numbers to satisfy my excitement.

* Then issues and pull requests that have changed over the past day.

* And in the end, there will be traffic.

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

The traffic section requires a lot of effort with authorization and visualization. But I decided to include it in PoC because it will cover all my needs for opening a GitHub every morning.

### What's next?

The implementation story.

Then I'll try to use it for a week. So I'll understand whether it's useful and what needs to be improved.

> 📌 If you are interested in this idea, contact me. I'll notify you as soon as I plan the beta.

--------

[Subscribe](https://leits.substack.com/welcome?r=h8qz8&utm_campaign=account&utm_medium=web&utm_source=dev.to) to receive the next issue when it's ready!
Setup IOS Machine To Run A Higher Version Of Python By Default.
Tags: python, django, programming, webdev
Published: 2021-02-24 21:04:52

$ python -- version

MacOS comes generally with python 2.7 installed, which is deprecated as of January first 2020. However there are some dependencies on MacOS that might require python 2.7 to be available, which means we can’t uninstall the 2.7 version to replace it with a higher updated version.
Thankfully, Pyenv allows us to have different versions of python installed in our machine. We’re goin to install our desired updated version of python and have it running as the default specific version on our MacOs machine.
First of all, we’re going to install HombeBrew as package manager using the terminal. Once HomeBrew is installed, let’s install the Pyenv package by running the command: brew install Pyenv.

Now, Let’s configure our terminal so it can use Pyenv whenever we start a new instance. Let’s initialize Pyenv by running the command pyenv init in the terminal. This will tell us what we need to do to initialize our Pyenv every time we start a new terminal window. Your terminal should look like this after running the pyenv init command:

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

Let’s copy the eval “$(pyenv init -)” line and add it to this file that is located at the ~/.zshrc path. This is a path to a file on our system, the file might not exist, and if it doesn’t exist, we need to create it, and we need to add the eval line to it.

We can do that by typing nano ~/.zshrc in our terminal, if you’re using an older version of MacOs, you might have bashrc instead of zshrc as your file path location.
Once, the nano text editor is opened, paste the eval “$(pyenv init -)” command then save it. It will create the new file for us.

Next let’s use Pyenv to install the version of python that we want, i’ll do it with the 3.8.2 version, you guys can chose the version of python you want. Run the command: pyenv install 3.8.2. Pyenv is going to download and install the specified python version on our system.

Finally, let’s configure Pyenv to use this version by default whenever we use the terminal. This way, we still have python 2.7 installed on the system for those applications that need it, and we can use python 3.8 when we’re developing.
We can configure the default version of python in Pyenv by modifying a text file. We do this by running the command: echo 3.8.2 > ~/.pyenv/version.

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

You should be all set up and ready to code. Happy Coding 🎉
GOlang discussion 🤔
Tags: go, discuss
Published: 2021-02-24 20:56:30

---
title: GOlang discussion 🤔
published: true
description: go learner interested in senior dev's opinion
tags: go, discussion
cover_image: http://networkstatic.net/wp-content/uploads/2015/01/twitter-gopher-banner-small.jpg
---

Hi folks! 

I am doing a Go bootcamp and I would like to know your thoughts about working with Go compared to other languages like Javascript, PHP or (insert your preferred  language). 

It was easy or hard for you to make the leap to Go? What you think it's great in Go and what stuff do you miss from other languages? What is your recommendation for Go rookies? 

Thanks every1 for your opinions!

p.d. which is the best guide or course besides officials docs do you recommend? 👌
Keynotes From #TheAndroidShow: Jetpack Compose
Published: 2021-02-24 20:47:46

Hey Guys, as of today, Jetpack Compose is in Beta! Yes, you heard that right.

Now the Android Developers Team announced this with a YouTube livestream, #TheAndroidShow: Jetpack Compose! where most of the big questions on our minds were answered. So if you missed it or you were present but you still need a refresher, don’t worry, I’ve got you.

Just a heads-up, everything from the Q&A is summarised, but not to worry, you can still get the full resources which I will share at the end and if you know very little about it, you can start from [here](https://developer.android.com/jetpack/compose).

The live Q&A was hosted by Nick Butcher, Anna-Chiara Bellini, Leland Richardson, Clara Bayarri and Amanda Alexander. They answered questions on the following areas;

#### View Rendering Performance

<ul>
<li>Compose performs favourably with views and the Jetpack Compose Team has been getting some good metrics during testing.</li>
<li>Still requires a bit of work by the Jetpack Compose Team.</li>
<li>Nothing major to worry about for now.</li>
</ul>

#### Integrating with Existing Codebase

<ul>
<li>It is pretty easy.</li>
<li>Depends on how much of your codebase you want to compose.</li>
</ul>

#### Compose Tooling

<ul>
<li>The latest canary version of Android Studio has support for Jetpack Compose, this means you’ll be able to preview your composables in Android Studio without running a physical device or emulator.</li>
<li>Jetpack Compose supports ConstraintLayout too but things are done much differently.</li>
</ul>

#### State Management

<ul>
<li>The Jetpack Compose Team has no strong opinions on how to manage state this is because it was designed to work with any of the popular existing State Managements like <code>MVI</code> and <code>redux</code>. (They also advise you use what works best for you and your team.)</li>
</ul>

#### Tutorials

<ul>
<li>A lot of tutorials will be made available for developers to use. Currently you can surf the Jepack Compose <a href="developer.android.com/courses/pathways/compose">Pathway</a> and also <a href="goo.gle/compose-samples">view several samples of Compose in action</a>.</li>
</ul>

#### MotionLayout and Animations

<ul>
<li>
Animations in Compose is completely reworked. I highly recommend you check out the samples.</li>
<li>Little progress has been made integrating MotionLayout, so for now I don’t think we can use it.</li>
</ul>

#### Production

<ul>
<li>Compose is just in Beta, so using it in production is entirely your decision to make but you should be aware of the Trade-offs before rolling out.</li>
</ul>

#### Activities & Fragments

<ul>
<li>They won’t be completely be replaced but we will have less interaction with them. This would be case for existing and new projects.</li>
</ul>

Lastly, Jetpack Compose is **FUN!**:smile:

Thank you all for reading. If this helpful to you, please share and show some love :heart:

As promised, the [link](goo.gle/TheAndroidShow) to the full resource and everything you need to know about #TheAndroidShow: JetpackCompose
Leverage Selective Ignorance to improve your software development skills
Tags: beginners, programming, productivity, career
Published: 2021-02-24 20:33:34

Since I've started applying mental models to my software development process, I have seen significant improvement in my productivity, code quality, and problem-solving. Because of this, I decided to write a series of newsletter posts to teach other developers to become a better version of themselves.
The first post is about leveraging Selective Ignorance. You can read it here: 

[Selective Ignorance](https://www.boringbackend.dev/selective-ignorance/?utm_source=devto)

And here is the full list that I will be writing in the near future:

[Mental Models for Developers](https://www.boringbackend.dev/mental-models-for-developers/?utm_source=devto)

You can subscribe to my newsletter or follow me on Twitter [@hossein761](https://twitter.com/hossein761). I'd love to hear your comments and feedback!
WPF A Refresher
Published: 2021-02-24 19:56:00

My current project may include some WPF work. I had to brush up on it a bit, but love the new hot reload feature.

I always preferred the Dark Theme but couldn't recall how to use it.

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

Oh yes, the Resource Directory thing. 

```xml
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Themes\ExpressionDark.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
```
This means the project has a themes folder with ExpressionDark.xaml.

  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iiumuyhs741l2y3a6lg.png)

But we had to use Nuget to get the theme. 

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

I remember this persons' name from 7 years ago.  Glad to see package is still there.  Wow! Thanks Stan...

Then I needed to recall the use of StackPanel, Grid, RowDefinition, Button, Label and TextBox.

```xml
<StackPanel  Background="#333">      
<Grid  Margin="50,20" >
    <Grid.RowDefinitions>
        <RowDefinition ></RowDefinition>
        <RowDefinition ></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Height="30" Orientation="Horizontal" HorizontalAlignment="Left">
        <Button Width="120">Best Article</Button>
        <Button Width="120">Best Project</Button>
        <Button Width="120">GitHub</Button>
        <Button Width="120">StackOverFlow</Button>
        <Button Width="120">MSDN</Button>
        <Button Width="120">Azure</Button>
    </StackPanel>
    <Grid Grid.Row="1" Height="30" Margin="0,10" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="40"></ColumnDefinition>
                <ColumnDefinition Width="400"></ColumnDefinition>
                <ColumnDefinition Width="150"></ColumnDefinition>
            </Grid.ColumnDefinitions>
        <Label Grid.Column="0" HorizontalContentAlignment="center" Margin="0,0,20,0">URL</Label>
        <TextBox Grid.Column="1">https://dev.to</TextBox>
        <Button Click="ButtonGo" Margin="15 0 0 0" Grid.Column="2">Go</Button>
    </Grid>
</Grid>
</StackPanel>
```
Button Click Handlers, Margins and Grid Column Placement
```xml
 <Button Click="ButtonGo" Margin="15 0 0 0" Grid.Column="2">
```
And off we go... 

JWP2021 WPF
My first website. Any suggestion?
Published: 2021-02-24 19:51:42

Hey Guys thanks for all the feedback a few days back. It was really useful! I tried to accommodate all the good advice what I have received here so thanks again.. Here is my new site

https://zsoltszakal.com/

https://zsoltszakal.herokuapp.com/

https://github.com/zsoltszakal/001-zsoltszakal.com

Any more suggestion please?
how can I deal with controlled and uncontrolled input in reactjs

Published: 2021-02-24 19:51:04

I have a form field shown in the picture below
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j72yf960sqfgcg3fnhn.png)
 The product field is a search field with suggestions when the user clicks the suggested option other form fields are filled automatically, the user can also override what has been filled automatically let's say price. On successful completion of the form, the details are added to a table. Now I'm facing a challenge when the user cancels the process after an autofill it doesn't override the previous values and this happens when I'm using the defaultValue attribute. So I have tried using a value attribute and an onChange handler I can only type in the fields before an autofill meaning the user can not change fields like price after an autofill so how best can I tackle my problem.