teleren/devto huggingface dataset:
Sinatra - hold the Frank
Published: 2021-05-03 00:56:18

Let me start by saying I'm not sure which might have been more challenging, Frank Sinatra producing timeless music or building a Sinatra web application. However, I'd like to say the latter was definitely challenging enough. 

Sinatra is a Domain Specific Language used to write web applications. Although it was fairly difficult to build, the architecture was actually fairly simple to follow and that's what I'd like to expand on in this article. Let's jump right in.

#**MVC**

I utilized the MVC design pattern to build this web app; MVC - model, controller, view. 

###1. Model
Models directly interact with the database. In my app, where a `user` can track a `run`, I created models for each. As I said earlier, the models responsibility is to interact with the database. Well to do that, each model must know how it's associated to the other. For example a user has many runs and runs belong to a user. Additionally, each model is responsible for its own validations. For my app, a run must have a date, distance, and duration in order to be tracked. 

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


###2. Controller (I know it's MVC, but the controller is the middle man)
Controllers are used to connect the models and the views; the middle man. Here, I used approached each controller on the basis of separation of concerns. For example, the sessions_controller.rb was responsible for the routes related to logging in and logging out. Additionally, you'll see I used `.authenticate` which is provided by the macro `has_secure_password`. I also utilized a flash error to assist in guiding a user should he/she make a mistake.

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


###3. View
The views display pages based on the user's input. Essentially, as the user is interacting with the web app, different routes are being accessed and directing the user to different pages. 

In the example below, based on the user clicking on the Sign Up button, the /users/signup route is triggered and the signup.html.erb file is accessed to display this page. 

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


