teleren/devto huggingface dataset:
Volafile
Tags: dohackathon
Published: 2021-01-11 06:42:36

---
title: Volafile
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon
---

## What I built
A simple, ephemeral file-sharing service.

### Category Submission: 
Built for Business

### App Link
https://volafile-76j4i.ondigitalocean.app

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

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

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

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

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

### Description
Volafile helps you share files privately. You can upload a file and get a unique download link that's known only to you and other people you might share it with.

You can optionally add another layer of secrecy with a password. That way, if you accidentally share your download link in the wrong places, your private files don't suddenly become publicly available. Any one with the link will need that password before they can access your file(s). 

At the moment, each upload automatically expires after 24 hours, so any attempts to download your file(s) after that time will fail and your files are permanently deleted.

### Link to Source Code
https://github.com/opeadeyomoye/volafile

### Permissive License
MIT

## Background
[Firefox Send](https://en.wikipedia.org/wiki/Firefox_Send) was a lovely service before it was taken down. It was great to have a way to securely make anonymous, short-lived file shares. Volafile is inspired by the late Firefox Send.

### How I built it

Volafile currently runs as a traditional web app in 1+ Docker containers on DigitalOcean's [App Platform](https://www.digitalocean.com/products/app-platform/). It also uses a MySQL database based on DigitalOcean's managed database service and stores uploaded files with [Spaces](https://www.digitalocean.com/products/spaces/).
The Waiter
Tags: dohackathon, react, redux, materialui
Published: 2021-01-11 06:37:57

## What I built
A very simple waiter web app to make orders in a restaurant.

### Category Submission:
Built for Business 

### App Link
https://thewaiter-5vw3p.ondigitalocean.app/

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9k2t7lpofzvlsgwpn594.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hwirkreueeapnubplwlv.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t6zdjawycnej23cqzpfl.png)

### Description
It can be of assistance to a waiter or to customer to order the food from the menu.

### Link to Source Code
https://github.com/parkourkarthik/thewaiter

### Permissive License
MIT

## Background
When ordering food we might have to wait until the waiter attends our table. So thought why not we have an app similar to online ordering inside the restaurant with some QR codes on the table to direct us to the link.

### How I built it 
I was bit late to join and had to rush up to a level of MVP. So, I had to make it as simple as possible. I made use of browser localStorage and had to overcome some problems.


### Additional Resources/Info
Adding Auto Caching to Our Template Engine
Tags: javascript, node, webdev, express
Published: 2021-01-11 06:38:46

---
title: Adding Auto Caching to Our Template Engine
published: true
date: 2021-01-11 06:37:38 UTC
tags: JavaScript,Nodejs,WebDevelopment,Express
canonical_url: https://h.shadowtime2000.com/adding-auto-caching-to-our-template-engine
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1610563182547/yhNZ3JME0.png?w=1600&amp;h=840&amp;fit=crop&amp;crop=entropy&amp
series: Creating a JS Template Engine
---

In one of my articles, I showed you how to [create a simple JS template engine](https://hackernoon.com/how-to-create-new-template-engine-using-javascript-8f26313p). In this article I will show you how to add simple caching to the compilation of our templates.

# How Caching Works with JS Template Engines

Caching with our template engine is pretty simple. We just keep a key value object and use template strings as keys and functions as values. This will make subsequent uses of a template faster. 

## Implementing it inside Compile

All our compile function is this:

```js
const compile = (template) => {
	return new Function("data", "return " + compileToString(template))
}
```
Let's rename this to `compileToFunction`.

```js
const compileToFunction = (template) => {
	return new Function("data", "return " + compileToString(template))
}
```

Now let's create a cache. We will use a `Map` for this.

```js
const cache = new Map();
```

Now let's add a `compile` function which uses this cache.

All we need to do is check if the `cache.has(template)`. If not, we need to create it and set it. If it does have it, we just need to return it.

```js
const compile = (template) => {
	if (cache.has(template)) {
		return cache.get(template);
	} else {
		const compiledFunction = compileToFunction(template);
		cache.set(template, compiledFunction);
		return compiledFunction;
	}
}
```

## Changing our Render Function

Currently our `render` function just uses some Regex to replace all the values. 

```js
var render = (template, data) => {
	return template.replace(/{{(.*?)}}/g, (match) => {
		return data[match.split(/{{|}}/).filter(Boolean)[0]]
	})
}
```

I think we should change it to use `compile` under the hood for faster automatic caching. It is pretty simple to implement, we just need to run `compile` and then run that function with `data`.

```js
const render = (template, data) => {
	return compile(template)(data);
}
```

# Conclusion

In this tutorial I showed how to extend the template engine we made in a previous post with caching for faster compilation and rendering.

# Other Articles You Might Like

1. [Creating a JS Template Engine](https://h.shadowtime2000.com/creating-a-js-template-engine)
2. [🚀14 JS Template Engines🚀](https://h.shadowtime2000.com/14-js-template-engines)
Spring Injection Types
Tags: spring, java
Published: 2021-01-11 06:30:56

Spring supports three types of dependency injections:

#Constructor injection

```java
@Component
public class SecondBeanImpl implements SecondBean {

    private FirstBean firstBean;

    @Autowired
    public SecondBeanImpl(FirstBean firstBean) {
        this.firstBean = firstBean;
    }
}
```
That is similar to:
```java
FirstBean firstBean = new FirstBeanImpl();
SecondBean secondBean = new SecondBeanImpl(firstBean);
```
This type of dependency injection instantiates and initializes the object.
In this approach, beans are immutable and dependencies are not null. However, if you define many parameters in the constructor, your code is not clean.
From Spring 4.3 the @Autowired annotation is not required if the class has a single constructor.

#Setter injection

```java
@Component
public class SecondBeanImpl implements SecondBean {

    private FirstBean firstBean;

    @Autowired
    public setFirstBean(FirstBean firstBean) {
        this.firstBean = firstBean;
    }
}
```
That is similar to:
```java
FirstBean firstBean = new FirstBeanImpl();
SecondBean secondBean = new SecondBeanImpl();
secondBean.setFirstBean(firstBean);
```

In this approach, beans are not immutable (the setter could be called later), and not mandatory dependencies can lead to NullPointerExceptions.

#Field injection

```java
@Component
public class SecondBeanImpl implements SecondBean {

    @Autowired
    private FirstBean firstBean;
}
```

This approach may look cleaner but hides the dependencies and makes testing difficult. While constructor and setter injections use proxies, field injection uses reflection which could affect the performance. Could be used in test classes.
Hello World In NimLang
Tags: nim, nimlang
Published: 2021-01-11 06:21:44

## [nim](https://nim-lang.org/) is a statically typed systems programming language that can compile to C,C++ and even JavaScript! thus nim can be used for either frontend development, back-end development and embedded development.

---
# **Getting started with nim**
to get started all you need is the nim compiler which you can install at [download-nim](https://nim-lang.org/install.html)

### To check if you have nim installed just run in a terminal
```bash
$ nim --version
```
this should output the compiler version and a few other stuffs.

# Writing some Nim
<p>to get started all you need is a file that ends with the *.nim* extension</p>

# hello world in nim
*put this in your .nim file*
```nim
echo "hello world"
```
now you need to compile and run your program, which can be easily done by doing
```bash
nim compile --run filename.nim
```
the compile command will compile and leave an executable binary file for you. but  the --run will immediately run the code for you!.

and there!, you've written your first line of code in Nim and you shouldn't stop there.. the nim website has a very well built tutorial that can get any new or seasoned developer up and running with the nim language so go try it out now!. :smile:
Minimalist Portfolio - Landing Page
Tags: dohackathon, webdev, portfolio, react
Published: 2021-01-11 06:15:39

So, ideation and brainstorming phase was done, requirements for the site were ready. Next step would be designing right?

Well...

I decided to go straight to development with the idea I had without trying it out in a designing tool like Figma first. It's almost never a good move, but in my case it helped me discover `mix-blend-mode` and `background-blend-mode` in CSS.

### The main attraction in the landing page
The idea from the start was to have an SVG `text` element of my name with a `clipPath` & gentle gradient at the center of the page. Social media icons below the text and a dark mode toggle at the top right corner. But because of the discovery of blend mode and some cool examples like [this](https://ishadeed.com/article/blending-modes-css/) and [this](https://alligator.io/css/exploring-blend-modes/), I decided to remove the gradient and put in small circles in a packed layout that would be masked by the clip path.

Changes I ended up making - 
1. Made the circle radius to vary between 1 to 7 randomly to increase the effect on blend mode
2. Used mix-blend-mode `screen` and knew I would be using `multiply` for the dark mode

**Without blend mode**
![Without blend mode](https://dev-to-uploads.s3.amazonaws.com/i/v5jvoyit5l7i7mu66ndn.png)

**With blend mode**
![With blend mode](https://dev-to-uploads.s3.amazonaws.com/i/fmmvy8iy20olmiqn93uf.png)

### The icons
Development of icons section was pretty straighforward, a responsive SVG image to depict the social media / website it stood for, and a hover state to help users know that it was an interactible element with action.

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

**Icons with the hover state**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p306qr0l246ydce79g6j.png)

### Dark mode
Even before researching, from a user's perspective, I already knew all the necessities to create a good dark mode toggle by using them in other websites - 
1. Should respect OS' color scheme
2. User should be able to toggle the mode
3. User should not have to re-assign his preference after quitting the website and re-opening it the next time _(local storage)_

I had started implementation using Theme Context when I discovered [use-dark-mode](https://github.com/donavon/use-dark-mode). They had all my requirements in a single hook, so why re-invent the wheel?

### Preview
**Light mode**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h8tes8d5ux0e0vt19g1q.png)

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

With that, my portfolio was a wrap.

Wait, that's it? Find out in the next post :)
Linear Search Algorithm
Tags: javascript, algorithms
Published: 2021-01-11 06:06:42

Linear search is easy to implement. It is ideal to use when finding an element within a sorted or unsorted list with a few items. The best-case performance of this search algorithm is O(1), and the worst-case performance is O(n).

Let's say we have 5 shuffled flashcards with random names written on each.

_ex:_
_Robert, Janeth, Samuel, Harold, and Mark_

So if we want to find the name Samuel, we need to check each card from the first card until we find a match.

![Flash cards](https://dev-to-uploads.s3.amazonaws.com/i/gjllpuk6rp09xxbv1vdm.png)

Let's see it in action:
```
const flashCards = ['Robert', 'Janeth', 'Samuel', 'Harold', 'Mark']

const linearSearch = (flashCards, nameToFind) => {
  for(let i = 0; i < flashCards.length; i++){
      if(flashCards[i] === nameToFind){
          return i
      }
  }
  return -1
}

console.log(linearSearch(flashCards, "Samuel"))

// Output: 2
// Samuel is at the 2nd index of the flashCards array
```
Turn down logging to reduce CloudWatch bills
Published: 2021-01-11 05:57:08

I received a cost warning email from AWS a few days after connecting the containers to CloudWatch using awslogs logging driver.  I took a look at my account and the bill was already $75 after just a few days.

Amazon reported that the containers were generating a huge amount of logs.  Over 10GB a day.  Most of it was fairly useless noise, in particular the proxy rotation routine was generating a ton of logs.

I knew what the source of all the logs was - I had TRACE logging enabled on my server and each of the clients.

What's more, the recent performance improvements I had made were causing more logs to be produced because the clients were iterating more quickly.

After turning logging back to INFO, and checking that the INFO level only contains logs that are actually useful to my current workflow, I saw an immediate reduction in the cost of cloudwatch.

![Screenshot 2021-01-11 at 16.50.10](https://dev-to-uploads.s3.amazonaws.com/i/f2xkw9nscsxem4pxo50u.png)


Using [AWS Cost Management](https://console.aws.amazon.com/cost-management) I was able to chart the daily cost of CloudWatch.

In the future I hope to be able to keep within the 5GB monthly limits of the free tier by being mindful of what is logged at INFO level or higher.
Nokogiri...CLI...Gems...Oh My!
Tags: beginners, ruby, cli
Published: 2021-01-11 05:55:14

My experience did not prepare me for this: Web Scraping! My latest endeavors in coding booting have brought me to something completely different in a language I am still learning...and it was a challenge.

Honestly, web scraping was not the difficult part. Nor was finding the right CSS or what to do with the data. It was setting up my data & methods and then breaking my code so bad I could not get it to work again before I had to submit it. self.ouch

Instead of wallowing in painful memories, I would like to discuss some of the items I used to build my first CLI application. Flatiron Schools introduced my cohort to Nokogiri. I know what you are thinking. No, it is not a tasty snack. The word actually translates to 'saw' as in hacksaw, handsaw, table saw, but not "I saw(past tense) dead people". It is actually a decent web scraper that works with XML and HTML. It was easy to install and setup. Since it is widely used, there is a lot of great documentation on the web around it. 
```
Setup: please start in your project 
in terminal
`gem install nokogiri`

back in your editor
(in your GEMFILE)
`gem "nokogiri"`

(in your scraper file)
`require 'nokogiri'`
`require 'open-uri'`

def nameofyourgetpagemethod
Nokogiri::HTML(open(http://somepage.com))
end
```
Here are some of my favorite links:
* https://nokogiri.org/
* https://readysteadycode.com/howto-parse-html-tables-with-nokogiri
* https://www.freecodecamp.org/news/how-to-scrape-with-ruby-and-nokogiri-and-map-the-data-bd9febb5e18a/


During the building of my CLI, I switched sites often as I felt I was not getting the "right" data I wanted to use. Fortunately, Nokogiri was able to handle any site I threw at it as long as I was able to correctly parse the CSS. I was able to use your average everyday CSS selectors or even table selectors. There was a bit of plug and play as I figured it out. Thank goodness for 'binding.pry'! Was I tempted to say forget it and try getting data from an API instead; however, I was already halfway through. 

My biggest challenge and the one that hurt me the most was gemifying my project. The day the project was due (softdue) with moments to spare, I decided to refactor the code a bit to see if I could complete the extra challenge of turning my little thing into a Ruby Gem. Well.....there is a reason we are always told to commit early and commit often. I did not complete the Gem challenge, but stay turned.....it is coming. For now, don't be scared to scrape a site for your own data needs. It honestly is not that bad.

Making a Gem isn't that bad either
* https://guides.rubygems.org/make-your-own-gem/
* https://www.sitepoint.com/creating-your-first-gem/
* https://bundler.io/guides/creating_gem.html
Portfolio - Digital Ocean Hackathon Submission
Tags: dohackathon, webassembly, rust, yew
Published: 2021-01-11 05:45:56

## What I built
I have built my portfolio with Yew framework. Yew Framework:exclamation: heard of it?:thinking: It is a frontend framework written in Rust that is similar to React. It has a virtual dom and uses a diffing algorithm to do essential renders like React. It is compiled to wasm and bundled by webpack. 

### Category Submission: 
Personal Site/Portfolio

### App Link
[Portolio Website](https://chrisdaniel.dev/)

### Screenshots
![Home Page](https://dev-to-uploads.s3.amazonaws.com/i/d6h0ljv48l69h4gsk34v.png)
![Skills Page](https://dev-to-uploads.s3.amazonaws.com/i/gq4bc3a9di87vtzh1jh2.png)
![Mobile Works Page](https://dev-to-uploads.s3.amazonaws.com/i/vxs3yaduofg4o6mo49mf.png)

### Description
 Portfolio website built in digital ocean app platform using docker and yew framework

### Link to Source Code
[Yew Portolio](https://github.com/dani97/yew-portfolio)

### Permissive License
MIT

## Background
I wanted to try web assembly and rust for a long time. I was lacking motivation to learn and rust had a insane learning curve :grin:.Also I wanted to build a portfolio for a long time. For portfolio, my first choice is next js SSG but it is not very challenging, I started building it and eventually got bored and dropped the idea. I want to challenge myself to learn WASM, rust:crab: and I believe portfolio could be the first step to try it out:muscle:.

### How I built it 
My portfolio is a static site, but to generate static files, I need both rust and node js. Pretty complex to deploy  :sweat_smile:, but digital ocean app platform had a special option. You can deploy app with a docker container:astonished:. It's been very long since I last wrote a Dockerfile and now it is a ideal situation for me to refresh:wink: .I started building it and the only problem is only one week left to complete my submission. Let us see how I finished the app from the first link in the series, if you have not done yet.


### Additional Resources/Info 
Cover image from [unsplash](https://unsplash.com/photos/JJD1i9YO7w8?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
Portfolio - Key Takes
Tags: dohackathon, rust, webassembly, yew
Published: 2021-01-11 05:45:26

## Key Takes
- The learning curve is really steep for rust, but yew doesn't need complex syntax.
- Building a whole website on web assembly in production is the worst idea. Long development time, bundle size, lack of build tooling, debugging tooling.
- Apart from all these negatives still my site loads faster but yet not like a static site.
- App build time is very large takes upto 15 mins in digital ocean. 

### Future work
- Add service worker to cache wasm file and images
- Add more PWA features 
- Add webgl to unlock multi threading capabilities of wasm.
- Add Post list and post page from dev.to
- Remove bulma and write css from scratch

### More Info
Cover Image from [Unsplash](https://unsplash.com/photos/KQ0C6WtEGlo?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
Portfolio - Deploying in App platform
Tags: dohackathon, docker, rust, webassembly
Published: 2021-01-11 05:43:53

## Deploying
Many cloud providers stick to few runtimes like node js, ruby, php, java etc, but digital ocean provides docker container along with others to deploy our sites. We can see how I deployed it using docker container for static sites.

### Setup
Create a Dockerfile in your root directory. pull rust container
```code
FROM rust:1.48-slim-buster
```
Install node and yarn in docker
```code
RUN apt-get update -y && apt-get install curl -y

RUN curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh

RUN sh nodesource_setup.sh

RUN apt install nodejs -y
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
RUN apt-get update &&  apt-get install --no-install-recommends yarn -y
```

Copy source files and build your app
```code
COPY . .
RUN yarn install && yarn build
```

Test your container locally by building and running the image
```code
docker build -t yew-portfolio .
docker run -it -p 8000 yew-portfolio
```
Now test your build static files in a static file server of your choice and verify.

Now deploy it to Digital ocean using app platform.

### More Info
Cover Image from [Unplash](https://unsplash.com/photos/6Vg8N8u61aI?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)
Portfolio - Building the website
Tags: dohackathon, yew, rust, webassembly
Published: 2021-01-11 05:43:30

## Website
I started building the website from the template [Yew webpack template](https://github.com/yewstack/yew-wasm-pack-template). Using this template reduced my development effort thanks to hot reloading. To speed up I have used bulma css framework

### Key takes
- I need to ensure the app is responsive
- It should have a good light house score
- SPA should have multiple routes

### Routing
Yew has a router library named `yew-router` which we are using to setup routing. When SPA is deployed as static site it, routers need extra configuration. We have to configure `index.html` as fallback url so any site would first reach `index.html`. Now the routes simply append the `href` in url bar because of relative url. To avoid this I have used added base tag in head.
```code
 <base href="https://yew-portfolio-iwfte.ondigitalocean.app/">
```

### Layout
Even though I used bulma css to speed up, there are some complex layouts, where we need to use `css grid`.

### Bundle size
Unlike mature frontend frameworks like Next js, Gatsby, Yew didn't have code splitting. This costs the website performance. The wasm file size is around 450kb. This is one of the main downsides of writing a whole website in yew.

### Light house scores

### More Info
Cover Image from [Unsplash](https://unsplash.com/photos/Z9AU36chmQI?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)