teleren/devto huggingface dataset:
Starting My Sinatra Project
Published: 2020-04-29 19:37:16

I still have a few more weeks before my Sinatra project so I have been thinking about a few ideas. I want to keep the theme I had with my CLI project that involves around food and restaurants. My CLI Data Gem project was about displaying restaurants and their attributes based on Yelp's API data. For my Sinatra project, I want to create a web application that allows users to make online orders for a local coffee shop make/bakery. 

The idea is that in order to be able to order from this cafe, one would need to sign up for an account. Once an account is created, it should take the user to a menu page that displays different drinks and bakery items. I want to these pages look nice as well so I plan on doing a good deal of CSS. It has to be functional and practical. I might include images as well, but I'm not sure yet. This is why I wanted to go ahead and get a headstart on it so I have time to tweak the CSS after I get the Ruby/html part working. 

The reason why I wanted to do my project on something like online ordering is because I've worked at Starbucks for the last seven years and I'm familar with their mobile ordering system on the employee side and customer side. There are many things that I like about their system but there are also things that could be better. I am also an avid user of mobile ordering systems in general. I am an introvert and I have a toddler so a lot of times I just need to grab stuff really quickly and don't have the time to talk to people when I can just order from an app. I've had experience being on the user end of mobile ordering systems and now that I'm learning how to create web applications like this, it brings it all together so hopefully I can contribute something worthwhile. I am still gathering some more information and will update more when I get a better grasp of exactly how I want my project to look.
Recap of what I've learned so far
Published: 2020-04-29 19:36:22

It's really awesome since I've started this program the different things we've learned and how they're building on another. With Procedural Ruby, we learned how methods work and how to access elements in arrays and hashes. With Object-Oriented Ruby, we learned about classes and instances and how classes and objects relate to one another. With SQL, we learned about databases and how to query from them. It can be a little overwhelming to learn all these new things and to keep remembering how they are used.

Next, we went over ORM, which is Object Relational Mapping. ORM is a way for our Ruby programs to manage database data by "mapping" database tables to classes and instances of classes to rows in those tables. It is essentially incorporating what we previously learned in Object-Oriented Ruby and merging in SQL and allows us to picture raw data relating with different classes. 

After ORM, we learned about ActiveRecord. In ORM, we were building our own classes to get our objects to interact with our databases but this meant that there would be a lot of custom code for each project and each class that would do the same thing. Because developers are lazy, they created a gem called ActiveRecord, a Ruby gem that link our Ruby models with rows in a database table. Essentially, we can use ORM and call on the methods for it by typing one line. 

All this to say is that I've been learning many new concepts and it's really exciting and fun to see it being applied to real world apps. As I move onto Sinatra and Rails, it will continue to build on one another. I'm excited to learn and keep going!
Copying Data in Google Sheets
Published: 2020-04-29 19:33:59

> Note: This is meant as a quick-and-dirty guide to getting up and running with a Google Sheets macro. I don't claim that this is enough to keep things well organized.

1. Head to `script.google.com`
1. Click "New Project"
1. Click "Untitled project" at the top and give your project a descriptive name
1. Modify the following to suit your needs and paste it into the editor:
    ```js
     function copyData() {
      // This will grab the currently active spreadsheet, which will be the one
      // you're looking at when you run the script.
      var ss = SpreadsheetApp.getActive();
      
      // This is the source sheet/tab. Change Sheet1 to the name of the source
      // sheet.
      var sourceSheet = ss.getSheetByName('Sheet1');
      
      // This is the destination sheet/tab. Change Sheet2 to the name of the destination sheet.
      var destSheet = ss.getSheetByName('Sheet2');
      
      // This is the range that you'll be copying from the source. Change A:A
      // to be whatever the valid A1 notation range should be.
      var sourceRange = sourceSheet.getRange("A:A");
      
      // This is the range that you'll be copying from the source. Change A:A
      // to be whatever the valid A1 notation range should be.
      var destRange = destSheet.getRange("A:A");
      
      // Do the actual copying
      sourceRange.copyTo(destRange, SpreadsheetApp.CopyPasteType.PASTE_NORMAL);
    }
    ```