The MVC architecture is a great way to stay organized in both planning and building a web app. Feel free to check out my [Github Repo] (https://github.com/GiaGenae/my_miles) to help guide you on your web developing journey as well!
Learn Svelte by building a habit tracker app 🏎
Tags: beginners, svelte, codenewbie, tutorial
Published: 2021-05-10 13:47:04

---
title: Learn Svelte by building a habit tracker app 🏎
description: In this video tutorial, work with me to build a habit tracker app in Svelte, a new front-end framework that's fast and lean for users and easy on developers!
published: true
date: 2021-05-03 00:49:55 UTC
tags: beginners,svelte,codenewbie,tutorial
canonical_url: https://raddevon.com/articles/learn-svelte-by-building-a-habit-tracker-app/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9mk4k85rb036yocw17h.jpg
---
In this video, you’ll work along with me to build a habit tracker app in Svelte. In under an hour, you’ll learn:

*   🔸 Components
*   🔸 State
*   🔸 Rendering arrays
*   🔸 How reactivity works
*   🔸 Props
*   🔸 Stores (with auto-subscription)

{% youtube ecGJ496lUFg %}

Go to this post's page on my site to get my free Javascript cheatsheet. It gives you practical examples of basic Javascript concepts in action. Having this handy will make learning Svelte faster and easier! 👇

The post [Learn Svelte by building a habit tracker app 🏎](https://raddevon.com/articles/learn-svelte-by-building-a-habit-tracker-app/) first appeared on my site [Rad Devon](https://raddevon.com/). Head over there for more help transitioning into your career as a web developer!
Only 1 way to organize your messy articles
Tags: webdev, programming, productivity, beginners
Published: 2021-05-03 00:33:45

# You suffer from your messy articles in Dev Community and messy google search results.

I know you have wrote many articles in Dev Community. I know you feel your articles are messy to find out. 

Or, I'm sure you are in this situation many times. During coding, you often search a lot of things such as algorithms, syntax, trouble shooting, and so on. Finally, you accomplish your work through trial and error. 

Congratulations! 

However, you notice that you forget all and search the same things again in next project (or next day). At that time, you might be irritated because you could not find the same page you found before or face to 404. If you memorized them in your cookbook, you could have found it out soon.

# Only 1 way to organize your messy articles

[ownCookbook](https://owncookbook.tech) is the platform that you make your own cookbooks and share the recipes easily. The uniquest point of ownCookbook is that you can arrange your articles in each book. It means you can make your own cookbooks, like '[Modern C++ Programming Cookbook](https://amzn.to/3dCyMwp)', '[Python Cookbook](https://amzn.to/2QrIFUR)', '[Go Programming Cookbook](https://amzn.to/3sPFTGp)', and so on.

# You can organize your articles in each book

You can arrange your messy articles in each book. It is very useful to arrange your knowledge and skills, and it is easy to find out your article later. 

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

# User friendly markdown editor

Markdown editor of [ownCookbook](https://owncookbook.tech) is very user friendly.

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

You can write down your article and check its preview at the same time. 

Don't worry if you don't remember the markdown syntax. Convenient icons help you to write markdown like WYSIWYG editor.

# It's perfectly free.

It's perfectly free and you can stop using any time. Let's try it.

# ownCookbook

Access: [https://owncookbook.tech](https://owncookbook.tech)
OpenFOAM GUI and CFD Solver Integration with FEATool Multiphysics
Tags: openfoam, gui, cfd, simulation
Published: 2021-05-05 10:49:20

---
title: OpenFOAM GUI and CFD Solver Integration with FEATool Multiphysics
published: true
date: 2021-05-03 00:00:00 UTC
tags: openfoam, gui, cfd, simulation
canonical_url: https://www.featool.com/tutorial/2021/05/03/Easy-OpenFOAM-GUI.html
---
![OpenFOAM GUI with FEATool Multiphysics](https://www.featool.com/images/featool-openfoam-interface-edit-dictionaries.jpg)

The [FEATool Multiphysics](https://www.featool.com)™ and [CFDTool](https://www.cfdtool.com)™ toolboxes, featuring a fully integrated Graphical User Interface (GUI), now makes setting up and running Computational Fluid Dynamics (CFD) simulations with OpenFOAM both quicker and easier than ever before. GUI for OpenFOAM FEATool Multiphysics with its fully integrated GUI allows for setting up, defining, and running OpenFOAM case files without ever having to leave the GUI, featuring 

- Built-in CAD and 3D geometry modeling tools
- Define your model with the easy-to-use CAD GUI, or import STEP, IGES, and STL CAD geometries

- Automatic unstructured mesh generation
- Generate a mesh with “one-click”, including automatic 2D->3D mesh conversion for two-dimensional, axisymmetric, and swirl flow models

- Dedicated OpenFOAM solver and control panel
- GUI Support for incompressible, compressible, laminar and turbulent flow
- OpenFOAM CFD solvers Custom editing and export of OpenFOAM case files
- Automatic decomposition and handling of parallel domains and computations
- Solver control, solution, and residual monitoring directly in the GUI

- Integrated visualization, postprocessing, and analysis of results for CFD simulations
- Share results with colleagues with direct export to ParaView, VTK, and Plotly online web formats

Please visit [https://www.featool.com/tutorial/2021/05/03/easy-openfoam-gui](https://www.featool.com/tutorial/2021/05/03/easy-openfoam-gui) for more information and toolbox download.
You'll never be ready for some things
Tags: fear, team, preparation, practices
Published: 2021-05-08 16:20:09

---
title: You'll never be ready for some things
published: true
date: 2021-05-03 00:00:00 UTC
tags: fear,team,preparation,practices
canonical_url: https://jhall.io/archive/2021/05/03/youll-never-be-ready-for-some-things/
---

Engineering-minded people love to prepare. We have special tools practices designed specifically to ensure that we have all eventualities covered—test coverage reports, monitoring systems, etc.

But sometimes we must make changes we’re simply “not ready” for—and perhaps never _can_ be ready for.

A team re-organization. Hiring (or firing) a colleague. Switching from manual testing to automated testing. Turning on continuous deployment for the first time.

I’ve seen every one of these be delayed beyond any reasonable timeframe for fear of being “not ready.”

Of course this phenomenon is not limited to the work place. Marriage. Parenthood. A career change. Moving to a new city or country. Choosing a university.

Almost by definition, we cannot be fully “ready” for any of these events, but the wise amoung us rarely let this stop us from making these decisions. We can only become ready after committing.

Next time you’re facing the fear that you’re not ready for something, do some self-reflection, and remember that you’ll simply _never_ be “ready” for some things. Are you ready _enough_ to get started?

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Phase 1 Completion.. barely
Tags: womenintech, javascript, codenewbie, codereview
Published: 2021-05-02 23:57:51

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

<h1>Slowly starting to get the feels...</h1>
<h3>A question I wondered was.. when do I start to feel like a developer? When will I start actually <em>comprehending</em> and <em>retaining</em> the information like a pro? </h3>
<h6>This project was definitely a start. We basically had to take an API from github and fetch information from that api. <em>SAY WHAT?!</em> It was interesting putting together what I have learned thus far into a project and racking my brain to get the coding correct. Fetch isn't something I am all too comfortable with. I had to watch hours of youtube videos and readings on m3 school website to get better understanding of it. As well, something that helped me was this app, a coding app/informational game, called M!mo.</h6>

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

<h3>Process? Tell me how you did it?</h3>
<h6>I actually originally started out with a random food generator but switched to a cat and dog API. I knew for my project I wanted to have a button that once clicked, would generate another photo. I love food so I started there! The process was quite simple. I started with my html and my styling first! Once I had that structured, I went in to tackle my javascript. I struggled 2 days to get my button to actually work, and later realized we couldn't use an API that had a key, so I made the switch. Once I switched API's, it was quite simple. With the help of an awesome classmate who looked over my coding... she realized I did not have the event listener tag correct and WALLA, once fixed.. my website was in tip top shape!</h6>

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

<h6>As well, another challenged I faced was the if/else clause! The API had mp4 videos that were broken, so I had to filter out those to generate another photo in the case of the api giving me mp4 data file. It was tricky but I managed to put it together correctly using my handy dandy notes from class, <em>Thanks Alvee.</em></h6>

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

<h3>Lets Wrap It Up</h3>
<h4><em>What my app does, conclusions, future improvements...</em></h4>
<h6>Basically when you go to my website, there are 2 boxes that generate random images of dogs and cats. Pretty simple, but to the point of the project. The only thing I would have done different is to work ahead, so I can get a jump start if anything were to pop up! I caught COVID mid process of the project, and I could not get my brain to work in the midst of trying to fight and push through covid... but I survived! That really put a dent in my plans, because it put me behind with being in class to know the expectations and as far as getting help! Other than that it was a not too bad project.</h6>
Convert A Pandas Dataframe With String of Dict To Columns
Tags: python, datascience, data, pandas
Published: 2021-05-02 23:48:37

## Let's take a look at how we can convert a string column where the data is in a dictionary format to pandas dataframe columns.

## Read In Data
We're going to read in a csv and display our column with data. Pandas will display this column as an object, and we can't access the values in the dictionary as the row element is actually a string.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/huzs1b6rqvx710te249q.PNG)

## Using AST To Evaluate Strings
Let's use the AST library to transform our string into a python literal, defined [here](https://docs.python.org/3/library/ast.html#ast.literal_eval). This allows us to transform our values into dictionaries. We'll use the pandas .apply() function to apply this function to each element in the column.

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

## Normalize Into New Columns
Using the pandas function json_normalize, we can convert our dictionary values into columns in a new dataframe, which we will merge into the orginal later. You don't have to set the json_normalize output to a new dataframe, I just like how it comes out.

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

We now have a new dataframe with the columns being the key and value pairs from our dictionary.

## Combining Data
Once you have your new columns, you can either set them back to columns in the original dataframe or merge them into a larger dataframe using [pd.merge()](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.merge.html).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2scjigq2trj5xoboe6i9.PNG)

# Love Pandas & Data Structures? 
### Read some more of our pandas guides to be a better data scientist.
 [**Normalize Columns In A Pandas Dataframe**](https://www.scalr.ai/pandas/normalize-column-pandas-dataframe)

[**Filter A Pandas Dataframe On Multiple Conditions**](https://www.scalr.ai/pandas/pandas-dataframe-filter-multiple-conditions)
Showing intent in modern UIs
Tags: ux, design
Published: 2021-05-02 23:37:04

As developers, it's easy to assume that our users will intuitively understand the applications we are building. When we spend the majority of our time buried in an editor writing away, it's easy to focus on the end result of an action. Take a button that adds an item to a user's cart. Maybe it fires off a request to some API that adds the item to the user's cart in some database. It might also need to do a lot of business logic in the **cloud**, resulting in some amount of delay depending on network speed, device hardware, etc.

# The Issue
 
Delays can make an application feel clunky, and leave users guessing at what's going on, or worse, wondering if the action they had attempted has failed. The experience sucks. As developers, we have the power to provide insight into our apps visually. We can expose intent throughout the UI by presenting meaningful feedback to the user. Exposing intent can be as simple as a progress spinner on a button, a loading bar, or even showing skeleton placeholders until sufficient data is available to render the component or screen properly.

# The Goal: Reduce a user's perception of time spent waiting

Presenting the user a brief animation allows developers to deflect attention away and make the waiting process less frustrating and more engaging. If a user has to wait ~5 seconds for a file to upload and they have no indication of current progress, they may click away or go to a competitor. 

# A Few Tools We Can Leverage

## Skeleton Loading

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

Skeleton screens are essentially blank pages that are progressively populated with content as it becomes available. The "bones" of these skeleton screens appear where the currently loading content would and provide instant feedback to the user. These placeholders are often grey or neutral-toned shapes and are usually paired with some type of animation.

When content is finally available, the skeletons disappear and the real content is presented to the user. Skeleton screens are there to fill the gap and create an illusion of an instant transition.


## Progress Spinner

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

A progress spinner is a great choice to instantly provide feedback to the user while an action is taking place. In the earlier example with an "Add To Cart" button, a progress spinner can be a great tool to show that the action is in progress and, more often than not, the subsequent user action is blocked until the action has completed.

# Conclusion

Humans are impatient. We need instant feedback because it feels good. This information helps the user determine if something has gone wrong, but it also just feels right. Your app appears more responsive when it can return instant feedback from a user's actions.
What I've learned today - 1 - SSL
Published: 2021-05-02 23:09:40

## What is SSL?

![https://images.unsplash.com/photo-1605351792643-fe0c43d18762?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb](https://images.unsplash.com/photo-1605351792643-fe0c43d18762?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb)

SSL stands for Secure Sockets Layer, a type of digital security that allows encrypted communication between a website and a browser. They are digital passports that provide authentication to protect the confidentiality and integrity of website communication with browsers.

## How SSL Certificates Work

When accessing a web page, it is safe to perform certification of the page for data transmission in a secure manner.

Especially for sites where we need to send personal data, such as e-commerce, it is essential that you have an active SSL certificate.

### SSL handshake

The handshake is done at the beginning of the communication between the browser and the web server, they use asymmetric encryption for certification on both sides.

Steps:

→ Browser tries to connect to the web server.

→ Web server sends back a copy of the SSL certificate.

→ The browser checks whether the certificate is valid.

→ If valid, the browser sends the response to the web server.

→ Web server sends the acknowledgement to start an encrypted session with the browser.

### SSL data transfer

Data transfer is done using symmetric encryption, where the browser and web server have the same session key that will be used to encrypt and decrypt the data.

→ At this moment there is the exchange of data using the session key

## How to know if a website has SSL

Simple, we just need to verify if that site has HTTPS at the start of the address (instead of “HTTP”).

## Benefits of using SSL

- Safety.
- Your user can trust that their data is being cryptography.
- HTTPS instead of HTTP, which ranks better on google.

I appreciate everyone who has read through here, if you guys have anything to add, please leave a comment.
Solve OpenCV: Cannot use FaceTime HD Camera (Built-in) OpenCV: camera failed to properly initialize!
Tags: mac, opencv
Published: 2021-05-02 23:05:43



```zsh
$ poetry run python HandTrackingMin.py
OpenCV: error in [AVCaptureDeviceInput initWithDevice:error:]
2021-05-02 18:59:21.855 python[6761:45627] OpenCV: Cannot use FaceTime HD Camera (Built-in)
OpenCV: camera failed to properly initialize!
None
Traceback (most recent call last):
  File "HandTrackingMin.py", line 11, in <module>
    cv2.imshow("image", img)
cv2.error: OpenCV(4.5.1) /private/var/folders/nz/vv4_9tw56nv9k3tkvyszvwg80000gn/T/pip-req-build-oe0iat4a/opencv/modules/highgui/src/window.cpp:376: error: (-215:Assertion failed) size.width>0 && size.height>0 in function 'imshow'
```

The issue is that `iTerm2` doesn't have a permission to access to the FaceTime HD Camera (Built-in).


`System Preferences` --> `Security & Privacy` --> Camera
`System Preferences` will show something like this.

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

What we need to do is to check `iTerm2` then we can use FaceTime HD Camera (Built-in) with `OpenCV`.

`Sample Code`
```python
import numpy as np
import cv2

# built-in camera
cap = cv2.VideoCapture(0)

while(True):
    ret, frame = cap.read()

    if frame is not None:
        cv2.imshow("image", frame)

    rval, frame = cap.read()

    # gray image
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

    cv2.imshow('frame', gray)
    # when hit 'q', terminate the program
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()
```
Interviews are a two-way street (100 Bytes Of Wisdom: Day 50)
Tags: career, journey, advice
Published: 2021-05-02 23:04:57


---
title: Interviews are a two-way street (100 Bytes Of Wisdom: Day 50)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

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


When interviewing at a company, remember that you're also interviewing them. And remember this as the interviewer, too. You're allowed to ask whatever you like to make sure you'd feel happy working there 40 hours a week for the foreseeable future. It's a tough process. You'll doubt what you want, what you need and what you want to do, all through all job hunts. It's fine. And it's fine to walk away if you're not just feeling it. Find the place that is right for you, not what you think might look good to others, might seem more fun than it is or just has something that when it comes down to it, doesn't matter to you. 

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
Vue.js 3 By Example is Now Published
Tags: vue, javascript, programming, webdev
Published: 2021-05-02 22:19:42

![Vue.js 3 By Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ol178rkk7gr6rs217d9d.png)

Want to learn Vue 3 fast. Vue.js 3 By Example is now available.

Read it now at [https://www.packtpub.com/product/vue-js-3-by-example/9781838826345](https://www.packtpub.com/product/vue-js-3-by-example/9781838826345)