teleren/devto huggingface dataset:
OverSimplified: Variables
Tags: beginners, computerscience, programming, variables
Published: 2021-11-28 21:36:47

> *Welcome! In this series, I try to oversimplify CS concepts in an attempt to help us all better understand them. Thanks for your time, enjoy!*

---

##What are variables?
- _**Variables are names we assign to storage slots**_ in our computers memory.
![Alt Text](https://images.unsplash.com/photo-1617510711388-6f88e078d698?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80)
- In the picture above, imagine each container is a slot of memory in our computer.
  - The food itself is data sitting in a slot of memory.
  - *The labels are variable names we give to that slot of memory.*

---

##How do we use variables?
- We use variables to retrieve data sitting in named storage slots

```
num1 = 1900   // Save 1900 in storage and name the slot num1
num2 = 121    // Save 121 in storage and name the slot num2
sum(num1 + num2)   // Add data in storage slots num1 & num2
```

---

## What are the benefits of using variables?
- Use simple names to evaluate complex expressions
- Rename any storage slot that's holding data
- Replace the data in any storage slot
- Use a single name for similar values in a list of data

---

##Descriptive Variable Naming (... and why it's important!)
![Alt Text](https://cdn.pixabay.com/photo/2020/07/22/04/44/salt-5428029_1280.png)
- In my second attempt to oversimplify using a food analogy:
  - Sugar and Salt look the same but they taste completely different
  - It is important that we put them in properly labeled containers or we might get weird tasting food.
  - It is also important that we put data in properly named storage slots or we will get weird expression results / errors.
- _**Inaccurate variable names will confuse other developers and your future self, which could lead to unexpected results & bugs**_

---

> *As mundane as variables seem, using them properly is crucial to being a good developer.*

---

##BONUS: Variable Typing
- Some [programming languages](https://dev.to/sinaprograms/oversimplified-programming-languages-3370) require us to explicitly define what data type the variables storage slot will hold.
```
int num1 = 1900   // Variable that only stores integers
str str1 = "A string"   // Variable that only stores strings
```
- Typing helps productivity by showing us errors when we use a variable incorrectly (Ex: Adding a boolean variable and an integer variable).
JavaScript MaxChar Algorithm
Tags: javascript, algorithms
Published: 2021-11-28 21:30:56

In my last few posts I've written about common interview questions I've come across. Today, another: MaxChar. This problem asks of a given string, to return the character that appears most frequently in the string. 

To start, write a function that takes in a string, with a variable set to an empty string to keep track of the letter which appears the most. Another thing we will want to have is an object to keep track of all characters in a string, along with the number of times it appears: 

```
function maxChar(string){
     let chars = {}
     let maxChar = ''
}
```

The next thing to do is to iterate through the string using a for loop. 

```
function maxChar(string){
     let chars = {}
     let maxChar = ''

     for (let char of string){
      let current = char 
  }
}

```
Here, the char variable is used keep track of the current character in the iteration. Next, we'll want to increase the numerical value by 1 if the character is already included in the chars object. If it is not, it will be set to 1 if it is a new character. 
```
function maxChar(string){
     let chars = {}
     let maxChar = ''

     for (let char of string){
      let current = char 
      char[current] = char[current] + 1 || 1 
  }
}
```

The last step of this requires comparing current with maxChar to determine which one appears most often. 

```
function maxChar(string){
     let chars = {}
     let maxChar = ''

     for (let char of string){
      let current = char 
      char[current] = char[current] + 1 || 1 
      if (maxChar === '' || chars[current] > chars[maxChar]) {
maxChar = current}
  }
return maxChar
}
```
A Simple 2D Point Class in Java
Tags: java, codenewbie, tutorial, 100daysofcode
Published: 2021-11-28 21:28:15

---
title: A Simple 2D Point Class in Java
published: true
description: A Simple 2D Point Class in Java
tags: Java, codenewbie, tutorial, 100daysofcode
//cover_image: https://direct_url_to_image.jpg
---
Creating a simple 2D point class in Java is fairly simple. A [Cartesian coordinate system](https://en.wikipedia.org/wiki/Cartesian_coordinate_system) uses points in two dimensions along an *x-axis* and *y-axis*. Each point has a pair of *x* and *y* coordinates along these two axes.

We define a `SimplePoint` class that has two private properties `x` and `y`:

```java
public class SimplePoint {

  private double x,y;

}
```

To access each property, create two *getter* methods in the class:

```java
  public double getX() { return x; };

  public double getY() { return y; };
```

We could also provide *setter* methods if desired.

A constructor method makes it convenient to create a `SimplePoint` object at a specific *x,y* location:

```java
  public SimplePoint(double x1, double y1) {
    x = x1;
    y = y1;
  }
```
For example, to create two `SimplePoint` objects at *x,y* positions `2,1` and `8,2`:

```java
    SimplePoint p1 = new SimplePoint(2,1);
    SimplePoint p2 = new SimplePoint(8,2);
```

Finally, here is a `distance()` function to calculate the distance between two `SimplePoint` objects:

```java
  public double distance(SimplePoint p) {
    return Math.sqrt( Math.pow(p.getX()-x,2) + Math.pow(p.getY()-y,2) );
  }
```
To calculate and output the distance between `p1` and `p1`:

```java
    System.out.println( p1.distance(p2) ); // 6.082762530298219
```

Here is the complete source code for the `SimplePoint` class, including the sample `main()` method:

```java
public class SimplePoint {

  private double x,y;

  public SimplePoint(double x1, double y1) {
    x = x1;
    y = y1;
  }

  public double getX() { return x; };

  public double getY() { return y; };
  
  public double distance(SimplePoint p) {
    return Math.sqrt( Math.pow(p.getX()-x,2) + Math.pow(p.getY()-y,2) );
  }

  public static void main(String[] args) {
    SimplePoint p1 = new SimplePoint(2,1);
    SimplePoint p2 = new SimplePoint(8,2);

    System.out.println( p1.distance(p2) ); // 6.082762530298219
  }

}
```

Java makes it easy to represent 2D points. The `SimplePoint` class is one way to do that. Create `SimplePoint` objects at specified locations, then use the `distance()` function to calculate the distances between them.

Thanks for reading.

Follow me on Twitter [`@realEdwinTorres`](https://twitter.com/realEdwinTorres) for more programming tips. 😀
Release 0.4 Planning
Published: 2021-11-28 21:14:26

For my 0.4 release we were assigned to continue our venture into open source repositories. For this release I decided to continue working on the [Seneca IPC144 repo](https://github.com/Seneca-ICTOER/IPC144) because I had gotten to know the project better from my 0.3 release and I wanted to explore more of how the website worked. I also learned a lot from taking a look and reviewing my peers' PRs in that repository so I think this time around I could do a better job. 
I selected 4 issues that were within the same area:
- [#111](https://github.com/Seneca-ICTOER/IPC144/issues/111)
- [#122](https://github.com/Seneca-ICTOER/IPC144/issues/122)
- [#123](https://github.com/Seneca-ICTOER/IPC144/issues/123)
- [#127](https://github.com/Seneca-ICTOER/IPC144/issues/127)

I plan on going through each issue one-by-one in the order listed because I think as I work on one it will help me get a better understanding of how to take on the next. My goal is to finish the first three issues for this week and then to begin figuring out how to achieve a solution for issue 127. For my audit and fixing issues I will use the knowledge I gained from my previous audits/reviews of audits, my goal is to attempt to fix the page so when it is reviewed there will be if not none then, less mistakes than I had the first time I made an audit. That is the basic plan for my release 0.4 we shall see how it goes the end of this week. So until next time take care!
"The Harder you work for something ,the greater you will feel when you achieve it." week 5 
Published: 2021-11-28 20:51:10

title says pretty much about me last  friday😊, when we was doing a demo , i was happy and proud of what my team and I put together through the whole week 5. 

it all started on monday with Mr Regis, we been given a task to imprement Security , test , logs in our App. it was not easy but it was fun after all.
within the week we had some soft skills , first was design thinking with olaf. i learnt alot from this and am ready to use it out there in designing solution. another lesson was time management,we played a game of trying to spend 86400$ in a day and we all came up very wise investement and assets and finally we get that it is eqaul to time in seconds we have per day so we have to spend it wisely as well.

we had alot this week especially on tech side and we learnt alot as well, whole team time have really leveled up in every angle, there is huge difference between dany of 5weeks ago and now. 

let me end up by saying " am thankful for each and everyday i spend here" 
Thank you Code of Africa and Awesomity Lab🙏🏽🙏🏽🙏🏽🙏🏽
Input stepper
Tags: swift, ios, opensource, mobile
Published: 2021-11-28 20:25:15

Hi! I recently have to implement an input stepper in some iOS app (SwiftUI) and it was not so easy as it may seem. My input stepper had to support long press gesture. I decided to create some library which makes the whole process of creating such a control trivial.

You can find the source code here:
{% github mateusz800/InputStepper no-readme %}

Some basic code:
```swift
import InputStepper

....
  // declare initial value
  @State var value: Float = 120

  var body: some View {
      HStack {
          MinusButton()
          Value()
          PlusButton()
      }
  }
}
```

Of course you can customize the view of each element. More on that [here] (https://github.com/mateusz800/InputStepper#customization).


If you want you can leave in comment some screenshot 📷 of your custom input steppers. 

Of course any contribution to the library is welcome.
Add comments to your Gridsome app!
Tags: gridsome, comments, vue
Published: 2021-11-28 20:06:47

---
title: Add comments to your Gridsome app!
published: true
description: Adding the comments feature to a Gridsome app via Disqus!
tags: gridsome, comments, vue
//cover_image: https://direct_url_to_image.jpg
---

Recently, I had to go through the process of thinking about how to add comments to a magazine website that I had built a while back using Gridsome - a JAM-stack based static site generator for Vue. 

### TL;DR
Of all the commenting engines, if you're looking for something that's free for low usage and easy to integrate: go ahead with Disqus.

Use this excellent component to integrate Disqus for Vue packages : [`vue-disqus`](https://ktquez.github.io/vue-disqus/components/disqus.html#usage).


### Build your own comments?
This is the option I began with. 

- If your application *already has authentication*, then I'd say it might be worthwhile for you to be able to control and own your own comments data by building a comments component. 

However, any standard comments system would expect:
   - nested replies
   - emoji reactions
   - likes 
to be a part of it - things that rapidly start spinning out of the maintainability hand.

### Disqus 
I'd seen Disqus being used across multiple websites for comment management, so I was inclined to integrate it. 

The other option I considered (but quickly abandoned) was NodeBB, but soon realised that it was more of a full-fledged discussions management solution, rather than an easy embeddable comments manager.

### Usage
 Before integrating, all I had to do was: 

1. Create a Disqus account and generate a "shortcode" for my app. 

2. I followed the steps mentioned [here](https://ktquez.github.io/vue-disqus/components/disqus.html#usage) and had no issues integrating.

3. Behind the scenes, the component embeds `<shortcode>.disqus.io` as an `iframe`, wherever you include it. 

### Limitations
Keep in mind that: 

1. Disqus is **not open source**

2. You don't own the comments data that comes in 

3. Although it's free to begin with, **if you're anticipating high traffic or want to remove any ads being displayed on the page**, you might want to check out the pricing pages or investigate alternative solutions.

Happy commenting!
How to contribute on GitHub
Tags: programming, opensource, git, github
Published: 2021-11-28 19:33:04


At the heart of GitHub is to make team collaboration seamlessly. You can only contribute to a public repository or a private repository where you have been added as a collaborator.

###Step 1: Fork the repository

On GitHub move to the repository, you want to contribute to and fork it by clicking the fork button located on the upper right corner.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pze856dn4q4zhi95qkt.png)
 
###Step 2: Clone the fork
Cloning a git repository copies the content of the remote repository to your local device. While on the repository you have forked, click the green clone or download button and copy the displayed URL. 
On your device terminal, run the below command to clone the repository.
``` 
git clone URL_OF_Forked_Repository
```
###Step 3: Create a branch
To start working on the codebase, you must first navigate to the project folder and create a branch.
```
cd projectfolder
```
```
git checkout –b branchname
```
###Step 4: Make the changes, stage, commit and push them
After making the changes on your local repository, you need to make them available in the remote repository. Run the below commands
`git status` to check uncommitted changes
`git add *` to add all  the changes to the staging area
`git commit –m ‘the commit message’` command to commit the changes
`git push origin branchName` to push the changes to GitHub

###Step 5: Pull the requests
on your GitHub account move to the repository that you have just committed the changes and refresh the page. You will see a green Compare and Pull request button. Click on it and the maintainer will merge the commits.

#How to sync a repository
While pulling the request you may run to some troubles such as having your repository several commits behind the main repository. That happens when a team member pull request gets merged after you had forked the repository.
Consequently, you need to upstream the changes to sync it with your repo.

###Step 1:  Add a new remote upstream repository
you should add a remote upstream repository as the parent of your local repo. That will give it a reference project where it will inherit any changes made. 
First, run `git remote -v` to check if your repo has a parent
If no parent is listed, run the below command to add one.
```
git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git
```

###Step 2: Sync the repo
To sync the repo, first, move to the main branch.
```
git checkout main
```
Now, fetch the changes from the original repository to your repo, by running the below command;
```
git fetch upstream
```

Lastly, merge the changes with the main branch.

```java
git merge upstream/main
```
That’s it, your forked repo is up to date, you can go on push the changes and pull the request.
React Tailwindcss TypeScript Vite Starter Template
Tags: react, tailwindcss, typescript, vite
Published: 2021-11-28 19:55:24

![React + Tailwindcss + TypeScript + Vite Starter Template File Structure](https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template/raw/main/public/react-tailwindcss-typescript-vite-template.png)

This is a starter template for React + Tailwindcss + TypeScript + Vite.

### Project Structure

![React + Tailwindcss + TypeScript + Vite Starter Template File Structure](https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template/raw/main/public/Files.png)

## How to use this template?

### Use Templete

You can use this template by just creating a new repo with this template by clicking on the "Use this template" button.

![Use-Template-Screenshot](https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template/raw/main/public/Use-Template-Screenshot.png)

### Clone this repo

You can also clone this repo.

```bash
git clone https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template.git
```

## Installation

After cloning the repo go to the directory and run

```bash
yarn
```

Then run the dev server by running

```bash
yarn dev
```

After this go to `htpp://localhost:3000` and you should see this screen.

![React + Tailwindcss + TypeScript + Vite Starter Template](https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template/raw/main/public/react-tailwindcss-typescript-vite-template.png)

If this template helps you then please don't forget to give this repo a star ☺️

Thank you

[Github Repo](https://github.com/rohid-hub/react-tailwindcss-typescript-vite-template)
Same string, different output... how Laravel's slug & snake helpers differ
Tags: laravel
Published: 2021-11-28 19:47:37

**TL;DR** 👇

```php
Str::slug('PHP') === Str::snake('PHP');

// False

Str::slug('php') === Str::snake('php');

// True
```

At face value both `Str::slug` and `Str::snake` seem to have a similar purpose and are simple to use, given a string they convert it to their respective formats.

```php
use Illuminate\Support\Str;

Str::slug('php');

// php

Str::snake('php');

// php
```

You'd therefore think that given the same single word string both methods would consistently produce similar outputs, each in their respective formats. However lets see what happens if that string contains uppercase characters.

```php
Str::slug('PHP');

// php

Str::snake('PHP');

// p_h_p
```

These two methods aren't that similar after all, as uppercase characters result in a separator character being added when using `Str::snake`. 

Both `Str::slug` and `Str::snake` do allow you to specify which character is used as the separator, so maybe if we specify what separator is to be used things will become more consistent.

```php
Str::slug('PHP', '_');

// php

Str::snake('PHP', '-');

// p-h-p
```

It's the same behaviour there as well, `Str::snake` still uses the separator character even when we provide the slug separator (dash) as the parameter. Likewise `Str::slug` doesn't use the custom separator even though the snake separator (underscore) was given as the parameter.

Now we know the `Str::snake` method is actually case sensitive, which could be very import when making comparisons or converting from one format to another.

```php
$input = $request->input('programming_language');

Str::snake('php') === Str::snake($input);

// True when $input === 'php'
// False if $input === 'PHP'

$input = Str::lower($request->input('programming_language'));

Str::snake('php') === Str::snake($input);

// True if $input === 'php' or 'PHP'
```
Blank Screen when deploying react app in gh-pages
Published: 2021-11-28 19:45:31

I'm going to explain really quickly how to make it work your react page when deploying on gh-pages

If you're using react-router-dom BrowserRouter is almost for sure that it will not work and just will show your screen white or just nothing.

You will have to replace it with HashRouter

import {HashRouter} from 'react-router-dom'

I share this cause it was a problem that i had, hope someone found it helpful.
Principle and Practice Using C++, Kendime Notlarım #Kısaca
Tags: cpp, beginners, programming
Published: 2021-11-28 19:39:06

Merhaba; geçmişteki ben, gelecekteki bunları okuyacak değerli insanlar.
Bir süredir başlayıp sonra da ertelediğim isteğime artık ciddi niyetlerle başlıyorum( tabi bu arada sizlerin de faydalanmasını istiyor ve umut ediyorum).

Bu dili seçim seçmemdeki amacım, tamamen mesleki hedefler ve yatkınlığımı hissetmem nedeniyle oldu. Yazar ve kitap seçimim tamamen internetteki araştırmalarım ve aynı yazarın The C++ Programming Language kitabının ilk sayfalarında “bu kitap biraz daha bilgili insanlar içindir, o yüzden siz notlarını çıkaracağım kitaba çalışın” demesiyle oldu.

Aslında bir süredir ilgileniyorum ama hem benim o ciddiyeti bir türlü devam ettirememem, hem hayatta yaşadığım bazı şeyler, hem de karşılaştığım bazı sorunlar nedeniyle takılıp sonunda pes etmem nedeniyle kendimi linkteki gibi [beşinci günün şafağını beklerken buldum.] (https://www.youtube.com/watch?v=EApCLbgAE5E)
  
Evet, o gün bugündür. Rohirrim, kralaa!!! :) Gelecekteki ben, inşallah hedefine ulaşmış bir şekilde bu yazıları çayını yudumlarken okursun. :)
Şakası bir yana, bazı konularda okul zamanımdan gelen bilgilere sahibim. Ama burada kitap merkezli ve internet yardımlı çalışacağım için bir nevi sıfırdan başlıyor olacağım. Yararlandığım siteleri de mutlaka eklemeye çalışacağım.
Olursa eleştirileniz ve yardımlarınız için her zaman açığım. Okuduğunuz ve zaman ayırdığınız için teşekkür ederim. ( Bu arada, geçmişteki Burak dinlediği müzikleri paylaşmaktan aşırı zevk alıyor ara ara linkleri böyle satırlar arasına gizleyeceğim sanırım. :) )
Million.js 1.0.0 Release!
Tags: react, webdev, javascript, showdev
Published: 2021-11-28 19:23:23

> [_`<1kb` compiler-augmented virtual DOM. It's fast!_](https://github.com/aidenybai/million)

I initially started Million.js on a whim. I wanted to tinker around and figure out how to build a simple virtual DOM, and maybe share it with a couple friends. Six months later, Million.js 1.0.0 is completed!

It's been a hot minute, but I've genuinely enjoyed every moment of the process. I'm insanely ecstatic to finally present a stable version of something I'm proud of.

[![YT Video](http://img.youtube.com/vi/dAHD-k0zSuo/0.jpg)](http://www.youtube.com/watch?v=dAHD-k0zSuo "MILLION.JS 1.0.0")

### What is Million.js?

It's a Virtual DOM, or the architecture React is built off of. Its goal is to be a compile target for Transitional UI Libraries by providing ways for compilers to optimize diffing.

Essentially, Million.js leverages the declaratively and flexibility of the Virtual DOM and while deferring to the compiler when optimizations can be made.

It also is composable, but sensible by default, allowing you to build scalable, increasingly complex logic, but also enjoy best practices with simple API if need be.

```js
// Composable
const diff = node([children(), props()]);
const data = diff(el, newVNode, oldVNode, []);
flush(data.workStack, schedule);

// Equivalent sensible default API
patch(el, newVNode);
```

And more complex usage of the default API:

```js
import { m, createElement, patch } from 'million';

// Initialize app
const app = createElement(m('div', { id: 'app' }, ['Hello World']));
document.body.appendChild(app);
// Patch content
patch(app, m('div', { id: 'app' }, ['Goodbye World']));
```

### Why?

- 🦁 Built for libraries that compile
- 📦 Lightweight bundle size (<1kb brotli+min)
- ⚡ Fast runtime operations
- 🛠️ Composable using drivers, sensible by default


### Next Steps

I want to bootstrap a compiler using babel JSX AST plugins and explore the possibilities around automatically applying flags, deltas, and keys at build time to optimize away unnecessary diffing.

Additionally, I want to see what new paradigms and APIs can be built for new UI libraries, and possibility greater adoption of Million.js or tangential ideology.

All in all, I'm excited for the future of Transitional UI Libraries, and I hope Million.js is a step towards that future!


### Learn more:

- [Documentation](https://million.js.org)
- [GitHub](https://github.com/aidenybai/million)
- [Research Paper](https://www.overleaf.com/read/sztmjdmfzykx)
- [Conference Slides](https://docs.google.com/presentation/d/e/2PACX-1vQ5ChzziKq1rgjKP0PvMVjJwd4x8_H0EdNbeUQmMzG7k8k3AloQRm86D9aEuvwzz2GtPW6JCiRTx_9P/pub?start=false&loop=false&delayms=3000)
- [Benchmarker](https://million.aidenybai.com)
- [Video](https://youtu.be/ak4oJvWU0bY)