teleren/devto huggingface dataset:
Feeling like VAR in a LET (it go) kinda world.
Tags: codenewbie, beginners, bootcamp, javascript
Published: 2020-10-05 14:55:05

I've just scraped by Week 3 of web dev [coding bootcamp](www.theknowledgehouse.org), and it feels like the moment that I set my intention on embarking on this new learning journey, the Universe has been sending a whole slew of new hurdles and distractions along my pathway.  

From the tumultuous experience of _moving into my first NYC studio apartment_ while simultaneously juggling acclimating to a new environment and attempting to set healthy routines, to navigating the conflicting internal emotions of an _unexpected loss_ and being physically and emotionally available for family and loved ones -- I can assert that the past 4 weeks have been the most eventful in this post-COVID world. _(I've finally dusted off my mainly unused 2020 planner and flipped through all of the blank template pages to October!)_

Last week, we learned about **conditionals and debugging in JS**, as well as **loop iterations using for and while**.  

While learning about the dark perils of endless debugging, I found it interesting that many peers and my instructor in the cohort were discussing the **80/20 rule** of debugging, which states that _"Coding is 80% Google Search, and 20% knowledge"._  

While this may be true, I also learned that you must also **know WHAT information to search for and use on Google**, as I learned this sobering lesson from my coding instructor via our team #slack channel;

#"I will no longer be accepting assignments that use `VAR`. We need to `LET` go of `VAR` and use `LET` and `CONST`."#   
 
Now this unsettled me for a bit, because a large amount of the online resources that I've been practicing with, including FreeCodeCamp, posts I've referenced and copied on StackOverflow, and physical books _(yes, I'm still old-school and prefer real tangible books over digital devices.)_ that I've purchased on JavaScript, all use VAR.  

I was confounded... How is it that I've just started and the information that I've been learning from, is already out of date? 

My instructor shared with us that languages are always evolving, and although physical books may be helpful for a season, it's important to get in the habit of referencing digital documentation and digital living textbooks.

I now understand that `let` can be used for global and local variables, and `const` can be used for variables that are not going to be manipulated or changed (i.e. `const pi = 3.14159;`)

It got me thinking on a broader scope of my life in general, I have a choice. I can either be bitter and complain about new technology and be stuck in my ways, or I can be flexible, open and adapt to the ever evolving and changing climate of tech. 

I decided... it's time to `LET` it go.
I created a tiny npm package which helps manipulate transparency of a css color.
Published: 2020-10-05 14:52:21

Hello 👋

Let me introduce you to [with-alpha-hex](https://github.com/tars0x9752/with-alpha-hex), A tiny TypeScript/JavaScript library which helps change/add alpha(opacity) of a css hexadecimal color.

## 🤨 What is this?

This is a library for those who use CSS-in-JS and prefer to use `#RRGGBB[AA]` style css color rather than functional notation color such as `rgb()` or `hsl()` and want to make the alpha channel dynamic.

There are plenty of color manipulation library but most of them output functional notation colors(Especially when using alpha).

## 🤔 Ok, How to use then?

It's fairly simple. :) A quick instruction goes below.

## 💻 Installation

```sh
npm i with-alpha-hex
# or
yarn add with-alpha-hex
```

> The library is TypeScript-ready and has zero-dependency. :)

## 🎈 Usage

```ts
import { withAlphaHex } from 'with-alpha-hex'

const textColor = '#000'

const weakTextColor = withAlphaHex(textColor, 0.4) // #00000066

const primaryColor = '#14B1AB'

const weakPrimaryColor = withAlphaHex(primaryColor, 0.2) // #14B1AB33
```

## Wait, what are those 8-digit hexadecimal color thingy?

In CSS Color Module Level 4, You can use `#RRGGBBAA` color which has an alpha channel value.

![sample](https://user-images.githubusercontent.com/46079709/95020082-ee288180-06a3-11eb-822c-eab34d01d5be.png)

## ✨ With Styled-JSX

```tsx
import { withAlphaHex } from 'with-alpha-hex'

// ~~~~

const RandomComponent = () => {
  return (
    <div>
      <p className="random-text">{text}</p>
      <style jsx>{`
        .random-text {
          color: ${textColor}
          background: ${backgroundColor};
        }

        .random-text:hover {
          background: ${withAlphaHex(backgroundColor, 0.2)};
        }
      `}</style>
    </div>
  )
}
```

That's it!

Cheers. :)
Day 22 - My First Open Source Pull Request
Published: 2020-10-05 14:47:13

For Hacktoberfest, I submitted a snippet and pull request to 30 Seconds of Code, Javascript & CSS. This is officially my first two attempts to open source contribution! Regardless of whether or not it will be approved, the experience broke the block I had with contributing.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2lfea386n6qsqa03gim8.png)
<figcaption>Update: Got a duplicated flag on this one. Whoops</figcaption>

## What I Learned
It is a lot easier to submit a PR than I originally thought. I was equating contributing code to walking into someone else' house. It is no where near like that.

## How This Will Help Me
I have always wanted to try open source contribution, so this is encouraging for me!
Common Mistakes when Beginning Rails
Published: 2020-10-05 14:37:49

 Several steps can go wrong when setting up a new rails api.  This article will hopefully help debug issues that may arise.

 Often when learning any new coding material, example variables like 'project name' are written with with brackets on either side.  This is a reminder not to include those brackets.  File and repository names can also be easier to reference without typos if they do not contain spaces.  The example code below to create a new rails project would be written in the following way:
`$ rails new <project name> --api --database=postgresql`
`$ rails new project_name_api --api --database=postgresql`
By including 'api' in the project name we know that this repo only contains our back end and is separate from the frontend.

 Next we will talk about creating our migrations and models.  There are several pieces of information that go into creating a new model, the Name, attributes, associations, and more; these three will be discussed here with examples.  Our example will be a Teacher model that has_many assignments and a joiner model Assignment that belongs to both a Teacher and Student. 
*'g' is short for 'generate', either can be used here; I will be using 'g'.*
**Teacher --< Assignment >-- Student**

`$ rails g model Teacher name:string`
* the model name 'Teacher' is always capitalized
* if attribute type (name is a string) is not given, then the attribute type will default to a string.  Thus the above code could be written as:
`$ rails g model Teacher name`
* A Teacher has_many Assignments, however this is not the place to include has_many. **Do NOT** include something like 'assignments:has_many' in this console command.  has_many associations only go in the 'app/models' folder.

`$ rails g model Assignment name:string teacher_id:integer student_id:integer`
**OR**
`$ rails g model Assignment name:string teacher:belongs_to student:belongs_to`
* For our Assignment model either of these will work.  The associations can be written either as `teacher_id:integer` or with the `teacher:belongs_to` macro which will generate a foreign_key as an integer.  The functionality is the same, but the result will look different in the migration folder.  If both are included in the console command, the error `ArgumentError: you can't define an already defined column 'user_id'` will appear when you run db:create and you will not be able to make a 'db/schema' folder or seed any data.

After this, you will put the associations `belongs_to :teacher` and `belongs_to :student` in the 'app/models' Assignment file.
✨ Flatify-obj: Flatten nested objects into a single-depth object.
Tags: showdev, github, javascript
Published: 2020-10-05 14:26:18

**✨ Flatify-obj** is a simple module that flattens nested javascript objects into a single-depth object.

{% github rocktimsaikia/flatify-obj no-readme %}<br>

This module can come in pretty handy in situations where you are dealing with deeply nested objects.

## Installation
```sh
npm install flatify-obj
```

## Usage
```js
const flattenObject = require('flatify-obj');

flattenObject({foo: {bar: {unicorn: '🦄'}}})
//=> { 'foo.bar.unicorn': '🦄' }

flattenObject({foo: {unicorn: '🦄'}, bar: 'unicorn'}, {onlyLeaves: true});
//=> {unicorn: '🦄', bar: 'unicorn'}

```<br/><br/>
[ PS: I created this tool to use it in a project that I am working on. I thought someone might find it handy so made a quick post. Leave a star at [the repo](https://github.com/RocktimSaikia/flatify-obj) 🌟 if find this helpful. Thanks for reading 🦄 👋]
CONTRIBUTING: Tomáš Herceg on DotVVM
Tags: opensource, hacktoberfest, opensourceoctober
Published: 2020-10-05 14:01:26

> Leading up to (and during) the month of October, we want to help you discover open source projects to work on, and put your Hacktoberfest contributions to excellent use. Meet Tomáš Herceg, who works on [DotVVM](https://www.dotvvm.com/).   
> ######*Check out [this page](https://www.contributing.today/) regularly for more interviews with contributors & maintainers*######

DotVVM is an open source framework for ASP.NET and allows you to build web applications using the [Model-View-Viewmodel](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel) approach. 

**What can you tell us about your project?**
DotVVM can be used for building new web apps on ASP.NET Core, as well as for modernizing old .NET applications, built for instance in ASP.NET Web Forms. Without rewriting anything, you can take you old app, install DotVVM on it and incrementally modernize it until you get rid of all the Web Forms bits and you're able to migrate it to .NET Core. 

**What contributions are you welcoming?** 
We're open to all kinds of contributions, it doesn't need be to the framework itself. Please try the framework, try writing a sample application, publish it on GitHub. Or maybe write a blog post on it and get the word out! You can give us feedback, fix typos in the [Docs](https://www.dotvvm.com/docs/tutorials/introduction/latest), there is a lot of things you can do to help the project.

We have a [CONTRIBUTING file](https://github.com/riganti/dotvvm/blob/master/contributing.md) in our repo that lists the types of contributions we're looking for.

**What skills do people need to contribute?**
DotVVM is using C# heavily, so some knowledge of C# and the basics of web development - like HTML and CSS - are useful to get started. 

We also have the [Academy project](https://academy.dotvvm.com/) which should help you get started even if you don't know C# that well.  

If you want to contribute to the framework, there are also bits that use Typescript, Selenium for UI testing, and other tech.

**How do folks get started?**
The best thing to do is to go to our [GitHub repo](https://github.com/riganti/dotvvm), find the CONTRIBUTING file, and find the link to our chat. The team is available for questions in that Gitter chat. 

*Check [contributing.today](https://www.contributing.today/) regularly for more interviews with contributors & maintainers, as well as online events to help you get involved in open source.*
I made my first svg animation!
Tags: codepen, showdev, css, webdev
Published: 2020-10-05 14:01:03

{% codepen https://codepen.io/brew-install-buzzwords/pen/bGpmOGV %}

I decided to try out SVG animations, so I started by animating the logo for my blog.

Here's a few quick things I learned along the way:

* You can animate SVG elements with CSS just as you would with any other HTML element
* If your animation doesn't fit in the original viewbox, you can [adjust the width, height, and offset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox)
* When rotating a path, you need to specify which point you want the path to rotate about.

## More content

If you liked this, consider [subscribing to my newsletter](https://mailchi.mp/89dc077154c7/brewinstallbuzzwords) or reading one of my other posts:

* [Changing Emoji Skin Tones Programmatically](https://dev.to/brewinstallbuzzwords/changing-emoji-skin-tones-programmatically-4667)
* [5 tips for publishing your first npm package](https://dev.to/brewinstallbuzzwords/5-tips-for-publishing-your-first-npm-package-3e4a)
* [4 Hugo Beginner Mistakes](https://dev.to/brewinstallbuzzwords/4-hugo-beginner-mistakes-90h)
* [Introducing meme-type: A translator for internet speak](https://dev.to/brewinstallbuzzwords/introducing-meme-type-a-translator-for-internet-speak-i6a)
Copy values in FormAssembly HTTPS Connector
Tags: formassembly, forms, javascript
Published: 2020-10-05 13:56:06

FormAssembly's HTTPS Connector is a little dopey when it comes to drop-down values-- they really need a button in here that lets you copy everything from the left column to right. But until we have that, we can use some jQuery to copy it in the Inspector.

![Before: values in the left column](https://dev-to-uploads.s3.amazonaws.com/i/2aynwqukujpch3z3vcwg.png)

```js
(function ($) {
	"use_strict";

	$('pick-tfa_## .picklist td:first-child').each(function (index) {
		var value = $(this).text();
		$(this).next().find('input').val(value);
	})

}(jQuery));
```

![After: values in the right column](https://dev-to-uploads.s3.amazonaws.com/i/hsawqr5yzn6fnb9xhtkx.png)
Codemap.io - world's first no-code freelance marketplace
Published: 2020-10-05 13:51:51

Hi all 👋 just a quick update:

I wanted to thank all of you who signed up to our marketplace, the response in the first 48 hours was absolutely amazing. Tons of signups from both freelancers/ agencies and clients, which clearly shows that there is an increasing demand for no-code services, and of course, how strong the no-code community is 💪💪💪

I will keep you updated on major developments, and in the meanwhile feel free to share your thoughts and feedback on the app (we have implemented a few slight changes already) - your feedback is, of course, invaluable to us but also helps us create the product that the whole community finds useful and benefits from. 

Cheers!
Despite fewer users, the App Store revenue is nearly twice as large as Google Play
Published: 2020-10-05 13:51:27

Today it is known that the Android system is the dominant system in the field of smartphones around the world with control of nearly 85% of the market, but despite this major control that suggests that the revenues of the Google Play Store are greater than its competitor, the App Store, the reality appears different as that IPhone users spend a lot more money on apps than their Android counterparts.

 

According to the data of the current third quarter of 2020, it seems that the revenue of the App Store for Apple products continues to grow, as the store earned 19 billion US dollars in revenue, about twice the Google Play Store revenue of 10.3 billion US dollars during the same time period.

Although the returns of the two stores seem completely contradictory in terms of revenues from each user (users of the Play Store are many times more, but they spend much less money), in reality there is significant and remarkable growth for each of the stores in reality. Compared to a year ago, App Store revenue increased by 31%, while Play Store revenue increased slightly more than 33%, as total store revenues increased from about $ 22.2 billion to $ 29.3 billion in the third quarter that ended only days ago.

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

In terms of total revenue, the list of the most revenue-generating apps included predictable names such as YouTube, Tinder, and Netflix, in addition to others like TikTok, which continues to thrive despite banning threats, and Disney +, which has been experiencing significant growth since its launch months ago, as well as BIGO Live and the storyboard app. Japanese (manga) Piccoma.
Best Web Hosting Services
Published: 2020-10-05 13:49:56

Now, more than ever, you need a website for your business. It will allow you to reach your customers and drive new leads and sales amidst the lockdowns. You see, if your customers are still buying, you want them to buy from … err… you. And this is where good web hosting services come in. You want a web hosting company that stands by you during these perilous times. No drama, just results.Today, we’ve assembled the [best web hosting service providers](https://launchberg.com/best-web-hosting-services/). They include:

HostGator
Bluehost
Namecheap Web Hosting
GoDaddy web hosting
InMotion Hosting
Hostinger
A2 Hosting
Hostwinds
GreenGeeks web hosting
DreamHost
How to Setup Odoo via Docker
Tags: odoo, docker, ubuntu
Published: 2020-10-05 13:34:07

Docker is an application-level deployment tool that permits the developers and users to form, deploy, run and maintain their applications by using containers. These containers enable the developers to integrate various parts of their software developing packages/tools/environments/libraries into one instance. By doing this, developers can run their applications within the other environment without worrying of their dependency variations. 

Docker behaves kind of a virtual machine. By using Docker functionalities with Odoo 13, the user doesn’t get to stress about the dependencies, packages then forth. Just consider the Odoo image. Odoo has all the required packages and libraries within this image. Thus, Docker makes things easy for both developers and end-users. Let’s explore the key steps to put in Odoo 13 via Docker.

In this blog, I have explained how you install Odoo Using Docker. It is as simple as making a cup of tea.

The docker engine is only suitable for the 64bit operating system. Install Docker in Ubuntu 18.0.4

Make sure that the machine's CPU supports virtualization technology and virtualization support is enabled in BIOS.

Read more > [How to Setup Odoo via Docker](https://www.techultrasolutions.com/blog/our-blog-2/post/how-to-setup-odoo-via-docker-5)
Odoo Rental Management System
Tags: odoo, opensource, webdev
Published: 2020-10-05 13:28:27

With new business and novel products coming to the market every day , the demand for production machinery and services are hiking like never before. The new business firms and established ones are venturing into new streams of products and services and considering economic and methodical reasons, buying and stocking every manufacturing equipment or services isn't practical. ‘Renting’ is the ample solution for this. a replacement market has emerged for the rental of products and services nowadays. For business firms getting to establish a subsidiary rental business and also those that have established it within the past, Odoo v13’s featured Rental module may be a boon.

This app will work for all types of Rental business/Industry. you'll use this app to rent any quiet Products/Items, Home, Car, Bike, Service on Rent, AC, TV, Office Rent, and lots of more... It's made as generic so it can fit all industries.

Now let’s take a glance at the overall workflow and therefore the operational process of the Rental module.

Features:
1.User-friendly Interface experience; easy to configure and use. 
2.Minimal Data entry requirement; process your task with less data entry and a couple of selections.
3.Gantt chart provisioned schedule.


Now before stepping into the functionality of the Rental module, one must develop skills to assign different products to be rented. For that;

Read More > [Odoo Rental Management System] (https://www.techultrasolutions.com/blog/our-blog-2/post/odoo-rental-management-system-9)
How to Automate OTP using JavaScript
Tags: testing, javascript, otp, tutorial
Published: 2020-10-05 13:27:10

Automating One Time Password (OTP) is always a bit challenging as you need to work with a third-party service to send/receive messages. Let's take a look at how we can do that...

### ⚙️ **Dependencies**
- [WebdriverIO](https://webdriver.io/): browser automation framework *(can be replaced with any other JS browser automation framework)*
- [Twilio](https://www.twilio.com/): to generate a temporary phone number and receive SMS
- [GitHub](https://github.com/): example site to test OTP on

### **In this video, we will cover step-by-step how to automate OTP using JavaScript:**

{% youtube qqcxfljRy6s%}

You can also clone the [GitHub repo](https://github.com/automationbro/webdriverio-quick/blob/master/test/specs/otp.js) to access this code

***

#### To learn more about WebdriverIO, check out my free tutorial series here - 
https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV&ab_channel=AutomationBro
***

Happy testing! 😄 

...

Subscribe to my [YouTube](https://www.youtube.com/channel/UCjugV5pnY6WjvTGYm7U1ucg?sub_confirmation=1) channel
Support my work - https://www.buymeacoffee.com/automationbro
Follow [@automationbro](https://twitter.com/automationbro) on Twitter
Day 81: My Vue Component
Tags: 100daysofcode, vue
Published: 2020-10-05 13:25:02

I made a component in Vue that does nothing important. The steps in summarry:

* Created an Vue instance in `index.js`
```javascript
new Vue({
  el: '#app',
  data: {
    days: ['Mon', 'Tue', 'Wed', 'Thur']
  }
});
```

* Defined a component in `index.js`
```javascript
Vue.component('card', {})
```
Side note: Single word component names are not a good practice.

* Defined a template in `index.html`
```html
<script type="text/x-template" id="card-template" >
  <div class="card">
    <p id="nextDay"> {{day}} </p>
    <div class="innerCard"></div>
  </div>
</script>
```
* Used a CSS selector to access the template in `index.js`
```javascript
Vue.component('card', {
template:'#card-template'
})
```
* Created a prop in `index.js`
```javascript
 props: {
    day: { 
      type: String,
      required: true
    }
  }
```

* Looped through the data in the Vue instance in `index.html`
```javascript
  <div id="app"> 
    <card v-for="day in days" :day="day"> 
    </card>
  </div>
```
Output
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4q3d9l4kujd83hzooeum.png)

_Day 81 Done and dusted_
5/10 Oh well problems
Tags: beginners, frontend, problems
Published: 2020-10-05 13:19:34

5/10

sobss..spent more time trying to fix the problem than following through tutorials. I hope this is normal😥,personal learning aside. I had a tiny unpleasant experience today, I'm not sure if they are looking down on UIUX Designers. X said I just dragged the UI placement which is so easy to do compared to X's job. Oh well, I'm aware of that, I understand a little as now I have begun learning myself. Maybe the world is a realistic place, maybe it wasn't intended, I'll let it go.

For every problem that arises, it's a test for me on how would I react/feel & conclude.
When you want to show a modal, then....
Tags: overlay, modal, promise, jquery
Published: 2020-10-05 13:16:32

...you want to execute code on opening or closing the modal?

Take a look at overlayAsPromised, a jQuery plugin on top of colorbox.

Get it at npm (https://www.npmjs.com/package/overlay-as-promised) or directly download the minified js at GitHub (https://github.com/graef685/OverlayAsPromised).

Enjoy
GitHub for Desktop for begginers
Tags: beginners, devops, computerscience
Published: 2020-10-05 13:11:29

Hi!
Probably the way to use github for desktop is not the best. Most Advantage developers can find other ways to use better. But for begginers, I think is easy and useful. Enjoy and keep programming.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k6tblmw3p0awf97q2gwv.png)