teleren/devto huggingface dataset:
Bamboo CSS - A classless CSS library
Tags: css, library, frontend
Published: 2021-03-08 06:18:45

I usually create demos for JavaScript or React like [creating object from form data](https://codesandbox.io/s/form-data-to-object-3rt4x?file=/index.html). For such demos, I always have to add some basic styles for HTML elements to make them look good. Using a CSS framework like Bootstrap or Tailwind CSS is overkill, so I decided to create a CSS library to do that. And it's **Bamboo CSS**.

> Bamboo CSS is a classless CSS library that adds nice default styles for HTML elements.

[View demo](https://rilwis.github.io/bamboo/demo/) | [See Github repo](https://github.com/rilwis/bamboo)

When creating Bamboo CSS, I search for similar projects and I found some of them like [water.css](https://watercss.kognise.dev) and [new.css](https://newcss.net). But they're too opinionated that I can't use them as base style for my blog or websites.

It's worth noting that the goal of Bamboo CSS is _not only being used as a standalone CSS library, but also with other CSS frameworks_. That means you can use Bamboo CSS as a base style and build your website/blog on that.

So, I fork new.css to Bamboo CSS because new.css is less opinionated and supports more HTML elements. When doing so, I setup these goals for Bamboo CSS to make it better the other available classless libraries:

*   Less opinionated
*   Can be used as a base style for your website/blog or with other CSS frameworks
*   Beautiful
*   Supports for as much HTML elements as possible
*   Responsive
*   Consistent styling across browsers
*   Lightweight
*   Incorporate with best CSS practices
*   Supports light and dark mode
*   Themeable with scoped CSS variables

## How to use Bamboo CSS

Using Bamboo CSS is simple, just add the following line into your HTML:

```
<link rel="stylesheet" href="https://unpkg.com/bamboo.css">
```

The default stylesheet provides automatic light/dark mode switching based on system preference.

If you prefer a light or dark mode, use the snippets below:

```
<!-- Light theme -->
<link rel="stylesheet" href="https://unpkg.com/bamboo.css@1.3.4/dist/light.min.css">

<!-- Dark theme -->
<link rel="stylesheet" href="https://unpkg.com/bamboo.css@1.3.4/dist/dark.min.css">
```

If you want to use it with your JavaScript app, you can install it via NPM:

```
npm install --save bamboo.css
```

Bamboo CSS provides the following CSS variables for theming:

```
:root {
	--b-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--b-font-mono: Consolas, Monaco, monospace;

	--b-txt: #2e3440;
	--b-bg-1: #fff;
	--b-bg-2: #eceff4;
	--b-line: #eceff4;
	--b-link: #bf616a;
	--b-btn-bg: #242933;
	--b-btn-txt: #fff;
}
```

All CSS variables are prefixed with `--b` so it's safe to use Bamboo CSS with your existing websites.

Check more about the library [on Github](https://github.com/rilwis/bamboo) and if you like it, please give it a star!
Important HTML tags you need to know for SEO
Tags: seo, html, css
Published: 2021-03-08 05:51:59

![screen-001.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596953584511/Y9j3i5-TC.png)
The purpose of any website is to drive traffic. And greater portion of visitors is coming from search engines. In order to increase the traffic we need to communicate with the search engines which increases their rankings which in turn drives more traffic.

One of the best ways to engage audience is by using HTML tags. These are some of the most important elements you need for your website.

1. Title
![carbon (7).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596956780893/ZuKfqNHT0.png)
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar, in the page's tab and displays a title for the page in search-engine results.

2. Meta
![meta viewport.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596956970123/uXFxhbRHw.png)
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
![meta keywords.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596957059880/y33RpaWVA.png)
Define keywords for search engines.
![meta descr.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596957163956/q2H4JhlZ3.png)
Define a description of your web page.
![carbon (10).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596958740139/G5VEFeyk0.png)
Open graph supports things like descriptions and images as well. It simply gives you customization options if your webpage is shared on social media.

3. Heading
![header (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596957972685/FJj_7dyF2.png)
Heading tags are often used to break up the content to make it easier to read. In reality, about 55% of visitors will only spend 15 seconds at most skimming your content.
They make it easier for these people to find what they’re looking for quickly.

4. Img alt
![carbon (8).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596958485607/uhIvJlNUG.png)
The alt attribute of this tag tells search engines the picture is about cooking pork with onions.
Without the ALT tag, search engines don’t know what the image is about. And this could reduce exposure during image searches.

5. Anchor with nofollow attribute
![carbon (9).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596958588024/2jRexZ9rm.png)
"nofollow" attribute doesn't help the linked websites to increase their SEO rankings.
Find the Coordinates for a Location
Tags: latitude, longitude, geo, location
Published: 2021-03-08 05:51:49

---
title: Find the Coordinates for a Location
published: true
description: Quickly find a latitude/longitude coordinate location.
tags: latitude,longitude,geo,location
canonical_url: https://gavinr.com/latitude-longitude-coordinate-finder/
cover_image: https://i.imgur.com/rt5alZf.png
---

Finding the latitude and longitude coordinates of a particular location is not as easy as it should be. You can get it from Google Maps, but it requires 3 or 4 clicks. There are also a bunch of sites devoted to the task - most with ads and invasive spyware slowing down the page.

We need something better - that's why I created [Latitude Longitude Locate](https://latlonlocate.com/). Latitude Longitude Locate is a simple mapping app designed for geo developers. Click on a location where you want to get the coordinates, and click the "copy" icon. Those coordinates are now on your clipboard - **two clicks**.

There are also a few more features, like the ability to swap the [order](https://macwright.com/lonlat/) of latitude/longitude.

It's meant to be simple and quick. I hope it helps you out. [Let me know](https://gavinr.com/contact/) if you have any ideas or suggestions to make it even better.

**[LatLonLocate.com](https://latlonlocate.com)**
Why I Am Pursuing Software Development
Published: 2021-03-08 05:09:25

I graduated high school in 2017 and went on to study biology (pre-med) in college. I quickly realized that that wasn’t the major for me and moved on. I decided to explore fields that matched my career interest survey and one of the careers that stuck out to me was software engineering and IT. I attempted a couple of web development classes and enjoyed them a lot, but, my school didn’t offer as broad of a curriculum as I would have liked. So I began researching the best options for learning software development and breaking into tech and settled on attending a boot camp. The perfect opportunity to do this presented itself when I was placed on leave from my job at the start of the lockdown, after contracting COVID-19. I have always valued technology and desired to understand how computers and software operate since I was young. Computer learning was supplemental to my in-person homeschool education and I find it a little ironic that I will be returning to this form of remote learning to start a career. After doing some research, I feel software development will be a flexible career choice for me because there is good job security whether one is working remotely or not, a good average starting salary where I live, and I will always be learning something new in this fast-progressing field which is important to me.
Pointers in C Programming
Tags: c, programming, tutorial, beginners
Published: 2021-03-08 04:54:22

In this tutorial, we will study what are [pointers in c programming](https://usemynotes.com/what-are-pointers-in-c-programming/), the advantage of using a pointer, the disadvantage of using pointers, operators using pointers, and a suitable example of pointers. So let’s go...

## What are Pointers in C Programming

The pointers are variables that store the address of another variable. And every variable has a unique address in memory. These addresses are in hexadecimal form, so we cannot store these addresses in any normal variables, create a pointer variable to store the address of any variable. To declare which variable of pointer type, declare it with an asterisk (*) Symbol. 

**Syntax of its declaration: -**
```
data_type *pointer_name;
```
To access the value of this variable by the address of the storage call of any variable, it is necessary to store the address of the storage call of this variable in another pointer-type variable. Because we cannot access any memory storage call without storing it in any variable.

## Advantages of Using Pointers
- Less time in program execution
- Working on the original variable
- With the help of pointers, we can create data structures (linked-list, stack, queue).
- Returning more than one values from functions
- Searching and sorting large data very easily
- Dynamically memory allocation

## Disadvantages of Using Pointers
- Sometimes by creating pointers, such errors come in the program, which is very difficult to diagnose.
- Sometimes pointer leaks in memory are also created.
- If extra memory is not found then a program crash can also occur.

## Operators Used with Pointers
### 1. & (Address-of ) operator:-
The & (Address-of) operator points to the address of the variable. From this, we can get the address of any variable.

### 2. * (Value-at) operator:-
The * (Value-at) operator only works with pointer variables. This operator represents the value stored at a particular address.

**Example:-**
```
#include<stdio.h>
int main()
{
  int rehanAge = 55;
  int *ptr;
  ptr = &rehanAge;
  /* address of rehanAge */
  printf(“Address of rehanAge: %dn”,ptr);
  /* value at rehanAge */
  printf(“Value of rehanAge: %d”,*ptr);
}
```

**Output**
```
Address of rehanAge: -1074204644
Value of rehanAge: 55
```
Originally posted on - [Pointer in C Programming](https://alimammiya.hashnode.dev/pointers-in-c-programming)
K-Means Clustering
Tags: machinelearning, datascience
Published: 2021-03-08 04:44:42

K-Means clustering is unsupervised algorithm, which is very intuitive and could be visualized geometrically. 
Basically, we are trying to split the data into the k groups or clusters, and each cluster has a center, which is defined by calculating geometrical centroid of the cluster.

Steps of the K-means clustering algorithm:

1) Set k initial centers randomly
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz39xv5gl4vj3se7304s.png)
2) Calculate 'distances'(e.g., if in 2d space) from the data point to these centers and group the data by the 'closest' distances to these centers
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wn6ix8zpqta2bbufqtmm.png)
3) Recalculate position of k centers (as a mean of the data in that cluster) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffi1nx7fboqr0zrot784.png)
4) repeat steps 2 and 3 until no changes.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n4iuxu04q06zbvcixz5.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5qozv6majc0v86u8jyw.png)

Here is the [link](http://tech.nitoyon.com/en/blog/2013/11/07/k-means/) I used to play and visualize clustering.
For React Beginners
Tags: react, javascript, tutorial
Published: 2021-03-08 04:43:13

If you're a **React beginner** and just getting started with the React. You must have tried looking through the documentation and specifically the "Intro to React - Tutorial". 

If you haven't already I would suggest you to go through it because it is a really nice and quick way to get started with the library. https://reactjs.org/tutorial/tutorial.html

But there are a couple of questions that this tutorial leaves for you to solve as practice and again I would highly recommend you to solve these. ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c096zl37f23mvf3y1hm8.png)
Once you have given it a try you can go through [this](https://github.com/ssmkhrj/tic-tac-toe-react) github repo that I have created with detailed explanations **(checkout out the README)** to all these practice questions. Hope you find it useful. Have a good day!
590. N-ary Tree Postorder Traversal (javscript soution)
Tags: javascript, algorithms
Published: 2021-03-08 04:32:34

###Description:

Given an n-ary tree, return the postorder traversal of its nodes' values.

Nary-Tree input serialization is represented in their level order traversal, each group of children is separated by the null value (See examples).

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// Create an output array to hold the order of nodes
// Add all child nodes before you any root node
var postorder = function(root) {
    const result = []
    function traverse(node, result) {
        if(!node) return;
        for(const child of node.children) traverse(child, result)
        result.push(node.val)
    }
    traverse(root, result)
    return result;
};
```
How to create a video in java
Published: 2021-03-08 04:19:50

---
title: How to create a video in java
published: true
description: In this tutorial, I go through how to create a video in java. Using the framework Xuggle we can create a video file containing a stream of images. But you can use any BufferedImage to create these frames, so this library is super flexible and even support audio.
tags:
cover_image: https://i.ytimg.com/vi/OfsH3Zso4PA/maxresdefault.jpg
---

{% youtube OfsH3Zso4PA %}

In this tutorial, I go through how to create a video in java. Using the framework Xuggle we can create a video file containing a stream of images. But you can use any BufferedImage to create these frames, so this library is super flexible and even support audio.
When is self really itself?
Published: 2021-03-08 04:18:24

When is `self` really itself? Trick questions, it always is, it's just a matter of who *self* is. As a newcomer to programming, grasping the concept of *self* has been challenging as this single variable can have massive impact either making or breaking a program. To me, *self* has been a riddle understanding where it points and when it should be used. *Self* can be in reference of the class or to an instance. *self* is a variable that can be used to point somewhere and when it does, it can change the information that is being received.
###### Instance 
```ruby
class Dog
    def sit
        self
    end
end

Apollo = Dog.new("Apollo")
Apollo.sit == Apollo 
# => true
```
Shown in the example above, `sit` is an instance method. It belongs to the object we created using `Dog.new`. In This example we can see that *self* is pointing to the instance of Dog.
###### Class
```ruby
class Dog
    def self.sit
        self
    end
end
Dog.sit == Dog
# => true
```
In this example, *self* is pointing to the class. when *self* comes before the defined method, it  changes from an instance method to a class method. Class methods are owned by the class itself. 

###### Other uses for self
Instead of calling a class variable with `@@all`, we can call it within a method using `self.class.all` with the help of a class method that returns the class variable. Though they function the same, it is the more visually appealing option. 

While it should be avoided, if a method and local variable are the same, the method could be called like this.
```ruby
def cat
    "imma cat meow"
end

def method_name
    cat = "Munchkin"
    puts cat
    puts self.cat
end
# => Munchkin
# => imma cat meow
```
By calling `self.cat`, both a method and name are able to be distinguished from one another and be used without confusion to the computer (though it may cause confusion to someone who is reading the code).

While there are more uses that I have seen for *self*, I am not covering them in this post as I do not wish to teach what I haven't learned and will update this post in the future. If you still struggle to understand *self*, practice practice practice, it will come with practice. Below are articles which have helped me gain a better understanding of *self* and I hope they will help you as well. 

                              Happy Coding!            

 <img width="50%" style="width:50%" src=http://giphygifs.s3.amazonaws.com/media/t8teQihYE77fW/giphy.gif>
 

[What Is Self in Ruby & How to Use It (Explained Clearly)](https://www.rubyguides.com/2020/04/self-in-ruby/#:~:text=If%20your%20code%20is%20inside,t%20quite%20remember%20the%20name.)

[Self in Ruby: A Comprehensive Overview](https://airbrake.io/blog/ruby/self-ruby-overview)

[Understanding `self` in Ruby](https://www.honeybadger.io/blog/ruby-self-cheat-sheet/)

[@/@@ vs. self in Ruby](https://medium.com/@sgg2123/vs-self-in-ruby-1d4d88170)
I took a challenge to build an API, make $100 in 48 hrs
Published: 2021-03-08 04:13:50

In this article, I shared my experience on taking this challenge and some key learning. I shared my progress on twitter

1. Idea
I started searching web espeacially on forums like reddit and quora, My aim was to build a niche API so that I started thinking of how to improve the existing web scraping APIs available in the market. I got a simple idea to improve the existing API is to get an example of things to scraped from the user and give them exactly what they want.

2. User Research
I am building a web scraping tool so my target user must be one who needs data from websites. People who are data analysts, machine learning engineers, freelancers, and companies who are looking to generate leads for their product.

3. Design
I designed simple multi threaded REST API server architecture which can multiple users at the same time. I choose the AWS lambda service for hosting the API as it doesn’t cost me much on outages and it is reliable for this service.

4. Programming
I took flask as the web framework and used scrapy framwork on python to scrape websites and make them as a REST API. I used postman to debug and test the API.I integrated this api into Rapid API marketplace after hosting on AWS.

5. Marketing
Reaching the first 10 customers is a manual and relatively straightforward process.

Tweet about your product, slide into existing tweet threads, DM people who engaged with those threads directly.
Make a genuine post in a Facebook group or Slack community. Message people 1:1 who show an interest.
Make a post in a related Subreddit (eg. r/Shopify for a Shopify app) and DM people who engage. Or search for existing posts that match your keywords and reach out to people who engaged.
List on marketplaces - Even if you do the basic optimization for a marketplace (correct naming, description, listing page, screenshots), and if the problem you are solving has established demand, then you should get your first 10 customers from there.
Cold email outreach to companies that match your parameters, using data sources like BuiltWith
6. Finally failed
My target was $100 but what I earned in the final was only $10 with lots of lessons.

7. Key learning
Think from the user perspective before building the product
Getting your first users is easy when you know and built exactly what they need.
Conclusion
Even though I failed in this challenge, I really enjoyed doing this challenge and building this product.

link for the product : https://rapidapi.com/harishsg99/api/scrapehoney
AR App
Published: 2021-03-08 04:09:34

This is a short tutorial for building an iOS AR app that tracks a users face. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yj4t69kol2iz00pumeq.png)

This is the code you'll use to begin. First you need to import the proper modules, followed by creating your outlets. You will also create a variable that is set as an empty string to be used later. 

Next you will be working in the view did load function. Set the scene view delegate to self and the scene view show statistics to true. After this you will set up the guard for the app. If your device doesn't support AR, the user will be notified. 

Next up are the view will appear and view will disappear functions. Here you setup configuration for the AR face tracking.

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

The following step deals with the renderer functions. This code sets up the AR rendering and geometry for the app, and also sets up the face anchor.

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

Finally, we will work on the expression function, which will identify your facial expressions.

First, you set your variables for your expressions, which are mouth smile left, mouth smile right, cheek out, tongue out, jaw left and eye squint left. These variables will use the anchors and use AR to blend shapes. Set your action variable to waiting, to indicate that the app is waiting for your facial expressions.

Lastly, you will check for these facial expressions. If the app detects a proper facial expression, it will set your action to indicate which facial expression you are making.
Perl Web Framework Mojolicious
Tags: perl, mojolicious, webdev
Published: 2021-03-08 04:01:11

Perl have Web Framework Mojolicious.

https://mojolicious.org/

We may be familiar with the name Rails of Ruby.

We may be familiar with the name Django of Python.

Mojolicious may not be famous, on the other hand its performance and simplicity are very good.

```
use Mojolicious::Lite;
get '/' => {text => 'Hello'};
app->start;
```

Young people may have a prejudice against Perl.

Once you've experienced Mojolicious, you'll find that the prejudice is actually a prejudice.
Setting up SASS
Tags: css, webdev, design
Published: 2021-03-08 03:58:58

Hey Guys and Gals!

Currently I am working on a little somethin' somethin' and for the first time I had to start using Sass! So, of course I thought of writing a blog on setting up.

1. Set up a package.json file so that you can alter Sass settings.

     npm init

2. Install Sass

     npm install node-sass

Inside the package.json file, (on windows) press ctrl+f and search sass, there you will find it as part of the packages installed.

3. VS Code Extension or npm.

Here you will have to decide whether you want to install the extension on your VS Code then run sass server which you can find it by typing Live Sass Compiler in the extensions and install it. On the lower right hand side, you can click watch sass and that will start the server. Or, you can alter the package.json file and run the sass through the terminal.

locate this in the package.json file,

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },

change "test" to "sass" and add the following,

    "scripts": {
    "sass": "node-sass -w scss/ -o css/ --recursive"
    },

now you can run the sass script through your terminal by typing this command

    npm run sass