1. Hit Ctrl+s to save
1. Open your spreadsheet
1. Click Tools -> Macros -> Import
1. Click "Add Function"
1. Close the dialog window

You can now use the function you created by clicking Tools -> Macros -> copyData (or whatever you renamed the function to).

There are a lot of other tricks you can use, like creating a trigger to run the function when the sheet changes, setting a keyboard shortcut, etc. but those are outside the scope of this post.
Wrapped up my first project and started SQL
Published: 2020-04-29 19:33:52

I finished my project and had my project assessment on October 29th. It went pretty well. Most of my refactoring was done during the live coding and was given one task to do afterwards. I had finished my project assessment early so it left me a few days to rest and refresh until the next deployment of lessons. 

Last week, we started learning SQL. SQL stands for "Structured Query Language". SQL deals creating and querying from a database. We learned how to write methods in Ruby on how to create a table, add to it, and joined tables together. 

This week is ORM, which is the technique of accessing a relational database using an object-oriented programming language. This ties in what we've been learning in Procedural Ruby and Object-Oriented Ruby. I really enjoy it so far and it's been simple and straight-forward. ActiveRecord and Sinatra is next on the list and after that, our second project. I can't wait to get started!
Shopping Volunteers for Elderly (SVE)
Tags: twiliohackathon
Published: 2020-04-29 19:33:45

The Problem

Early March, The White House issued specific social distancing guidance for the country that urges older Americans to stay home and to avoid other people. 

The Solution: Shopping Volunteers for Elderly (SVE)

Using The Shopping Volunteers application, elderly people submit a request for their shopping needs eg. Grocery, Pharmaceutical needs, etc. Their needs are fulfilled by a network of Volunteers. Volunteers take the necessary precautions and wear a mask all the time when shopping and visiting the Elder Homes.     

How it works

Shopping Volunteers for Elderly application has a network of volunteers, who work to fulfill the needs of the Elderly people.
The SVE application has 2 interfaces. One, for the Elderly, where they submit their needs. Two, for the Volunteers, where new Volunteers register to SVE.  

During the Volunteer registration process, SVE captures the Zip Code that the volunteer is available to serve. 
Elderly people submits a request for their grocery needs on the SVE website. The application also captures the Zipcode that the person in need belongs to. 

SVE algorithm then matches the volunteers to the Elderly's needs. Each applicable volunteer is notified via Text & Email. The request is accepted when SVE volunteers update the form with 'Accept'.
 
Once a request is accepted, the request initiator is notified of the action, and a communication stream is opened between the elderly person and the volunteer shopper. 

Useful links: 
SVE Elderly Delivery Request form: https://bit.ly/3aSqWKl
SVE Volunteer registration form: https://bit.ly/2Wo6JHt
SVE Volunteer Request accept form: https://bit.ly/2ShrXoQ

How I built it: 
This is built using google forms, and google script. There are three forms created. Elderly Request Form, Volunteer registration form, and Volunteer request accept the form. When the forms are submitted by the user, a google script function is triggered. This will then notify a volunteer or elderly people using Twilio SMS API. 

Technologies Used: 
Twilio SMS API, Google script, Google Forms, Google Spreadsheet

Link to Code

https://github.com/delikacylabs/shopping-volunteers-for-elderly

What's next? 
We will use Twilio Autopilot to accept the Delivery request by Elderly via SMS, Alexa, Google Assistant, and Facebook Messenger as well.
My First CLI Data Gem Project
Published: 2020-04-29 19:32:32

It has been a long two weeks since I started thinking about what I wanted to do for my project. Figuring out how I want my project to run has been the hardest part in this process. Once I was able to create my gem and get my flow in CLI working, it became fun. 

