teleren/devto huggingface dataset:
HTML Image Map
Tags: html
Published: 2020-06-16 06:13:37

Today we are going to look at an almost rare `HTML` function called `<map>` we use it to make a mapping selection of links for one image.

The downside to this is that there is no real feedback for a specific hover.

## HTML Structure

```html
<img
  width="467px"
  src="https://images.unsplash.com/photo-1491378630646-3440efa57c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
  usemap="#image-map"
/>

<map name="image-map">
  <area
    target="_blank"
    alt="Ocean"
    title="Ocean"
    href="#ocean"
    coords="466,428,2,150,3,159,459,421,3,132,209,47,295,100,284,16,101,14"
    shape="rect"
  />
  <area
    target="_blank"
    alt="Sky"
    title="Sky"
    href="#sky"
    coords="467,152,1,-1"
    shape="rect"
  />
  <area
    target="_blank"
    alt="Sand"
    title="Sand"
    href="#sand"
    coords="1,699,465,700,467,446,165,440,139,416,109,413,64,440,2,450"
    shape="poly"
  />
</map>
```

As you can see we define an image as usual, but give it the attribute `usemap="#image-map"` this tells the image is needs to overlap with the map we are going to make below.

The map is called `image-map` and has three areas we defined two rectangles for the Sky and the Ocean and a Polygon for the sand because it was a triangle where it touches the water.

I've used the following website to generate this map: [image-map](https://www.image-map.net/).

So if you now hover/click, you will see there are three separate links for the one image.

Cool right?! But as mentioned, it doesn't give proper feedback that they're three separate links, so UX wise debatable if it's the best solution. There are some [`JavaScript` solutions](https://stackoverflow.com/questions/8343531/is-it-possible-to-style-a-mouseover-on-an-image-map-using-css/42110914) for styling.

Tomorrow we will look at an alternative way of doing this with absolute positioned elements so we can give them better hover effects.

Feel free to have a look at this Codepen.

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="rebelchris" data-slug-hash="OJMRJKO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="HTML Image Map">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/OJMRJKO">
  HTML Image Map</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## Browser Support

Supported by most modern browsers, and there are `JavaScript` solutions to make this work in more browsers.

