teleren/devto huggingface dataset:
Oracle Cloud, Free (Almost) Forever.
Tags: cloudskills, cloud, cloudnative
Published: 2021-07-10 14:24:45

Have you heard?  Oracle has a Cloud service like AWS, Azure, or GCP.   I certainly didn't know about this.  IBM apparently has an offering.  The field is getting crowded.(Clouded?, Clowded?)

Why should you care?  A quick job search for remote Oracle Cloud jobs brings in 2000+ results in Dice.  That's more than any of the big 3 for remote only filter.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2yvsxweyn5mu7k24mtz.png)
 
Clearly, there is demand even if they are the wallflower at the party.  
How do they sweeten the deal?  They have a Free tier which is dubbed Free Always. This includes some offerings for VM instances.  Pretty sweet.
Check out this clever fella and how he scored an impressive VM:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bs2b2zu6c3ti26fz6o9q.png)
There are restrictions on how to get one.  Most are only 1 core and offer only small storage.  But keep an eye out:
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sri3ikd3lvt8ybhj6agd.png)
 In addition, you get $300 credit to experiment.  Also, a lot of deployments are automated.  There is a Jenkins CI/CD rollout that goes super smooth:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u59elqnni00sf70y5hq4.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pht2gi15yda0ggj3vyc4.png)

What you end up with is a pretty neat dashboard with Terraform configs and settings already in place.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr5uanfodqxbjxywcscu.png)
Speaking of Terraform, you are probably wondering what the free tier offering is summarily:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4kj1wzc85xc6na1wz3s.png)
That's right.  2 VMs and Managed Terraform.  If you were looking to add that to your resume this is damn good start.  Devops is hot right now, so here is step one. 

Oracle has some impressive offerings for as relatively unknown as they are.  If you have spare cycles and want a free hobby machine hosted in the cloud, this is a generous opportunity.
Anyone on polywork out here?
Published: 2021-07-09 18:13:18

Is anyone out here on @Polywork?

Polywork is an alternative to LinkedIn and honestly their interface and UI/UX is pretty good!

My Profile is at https://www.polywork.com/afrocoder

I want to connect with new people and network and I have 10 Invite codes if anyone wants to join!

Happy weekend!
Reflections on my portfolio
Tags: beginners, showdev, devjournal, codenewbie
Published: 2021-07-10 12:52:26

---
title: Reflections on my portfolio
published: true
description: 
tags: beginners, showdev, devjournal, codenewbie
//cover_image: https://direct_url_to_image.jpg
---

