teleren/devto huggingface dataset:
Fixed navigations and sections - here is scroll-padding
Tags: css, todayilearned
Published: 2021-04-17 22:04:57

When having a fixed navigation bar at the top, you might came up with the same problem:  
You create a link to scroll to another section on the page, but the fixed navigation bar at the top hides the headline of the section the browser scrolled to.

## scroll-padding-top: 100px;

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rro26o0rzxgipvsiyhgn.png) 

That's it. This CSS property adds 100px space between the element with the ID you want to scroll to and the page top. The only thing you have to do now is to replace the 100px with the height of your navigation bar and maybe a bit of extra space.

```css
html {
   scroll-padding-top: 100px;
}
```

## Live example

{% codepen https://codepen.io/EinLinuus/pen/gOgjBpO %}

## That's not all

You can also use `scroll-padding`, `scroll-padding-bottom`, `scroll-padding-right` and `scroll-padding-left`.

## Compatibility

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss0r2g57s3jcbnkssa0r.png) [Source: caniuse.com](https://caniuse.com/?search=scroll-padding)
Hi!
Tags: devjournal, programming
Published: 2021-04-17 21:30:44

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2d10idaepc138mn6cv1.jpg)
I'm Artur, and this is something I though of early today. As I'm facing so many problems during the development process, and the results for many searches aren't addequate to the particular environment of the code I'm writing. This blog could be a journal on the amateur development process of job challenges, personal projects, and similar.

Buckle up.
</>
Arrays!
Tags: javascript, devops, tutorial, beginners
Published: 2021-04-17 21:28:08

####Store Multiple Values in one Variable using JavaScript Arrays

With JavaScript array variables, we can store several pieces of data in one place.

You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry. 
* For example:
```
var myArray = ["Video Games", 23];
```
The variable myArray which is an array contains both a string and a number.

####Nest one Array within Another Array
You can also nest arrays within other arrays, like so:
```
var myArray = [["Anime Shows", 36], ["Video Games", 23]];
```
This is also called a multi-dimensional array.

####Access Array Data with Indexes
We can access the data inside arrays using indexes.

Array indexes are the same as bracket notation that strings use, although that instead of specifying a character, they are specifying an entry in the array. Also just like strings, arrays use zero-based indexing, so the first element in an array has an index of 0.
* For example:
```
var myArray = [10,20,30];

var myData = myArray[0]; 
```
The variable myData equals the first value of myArray which is 10.

Here we created a variable called myData and set it to equal the first value of myArray using bracket notation.

####Modify Array Data With Indexes
Unlike strings, you can change the entries of arrays.
* Example:
```
var myArray = [2,4,6];
myArray[0] = 3;
```
myArray now has the value [3, 4, 6].


####Access Multi-Dimensional Arrays With Indexes
One way to think of a multi-dimensional array, is as an array of arrays. When you use bracket notation to access it, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.
* For example:
```
var arr = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];
```
```
console.log(arr[3]); // displays [[10,11,12], 13, 14]
console.log(arr[3][0]); // displays [10,11,12]
console.log(arr[3][0][1]); //displays 11
```
Coding is after Design.
Tags: programming, softwaredesign, softwarelifecycle
Published: 2021-04-17 20:51:33


Software design and coding are interconnected, but they are not the same. While many people, including programmers, often view programming as binary (right or wrong, good or bad), the reality is much more subjective. There are usually multiple ways to solve a problem, and this is where code design becomes crucial.

Just as GUI design involves visual elements, code also requires careful design. A software designer, much like a graphic designer, typically doesn’t write any code. Instead, they focus on understanding the project requirements and setting up a functional specification that outlines the technologies, data architecture, and information flow. They define the software’s functionalities and create a high-level blueprint of the software to be developed.

This blueprint is then handed over to a team of programmers who write the actual code to bring the design to life. Ideally, a software designer should have coding experience and a solid understanding of data architecture and workflows. They need to be logical and knowledgeable about the technologies being used to ensure the design is practical and implementable.

In summary, effective software development relies on a clear distinction and collaboration between design and coding, with each role contributing its unique expertise to the final product.
Bracket Notation
Tags: javascript, devops, beginners, tutorial
Published: 2021-04-17 20:49:02

Bracket notation is a way to get a character at a specific index within a string.

Most programming languages, like JavaScript, don't start counting at 1 like we do. They start at 0. This is referred to as Zero-based indexing.
For example:
####If we wanted to find the first Character in the firstName variable
```
var firstName = "Randy";
console.log(firstName[0]); // would display the letter R 
```
####and if we wanted to find the third character in the firstName variable?
```
var firstName = "Randy";
console.log(firstName[2]); // would display the letter n
```
My Twitch Stream Setup
Tags: twitch, streaming, learninpublic
Published: 2021-04-17 19:27:33

