teleren/devto huggingface dataset:
Personal news: I've joined egghead as an instructor!
Tags: css, html, webdev
Published: 2020-05-21 20:31:18

I'm pleased to share my first two lessons that have been published to egghead!

## Access Theme Color Values With Sass

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

[Watch this lesson](https://egghead.io/lessons/scss-access-theme-color-values-with-sass?af=2s65ms)

## Create a Basic Responsive Grid System With CSS Grid

CSS grid is a layout model that allows defining structure in terms of columns and rows. Learn how to replace heavy 12-column grid system frameworks with the unique properties of CSS grid. By leveraging CSS grid, we can create intrinsically responsive layouts, no breakpoint media queries or lengthy list of utility classes required.

[Watch this lesson](https://egghead.io/lessons/css-create-a-basic-responsive-grid-system-with-css-grid?af=2s65ms)

## Feedback? Suggestions?

Drop a comment with suggestions for future lessons related to:
- CSS
- HTML
- Sass
- Accessibility
- React
- Design Systems
- Netlify
- Eleventy (11ty)
- Static site workflow/build process

> **Looking to learn HTML/CSS development**? Learn the foundational skills of frontend development with my [free course >](https://learnfromsteph.dev)
GitHub at the university
Tags: github
Published: 2020-05-21 20:23:54

We get to learn Git at the university, but you never really get the full potential of git until you use it hosted somewhere, like GitHub for instance.
This is why I think this should be a part of the university courses too.

I recently used it when I implemented a card game in java. We had several steps we had to take to get the code working. It was important to be confident that if I tried something experimental I could later rollback to an earlier commit without being afraid of having lost work because of the experimentation.
TerminusDB Webinar - Devops and TerminusDB
Tags: database, interview, devops, webinar
Published: 2020-05-21 20:19:28

---
title: TerminusDB Webinar - Devops and TerminusDB
published: true
description: One type of questions that we get a lot are questions related to operations and administrations when using TerminusDB. That’s why this week we have our devops superstar in the core TerminusDB team, Robin de Rooij, to join us in the webinar and answer some frequently asked questions.
tags: database, interview, devops, webinar
---
One type of questions that we get a lot are questions related to operations and administrations when using TerminusDB. That’s why this week we have our devops superstar in the core TerminusDB team, Robin de Rooij, to join us in the webinar and answer some frequently asked questions.
Build a warehouse management solution with react, django, react-native and AWS.
Tags: django, python, react, javascript
Published: 2020-05-21 20:16:14

Today I worked on token authentication for my Backend.Now my frontend would need a **username** and **password** to create a token which would be stored in **localstorage** for every subsequent request made to my django backend


Token would be sent to backend like this;

"Token /auth_token/"
Octograd2020 - Spanish Learning App
Tags: octograd2020
Published: 2020-05-21 20:01:58

#Made Mobile App in React Native to learn counting in Spanish.

I made this Spanish Learning App while doing React Native online course. 

## Link to Code
`{% https://github.com/dhruv-chitkara27/SpanishLearningApp-ReactNative %}`


## How I built it 
So, I built this project using React Native and it was fun working on this project and it becomes more fun when we face challenges while working on the project. Honestly, I faced a lot of errors but somehow I remained calm and solved the errors by taking the help from google, stackoverflow and some other online resources.


## Additional Thoughts
So, Just keep calm and keep solving errors. Final product will be worth the challenges you faced while working on the product.


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
mutating objects in Ruby
Tags: ruby, beginners
Published: 2020-05-21 19:55:12

![teenage mutant ninja turtles](https://media.giphy.com/media/1ZbnufnHeW0W4/giphy.gif)

Mutation bugs are some of the most common in Rubyland. 

Why?

Variables are objects and they most likely contain data. This means one or more variables may read data from that variable. If we change the makeup of the object, it could spell disaster for other objects expecting it not to change.

This is prevalent when passing objects via method calls. If a method param gets mutated and passed to another method, the receiving method might not respond properly to the mutated data. The results are less malleable and unreliable code. 

**One reason to mutate an object is if you're crafting data.**

```ruby
class ApplicationHelper
  def admin_body_classes
    classes = []
    
    classes << "admin" if admin?
    classes << params[:controller]
    classes << "environment" if Rails.env.test?
    
    classes.concat(@extra_body_classes) if @extra_body_classes
    classes.join(" ").tr("/_", "-")
  end
end
```

In the above example, mutation makes sense. We're returning a data object at the end of `admin_body_classes`.

It would not make sense to use a non-mutating operand to `classes`. `Array#concat` or a shovel operand are suitable for this case since `classes` is being mutated throughout the method. 

Being mindful of object mutation saves headaches when dealing with objects.
My First Video Game
Published: 2020-05-21 19:55:03

I have taught myself a little bit of C# and I am currently working on this project: https://www.deviantart.com/goldenb4r/journal/WIP-Idea-for-my-New-Video-Game-836741439

I want to know what you all think of it. My writing ability is better than my coding, so I would like to eventually put together a team to help me get this done. Please let me know what you think. All criticism and feedback are welcome!
TitanIC
Tags: cdarius0
Published: 2020-05-21 19:51:30



## An android Implementation of the Battleship game
One of my college projects is a batteship game called TitanIC as the class was called IC(Ingineria Calculatoarelor) and a colleague and I decided to build this project as it was our initiation into mobile development. We had a lot of fun and we learned a lot along the way as we didn't use xml and didn't do interface dev before. The game presented us with lots of bugs around the way and it was kinda annoying at first but after we found out what the problem was it felt good to have something working and done by us.


## Link to Code
`{% https://github.com/cdarius0/titanIC %}`

[Final Note]: Keep up the good work @github and I hope to keep on working on open source projects in the future as I really enjoy the community and the great work that it does!
# (CONGRATULATIONS!!! You are amazing!)
Are you advancing in your career? What does it mean to you?
Tags: discuss, watercooler, career
Published: 2020-05-21 19:46:04

---
title: Are you advancing in your career? What does it mean to you?
published: true
description: What does it mean to you?
tags: discuss, watercooler, career 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zkzvdy8fj2afsxly1e4r.png
---

Career progression looks different for everyone, how do you envision it? Does your organization have concrete steps you can take to advance?
Automatization of publication Open Data of city Žďár nad Sázavou (CZ)
Tags: octograd2020, githubsdp
Published: 2020-05-21 19:41:00

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## My diploma thesis


## http://sc02.fi.muni.cz/en/organization/elektronabijecky-zdar-nad-sazavou
 
{% github https://github.com/hrnciar/diplomka %}

## How I built it (what's the stack? did I run into issues or discover something new along the way?)

I am using Ubuntu server with instance of open data system CKAN. I had to lear how to use CKAN for data publication and study all the aspects important for data publication such as legal requirements. Code is written in Python and Bash for Cron job scripts. My thesis wasn't just about coding, I had to also communicate with city representatives and set up processes, so the datasets will be updated even after I leave school.


## Additional Thoughts / Feelings / Stories

I am really happy with work I have done on this project. There is still some stuff to do but overall I am satisfied. Currently I have two almost finished datasets and one more planned. Open datas that I am publishing are about usage of electrochargers in the city and the second one is about tempretures at city town hall.

[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Sorts
Published: 2020-05-21 19:31:28

Sorts, oh sorts. A simple function but multiple ways to do them. During my dicussion questions in Flatiron. We were introduce to sorts and how they visually worked in react. Which was super fascinating to learn and also, I wanted to know more about algorithms. So I dove head first into sorts. Let's start with the two easiest sorts! Selection sort and insertion sort. 

        // One by one move boundary of unsorted subarray 
        int n = arr.length; 
  
        for (int i = 0; i < n-1; i++) 
        { 
            // Find the minimum element in unsorted array 
            int min_idx = i; 
            for (int j = i+1; j < n; j++) 
                if (arr[j] < arr[min_idx]) 
                    min_idx = j; 
  
            // Swap the found minimum element with the first 
            // element 
            int temp = arr[min_idx]; 
            arr[min_idx] = arr[i]; 
            arr[i] = temp; 
        } 
  
What a selection sort is that it grabs the lowest number and put it to the front. Example on the first iteration, it'll grab index 0 and go through all the numbers in the array to find the lowest. Then it'll swap the element to the front if there is a lower number within the array length. 
EX - 3, 4, 1, 5
It'll start with 3 and check if 4 < 3, or 1 < 3. Once that is true, the 1 and 3 swap places to be 1, 4, 3, 5. This repeat's til the end of the loop.


Another sort i'll be talking about is insertion sort. 

        int n = arr.length; 
        for (int i = 1; i < n; ++i) { 
            int key = arr[i]; 
            int j = i - 1; 
  
            /* Move elements of arr[0..i-1], that are 
               greater than key, to one position ahead 
               of their current position */
            while (j >= 0 && arr[j] > key) { 
                arr[j + 1] = arr[j]; 
                j = j - 1; 
            } 
            arr[j + 1] = key; 
        } 
  Basically insertion is backwards and how we would be doing if we played cards. It will check the current index and see if its lower than the previous index before. It will check and see if its greater then the number before and less than the number that comes after. If we have a card of 3 2 1 5. The first loop will stay the same. But on the 2nd loop, it'll check if 2 is less than 3. So it'll be changed to 2, 3, 1, 5. The same would happen to 1, it'll check if 1 is less than 3, and it is. But it'll check again if it is less than one, and it is as well. So the array would change to 1 2 3 5. Now it checks if 5 is less than 3, but it is not. So the element stays on the current index and the loop is done.  

It is interesting to see on how sorts work and there are many more types of sorts out there such as bubble sort. It is great to know the difference of each sort and learn the algorithm!
COVIDiary pt. 8 - Make the Connection
Tags: fetch, react, beginners, codenewbie
Published: 2020-05-21 19:35:47

---
title: COVIDiary pt. 8 - Make the Connection
published: true
date: 2020-05-21 19:17:10 UTC
tags: #fetch #react #beginners #codenewbies
canonical_url: https://www.codewitch.dev/covidiary_pt_8_-_make_the_connection
---

Welcome to Part 8 of the COVIDiary project! If you’re just joining us or missed a post, here’s what we’ve done so far:

- [Part 1: Project Introduction](https://dev.to/audthecodewitch/covidiary-a-rails-react-project-2gl6)
- [Part 2: Initial Setup](https://dev.to/audthecodewitch/covidiary-part-2-initial-setup-2g2d)
- [Part 3: Building the Database](https://dev.to/audthecodewitch/covidiary-pt-3-building-the-database-4o04)
- [Part 4: Frontend Setup](https://dev.to/audthecodewitch/covidiary-pt-4-frontend-setup-3cp1)
- [Part 4.5: Database Fixes](https://dev.to/audthecodewitch/covidiary-pt-4-5-database-fixes-21ga)
- [Part 5: Backend Routing](https://dev.to/audthecodewitch/covidiary-pt-5-backend-routing-39hf)
- [Part 6: Formatting Data](https://dev.to/audthecodewitch/covidiary-pt-6-formatting-data-of2)
- [Part 7: A Little More Action](https://dev.to/audthecodewitch/covidiary-pt-7-a-little-more-action-34me)

This week, we’re going to shift focus to the front end. By the end of today, we will be able to retrieve data from our API!

Before we write any code, make sure your backend server is running. In `CD-api`, run `rails s` to fire it up. Leave that running and open your `CD-Client` repository in another window.

## Write Fetch Requests

We’ll be working solely in `/src/App.js` today. We will write two separate, but extremely similar, fetch requests. Write your code in the `App` class but before the `render()` method.

```

// test fetch

  // the fetch requests will run when the App.js component mounts

  componentDidMount() {

    // fetch all the public entries

    fetch('http://localhost:3000/api/entries')

      // take the response and convert it to json

      .then(response => response.json())

      // take the resulting json and log it to the console

      .then(data => {

        console.log("All public entries:", data);

      })

      // if there is an error, log an error message to the console

      .catch((error) => {

        console.error('Public Entries Error:', error);

      });

    

    // fetch the first user's entries
		
    fetch('http://localhost:3000/api/users/1/entries')

      .then(response => response.json())

      .then(data => {

        console.log("single user's entries:", data);

      })

      .catch((error) => {

        console.error('Single User Entries Error:', error);

      });

  }

```

We can now test our connection to our backend server! Start your server using `yarn start` and open it in the browser. Open the browser console so you can see the fetch results!

<center>
<img alt="Rocket Power - It worked" src="https://media.giphy.com/media/xT1R9XQAtJN7SIrSjC/giphy.gif">
</center>
## Coming Up

Eureka! The front and back ends are communicating with one another! Next week, we’ll shift our focus to building out the front end so we can actually see something.
Animated Floating Input Labels CSS ONLY!
Tags: css, tutorial, webdev
Published: 2020-05-21 18:42:07

Lots of forms are using placeholder text and not hiding the label (or not using it altogether) and it's often difficult to remember what the form element was when you click in.  To create a better user experience for this, we can animate the input labels above the form element when they are clicked.  Best yet, this is a pure CSS solution!

[Subscribe To The Channel!](http://www.youtube.com/FollowAndrew?sub_confirmation=1)

{% youtube zivkHZ9w7DY %}
Watch the Video Tutorial on YouTube for a visual explanation!

There are sevearl tricks to get this to work:

* Position the label over the input label
* Make the placeholder text invisible
* Use fancy CSS pseudo selectors to animate & transform the labels on click
* Use the even fancier CSS selector of ":not(:placeholder-shown)" -- Bet you didn't know about that one!!! to make sure the labels stay animated when tabbing away from the input.

Here's the most magical selector that does the trick.

```css
.form-control:focus + .form-label,
.form-control:not(:flaceholder-shown) + .form-label{
    transform:translateY(-2.5em) scale(.8);
}
```
Kubernetes installation on Ubuntu 20.04,18.04 or 16.04 - Part1
Tags: kubernetes, devops, ubuntu, docker
Published: 2020-05-21 19:03:28

Howdy!
If you are newbie and willing to learn more about kubernetes than I think this hands-on session on installing Kubernetes on Ubuntu must be the one which you should go through.

There are lots of automation options which for installing kubernetes .e.g kuberspray, terraform but as a beginner I would strongly recommend **go bare minimum** because that will let you fix all the nitty-gritty of the Ubuntu and kubernetes.

**Prereuisite**
1. Vagrant 
2. Virtual Box 

In my own way of installation, I came up a total of 14 steps which you pretty much follow here - 14 Steps for Kubernetes installation on Ubuntu(https://jhooq.com/14-steps-to-install-kubernetes-on-ubuntu-18-04-and-16-04/)

But if you are more interested in practical than you can follow along on my hands-on session -

{% youtube briu_Ev89sw %}
OrgCourse
Tags: spacemacs, elisp, lisp, octograd2020
Published: 2020-05-21 18:36:45

# What is it?
OrgCource is a tool that allows professors to manage Canvas courses from [Spacemacs](https://www.spacemacs.org/), an extension of Emacs.
# Who it is for?
It is for professors who consider themselves "power users" and would prefer to keep their hands on the keyboard and off the mouse.
# How does it work?
It takes advantage of the org document tree and the canvas API (hence the name OrgCourse) to store all of the course information locally and update any changes to it on the course page on Canvas.
Image Retrieval System
Tags: android, node, python
Published: 2020-05-21 18:35:10

Hello awesome community,

Recently, I made an API and an Android Application demonstrating how to use Convolutional Autoencoder and Nearest Neighbors Algorithm in Python to get K-Most similar images to a given grayscale image. The Backend was made using Nodejs and Express and Android App is made using Android Studio in Java environment. I find it quite cool, you can check it out here : <a href="https://github.com/tanishq9/Unsupervised-Image-Retrieval-API">Code and Demo Link</a>
Crop Analyzer Application 
Tags: android, javascript, python, productivity
Published: 2020-05-21 18:26:22

Hello awesome community, 

Recently, I got a chance to mentor people mostly students in open source development. We developed a crop advisory app for farmers and gardeners. It can diagnose plant disease, nutrient deficiencies and suggest treatment measures along with recommended products. I made 70+ issues, reviewed and merged 90+ PRs. I as a mentor learned a lot about evaluating PRs and improved my git knowledge as well. Here's a link to the repositories for which I was the maintainer, you can check them out :

1. <a href="https://github.com/CropAi/Android-Application">Crop Analyzer Android Application</a>
2. <a href="https://github.com/CropAi/Backend">Crop Analyzer API</a>
[Deprecated] Custom fonts in React Native (Expo)
Tags: reactnative, expo, fonts
Published: 2020-05-21 18:26:21

> The `@use-expo/font` package has been deprecated. Use the new `expo-font` package instead. Docs for which can be found here - https://docs.expo.dev/versions/latest/sdk/font/. If you are starting a new project, DO NOT follow this guide.

Expo is a great platform for new comers to React Native and for building fast prototypes without having to meddle with Android or iOS code. When building an application, you will want to use custom fonts in your app. Expo makes using custom fonts really really simple

To get started, download the font you want to use in your app in `.ttf` or `.otf` format. Create a directory in the `assets` folder and name it `fonts`. Place all your font files here.

Now you will need to install a package that provides a hook called useFonts

```
yarn add @use-expo/font
```
or
```
npm install --save @use-expo/font
```
In your `App.js` file, import the hook
```
import { useFonts } from '@use-expo/font';
```
Then use the hook to load all the fonts
```
const [isLoaded] = useFonts({
    "SourceSans-ExtraLight": require("./assets/fonts/SourceSansPro-ExtraLight.ttf"),
    "SourceSans-Light": require("./assets/fonts/SourceSansPro-Light.ttf"),
    "SourceSans-Regular": require("./assets/fonts/SourceSansPro-Regular.ttf"),
    "SourceSans-SemiBold": require("./assets/fonts/SourceSansPro-SemiBold.ttf"),
    "SourceSans-Bold": require("./assets/fonts/SourceSansPro-Bold.ttf"),
    "SourceSans-Black": require("./assets/fonts/SourceSansPro-Black.ttf"),
  });
```

Note that this process is asynchronous so you will have to show a loading indicator meanwhile. For this, you can import `AppLoading` from Expo.
```
import { AppLoading } from 'expo';
```
And then if `loaded` is false, return `AppLoading`

To use the font you can provide the font name in the styles object
```
<Text style={{ fontFamily: "SourceSans-Regular" }}>Hello World</Text>
```

See below for a complete implementation
```
import React from "react";
import { Text, View } from "react-native";
import { useFonts } from "@use-expo/font";
import { AppLoading } from "expo";

export default function App() {
  const [isLoaded] = useFonts({
    "SourceSans-ExtraLight": require("./assets/fonts/SourceSansPro-ExtraLight.ttf"),
    "SourceSans-Light": require("./assets/fonts/SourceSansPro-Light.ttf"),
    "SourceSans-Regular": require("./assets/fonts/SourceSansPro-Regular.ttf"),
    "SourceSans-SemiBold": require("./assets/fonts/SourceSansPro-SemiBold.ttf"),
    "SourceSans-Bold": require("./assets/fonts/SourceSansPro-Bold.ttf"),
    "SourceSans-Black": require("./assets/fonts/SourceSansPro-Black.ttf"),
  });

  if (!isLoaded) {
    return <AppLoading />;
  } else {
    return ( 
   <View>
     <Text 
       style={{ fontFamily: "SourceSans-Regular" }}>
        Hello World
     </Text>
   </View>
   )
  }
}
```

## Connect with me
You can follow me on DEV or connect with me on [Twitter](https://twitter.com/burhanuday). Subscribe to my [newsletter](https://www.burhanuday.com/)
Benchmark testing for javascript
Tags: javascript, frontend, performance, benchmark
Published: 2020-05-21 18:19:27

Hi everyone,
  This article mainly for javascript developers.
  
  Nowadays all of you can able to write a code for the problem in multiple ways in javascript. but, we didn't know which one is an efficient and good performance. The same question comes in my mind. So, Regarding this I searched on google I got some of the good tools online. Just, explore the tool. I added the tool link below the article.

1. https://jsbench.me/
2. https://jsben.ch/xZwIF (My favorite)

I hope it's useful all for you. 

Thanks and regards,
Lakshmanan
http://lakshmananarumugam.com/
[Placeholder Title]
Tags: octograd2020
Published: 2020-05-21 18:19:12

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

## Clone-Instagram


## Demo Link
 

## `{% https://github.com/rkmsh/Instagram-Using-Ruby-on-Rails %}`

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

## It is built on Ruby-on-Rails. While surfing `instagram` I got this idea of crating a website similar to this with similar functionalities.


## Initially the comment function was not there but then I realize without comments a social networking site is always incomplete. Then I decided to add the comment section.


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)