I was recently tasked with the project of making a personal webpage out of HTML and CSS. [This](https://elloo.github.io/portfolio-2021/) is what I ended up with. The following is a little commentary on what I learned and what I will continue working on, amongst other things. Oh, and here's the [repo](https://github.com/elloo/portfolio-2021) if you're interested in the code. I might add images to this post later on - just gotta find a place to host them.

## 1) What went well? Key Learning.

The stand-out thing for my webpage is the CSS art. I'm lucky that my name almost sounds like a phrase "Ewe (L)in Loo" so I just went with that. Making the art allowed me to learn a lot about `position: relative` and `position: absolute`. I always tend to forget this though - maybe that's a sign that I need to continually be making CSS art.

The second thing I enjoy about this webpage is the sticky navbar. I feel the use of the border styling on the top and bottom ties together the look of the page while providing functionality. It was the first time I've used `position: sticky` before so it was interesting to see it in action.

## 2) What could have been improved?

I had to make the two two-column sections of the webpage in two different ways. Have I written 'two' enough? When I made the first two-column section, I was still in the frame-of-mind to make CSS art. This resulted in a `position`-based layout. For some reason, this wouldn't work on my portfolio section. I have a feeling it has something to do with the positioning of the other elements. With a time restriction, I had to quickly find a way to get the layout looking the way I wanted. That's where `display: flex` and flexbox came in.

I also wanted to make the back-to-top button sticky at the bottom, however couldn't figure this out. I guess the webpage is pretty short anyways so maybe this would have been redundant.

Lastly, there are some small gaps between the navbar and its borders. I'm not sure why.

## 3) The key take aways.

One of the key take-aways would be not to underestimate how long it will take to code something. You never know when things won't function the way you expect them to so you should always have your priorities straight.

## 4) The process you followed?

I started out by creating the CSS piece that's seen on loading the page. I knew I wanted to have something to make my page stand-out and I had this idea of turning my name into a pun. From there, the order of completion was the about section, footer, and portfolio. All throughout the way, I tried to remember to make frequent commits. I only pushed right before I was going to take a break from coding. It was very satisfying to be able to see my changes live.

Anyways, I hope my little project gave you a bit of a laugh. Let me know if there's anything else you'd like me to talk about or show me your own portfolio in the comments!
Git Learning Materials
Tags: github
Published: 2021-07-11 08:11:04

Thanks, Everyone

For being part of the series ***From Git to GitHub***.  This is the 4th and the last **Blog of the series**.
In this blog, I will give you various resources to learn, apply, read about Git and GitHub.

## Install Git
-  [Git](https://git-scm.com/).
 
## Youtube Playlists to Learn Git

-  [The Net Ninja](https://youtu.be/3RjQznt-8kE) .
-  [Traversy Media](https://youtu.be/SWYqp7iY_Tc). 
-  [Tech with Tim](https://youtu.be/SWYqp7iY_Tc).


## Reading Resources
 
-  [Git](https://git-scm.com/).
-  [W3School/Git](https://www.w3schools.com/GIT/default.asp)  .
-  [MDN docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/GitHub) .


## Open Source Contribution
-  [First contribution ](https://github.com/firstcontributions).
-  [Up for Grab](https://up-for-grabs.net/#/).
-  [DRY](https://github.com/danthareja/contribute-to-open-source/issues/1).
-  [TEAMMATES](https://github.com/TEAMMATES/teammates/contribute) .

## Books
-  [Pro Git Book](https://git-scm.com/book/en/v2).

## Cheatsheet
-  [Git Cheatsheet](https://gitcheatsheet.org/).
-  [Cheathsheet by GitHub](https://education.github.com/git-cheat-sheet-education.pdf).

## Step by Step Method
-  [Learn How to use Git](https://www.deployhq.com/git). 

**Thanks again** for being part of the series. And don't worry Git is not that difficult as it seems also you have to not learn everything there are only 10-15 commands that you will use mostly throughout your life.

There are more informative and interesting blogs to come. So stay tuned. 

Until then **Keep Learning, Keep Growing**

<h2>Connect with me 👇 </h2>

Twitter|LinkedIn|Gmail|DEV
-------|---------|------|--------
 <a href="https://twitter.com/Vanshsh2701" target="_blank"><img src="https://img.icons8.com/clouds/60/000000/twitter.png"/></a>|<a href="https://www.linkedin.com/in/vanshsharma27/" target="_blank"><img src="https://img.icons8.com/bubbles/60/000000/linkedin.png"/></a>|<a href="mailto:vanshsharma9354@gmail.com" target="_blank"><img src="https://img.icons8.com/clouds/60/000000/gmail.png"/></a>|<a href ="https://dev.to/vanshsh" target="_blank"><img src="https://img.icons8.com/office/50/000000/blog.png"/></a>
Yabai - Toggle Window
Published: 2021-07-12 14:02:32

Window Management is no doubt the most boring stuff that no one wants to be doing. I used to have various shortcuts and hot corners set, to size up/down the window as needed. [Magnet](https://magnet.crowdcafe.com/), [Moom](https://manytricks.com/moom/), [Spectacle](https://www.spectacleapp.com) were amongst the few that i used. Then i discovered [Yabai](https://github.com/koekeishiya/yabai), it blew my mind off. You no longer need to remember all the crazy shortcuts. The windows are neatly tiled for you to work on and as a bonus those handful of not needed shortcuts could now be used for other important actions.

Yabai automatically partitions your windows using Binary Space Partitioning. There are lot of tutorials dedicated to configure and setup Yabai. I would suggest you go look into it first. Along with Yabai please do look into [SKHD](https://github.com/koekeishiya/skhd), this helps you setup the hotkeys to manipulate the Yabai calls. 

Now, lets say you are comfortable with Yababi and it's inner workings including SKHD, I would like to share a small snippet that i use all the time to quickly float and toggle the size of the window with just a single shortcut. 

##### resize.sh
```
#!/bin/sh

	xpt=$(yabai -m query --windows --window | jq -re '. | .frame.x')

	_log() {
		terminal-notifier -message $1
	}

	_big() {
		yabai -m window --grid 16:32:4:2:24:12
		_log 'big'
	}

	_medium() {
		yabai -m window --grid 16:32:6:2:20:12
		_log 'medium'
	}

	_small() {
		yabai -m window --grid 16:32:8:3:16:10
		_log 'small'
	}

	[[ $xpt -gt 481 ]] && _small
	[[ $xpt -le 481 && $xpt -gt 361 ]] && _medium
	[[ $xpt -le 361 && $xpt -gt 241 ]] && _big
	[[ $xpt -le 241 ]] && _small
```

Query the current active window to retrieve the window coordinates. It uses jq to parse the JSON output that the yabai command spits out. `xpt=$(yabai -m query --windows --window | jq -re '. | .frame.x')`

Yabai uses the grid system to understand the window size. I have defined a small window as follows `yabai -m window --grid 16:32:8:3:16:10`.

Define various reference points as the x  coordinates (xpt) to anchor the size of the window. Eg. in my setup the small window size falls exactly at the 481 pixel points. Use the range to define the toggle that cycles between big, medium and small. 

```
	[[ $xpt -gt 481 ]] && _small
	[[ $xpt -le 481 && $xpt -gt 361 ]] && _medium
	[[ $xpt -le 361 && $xpt -gt 241 ]] && _big
	[[ $xpt -le 241 ]] && _small
```

Now, the final part to trigger this shell script, i have assigned a hot key combination with skhd as follows `ctrl + cmd - c : ~/bin/resize.sh`. You need to add this to your skhdrc (configuration file for SKHD).

This is a small inspiration and there are much more to play around with this amazing window tiling manager.

## References
- [yabai](https://github.com/koekeishiya/yabai)
- [skhd](https://github.com/koekeishiya/skhd)
- [jq](https://github.com/stedolan/jq)
- [terminal-notifier](https://github.com/julienXX/terminal-notifier)
Adding Social Media icons in HTML
Tags: beginners, html, webdev
Published: 2021-07-13 05:42:38

If you are new to web development, you might have wondered how to add social media icons to your website to help expand its reach and connectivity. I figured out just few days ago-

There are various options, but I used a popular toolkit called Font Awesome.

####Step 1:
To get started, open the link below-
https://fontawesome.com/
####Step 2:
Click on start for free and enter your email id to receive a kit code. You will receive an email for confirmation and setting up your account. 
####Step 3:
![pic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egmslymhzbo72te7hcb8.png)
You will be greeted with a kit code, which needs to be copied and pasted in the head section of your HTML.
####Step 4:
You can now browse to any icons on the Font Awesome webpage. Select the icon you wish to use and copy the associated HTML code. You can use this code in your HTML page and would be able to see the icon that you wished to.


To increase or decrease the size of the icon you can just manipulate your code a little.
```
<i class="fab fa-twitter"></i>
```
The size of the above icon can be enlarged by -
```
<i class="fab fa-twitter fa-5x"></i>
```
or 
```
<i class="fab fa-twitter fa-6x"></i>
```

Hope you get the idea!!!!
Deploy to Azure Kubernetes (AKS) from Azure DevOps with Azure Pipelines
Tags: azure, azuredevops, aks, kubernetes
Published: 2021-08-02 01:24:32

Do you want to __Deploy to Azure Kubernetes (AKS) from Azure DevOps__, but you don't know where to start? This is for you! 

In this live streaming, part of the "_Build Live with Me_" series, I'm going to deploy an application to Azure Kubernetes Service (AKS) via Azure DevOps using Azure Pipelines from scratch, live!

You will learn how to set up the __integration with AKS__, and how to __deploy everything__ to Kubernetes in Microsoft Azure using Azure Pipelines.

{% youtube 4Oa5HneTuKs %}

[Link to the video: https://youtu.be/4Oa5HneTuKs](https://youtu.be/4Oa5HneTuKs)

See you there!

__Like, share and follow me__ 🚀 for more content:

📽 [YouTube](https://www.youtube.com/CoderDave)
☕ [Buy me a coffee](https://buymeacoffee.com/CoderDave)
💖 [Patreon](https://patreon.com/CoderDave)
🌐 [CoderDave.io Website](https://coderdave.io)
👕 [Merch](https://geni.us/cdmerch)
👦🏻 [Facebook page](https://www.facebook.com/CoderDaveYT)
🐱‍💻 [GitHub](https://github.com/n3wt0n)
👲🏻 [Twitter](https://www.twitter.com/davide.benvegnu)
👴🏻 [LinkedIn](https://www.linkedin.com/in/davidebenvegnu/)
🔉 [Podcast](https://geni.us/cdpodcast)

<a href="https://www.buymeacoffee.com/CoderDave" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 30px !important; width: 108px !important;" ></a>
Cache me if you can 🏃 
Tags: http, browser, cache, swr
Published: 2021-08-02 09:47:00

---
title: Cache me if you can 🏃 
published: true
description:  A Guide to keep your cache fresh as a daisy with stale-while-revalidate
tags: http, browser, cache, swr
cover_image: https://askleo.askleomedia.com/wp-content/uploads/2013/11/cache.jpg
---
##  A Guide to keep your cache fresh as a daisy with stale-while-revalidate

Today, we are going to talk about an additional tool to help you maintain a fine balance between instancy and freshness when delivering data to your web applications.

RFC5861 states two independent Cache-Control extensions that allow for the cache to respond to a request with the most up-to-date response held.

1. The `stale-if-error` HTTP Cache-Control extension allows a cache to return a stale response when an error such as Internal Server Error is encountered, rather than returning a hard error. This improves availability.

2. The `stale-while-revalidate` HTTP Cache-Control extension allows a cache to immediately return a stale response while it revalidates it in the background, thereby hiding latency (both in the network and on the server) from clients
In this blog, we will be talking more about the stale-while-revalidate HTTP header. The basic idea of this header is to reduce the latency of serving cached content by your web browser to your application and have a refresh mechanism via which the browser itself updates its cache.


A `stale-while-revalidate` is used inside a cache-control header along with max-age.
For example, if a server response for content include - 
```
Cache-Control: max-age=60, stale-while-revalidate=10
```
would mean that if any request to the same endpoint is made within the next 60 seconds, the browser will serve the cached content with no further actions. But if any request is made anywhere between 60 to 70 seconds after the initial response, the browsers will not only serve the cached content but also at the same time in the background will fire a re-validation request to the server to update the content of its cache. 

The further request will follow whatever Cache-Control header is returned during the re-validation request.  

![image](https://lh3.googleusercontent.com/-_x3BS-A25E8/YQbeRYmWluI/AAAAAAAAPTo/bCEJHRk_WVIL50z2Z3EMNtIf9SqYJBO6gCLcBGAsYHQ/w640-h136/image.png)

## Usage:

As of 2021, all modern browsers do not support the HTTP implementation of stale-while-revalidate. But the good news is similar implementations are available using [service workers](https://developers.google.com/web/tools/workbox/modules/workbox-strategies#stale-while-revalidate), and in case you really do not want to deal with service workers, then there are popular libraries such as [swr](https://github.com/vercel/swr) which implements something along similar lines and you could use it in your react project using custom fetchers such as axios, unfetch and so on.
How to Create an AR Measuring Tape App in 15 Minutes or Less [Tutorial]
Tags: tutorial, augmentedreality, programming, unity3d
Published: 2021-08-02 12:41:57

Here’s an easy demo for creating a simple measurement application (i.e., AR ruler app or tape measurement app) using AR Foundation, Unity, and echoAR. Tested on Android devices. The full demo can also be found on echoAR’s [GitHub](https://github.com/echoARxyz/Unity-ARFoundation-echoAR-demo-Measurement-with-AR).

![1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627907806331/80Jawzo8R.png)

## Register

If you don’t have an echoAR API key yet, make sure to register for FREE at [echoAR](https://console.echoar.xyz/#/auth/register). 

## Setup

* Clone this repository for prefabs,scenes and custom scripts.
* Open the project in Unity and follow the instructions on our  [documentation page](https://docs.echoar.xyz/unity/adding-ar-capabilities) to [set your API key](https://docs.echoar.xyz/unity/adding-ar-capabilities#3-set-you-api-key).
* Set your echoAR API key in the echoAR prefab
* Add models to your echoAR project

## Run
* [Build and run the AR application](https://docs.echoar.xyz/unity/adding-ar-capabilities#4-build-and-run-the-ar-application).

![2.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1627907892853/ydmVtDVLI.jpeg)
You can measure real-life objects!

## Usage Instructions:

The app has two modes:
* Object Placement mode, which allows you to place an EchoAR object on any plane
* Measurement Tape mode, which allows you to drag your finger between any two points on a plane to create a measurement.
* You can easily switch between modes by clicking on their respective buttons in the UI.
* Note that because both modes depend on plane detection, it may take a few seconds to move your camera around before the plane you are trying to measure may register.
* Remember: if the placed Object is too large, you can modify the scale of the object in the EchoAR console (see https://docs.echoar.xyz/unity/transforming-content)

![33.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1627908041182/1M79Rfeew.jpeg)

You can measure custom AR objects!

## Learn more

Refer to our [documentation](https://docs.echoar.xyz/unity/) to learn more about how to use Unity, AR Foundation, and echoAR.

## Support

Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack](https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

****

> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1627907994496/rwSHGGzFa.png)
Enhance your skills in Html Css and Js ?
Tags: challenge, javascript, html, css
Published: 2021-08-19 19:57:31

Top 10 website where you can enhance your Html,Css and JS skills.

**1. [Css Battle](https://cssbattle.dev/)** 
![Css Battle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yc2keopwhzagdhafuik.jpg)

**2. [100days of css](https://100dayscss.com/)**
![100daysofcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39osochigwrhjya09wy3.jpg)
**3. [30 days of Js](https://javascript30.com/)**
![30 days of Js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ivt775276ntr4b70dqe.jpg)
**4. [Css Challange](https://css-challenges.com/)**
![Css Challange](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6w5wkd2zq223xnk1lsd1.jpg)
**5. [30days of tailwindcss](https://30daysoftailwindcss.com/)**
![30days of tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f01xsq6mefdajvvml0si.jpg)
**6. [Frontendmentor](https://www.frontendmentor.io/challenges)**
![Frontendmentor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9hekckvs3v5pzlnuavw.jpg)
**7. [Piccalil](https://piccalil.li/category/front-end-challenges-club/)**
![Piccalil](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fdzlhaxsinn4z8ngr06.jpg)
**8. [Ace Frontend](https://www.acefrontend.com/)**
![Ace Frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzas459xcsvroyhjhwtw.jpg)
**9. [Codier](https://codier.io/)**
![Codier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8bhfxc5ozcrgygftxuo.jpg)
**10.[1HTMLPageChhallenge](https://onehtmlpagechallenge.com/)**
![1HTMLPageChhallenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxijnrj6qxup6pvpaked.jpg)
###Thank you so much for reading 💖
{% user buddhadebchhetri %}
Failed to resolve plugin for module @react-native-firebase/app
Tags: reactnative, firebase
Published: 2021-08-02 20:14:40

---
title: Failed to resolve plugin for module @react-native-firebase/app
published: true
description: Debug Error in React Native and Firebase 
tags: #reactnative #firebase
cover_image: https://images.app.goo.gl/6RmkEkTiphKWdBKo9
---

#Remove @react-native-firebase/app
Remove @react-native-firebase/app from node_modules using *Yarn remove @react-native-firebase/app or npm remove @react-native-firebase/app*

##Delete @react-native-firebase/app from App.json
The End.
[Android Dev] Add Google Maps Quick and Dirty
Tags: android
Published: 2021-08-03 00:05:54

Sometimes we just want to add a Google Maps activity into a proof-of-concept or just a test project.

We want **less overhead** of making it well engineered.
We just want to **get it running**.

---

## Use the Preset
The easiest way to get started on Google Maps is to use the preset Google Maps activity.

This is a template that adds the code to insert a Google map video into your app.

The code here is functional so you don't have to do too much to get it working.
[The documentation](https://developers.google.com/maps/documentation/android-sdk/get-api-key) is very easy to read and the steps are few.

---

## Starting from nothing
1. You'll need to set up [Google Cloud console](https://developers.google.com/maps/documentation/android-sdk/cloud-setup).

2. Create a new project inside the Google Cloud console. [Enable the Google Maps platform credentials](https://console.cloud.google.com/project/_/google/maps-apis/credentials)

3. Copy and paste the API key into the metadata tag in the Android manifest. 

```
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="MAPS_API_KEY" />
```

---

## Gotchas

- The Google Maps template activity uses view binding which can be confusing for new users.

- The way we handle the API key is not very secure since we are directly adding it into our manifest file.