So I started streaming on Twitch last year.

{%link https://dev.to/nickytonline/i-ve-started-to-live-code-on-twitch-for-dev-13cn %}

Most of my streaming efforts have been dedicated to the DEV Twitch stream, but I'm finally getting back into streaming regularly on my own stream as well.

{%link https://dev.to/devteam/let-s-pair-during-a-live-coding-session-8he %}

I've been streaming for about a year now, so I've tweaked things as I've gone along and have learnt some things from fellow streamers.

Here was how my stream looked liked about a year ago.

![Nick Taylor's Twitch stream about a year ago with a very basic layout. Just a screenshare and a webcam](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzgad8wb78yytjs0de3n.png)

Here is what it looks like now as of yesterday. 

![Nick Taylor's Twitch stream improved with integrated chat, and more assets to make things look better](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56s9mufap1oia35udov1.png)

I thought to get back in the swing of things with my stream, that it made sense to go through my setup. The video is still up on Twitch, but I'm going to link to the YouTube as the Twitch recording disappears in two weeks.

{%youtube H7HGYV2dT-w %}

Things that I cover are how I made the layout, what I use for video/screen sharing and **how to provide and enable closed captioning** for viewers.

I talk about using Discord for video and screen sharing, but initially I started with Zoom. It worked, but I found it clunky having to transition to the shared screen view. Maybe if I had a stream deck, this wouldn't have been an issue. There is also [obs.ninja](https://obs.ninja) which I've used when I was on @chaelcodes's [stream](https://www.twitch.tv/chaelcodes). I'm exploring using this right now for my own stream, and maybe eventually the [DEV stream](https://www.twitch.tv/thepracticaldev).

In this particular stream, the audio is all good, but there is a delay between the video and audio which never happens when I stream usually, so I'm chalking it up to showing my stream setup in the stream. 🙃

I forgot to talk about my hardware setup, so for that, checkout [my uses page](https://iamdeveloper.com/uses).

All streaming happens on Twitch, but as mentioned, I also upload them to YouTube. Feel free to give me a follow on both. 😎

* [livecoding.ca](https://livecoding.ca)
* [youtube.iamdeveloper.com](https://youtube.iamdeveloper.com)

If you are a streamer, I'm curious about your setup!
Connecting Android Apps to localhost, Simplified
Tags: android, testing
Published: 2021-04-17 19:20:08

> P.S. if you're in a hurry, find the correct solution [here](#the-correct-easy-way)

I was working on a full stack side project a few months ago, and I wanted to make API requests from my android app to my desktop, and for some reason `localhost:8000` wasn't simply accessible by my phone.

Well, understandable, I know that every device's localhost is independent and cannot be accessed by your home network (your Wi-Fi, for example). So the localhost on my laptop won't be able to access the localhost on my phone.

So, I asked Google for help. And I got a large number of solutions, the most sensible one being "use the internal IP address of your PC", et voilà.

# The Bad way

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgakgpfuw4eyvjud9tin.png)
<figcaption>Use ipconfig if you're on windows</figcaption>

Running `ip addr` on my machine tells me that the laptop's internal IP is `192.168.29.76`.

And sure enough, as long as both devices were using the same Wi-Fi network, accessing `http://192.168.29.76:8000` instead of `http://localhost:8000` did work. My Android app can now make web requests to my local backend server 🎉

But this solution is... a bit unstable.

The internal IP of your laptop can keep changing whenever it connects to Wi-Fi, depending on various factors. And everytime it changes, you have to change the URL in your app's code, which is not ideal.

There's other ways as well like using ngrok, but it faces similar issues.

# The Correct, easy way

use `adb reverse`.

Yup, that's it.

Connect your android device to your pc via USB, ensure you have [adb setup](https://www.xda-developers.com/install-adb-windows-macos-linux/), and run this in your terminal:

```bash
adb reverse tcp:8000 tcp:8000
```

Now, your mobile can access `localhost:8000`, just like your PC. (you can replace `8000` with whichever port you want to forward)

# Why did nobody tell me this?

Yeah, I was also surprised when I was unable to find anyone on Google or StackOverflow mentioning the existence of `adb reverse` when I tried to look for it.

Which is why I wrote this blog. Now hopefully, `adb reverse` will become more popular.

If you know why `adb reverse` isn't as popular, let me know. Also, if you know another android developer that should know about this little productivity hack, why not share this blog with them? :P

---

Cover image courtesy of <a href="https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Fotis Fotopoulos</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Working with Git
Tags: git
Published: 2021-04-17 19:17:30

---
title: Working with Git
published: true
date: 
tags: git
canonical_url: https://cgweb.co.uk/blog/git
---

Git is a version control system for everything from small sites to large scale apps and sites. The first step is to download and install it on your machine whether your OS of choice is (Windows, macOS, Linux). Although there are GUIs available e.g. Github Desktop it is easy to get started on the CLI (Command Line Interface) which could be the terminal like or git bash or the built-in terminal in your editor. 

You can get started by creating an empty repository (or repo) on your host of choice mine is [Github](https://github.com) you then clone that empty repo into your files which creates a copy of this locally and then add your files to this folder. If you already have a folder with files you wish to add to git you can do this with the following commands (which will be shown to you): 

```git 
git remote add origin git@github.com:'YOUR_USERNAME'/'REPO_NAME'.git 
git push -u origin master 
``` 

### Key Commands 

- `git add`: this command add files to git and makes sure any changes are 'tracked' which are added to the 'staging area' - this is the middle man where you can check any updates/changes before committing 

- `git commit`: this commits or finalised your changes when using this you need to add `-m` which is a relevant message explaining your changes e.g. 

```git 
git commit -m 'updated footer' 
``` 

- `git push`: this 'pushes' any changes to the remote repo on Github so it is accessible to everyone - `git pull`: this opposite to push this will 'pull' any updates into your local repo so you have the most recent changes available to you 

- `git status`: this will give you information about your files e.g. whether or not changes have been made and whether they have been tracked 

- `git rm`: remove a file from the 'staging area' if updated by accident - `git log`: this will give a list of the most recent commits e.g. date and who committed the updates 

-`git diff`: this will show differences between original files and the most recent updates

### Branching and Merging 

- `git branch`: this is most useful for larger software/app projects where you can complete updates without modifying the original content e.g. 

```git 
git branch footerfix 
// creates a new branch called footerfix 
git branch 
- master 
- footerfix 
``` 

The default branch will be the `master`, but you can create several updates for different things you may be working on. Switching branches use the `git checkout BRANCH_NAME` e.g.

```git 
git branch 
* master // this will be the default branch footerfix 
// switches from the master to the new footerfix branch
```

To delete a branch, use the `-d` flag: 

```git
git branch -d footerfix 
```
Run machine learning jobs on AWS with a single command
Tags: aws, python, machinelearning
Published: 2021-04-17 19:11:38

Hey everyone,

My co-founder and I just launched Nimbo, a dead-simple CLI that allows you to run jobs on AWS as if you were running them locally. GitHub: https://github.com/nimbo-sh/nimbo. Docs: https://docs.nimbo.sh.

We decided to build this because we were frustrated with how cumbersome using AWS was, and we just wanted to be able to run jobs on AWS as easily as we run them locally. At the same time, we wanted to make use of cheap spot instances (on Nimbo, this is a single parameter). All in all, we didn't like the current user experience.

For this reason, we also provide many useful commands to make it faster and easier to work with AWS, such as easily checking prices, logging onto an instance, or syncing data to/from S3 (you can see some useful commands here).

Unlike other similar services, we are solely client-side, meaning that the code runs on your EC2 instances and data is stored in your S3 buckets (we don't have a server; all the infrastructure orchestration happens in the Nimbo package).

We have tons of ideas for Nimbo, such as one-command Jupyter notebooks on EC2, add docker support, and (my personal favorite) provide images with preloaded large datasets like ImageNet, so that you don't have to download and store it yourself - you simply spin the instance, and the dataset is available at /datasets.

We are happy to receive any feedback and suggestions you have.
Get live crypto prices with python
Tags: crypto, python
Published: 2021-04-17 19:07:43

#Getting started
With all the craze around crypto coins I thought it would be a fun project to pull live prices from Binance.us. To first get started head over to [https://www.binance.us/](https://www.binance.us/) to get signed up, from there hover over your user account and select API management. Give a name for your api project then copy and paste your api key and api secret to a text file, you only can view your secret once so make sure you save it in a good place.

#The Code
First you need to pip install python-binance, from there 
```python
from binance.websockets import BinanceSocketManager
from binance.client import Client
client = Client(api_key, api_secret)
```

Pass in your key and secret however you would like, then create the manager like so 
```python
bm = BinanceSocketManager(client)
# start any sockets here, i.e a trade socket
conn_key = bm.start_trade_socket('DOGEUSDT', process_message)
# then start the socket manager
bm.start()
```
Almost there now all we need to do is create a callback to process the data 
```python
def process_message(msg):
    print("Current Price: {}".format(msg['p']))
```

Now we can see the live price for Doge 
![Doge price](https://i.imgur.com/89usAur.png)

Read more here [docs](https://python-binance.readthedocs.io/en/latest/overview.html)
Foolish Learner🎯
Published: 2021-04-17 19:03:14

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlocnrr9j5t84ndaz7aj.png)

As I am in my second semester of my college, and at the beginning of that I was totally new to coding and stuffs . I usually asks someone who was a pro level coder who was consistently doing it from his 8th standard or 9th .
I tried many things such as machine learning , learning different types of languages such as c,c++ , java , pyhton , ruby and many more . but at the end of the day I was in such a pressure that if I am doing something wrong which would not give me that much of result , which I captured from that doubt only and discovered that in real life about the existence of “Quality over Quantity “and from that onwards I started working on only some particular languages which was the first stone I crossed

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa2uz52oo5oovxn7xgvt.png)


So when I realised my mistake I was in my second semester and sometimes I think that I am far behind from the top 1% , but that keeps a person motivated , make your own hurdles , cross them -> MAKE MORE HURDLES !
Whatever you are starting you should get up and start that , don't compare yourself with others and keep motivated . Only you know your success rate as the success according to me is in comparison to your past version .

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6xp7lyb14eyffx4bjgt.png)

I am just in love with the journey of Steve Jobs story and quotes and also his way of doing work , as the legend himself said ~ “Stay hungry stay FOOLISH”
treat yourself as a foolish and explore to learn new things ..
I am now trying to do something new and unique and you can call me a foolish because Iam .. !
Started learning new things and now became my goal to be exploring each field .
BEGINNER-> PRO
Stay Motivated and don't make your fear of comparison a enemy of yours 😉
How to create a project in Android Studio
Tags: android, project, app
Published: 2021-04-17 18:34:17

In this article, you are going to learn How to create a project in Android Studio.
I assume that you have Android Studio installed on your device.
In the first step, you have to open Android Studio and click on <b>Create New Project</b>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/envot7zp5ofhm801lutr.png)
After doing this, you have to select a project template for our app. There are many project templates in Android Studio like:

<b>No Activity</b>- It will create empty projects means you have to add the MainActivity by yourself.

<b>Basic Activity</b>- It will create a new basic activity with Navigation Component.

<b>Bottom Navigation Activity</b>- It will create a new activity with bottom navigation.

<b>Empty Activity</b>- It will create a new empty activity. Most of the time you will use this activity.

<b>Navigation Drawer Activity</b>- This will create a new activity with navigation activity.

Apart from the above templates, there are also other templates available in Android Studio.
You can know the use of each template by just clicking on them.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eum06koe782mzqex2o3i.png)
After selecting the required template click on the Next button, then a <b>Configure Your Project</b> screen will open.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik3smgqeouvw35vh3xx5.png)
From this You can change:

<b>Project Name</b>- This will the name that you want to give your project

<b>Package Name</b>- It will uniquely identify the app on the device. Make sure to change your package name. Your package name shouldn't be like com.example.appname because Google will not allow you to publish the app with such package names.

<b>Save location</b>- This is the location where you want to save your project.

<b>Language</b>- The language in which you want to write the code for the app. Java and Kotlin are the two available options.

<b>Minimum  SDK</b>- This the minimum version of Android that your app can run on. It will show for the specific version, your app will run on what % of devices like
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvu6rpsrg7r2g5u8gbgt.png)for Android 8.1 it will run on 53.5% of devices
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gatyp14zh6nspow7hu0z.png)and for Android 4.1 it will run on 99.8% of devices.

After filling all the fields click on the finish and your project will be created.

Happy Learning!
Top 10 Trending Technologies in 2021 5G Technology
Tags: news, javascript, reactnative, bigdata
Published: 2021-04-17 18:23:23

1. Internet of Behaviours(IoB)
2. DevSecOps
3. Intelligent Process
4. Automation(IPA)
5. Tactile VR
6. Big Data Analytics
7. Human Augmentation
8. Everything-as-a-Service(XaaS)
9. Cybersecurity
10. Artificial Intelligence(AI) 

Thanks

#Contact me 
@priteshbhoi  /  https://www.linkedin.com/in/pritesh-bhoi
So you've overwritten the partition table of that disk by mistake again huh?
Tags: sysadmin, linux, partitions, recovery
Published: 2021-04-17 17:54:33

This is something that I have done more than once unfortunately. But the good news is that as long as you don't write anything on the disk, you can easily recover the partitions and it's content with this nice tool: `gpart` (not to be confused with `gparted`)

In my case, I accidentally created a new msdos partition table on /dev/sdb, so what I had to do was run:

```bash
sudo gpart /dev/sdb
```

to run a scan on that disk and see if `gpart` could find any data, and it did. It showed me 4 o 5 "guesses", the first of which was obviously correct because it was the only one with actual data (the others were all zeroes or other nonsense).

So after reading what were the possible actions to restore the partition table, I ran:

```bash
sudo gpart /dev/sdb -W /dev/sdb
```

and this means that I will (-W)rite the "guessed" table to the same device (/dev/sdb). After that it asked me which of the guesses I wanted to save, so I selected 1 for the first one, and then it was done and I was asked to reboot.

I did, and there were all my partitions with all the data intact, back to me.