[View on CanIUse](https://caniuse.com/#feat=mdn-api_htmlmapelement)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Interview with Vladimir Dementyev, author of `anycable` and `ruby-next`
Tags: video, ruby, betterprogrammer
Published: 2020-06-16 06:07:53

{% youtube IogvPeyLWxA %}

Interview with Vladimir Dementyev, author of many Ruby open-source projects, conference speaker, and member of Evil Martians.

{% user palkan_tula %}

---

This is the second video interview with exceptional developers where we speak about programming wisdom and how we can become better in our craftsmanship.

[Watch more videos](https://www.youtube.com/watch?v=IogvPeyLWxA&list=PLAqVLnEIlSbtkqdEcSc5YIIQoHJ36WiAe)
How to do not apply basic authentication to certain URLs in a Rails project with basic authentication method
Published: 2020-06-16 05:44:35

---
title: How to do not apply basic authentication to certain URLs in a Rails project with basic authentication method
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

If you can write basic authentication in a staging environment or other environment, you can use the configuration file
For example, the following in the config/environment/production.rb

```rb
if ENV["STAGING"] #set environmental variable
  config.middleware.use Rack::Auth::Basic do |username, password|
    username == "YOUR_NAME" && password == "PASSWORD"
  end
end
```

Now, if you want to access certain URLs without using basic authentication, you need to extend Rack::Basic Auth::Basic to access certain URLs without using basic authentication.

There are several ways to write it, but the following conditions should be met

* Only enable in the staging environment.
* Do not apply basic authentication to certain URLs that match a regular expression.
* Put the extended class files under the lib directory instead of config.ru. The file should be a separate file with the


## Automatic loading of lib directory

If you want to have the lib directory and below loaded automatically, configure as follows
This way, you don't have to read every single class under the lib directory.
(You don't have to have it loaded, depending on your method.)

config/application.rb

```ruby
module YourApp
  class Application < Rails::Application
    # Load the files under the lib directory
    # Rails4
    config.autoload_paths += Dir["#{config.root}/lib/**/"]
    # Rails5 or Rails6
    config.eager_load_paths << Rails.root.join("lib")
  end
end
```

## Creating the Rack::Auth::Basic extension class

Extend lib/my_basic_auth.rb with the following class for basic authentication Create a file with

```rb
class MyBasicAuth < Rack::Auth::Basic
  def call(env)
    request = Rack::Request.new(env)
    # Match regex hits are not basic authentication
    if request.path.match(/^\/.well-known/)
      # Pass basic authentication
      @app.call(env)
    else
      # Execute basic authentication
      super
    end
  end
end

```

## Loading Custom Basic Authentication into the Configuration File for the Staging Environment

config/environment/production.rb

```rb
Rails.application.configure do
  if ENV["STAGING"]  #set environmental variable
    # Load MyBasicAuth
    config.middleware.use MyBasicAuth do |username, password|
      username == "YOUR_NAME" && password == "PASSWORD"
    end
  end
  ..
  .
end
```

refs: 
http://stackoverflow.com/questions/6049414/selectively-allow-some-urls-through-rackauthbasic
http://stackoverflow.com/questions/22336048/staging-env-password-protect-everything-except-for-webhook
Keen to test a beta version of an AI? Try to beat the PC at a simple puzzle game
Published: 2020-06-16 05:44:08

Hi everyone, I have published  “jeu chimie” , a simple Android puzzle game where each player tries to capture the opponent's points by circling them. The game allows playing against the PC with 3 levels of difficulties, the AI code behind the ‘hard’ level is on beta; are you keen to give it a try by beating the AI with the highest possible score?

https://play.google.com/store/apps/details?id=cd.jeu_chimie.app

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/avklhx03oyjq1jz6cs0a.png)
First Android game published
Published: 2020-06-16 05:31:57

I’m super excited to announce the publication of a puzzle game “jeu chimie” I have been working on lately. It’s a simple strategy game where each player tries to capture the opponent's points by circling them. Here is the link, keen to give it a try, rate and share?

https://play.google.com/store/apps/details?id=cd.jeu_chimie.app

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

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5o951der0p68hu3vq70z.png)
Using Emotion for CSS-in-JavaScript
Published: 2020-06-14 17:15:31

# Introduction

You're already familiar with CSS, and likely with CSS-supersets like `sass` and `less`, which add much-needed utility and convenience to CSS. But some frontend developers are turning to CSS-in-JS, an increasingly common pattern for styling web applications. 

It's easy to understand why this approach is gaining traction. Imagine you've been tasked to make a button component with React, and you've been given some specs for its styling. You have two options:

## 1) Separate JS and CSS 
Write the Button.js React component and give it a class name like `<Button className="styled">`, then write the component-specific css in a separate file. 

```js
// Button.js
import React from 'react'
const Button = () => (
  return <button className="styled">Click Me</button>
)
```

```css
/* sass or less which allows for logic statements */
button.styled {
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  &:hover {
    color: white;
  }
}
```

But, if another engineer needs to debug the component or change styling in the future, they need to work in both the JS and CSS files. This is a negligible issue for a simple component, but a more onerous task for a brand re-work. 


## 2) CSS-in-JS
Write the component _and_ styling logic in one file. 

```js
// Button.js
import React from 'react'
import { css } from 'emotion'

const Button = () => (
  return <button css={css`
    padding: 32px;
    background-color: hotpink;
    font-size: 24px;
    border-radius: 4px;
    &:hover {
      color: white;
    }`}
  >Click Me</button>
)
```

I haven't touched on other major benefits of CSS-in-JS, such as the ease with which you can pass styling arguments as props to your components, e.g. `<Button big pink>`, or making styled components e.g. `StyledButton = button.styled{...}`. 

As an aside, Emotion is a popular library (see also: styled-components) for CSS-in-JS, and well worth a look. (I borrowed their styling for this blog post!)


# Conclusion

These two schools exhibit a philosophical question: is styling something "other" than the object that is styled, or is styling an inextricable property of the thing that is styled? In my opinion, it's the latter. So, to my taste, CSS-in-JS makes more organizational sense to me. (A poor analogy: imagine having to look away from a house to figure out what color it is.)

Beyond that, choosing between separating JS and CSS and using CSS-in-JS is a tradeoff between strict adherence to separation of concerns, and developer convenience/experience. 

This to me seems like a broader trend of _everything_-in-JS. JS seems to continue to evolve into do-anything language. Consider the popularity of Node.js, and the recent announcement of TensorFlow.js.
Adorn:A one click support of black code formatter for IDEs and text editors.
Tags: codequality, editors, python
Published: 2020-06-16 05:01:23

Hi everyone,

I have made a repo that formates the code using black code formatter with a single click. Currently implemented this for gedit and sublime text but plans to add more text editors and IDEs in the future.

It needs some enhancement like currently, it works only for the root user and the windows installation for the sublime plugin is not yet supported.

If you all review this project then it will motivate me to work on more open source projects in the future. I am open to any kind of contribution.

please do contribute if you get any idea.

[Repo link ](https://github.com/princekrroshan01/Adorn/)
Using Splat (*) operator in Active record Query
Tags: rails
Published: 2020-06-16 04:59:11

##Introduction
In Rails often we use active record to build custom search queries.

This post is about how to use splat(*) operator with active record 

Assume we have a table `employees` with following fields
1. first_name
2. middle_name
3. last_name
4. email

and we have a class method `list` to filter the employees

```ruby
class Employee < ApplicationRecord
  def self.list(search_key='')
    arel = order("first_name")

    if search_key.present?
      search_term = "%" + search_key + "%"
      arel = arel.where("first_name LIKE ? OR middle_name LIKE ? OR last_name LIKE ? OR email LIKE ?", 
                         search_term, search_term, search_term, search_term)
    end
   arel 
  end 
end
```
 
The code can be bit optimised using Splat operator as follows
```ruby
class Employee < ApplicationRecord
  def self.list(search_key='')
    arel = order("first_name")

    if search_key.present?
      search_term = Array.new(4){ "%" + search_key + "%" }
      arel = arel.where("first_name LIKE ? OR middle_name LIKE ? OR last_name LIKE ? OR email LIKE ?", *search_term)
    end
   arel 
  end 
end
```
> In above case all fields are strings 

##### Case 2 : How about searching fields with different data types 

Assume we now have a table `employees` with following fields
1. first_name
2. middle_name
3. last_name
4. email
5. age (integer)
6. mobile: integer ( for example case)

In this case the query will be
```ruby
class Employee < ApplicationRecord
  def self.list(search_key='')
    arel = order("first_name")

    if search_key.present?
      search_term_str = Array.new(4){ "%" + search_key + "%" }
      search_term_int = Array.new(2){ search_key }

      arel = arel.where("first_name LIKE ? OR middle_name LIKE ? OR last_name LIKE ? OR email LIKE ? OR age = ? OR mobile = ?", 
                        *search_term_str, *search_term_int)
    end
   arel 
  end 
end
``` 
> We shall create multiple splat groups based on the data type as above to optimize the code
Rake to flush out and delete unused image files in Rails
Tags: rails
Published: 2020-06-16 04:50:14

---
title: Rake to flush out and delete unused image files in Rails
published: true
description: 
tags: rails
//cover_image: https://direct_url_to_image.jpg
---

## Introduction.
If you run a web service for a few years, before you know it, you'll have an image file that you don't use at all.
It's hard to check if you're not using each one of them, so I'll use the Rake task to flush out all the unused image files and delete them.

Rake tasks are performed and committed in a local environment.

In this case, I use the silver searcher as a file search command.
The silver searcher checks the .gitignore file, for We don't want the files to be searched for.
You can exclude the gem from the search, which makes the process faster, for example, if you install the gem under /vendor/bundler.


## Prerequisites.
For Git-managed Rails projects
You must have the silver searcher installed on your computer.

### Install the silver searcher on homebrew

If you don't have the silver searcher installed, you can easily install it with homebrew.

```
brew install ag
```

## Rake files to flush out and delete unused image files in Rails

## Rake file body

```ruby
# It requires AG - https://github.com/ggreer/the_silver_searcher
task :find_unused_images do
  images = Dir.glob("app/assets/images/**/*")

  images_to_delete = []
  images.each do |image|
    unless File.directory?(image)
      puts "Checking #{image}"
      # Use -G to specify the extension to check.　You can use --ruby, --sass options.
      result = `ag -G "slim|erb|js|css|sass|scss|rb" #{File.basename(image)} .`

      if result.empty?
        images_to_delete << image
      end
    end
  end
  puts "Delete unused files running the command below:"

  puts images_to_delete.join(" \n").to_s

  puts "-----------------------------------"
  puts "rm #{images_to_delete.join(" ")}"
end

```

### Usage

```
> bin/rake find_unused_images
```

### Execution result

```
# Searching for a file
Checking app/assets/images/xxx1.png
Checking app/assets/images/xxx/xxx2.png
..
.
# List of unused files
Delete unused files running the command below:
app/assets/images/xxx1.png
app/assets/images/xxx/xxx2.png
..
.
# The rm command to delete unused files in one shot
rm app/assets/images/xxx1.png　app/assets/images/xxx/xxx2.png
```
[好書分享] Deep Work 深度工作力
Published: 2020-06-16 04:04:16


TDeep Work 深度工作力
淺薄時代，個人成功的關鍵能力
作者： 卡爾．紐波特  
原文作者： Cal Newport  
譯者： 吳國卿  
出版社：時報出版 
出版日期：2017/07/21 
買書推薦網址：http://moo.im/a/389tDJ
前言:
對於工程師與許多需要深度工作的人而言，深度工作的時間是非常珍貴的。許多工作切換的途中帶來太多無謂的移轉性工作的準備時間。嚴重影響工作上的產出，這個叫做「 context switch 」。 那麼如何有效地達到深度工作就是相當重要的課題。之前看到了這本書，決定要好好的學習保留深度工作時間的方法，也推薦給每一位想要讓自己能夠創造更高價值得你，絕對要能夠保有，訓練自己的「深度工作力」。

內容簡介:
當我們抱怨臉書占去太多時間，還在思索要與社群網站保持什麼樣的關係，
MIT電腦科學博士．談論未來職場最具啟發性的思想家
卡爾．紐波特Cal Newport告訴你————
真正的獎賞不會留給那些閒適的使用臉書的人！

在這個淺薄時代，人們紛紛擁抱分心，每天將大把時間浪擲於紛亂的電子郵件和社群媒體上，失去了深度思考、深度工作的能力，不知道自己其實能以更好的方式生活。
也因此，一種極有價值的技術變得越來越稀有、甚至成為當今最具價值的能力之一，正是——
DEEP WORK深度工作力！

卡爾．紐波特教授在本書中暢談連線時代的種種影響，從自身經驗告訴所有人：
專注力和生產力，是可以有系統地解決的科學問題！
擁有深度工作力，是擁有美好深度生活的必要條件！

「深度工作力」是專注於高認知需求任務而不分心的能力，它能讓你快速學習，以更少的時間創造更好的成果。本書融合理論根據與實踐技巧，協助所有想在專業領域中成功的人，學會高效工作，成為新經濟中的贏家。

別再以為忙碌代表生產力，區別深度工作與淺薄工作，聰明的規畫深度工作的時間，培養專注的習慣與能力，你將能改變習於淺薄、容易分心、無法忍受無聊的心智。培養深度工作力，才是達成生活與工作平衡，並維持高品質的最好方法。
本書分為兩大部分，分別是「概念」與「原則」兩大部分：

Part 1　概念
一開始主要是確定究竟什麼是「深度工作」，那麼它與「淺薄工作」的差異。並且分享給讀者了解，許多偉大的學術家，企業家都是深度工作的遵從者，不論自己有多忙碌都要保有深度工作的時間。

接下來開始定義「深度工作」為何稀有，現在人為何很難得達成深度工作。也提到了許多的工作現況往往都是充滿了許多打擾與中斷，會讓工作者容易在深度狀況的情況下被打斷。

那麼從神經學，心理學與哲學的角度究竟該如何把握深度工作的呢？ 這一個部分的最後幾個章節會討論到。

Part 2　原則
在原則的部分，則分享許多知名作家或是學術界人士該如何保有自己深度工作的時間。「深度工作」也必須像是運動或是重量訓練一樣需要有儀式。所以書上也建議要讓每個深度工作者都需要一個進入深度工作的儀式，或許在筆者就是準備好一杯咖啡，戴上降噪耳機一樣。一個可以讓你專心進入工作的方式。

建立好自己的「深度工作」習慣之後，就要開始避免「中斷」。許多知名的學者與作家都透過讓自己有效的「斷線」，也就是讓跟自己聯絡的人知道，自己只會在某些時間去檢查與回覆信件。並且也相當程度的限制自己在社群媒體上面的時間。

社群媒體對於許多深度工作人員就是最大分心的來源，必須要有效的限制自己的時間。 書上更是建議說許多知名的作家本身並不操作任何的社群媒體，不與任何的讀者交流，反而可以獲得更多的深度工作的時間。

最後，書上也告訴你如何選擇最重要的事情來優先從事。要根據每一件事情如果交給經過良好訓練的大學畢業生，大概要經過多少訓練。這裡快速整理一下：

做精美的部門報告：一個大學畢業生訓練三個月就可以上手。
去進行一些會議：可能進行兩三年就可以上手。
寫出一篇原創性質文章：則是需要 50 ~ 80 個月的專業訓練才可能上手。 (如果要寫的程度更高，則需要更久遠的訓練與能力的培養)
那麼你就應該要先做「最具競爭力的工作」，這就是這整本的整個概要說明。 就是要提升作為「深度工作者」的你的能力與價值。

心得:
記得曾經看過一篇推特說，身為「Developer Relations 」的工作者都是有“過動症”與“注意力不集中症候群”的人。 並且自己也因為之前經做專案管理的相關訓練，練就了自己「習慣於」被打擾與經常性地切換於許多不同種類的工作之中。 其實靜下心地反省自己，會發現自己能更夠從事深度工作的時間也就變少了。 看了這本書之後，就知道了深度工作的珍貴性。並且要透過有意識的，並且有效的訓練自己。讓自己的注意力就像是肌肉一樣，經過訓練之後可以高度並且有效的深度工作。

最後的章節也像是敲醒我一樣，重新地審視了工作項目中的「不可取代性」的項目。讓自己更了解應該如何有效地增進自己的能力，讓自己更有價值才是。

相當建議需要深度工作的你，不論是軟體工程師，作家，老師，甚至是許多進行開發的人員。要好好的閱讀這本書，並且尋找到適合自己的方式來訓練你的注意力，一起成為更好的深度工作者。
How to use custom JSX in Deno?
Tags: jsx, deno, typescript
Published: 2020-06-16 03:07:09

---
title: How to use custom JSX in Deno?
published: true
description: How to setup your own JSX types with Deno
tags: JSX, Deno, Typescript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9tzvuoyi4q1xo7jo6bil.png
---

This article is meant for Deno authors who wanted to create a frontend library in Deno that utilises JSX without using React.

Before you start, please make sure you're using Deno v1.1.0.
```
deno upgrade --version=1.1.0
```

Basically, to create your own JSX types in Deno, you just need to complete the following steps:

1) Think of a name for your framework. For demonstration, I'll use the name `Spongebob`.

2) Create a `tsconfig.json` file with the [default Deno tsconfig](https://deno.land/manual/getting_started/typescript#custom-typescript-compiler-options).

3) Update the value of `"jsxFactory"` in the `tsconfig.json` to `"Spongebob.createElement"`.

4) Create a file named `jsx.ts` with the following content:
```ts
export namespace Spongebob {
  export const createElement = (tag: string | Function, props: object, ...children: any[]) => {
    if(typeof tag === 'function') {
      return tag({...props, children})
    }
    else {
      return [tag, props, children]
    }
  }
}
declare global {
  namespace JSX {
    interface IntrinsicElements {
      div: {
        id?: string
        style?: { }
      }
    }
  }
}
```
5) To try out the JSX types, create a file named `client.tsx`.
```tsx
import { Spongebob } from "./jsx.ts";

const EntryComponent = () => {
  return (
    <div id="patrick">
      <MySubComponent drugs={["rick", "morty"]} />
    </div>
  );
};

const MySubComponent = (props: { drugs: string[] }) => {
  return (
    <div>
      {props.drugs.map((drug) => <div>{drug}</div>)}
    </div>
  );
};

console.log(JSON.stringify(<EntryComponent />, null, 2));
```

6) Run this command to test out.
```
deno run --config tsconfig.json client.tsx
```

By the way, if you are lazy but you want to try out, you can refer to [this repository](https://github.com/wongjiahau/custom-jsx-deno-example).
Thank you for reading!
My Misconception when Learning Web Dev
Tags: webdev, javascript, html, css
Published: 2020-06-16 03:02:01

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

#Misconception
I got ready for starting my summer project which was a boilerplate for NodeJS apps. I had only finished a few courses and online tutorials on node with express routing and login features using PassportJS. It took me a while to navigate through all the docs and stackoverflow to finally finish the app and I thought gained a lot of knowledge on making and deploying a proper app, I was already celebrating that I was now intermediate level profecient in JS.
![Alt Text] (https://media.tenor.com/images/91c86a60a034fc8a5fa3879a0540acbd/tenor.gif) 

#Realization
I was interviewing for a web dev internship. I was really excited since I was confident in what I knew. He started of basic with some troubleshooting questions, asking about myself and my projects etc. now he asked me another pretty basic question: I enter a email into a textfeild and submit it, how do check if its valid on the backend? pretty general but looking back to my project I just used a dependency and called a function to check its validity in a controller .js file I had no idea how the check actually works. I assumed its a simple loop to check for the @ and get info after that and told my interviewer the same. Well turns out that answer was not even close to being right.
![Alt Text](https://lh3.googleusercontent.com/proxy/uD3UHaU7SpBX6LR_kllzKssE6o6xP1I0EuqNqC2jBgxhl7ucelJ22PtKVMikRzzAjyiQpONM25aTFa8BtqbGSgIcGo8X9D3KbP-myvFn5Eq9DVuEV_G0Uc3qYXFvL97esU4HK663vNyOzUSh2x725tiySF7_iNPiMQ8)
The answer the interviewer was expecting was using regex to check the pattern which will give us a result faster and told me that looping is actually not efficient nor usable at all.

Then it hit me hard, the misconception that I knew making a nodejs app which in reality I had no idea HOW my code does what its doing. I knew I could just import a dependency for validation, sanitization and other features but did I know HOW they work? the simple answer was nope.
![Alt Text] (https://media1.tenor.com/images/9edb3d1be26f97abdbff5110b8695aba/tenor.gif?itemid=5191901)

#Conclusion
Always learn HOW the language/framework/dependency works and not just calling it. Even a college freshman can search up code copy paste it and learn it a bit to make it work but I want everyone to realize from my experience that you might be missing the most important and fun part of learning!
#Day 15: #100DaysofCode - View my Sinatra Project
Tags: ruby, sinatra, crud, mvc
Published: 2020-06-16 02:53:13

Today I edited my Youtube video on how to use my CRUD, MVC, Sinatra app.

{% youtube lTFuoIIYX5E %}

In the future, I plan to create a youtube series on how to build an entire application using Sinatra so look out. Although it is basic, I am happy to finally have a web-based application available that I created on my own. Feel free to view the <a href="https://github.com/SincerelyBrittany/stockTracker">source code on my Github account</a>.  

{% github SincerelyBrittany/stockTracker %}


<h4> Song of the day: </h4>
{% soundcloud https://soundcloud.com/hellohonne/treat-you-right-sivey-remix %}

Also, I learned how to add the embedded youtube videos, the link to my song of the day, and github account on dev.to by using the <a href="https://dev.to/p/editor_guide"> editors guide </a> today :)