To decide on what I wanted to do for my CLI project, I thought about my experiences. I have worked in the food industry all of my life so naturally I decided to make my first project about restaurants. 
I originally wanted to scrape data from TripAdvisor to parse restaurant names, phone number, and address. I struggled with scraping a lot because that particular site changes daily and the nested elements were making the information difficult to obtain. After a few days of struggling to iterate over really nested arrays, I decided to parse from an API instead of scraping from a webpage.

An API stands for application programming interface, which is a [set of routines, protocols, and tools for building software application](https://www.webopedia.com/TERM/A/API.html). I am parsing information for my project from Yelp API and setting pieces of data to key/values in a hash that gets instantiated when a new instance of my Restaurant class is created.

I made three files for my directory: API, CLI, and Restaurant, all with ".rb" tag. The program runs in the CLI class so that is where the flow of the gem resides. The program starts by printing a numbered list of cuisines that I parsed from the API. Next, it asks for the user to input a number that corresponds to the cuisine. After the input, it will display a restaurant name or a numbered list of restaurant names that corresponds to that particular cuisine. It asks the user to input another number to find out more about the restaurants that are displayed. After the second user input, it will display restaurant information such as address, website url, phone number, rating, price range and review count. The user will be able to exit the program at any point by typing "end" in the prompt. 

I'm really glad the gem finally runs and works. I have published my gem [here](https://rubygems.org/gems/Knox_Restaurants). It's been a great experience to be able to build a gem using what I have learn in the past month at Flatiron School. I can't wait to create more projects!
Caching SPA static assets in Grails
Tags: grails, spa
Published: 2020-04-29 19:32:23

If you deploy static assets embedded in your Grails 3 or 4 apps you might notice by default they are not cached - meaning every time a user loads your site - they re-download each asset.

Grails does have a configuration to cache static assets:

`application.yml`
```yml
grails:
    resources:
        cachePeriod: 3600 
```

The problem with this is the entry point `index.html` is cached as well meaning users won't see updates until after the cache period has elapsed.

The solution is to add a `ResourceHandler` that matches `index.html` and sets the `cachePeriod` to `0`

```groovy
@Component // or add to resources.groovy
class SpaResolverConfig implements WebMvcConfigurer { // WebMvcConfigurerAdapter for Grails 3.x

    // Copied from the GrailsWebMvcConfigurer 
    //  - https://github.com/grails/grails-core/blob/28556c0a1a01d2958d6d3aed251dcacc2a6e38da/grails-plugin-controllers/src/main/groovy/org/grails/plugins/web/controllers/ControllersGrailsPlugin.groovy#L179-L193
    private static final String[] RESOURCE_LOCATIONS = [ "/", "classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/" ]

    @Override
    void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler('/static/**/index.html') // ant matcher pattern
                .addResourceLocations(RESOURCE_LOCATIONS)
                .setCachePeriod(0) // <-- no-cache
    }
}
```

Now css/javascript/images from the SPA are cached for `3600` seconds while the `index.html` file is never cached.


Note: This has no affect on assets using the `asset-pipeline` plugin - those are cached correctly.

Links: 
 - First saw this issue - https://github.com/grails/grails-core/issues/10410#issuecomment-611572172
 - Deploying SPA combined with Grails Guide - https://guides.grails.org/grails-vue-combined/guide/index.html
Preparing for my first CLI Project
Published: 2020-04-29 19:30:49

My progress in my coursework is going by pretty quickly. I want to cement my understanding of OOP before starting my first project. I am currently working on Student Scraper Lab and I have the CLI Data Gem Portfolio Project Lab before I can start my project. I am going to slow down my pace and practice more OOP concepts like Scraping and Modules. I plan on going back and re-reading previous lessons and redoing the labs. 

I am really enjoying learning all of what I am learning so far and I am excited at the outcome of all this. Work has been really rough with a lot of turnover and many of my managment team leaving the company, with my current manager hiring people unfit for their jobs. It just makes me want to work at this much harder so I can start my new career as soon as I can.
7 segments LED with Mithril and Bss
Tags: mithril, css
Published: 2020-04-29 19:27:42

Mithril have a nice companion [Bss](https://github.com/porsager/bss) which is a  CssInJS library.
Look at what can be achieved with those guys (thanks to Osban and Porsager)

```js
b.css("body", b `bc black`)
b.helper({
  rel: b `position relative`,
  pos: (l, t) => b.l(l).t(t || t === 0 ? t : l),
  size: (w, h) => b.w(w).h(h || h === 0 ? h : w)
})

const Digit = () => {
  let index = 0
  const lightOn = 'rgba(0, 255, 0, 1)'
  const lightOff = 'rgba(0, 255, 0, 0.30)'
  const code = [0x3F, 0x06, 0x5B, 0x4F, 0x66, 0x6D, 0x7D, 0x07, 0x7F, 0x6F]
  const size = ['100 10', '10 100', '10 100', '100 10', '10 100', '10 100', '100 10']
  const pos = ['0 10', '100 10', '100 20', '0 20', '-10 -90', '-10 -300', '0 -300']
  const style = x => b `size ${size[x]}; rel; pos ${pos[x]}; br 50`
  const light = x => code[index] >> x & 1

  setInterval(() => {
    index++;
    index %= 10;
    m.redraw()
  }, 1000)

  return {
    view: () =>
      m("" + b `h 100; transform scale(0.5); h 250; w 120`,
        [...new Array(7).keys()].map(x =>
          m("" + style(x) + b.bc(light(x) ? lightOn : lightOff))
        )
      )
  }
}

m.mount(root, Digit)

```

You can play with it here : [7LED](https://flems.io/#0=N4IgtglgJlA2CmIBcBWA7AOgBwGYA0IAxgPYB2AzsQskVbAIYAO58UIB5hATncgNoAGPAEYAnAF0CAMwgJy-UKXphESEBgAWAFzCx2tUlviGaAHigQAbgAJoAXgA6IHsS1OAfKYD0Fy+4ek+iwIhFoQZPJqwkgCIAC+eIrKquoAVvIEJIbGWjQARhiE5OQAFE55xFAAnk541nkABnmE9QyEANYNAJQBBRrwsIzwXCXAAdbWXANI9Q2MxOQQYWSTA-RhlvANeOPW8+Qz1iWweFpd1nbu9Riwx10YWiVa1gA+L9bPdl-WAtYA-B9rDNYF0dqQJosAF7wGYlADueA050u1zh8PuGhKGle72xXzsP3+1mxMzhPVIcXJASy5GeABEIABzJYXI7Iq5jcHWBDPCCkKDwAAerIEuxpz1gTO0AHlwQTrAByLiMvL0EpCawAJhQKDqGuEXQVYoiEqlWmlUikrMVytV6rq2t1Pz1GBwAkNxoozxIAomBMEgpwADE9YKBAA2UMoABCoYALCGfoLw5Gk+G6aG0BmkwI0JnEwJk0HxJ7adYofA-dY+ArhAJfnWFXhaw3602W9Y6wJ213O93m3W+-2O12e-W+wqS1zxXsFhNWTXW2OlwPx5rh791+2ALSD7eiYe737bt0b6wnttTiYz2lVBCs4UoxoV6wAEmAFb4gvEcQA3KtYH-fY32AfYvx-f88i4awUAEBpS1NRltAfC4rh9eA+D5AVv2sdwrmFAAyTtdl2FgtAASWyLhLHoW4SnZaxgCwoUAGoWP-ZjhQAUgJOt-zADApigLh6DRLoEiHd0SK5KYtAAVy4cFOXnaxLAgeA4VhdkAgcNw9LAMoQCcawWNmbEu3-LQRIoKRiC4MBy0IWj4HVDAUC6f9sW1AR-zhTt122XYVImPgMDC0gNOsABBLgRKqEo0Hudp4CqUounEDAwCYEpH38LlgvnAynGM0zbwQHLzlMgpmmOM0KqJSUkPNcFgTNC0pC6ckComKk9N0rqJjiAI4msHTSAEsBiDkwwShcLQ6gZZkzgCfQSDARhZGGfJ6DyAYggGeBQnCCgaE1UQkHXbcBBieJEhAJQVBoQpilWsgjBMNQAGI5sY3Y4WgLQNBmdcBEYQVf12LLlT5GZfnoOStGICGuUYegYD5RltwQKQtBmLBQfB4b9pCZYTqiJBhBQeJJBASVSHaSI+CSR61EgQGuFkfQFL0NRtC0ZgkC8LxpsYdpGUKYgwC8NmNA52AAAFhAwJXw2lpZZdkDB0n0LQqiGGhOA5xhcgSZmUjyF6CG5mg+YFoWRbFiWpYt8hFbcjBNS8F2tYyEBdf1tRDYgY3qbiIA)
The Twilio Hackathon Ends Tomorrow (April 30)!
Tags: twiliohackathon
Published: 2020-04-29 19:21:11

---
title: The Twilio Hackathon Ends Tomorrow (April 30)! 
published: true
description: Submissions are due Thursday, April 30th at 11:59pm PST!
tags: twiliohackathon
---

We just wanted to share a friendly reminder that Twilio Hackathon submissions are due Thursday, April 30th at 11:59pm PST! 

Don’t forget to sign the [Twilio CodeExchange agreement](https://ahoy.twilio.com/code-exchange-community) and formally submit your project via a DEV post with the #twiliohackathon tag. 

Full submission details here:

{% link https://dev.to/devteam/announcing-the-twilio-hackathon-on-dev-2lh8 %}

![pikachu-good-luck](https://media.giphy.com/media/mqWZoUiub0cyA/giphy.gif)
How To Test Ionic React PWA On An Actual Device While Developing? YOU SHOULD!
Tags: react, javascript, testing, android
Published: 2020-04-29 19:20:37

As I spoke about the future of App development in one of my posts, I briefly touched PWA aka Hybrid applications and why you should learn it. 

Now maybe you started learning how to develop PWA using Ionic but when you ran __ionic serve__ in the terminal the app started in a browser tab. But you are developing it for smartphone users, right?

![img](https://media.giphy.com/media/Ty9Sg8oHghPWg/giphy.gif)

Hey, don't worry I'll explain how you can run it on an actual device WHILE developing it.

Let's go...

# Step 1: Google it
![image](https://media.giphy.com/media/8Bl38gdtUK7WDdi59y/giphy.gif)

Just kidding. 

- Connect your __android__ device to your computer/laptop with a __USB__ cable and turn on _usb tethering_
- Open the terminal and run 
```shell 
ipconfig
```
- Note your tethering hotspot IP address like the one in the below figure
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2pnsqgtor5anxnem0bua.png)
- Run ionic server to start the app
```shell
ionic serve
```
- You can access the app through any phone browser at ```IP_ADDRESS:8100```


Now you can test your app on your device while developing it. Any change you make to the app will be reflected in your device instantly.

## Why you should?

Well, imagine your PWA has a QR code scanner. How will you test its functionality without loading it onto an actual device? This is one of the reasons I prefer testing PWAs directly on the device instead of a simulated browser instance.

That's all for today guys. 

I'll see you in the next one.

Cheers,
Jha

# Some of my previous posts that you may like
{% post https://dev.to/jha/save-and-save-dev-why-you-should-know-the-difference-j7p %}
{% post https://dev.to/jha/why-learn-docker-2691 %}
{% post https://dev.to/jha/why-i-prefer-pytorch-over-tensorflow-same-reason-i-prefer-linux-over-windows-4pea %}
Day-17 Binary Search
Tags: python, challenge
Published: 2020-04-29 19:15:26

##### Background
This problem statement is a part of LeetCode's learn card binary search. Under the sub-heading background.

##### Problem Statement
Given a sorted (in ascending order) integer array nums of n elements and a target value, write a function to search target in nums. If target exists, then return its index, otherwise, return -1.

##### Example 1
```
Input: nums = [-1,0,3,5,9,12], target = 9
Output: 4
Explanation: 9 exists in nums and its index is 4
```

##### Example 2
```
Input: nums = [-1,0,3,5,9,12], target = 2
Output: -1
Explanation: 2 does not exist in nums so return -1
```
Note:

   1. You may assume that all elements in nums are unique n will be in the range [1, 10000].
   2. The value of each element in nums will be in the range [-9999, 9999].

##### Solution Approach
1. Keep dividing the array into halves.
2. left = 0, right = len(array)-1. Mid would be left+right/2.
3. Then determine where the element to be searched lies.

```
class Solution:
    def search(self, nums: List[int], target: int) -> int:
        left = 0
        right = len(nums)-1
        while left <= right:
            mid = abs(int((left+right)/2))
            if target < nums[mid]:
                right = mid - 1
            elif target > nums[mid]:
                left = mid + 1
            elif nums[mid] == target:
                 return mid
        return -1
```
#### Learnings
1. Time complexity is O(logn).
2. Take care of the edge conditions.
Containerize A Spring Boot App with Docker
Tags: java, springboot, backend, webdev
Published: 2020-04-29 19:02:42

---
title: Containerize A Spring Boot App with Docker
published: true
description: Learn how to build and tag a Docker image from your Spring Boot application, then create and start a Docker container to run it.
tags: java,springboot,backend,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hesp2ux0xfjst2cadubo.jpg
---

## Who this tutorial is for

This tutorial is for anyone who is wondering how to take a Spring Boot 2 application and containerize it with Docker.

## Prerequisites

Before you begin, either make sure you have an existing Spring Boot 2 application, or if you don’t, I recommend going through the Spring Guide [“Building a RESTful web service”](https://spring.io/guides/gs/rest-service/) with Spring Boot.

Once you have that, return here. 

## Video Version

As an added bonus, check out the end of this tutorial, where I’ve placed a video version of all of this.

## Step 1. Add a Dockerfile

First, add a text file to the root directory of your application named “Dockerfile.”

Copy and paste the following into it:

```
FROM openjdk:11
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
```

NOTE: if you are using Java 8, or another version of Java, be sure to select the correct base for your image in the “FROM” line (line 1). You can find other openjdk container bases at [Docker Hub](https://hub.docker.com/_/openjdk/).

You may also be happy to know that there’s a Spring Guide titled [“Spring Boot with Docker”](https://spring.io/guides/gs/spring-boot-docker/) where you can find more information about Dockerfiles and Spring Boot.

## Step 2. Build an image

Next, you will build an image. Open a terminal, navigate to the root directory of your application, and type:

```
docker build -t {tag}
```

You can [read more about tags in the Docker documentation](https://docs.docker.com/engine/reference/commandline/tag/).

If you plan to use Docker Hub, then it’s common to use your Docker Hub username. For example, I used this command on my example:

```
docker build -t scottashipp/helloworld
```

## Step 3. Create and run a container

Now that you have built an image, you can create and run a container from that image.

In the same directory, type:

```
docker run -p 8080:8080 {tag}
```

If you forgot how you tagged your image, try listing images:

```
docker image ls
```

Assuming you find your tag, and run it correctly (for example I used “docker run -p 8080:8080 scottashipp/helloworld”), you should see Spring Boot start up, and the familiar “Started application . . .” message.

## In this tutorial

In this tutorial, you have:

* Built and tagged a Docker image from an existing Spring Boot application
* Created and ran a Docker container from the created image

# Next Steps

Next, check out the video version! Make sure to like and subscribe!

{% youtube vuGcuzaGN0A %}