teleren/devto huggingface dataset:
@angular/fire/storage - Angular 11 Upload files to Firebase Storage Example
Tags: angular, firebase, storage, uploadfile
Published: 2020-12-14 15:47:11

https://loizenai.com/angular-11-upload-file-to-firebase-storage/

# @angular/fire/storage Angular 11 Upload files to Firebase

## Technologies – Angular 11 Upload File to Firebase Storage
– Angular 11
– RxJs 6
– @angular/fire 5.1.3
– firebase 5.11.1

## Overview Angular 11 Upload file to Firebase Storage

![Overview Angular 11 Upload file to Firebase Storage](https://loizenai.com/wp-content/uploads/2020/12/Angular-11-Upload-Files-to-Firebase-Storage-Demo.png)

We will build an Angular 11 Firebase App that can:
– helps user choose file from local and upload it to Firebase Storage
– show progress with percentage
– save file metadata to Firebase Realtime Database
(Functions above from the posts: Upload File to Storage)
– get list Files and display

## How to upload file from Angular to Firebase storage using @angular/fire/storage?

![How to upload file from Angular to Firebase storage using @angular/fire/storage?](https://loizenai.com/wp-content/uploads/2020/12/Angular-11-Upload-Files-to-Firebase-Storage-Overview.png)

– Upload file:
+ save file to Firebase Cloud Storage
+ retrieve {name, url} of the file from Firebase Cloud Storage
+ save {name, url} to Firebase Realtime Database

– Get/delete files: use file {name, url} stored in Database as reference to Firebase Cloud Storage.

So, after upload process, the results will be like:

-> Firebase Storage:

![Firebase Storage](https://loizenai.com/wp-content/uploads/2020/12/Angular-11-Firebase-Storage-Results.png)

-> Firebase Realtime Database:

![Firebase Realtime Database](https://loizenai.com/wp-content/uploads/2020/12/Angular-11-Firebase-Storage-Database-Results.png)

## Related post

- [Reactjs CRUD Firebase Realtime Database Example](https://loizenai.com/reactjs-crud-firebase-realtime-database/)
- [Angular 10 CRUD Firebase Realtime Database – use @angular/fire](https://loizenai.com/angular-10-crud-firebase-realtime-database-angular-fire/)
Bootstrap 5 Responsive Contact Us Form with Social Icons
Tags: css, html, uiweekly, webdev
Published: 2020-12-14 15:40:46

In this contact us form we used social icons from font awesome and also we try to make an attractive user-interface of this form. So here we made responsive contact us form using bootstrap 5 and the help of CSS & fonts(font awesome).

Here we also used some custom classes to make this element more awesome and user-interface. Also, we used list type li and UI tags to show contact info. To make responsive we used media quires. After 768px we hide social icons and also hide contact info details, just available contact us form. This is fully responsive to the mobile and tablets side.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/bootstrap-5-responsive-contact-us-form-with-social-icons/)
Jordan Scrapes North Carolina for Lambda. Part 1
Tags: webscraping
Published: 2021-01-29 12:49:48

---
title: Jordan Scrapes North Carolina for Lambda. Part 1
published: true
date: 2020-12-14 15:38:00 UTC
tags: WebScraping
canonical_url: https://javascriptwebscrapingguy.com/jordan-scrapes-north-carolina-for-lambda-part-1/?utm_source=rss&utm_medium=rss&utm_campaign=jordan-scrapes-north-carolina-for-lambda-part-1
---

This is part 1 of the video to scrape North Carolina. This time it was just working on the scrape. In the next videos we’ll get it on AWS Lambda and DynamoDB.

<iframe title="Jordan Scrapes North Carolina, Part 1" width="640" height="360" src="https://www.youtube.com/embed/nUm6KCHKYRE?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

North Carolina doesn’t has both a Secretary of State id and a database id. These means we have to get the list of database ids which we can use to get the business details.

The database ids don’t appear to be perfectly sequential.

## Looking for business leads?

Using the techniques talked about here at [javascriptwebscrapingguy.com](https://javascriptwebscrapingguy.com), we’ve been able to launch a way to access awesome web data. Learn more at [Cobalt Intelligence](https://cobaltintelligence.com)!

The post [Jordan Scrapes North Carolina for Lambda. Part 1](https://javascriptwebscrapingguy.com/jordan-scrapes-north-carolina-for-lambda-part-1/) appeared first on [Javascript Web Scraping Guy](https://javascriptwebscrapingguy.com).
Do Not Track, maybe
Tags: privacy, webdev, analytics
Published: 2020-12-14 15:34:00

To opt out of tracking scripts on websites, you can set the [“Do Not Track”](https://www.eff.org/issues/do-not-track)-setting available in some browsers. Activating it adds a “please do not track me”-signal to all your HTTP-requests. Unfortunately, third parties are not required to honor that wish. They don’t _have_ to stop collecting data about you. Some might, many will not.

Before GDPR went into effect, I removed Google Analytics from my portfolio. I do not currently know if people are reading my articles at all. When it comes to tracking, I would rather fly blind than invade my visitors’ privacy.

I am now looking into basic server-side analytics, which seem much more privacy-friendly. By analyzing a server’s access logs, they can only tell me how many page views my articles have, but not who read them. Because everything happens on the server, tracking pixels or JavaScript-snippets are not necessary.

As long as I can recognize trends, the behavior of individuals is completely irrelevant to me. You keep your privacy, I still get some usage statistics. I won’t get the same level of detail a Google Analytics would give me, which is fine. [Netlify](https://www.netlify.com), where I am currently hosting my site, is offering exactly the kind of analytics I am looking for. Their documentation sounds super promising: [Analytics by Netlify](https://www.netlify.com/docs/analytics/)

This will still leave blind spots in my statistics, so I would like to compile a list of pros and cons of this approach. What are you using your analytics for that this will not give me?

– Dom
Glassmorphism List UI Design
Tags: html, css, codenewbie, codepen
Published: 2020-12-14 15:30:38

Glassmorphism List UI Design With 3D Button  Using CSS | Glass morphism | HTML CSS 

 -----Click on this link and get free Source code-------
  https://codepen.io/Bilal1909/pen/PoGWvBV?editors=1100
“Why did you decide to study Software Engineering?”
Published: 2020-12-14 15:24:03

“Things are only impossible until they’re not!” JL

The truth is because life threw me, and the rest of the world, a curveball this year and I am choosing to make wine out of lemons or however that saying goes. The question I asked before “Why do I want to become a software engineer?” was “What is next?”
Seriously sitting down with myself and asking “What is next?” has made this year the best year of my life. I know you must be reading this and thinking “what the hell is this guy talking about? 2020 has been no bueno.” Programming has provided a space that allows me to flourish not only professionally but in so many other aspects like higher education. While learning content I’m also learning how to literally learn. This is an invaluable skill that is transferrable to other aspects of my life. 2020 has been the greatest year of my life because I say so and every single day I keep proving it to myself.

I will keep things cute and simple…

In conclusion, getting my Software Engineering Certification is one step towards reaching my different professional, personal project and educational goals that include:
Professional: I need to continue my research into Open Source Projects/Volunteer opportunities
Personal: Create informative app
Educational: Continue learning about different types of algorithms
I'm building a programming language
Tags: programming, rust, computerscience, showdev
Published: 2020-12-14 15:00:35

A lot of people that talk about building their own programming language, have a lot of lofty goals for them. They want them to have this feature, that feature, to conquer the world and back.

Me? not so much. I'm building one just to learn how to do it "for real". Sure, I have some opinions about what features I would like more. I would use them as goals for the whole project, not just as design goals for the language.

So what are my goals, well...

1.  **I want to build it using Rust**: I've been trying to learn [Rust](https://rust-lang.org) for a long time now, and while I've learnt a lot, built a few side projects here and there, there's still a lot I don't know. So I thought, "Why not just go for it and throw myself in the deep end", and that's what I'll be doing. Using Rust to build the language and learn Rust as I move along.

2. **Truly experience how to build a compiler**: Sure I've learnt how to do so at university, wrote some code for building automata etc. But nothing beats the experience of actually building it all on your own.

3. **Have a Lisp like syntax**: This is really not a big deal. I've recently been diving into Lisp dialects and I like some concepts and some syntax in it, so I'll try adding some of those in my language.

4. **Be fast and support multiple platforms**: I don't think there's much benefit building a programming language that's painfully slow to use. To make it fast I want it to be a compiled language (as opposed to an interpreted one), Rust also helps in this area as it is pretty fast. Since it's also going to be multi-platform, I will be using [LLVM](http://llvm.org/) because I don't want to be dealing with any assembly code and optimisations yet.

5. **Be usable at every step of development**: I will be gradually adding features, but I want every feature made to be able to show me some visible output.

![Building an MVP](https://dev-to-uploads.s3.amazonaws.com/i/jskoe1pmxjxk5fhfkstm.png)

Like the image above, I want each step in the development process be able to take me from source code to program in some way or another. Instead of building perfect separate components like the perfect parser and perfect lexer that on their own cannot (obviously) get me from source to program. I want to build a lexer than kinda works and a parser that kinda works (and so on) which combined can get me from source code to executable program.

I hope I come out the other side, having a lot more knowledge in this area than I do now (which is really tiny).

![see you around](https://media.giphy.com/media/kyuVXoo0Ywh2iY4fxB/giphy.gif)

See you around!
What does the “runs-on” machine type of a GitHub Action mean?
Tags: docker, githubactions, devops, ci
Published: 2021-01-05 13:52:02

---
title: What does the “runs-on” machine type of a GitHub Action mean?
published: true
date: 2020-12-14 15:00:00 UTC
tags: docker,githubactions,devops,ci
canonical_url: https://seankilleen.com/2020/12/what-does-the-runs-on-machine-type-of-a-github-action-mean/
---

Received a really good question recently and I thought I’d post the result here.

## Question

> I’m finally getting the CI pipeline using GitHub actions. When in the YAML file example, it says the build:

```yaml
jobs:
  build:
    runs-on: ubuntu-latest

```

> In our setup for docker we’re using Alpine3.9. Do I change that line to Alpine or is it fine that it’s running on ubuntu for the CI pipeline? Seems like they should match but they only had ubuntu, macOS, and Windows as example options so I wanted to make sure.

## My Answer

The `runs-on` attribute indicates the environment that the GitHub Action itself will run within. You can think of every action as being run within its own little container. It’s the type of machine to run the job on, but the action itself is executed in a container running on that platform so using Alpine for your container is no problem.

In the case of building a container, you’d be using a GitHub Action to build your docker image, likely something like this one: [https://github.com/docker/build-push-action](https://github.com/docker/build-push-action)

That Docker action actually defines a container that it uses as part of the action itself, which would run within Ubuntu. You don’t end up having to worry about that too much other than Ubuntu is the general environment that those containers will run within.

Hope this helps!
Blog App Backend and Frontend Development using Flutter and Node js
Tags: flutter, node, express, mongodb
Published: 2020-12-14 14:58:18

Hi, everyone! I'm thrilled to announce that my first youtube series on 𝐁𝐥𝐨𝐠𝐀𝐩𝐩 𝐝𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 (𝐁𝐚𝐜𝐤𝐞𝐧𝐝 𝐚𝐧𝐝 𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝) have successfully been completed with an amazing response from my viewers. Herein, I discussed the following :
𝟭) 𝗨𝗜 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁(𝘂𝘀𝗶𝗻𝗴 𝗳𝗹𝘂𝘁𝘁𝗲𝗿)
𝟮) 𝗥𝗲𝘀𝘁 𝗔𝗣𝗜 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 (𝘂𝘀𝗶𝗻𝗴 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗷𝘀/𝗡𝗼𝗱𝗲𝗝𝘀)
𝟯) 𝗥𝗲𝘀𝘁 𝗔𝗣𝗜 𝗖𝗼𝗻𝗻𝗲𝗰𝘁𝗶𝗼𝗻 𝘄𝗶𝘁𝗵 𝘁𝗵𝗲 𝗙𝗹𝘂𝘁𝘁𝗲𝗿 𝗔𝗽𝗽
𝟰) 𝗗𝗮𝘁𝗮𝗯𝗮𝘀𝗲 𝗵𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗼𝗻 𝗠𝗼𝗻𝗴𝗼𝗗𝗕 𝗔𝘁𝗹𝗮𝘀 𝗦𝗲𝗿𝘃𝗲𝗿

Besides, I'm attaching the 𝐆𝐢𝐭𝐇𝐮𝐛 𝐫𝐞𝐩𝐨 𝐥𝐢𝐧𝐤 & 𝐭𝐡𝐞 𝐲𝐨𝐮𝐭𝐮𝐛𝐞 𝐩𝐥𝐚𝐲𝐥𝐢𝐬𝐭 𝐋𝐢𝐧𝐤 into the comment section. If you find it useful, then please do like and subscribe to my channel to get updated about further such content.

Also, find the UI of the blog app through the  𝐢𝐦𝐚𝐠𝐞𝐬 𝐚𝐭𝐭𝐚𝐜𝐡𝐞𝐝 𝐛𝐞𝐥𝐨𝐰, wherein all the data are dynamic coming from the rest API from the MongoDB database!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zy4lp5dj3naa5nj45d6y.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n2lqpt1ptfjk83c25vvb.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/amhplpoka8obl8bhsspf.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/84c2nbt36v91iu6148dy.png)
The Easiest & Most Secure Smart Contracts on Bitcoin!
Tags: bitcoin, smartcontract, token
Published: 2020-12-14 14:54:42

Hi Everyone, Great to be here. I wanted to give a call to action for anyone interested in #cryptocurrency, #bitcoin, bitcoin sv, #smartcontracts, #tokenization, #ethereum, #solidity, #immutability, #data, #decentralized #apps, #Dapps and similar topics. My very good friend, and colleague, Dr. Clemens Ley, has created the https://bitcoincomputer.io #javascript, #smart-contract platform, to deploy smart contracts on bitcoin for pennies. We are currently building tons of apps on #vuejs & #react. Come check us out, and start building smart contracts the way #Satoshi envisioned.
Feel free to join our #telegram chat & ask any questions.
https://t.me/joinchat/KH6MAUWRuUl8RZdVkeMMAw
Ag: Collaboration amplifies Negotiation
Tags: leadership, process, agile, manifesto
Published: 2020-12-14 14:49:41

# Collaboration

The process that two or more parties take to maximize common goals.

# Negotiation

The process that two or more parties take to maximize personal gain while minimizing personal losses.

# Collaboration amplifies Negotiation

Improving negotiations results in additive gains.

Improving collaboration results in multiplicative gains.

# Examples

## BigCorp

Any integration comes with extensive Service Level Agreements and specifically detailed functionality, costs and timelines.

There are no risks left in the legalese; but also no growth (because growth requires change, and change is _verboten_). And anyone involved in the real details know the picture painted by these specifications show no resemblence to reality.

## SmallCorp

SmallCorp hates lawyers and contracts. Some of their partnerships have become extremely one-sided, sucking the life out of SmallCorp.

They struggle to convince some of their potential clientele of their capabilities without any concrete promises, but they continue to believe that they should only collaborate with their partners and never negotiate anything.

## SilverCorp

SilverCorp starts relationships with a few clear requirements. And only specifying maximums and minimums to protect one another from unacceptable situations.

After their foundation is set, SilverCorp will change anything else and rework whatever they can to help achieve the goals as new things are learned during their partnership.

# Take-aways

Having too much negotiation wastes time on unimportant and antagonizing details.

Having no negotiation allows exploitation and ambigous, toxic relationships.

So:
1. Keep negotiation brief and high-level; list only the drop-dead absolute dealbreakers
2. Bend head over heels on any other issue to make the relationship successful
A peek at Bloom Filters 
Tags: database, beginners
Published: 2020-12-14 14:39:30

I talked with a peer about a bloom filter and it sounded interesting so I decided to explore further. A bloom filter , not a snapchat filter, is a data structure that prevents expensive queries on a database. In this blog I will talk about the inner workings of the bloom filter that make the bloom filter so efficient. I also have never made a bloom filter nor am I an expertise on bloom filters. This is my understanding of how bloom filters work based on the research I have done. 

#How it's made ?
The bloom filter uses an array to store a one at a certain locations in the array based on the hash value. Remember arrays are zero based indexed so the first bucket will be 0 bits. The hash value will be a number that is less than the the size of the array. Based on the length of the array and the amount of hash functions used will determine the probability of a false positive. A false positive in this case would mean that the bloom filter will return true for a member in the data set when really it isn’t. This happens occasionally. The good news is that it will never give you a false negative. Returning false for a member that’s actually in the data set.
#Visuals 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qjwtke3iyo1u52jx7hqt.png)
Looking at the array you will see 0s and 1s filled in the buckets. Items are hashed and stored in the set. Hash functions will always hash the same inputs to the same values (hash value). In the above picture x, y, and z are present in the data base. We know this by looking at the hash values for the letters which reference where the one will be stored in the array. If there is a one at every location in the array, it will return true. In the case where a member is not in the set like W. When looking at the locations and if zero is the value. The bloom filter will return false immediately. Preventing an expensive query. Sometimes an input value that is not in the database can be hashed to the same value as one that is in the database. This is where returning a false positive can happen. Rarely this happens but determining how many items you want to store and hash functions you want to use before hand will prevent the chances of this happening. 
#Conclusion 
The bloom filter is an approximate data structure because occasionally you can get a false positive. It’s efficient because it checks an array to see if an input item has been there before. If it hasn’t it can immediately return false. This prevents going through the whole data base which can take a lot of time and programmers are all about optimizing time complexity. Many companies use bloom filters like Bing, Medium, and bitcoin. Here is a link on how those companies put the bloom filter to use https://en.wikipedia.org/wiki/Bloom_filter#Examples. Thanks for reading!
WebDiary.io - an entry to Digital Ocean Hackathon
Tags: dohackathon, startup
Published: 2020-12-14 14:39:26

---
title: WebDiary.io - an entry to Digital Ocean Hackathon
published: true
description: WebDiary.io Digital Ocean Hackathon a web app to track day to day activities
tags: #dohackathon #startup
series: [“Building WebDiary.io for Digital Ocean Hackathon”]
//cover_image: https://direct_url_to_image.jpg
---

For a while, I've been going over this idea in my head, wouldn't be nice to replace my paper notebooks with a digital solution? Of course, a notepad++, MS Word, Evernote, RocketBook already exist, but they don't do what I need -- a continuous timeline of day to day activities that I can order by project, client, activity type, and any other categories that will come up. I'd like to able generate reports for my daily stand ups, or just get an idea how the time was spent.

A recently announced [Digital Ocean + Dev.to Hackathon](https://dev.to/devteam/announcing-the-digitalocean-app-platform-hackathon-on-dev-2i1k) is a kick in the butt that I'd needed to start working on this project. At the same time, I can shoot a few proverbial birds too. I want to learn Next.js, improve ReactJs skills, checkout the new Digital Ocean services and try out MongoDb Atlas.

[https://webdiary.io](https://webdiary.io) was born. First, I followed the get started [tutorial](https://nextjs.org) from Nextjs.org. Then, created an App on Digital Ocean and connected it to my code on [https://github.com/webdiary-io/web](https://github.com/webdiary-io/web). I registered a domain name with [https://www.namecheap.com](https://www.namecheap.com). It doesn't get easier than a search/pay/done. Finally, wrote a blog post so that the site does not look too "Hello World". It got Auto deployed on push. Easy!

Next, the plan of attack will be as simple as possible. After all, I only have 4 weeks in this hackathon. 

1. Add authentication & authorization - I think I'll go with Auth0,
2. Create a form to add notes and timestamp them and #tag them,
3. Add ability to search notes by keyword and tags
4. Add ability to generate a report that will be useful for stand-ups (Yesterday, I did...)
5. Add a pie-chart that shows how much time is spent per tag.

This looks like a decent MVP, and I'll be able to accomplish all the items on my wish list.
homestead: The setting 'xdebug.remote_connect_back' has been renamed
Tags: laravel
Published: 2020-12-14 14:34:29

Hello, 

I try to configure xDebug on the homestead,

Now I receive this message when I run `php -v`

````
vagrant@homestead:/$ php -v
Xdebug: [Config] The setting 'xdebug.remote_connect_back' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_connect_back (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_enable' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_enable (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
Xdebug: [Config] The setting 'xdebug.remote_port' has been renamed, see the upgrading guide at https://xdebug.org/docs/upgrade_guide#changed-xdebug.remote_port (See: https://xdebug.org/docs/errors#CFG-C-CHANGED)
PHP 7.4.10 (cli) (built: Sep  9 2020 06:36:14) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Xdebug v3.0.0, Copyright (c) 2002-2020, by Derick Rethans
    with Zend OPcache v7.4.10, Copyright (c), by Zend Technologies

```
How can I fix this ?