teleren/devto huggingface dataset:
GitLab diff color system
Tags: gitlab, sourcecodemanagement, webdev, discuss
Published: 2022-07-13 22:45:56

GitLab recently allows every user to modify colors in diff.

I have used the default values with Monokai syntax highlight for 7 years at `GitLab.com`:

![My preference on GitLab.com used for 7 years](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h66pe4djl00j3qdkjsc4.png)

However, today I found these are not perfectly configured and so I need to change it soon.

### What color have used for it for 7 years?
- deletion: `#c87872`
- addition: `#678528`

### What color should I use for it from today?

For light theme, I can choose:

- deletion: `#FFEBE9`
- addition: `#E6FFEC`

### Why?

As I use GitHub as well as GitLab, the colors in both should be the same if possible.

Ciao! :wave:

### References from GitHub (as of 2022-07-13)

```css
--color-diff-blob-addition-num-bg: #CCFFD8;
--color-diff-blob-addition-line-bg: #E6FFEC;
--color-diff-blob-addition-word-bg: #ABF2BC;
--color-diff-blob-deletion-num-bg: #FFD7D5;
--color-diff-blob-deletion-line-bg: #FFEBE9;
--color-diff-blob-deletion-word-bg: rgba(255,129,130,0.4);
```

### GitHub's diff color as of 2014

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6crn03as7tofq038fsfl.gif)

## Resources
- [Add user preferences to customize Diffs colors (gitlab-org/gitlab!78281 by @wwwjon](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/78281)
- [GitLab 14.10 released with individual compliance violation reporting and a UI for streaming audit events (APR 22, 2022)](https://about.gitlab.com/releases/2022/04/22/gitlab-14-10-released/)
- primer/css source code: https://github.com/primer/css/blob/6f7726a97e8aebe7620c93d6746a16147f7b80d7/src/support/mixins/color-modes.scss

Image courtesy of GitHub: https://github.blog/2014-09-04-better-word-highlighting-in-diffs/
How we're smashing our technical debt
Tags: techdebt, legacycode, productivity, okr
Published: 2022-07-13 22:40:00

Technical debt is a problem that plagues every software project and technical organization. Leftover tasks, legacy code, open issues - it feels like there is never enough time to visit these things and get them done, when there are so many more important things to do. But letting it pile up can lead to problems - no one likes a messy codebase or security issues! The Lagoon team decided we were going to tackle our tech debt head-on, and we want to share how we’re doing it. 

Last year, amazee.io decided to start implementing OKRs (objectives and key results) across the company as a way to help each team focus and measure our progress. Last quarter, the Lagoon team created an objective around eliminating our technical debt, and set a key result to hold a fortnightly “debt smash” session. 

Every other week, the team meets for an hour and we focus only on eliminating tech debt and legacy issues. We go through the issue queue, closing out old issues, or getting clarification to see if issues are still valid. We review pull requests and close out old PRs that are no longer valid. We resolve small issues that have been sitting around just waiting for someone to take them on. We find and remove legacy code from the codebase. 

The key here isn’t so much what we’re doing, but that we’ve set aside the time, and that we commit to doing the work every time we get together for one of these “debt smash” sessions. It’s surprising what we can accomplish with just two hours a month!

This quarter, we’re continuing to hold our debt smash sessions, but to make sure we’re continuing to make progress, we’re going to create a goal for each session, and hold ourselves accountable for reaching that goal - whether it’s closing a certain amount of issues, or completing a certain task, we want to keep ourselves accountable and keep smashing through our technical debt!
Q1. How would you check if a number is an integer?
Tags: javascript, webdev, career, programming
Published: 2022-07-13 22:39:01


Ans. A very simple way to check if a number is a decimal or integer is to see if there is a remainder left when you divide by 1.

``` javascript
function isInt(num) {
  return num % 1 === 0;
}

console.log(isInt(6)); // true
console.log(isInt(11.5)); // false
console.log(isInt(0.6)); // false
```


1 Of 20 Js [Interview Questions](https://dev.to/saiarlen/series/18866)🙂
Any comments or examples would be appreciated🙃
Creating Weather App using Weather API and Node Js : Part Two
Tags: javascript, webdev, node, beginners
Published: 2022-07-13 22:34:48

In part one 👉👉 (<a href="https://dev.to/adolphtech/creating-weather-app-using-weather-api-and-node-js-part-one-1n49">Part One</a>) we made our API get the longitudes of the location we want. In this part we are really going to get the weather data of the location using another API.

We are going to use  <a href="https://weatherstack.com">Weather Stack</a>.The first step to using the API is to authenticate with your weatherstack account's unique API access key, which can be found in your account dashboard after registration. To authenticate with the API, simply use the base URL below and pass your API access key to the API's `access_key` parameter.


```
http://api.weatherstack.com/current
    ? access_key = YOUR_ACCESS_KEY
    & query = {coordinates}

```
Weather Stack is easy to integrate and there is an option of passing the place name you want to get the weather here is an example
```
http://api.weatherstack.com/current
    ? access_key = YOUR_ACCESS_KEY
    & query = New York
```
But today we are going to use the geoCoding where we will pass the coordinates returned from the geoCode function we created in part One.In part one the function returns an object so to access the latitude will be `cordinates.latitude` and longitude we use `cordinates.latitude`.



```
geoCode("Nairobi").then(async function(cordinates){
   response = await axios.get(`http://api.weatherstack.com/current?access_key=**your Accesskey&query=${cordinates.latitude},${cordinates.longitude}&units=m`)
   const description=response.data.current.weather_descriptions[0];
   const temperature = response.data.current.temperature;
   const timeTaken = response.data.current.observation_time;


})
```
This code will get us the weather data  but we are going to only use the `description ,temperature and time the data was recorded`.

In the next part we will be structuring our files and start working with express
Day 592 : Action
Tags: hiphop, code, coding, lifelongdev
Published: 2022-07-13 22:30:34

_liner notes_:
- Professional : Not a bad day. Did mostly planning stuff for upcoming talks. I did start to create an application to demo a feature. For me to understand something, I kind of need to see it in action. So yeah, worked on those things today.

- Personal : Last night I went through some tracks for the radio show. I also did some code refactoring for my next side project. I think I also may have figured out how I want this section I'm adding to work. Not a bad night.

![View of a lake in Moraine Lake, AB, Canada with a pine tree forest on the left side and a mountain range on the right extending into the background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjd5c4l9yd26hw70pfmf.jpg)

So it's raining pretty heavy outside and it looks like the internet went out. Awesome. We'll see what I can get done off my phone's hotspot.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube _DIU2PvHs5U %}
Figma
Published: 2022-07-13 22:09:17

selanjutnya kita akan bikin title di login page dan di register page. ubah ukuran 24 dan bold, ukuran 20 40
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqdu8pzvs7l97kzysgww.png)
pilih prototype 
selanjutnyakita ke protoype interaction 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oj9upqrtnrss46yjjnz.png)
selanjutnya kita coba kita present tampilannya 
ke![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aeadguco31fblrj94qwr.png)
tika di klik tombol login page maka akan mengarahkan ke layar baru layar login page 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9y1b5fhkyq66zmb07tx2.png)
selanjutnya kita akan buat tombol back di login back 
field rectangle kita kosongkan tanpa wearna walaupun tulisannya kecil tapi cakupan luas.
![tombol back](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2t1dob1me6wu9cr14n0.png)
selanjutnya back dan rectangular akan kita buat menjadi component. sama caranya seperti tombol login shift kita tekan keduanya. 
![create component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0noe2itevijk5wslgqdd.png)
posisinya terletak bagian atas layer kita 
![berubah jadi component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmpqbp0rhrcz6x96pk4d.png)
 
 selanjutnya component yang kita ubah di atas kit apindahkan master component, kenapa kita buat nya dialayar kecil karena mengepasakan di frame
![dari aset kita pindahkan ke login ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk7rm7ds63w28u6hadai.png)
selanjutnya akan fungsikan tombol back. nanti kita akan funsikan tombol back dimasing masing child. ternyata di interaction ada yang namanya back bukan navigate to dia akan mengembalikan ke halaman sebelumnya tidak mesti ke.
![back](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxdn6oxte5u3h9bzoxun.png)
berhasil ke home page 
![berhasil yang menjalankan back](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/745lxczi7v41bhks28ys.png)
 

selanjuntya kita buat tombol register dan dan tulisan register dan kit buat component 
![tombol register](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2nne2kc1r239wpci9jq.png)
sekarang kita punya component seperti berikut , 
![rename register](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09kw6ato9on88wrewzdh.png)
selanjutnya kita tambahkan variant 
![tombol component sekaligus tombol variant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5263j3v5u7z4lsvuih2.png)
kita rubah warna variant jangan default 
![rectangle register kita buat gelap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgt602rcoy8ksl7wcfcq.png)
My first portfolio
Tags: vue, webdev, javascript, github
Published: 2022-07-13 21:45:40

**Hi!**

I built my first portfolio with Vue, Vuetify and Javascript.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgomqalebhc12eq6ip2m.png)

**URL:** [Portfolio](https://santimenendez19.github.io/portfolio/)

Im happy to receive feedback for changes and improvements.

Bye.
Expresiones Regulares
Tags: javascript, regex, webdev, beginners
Published: 2022-07-13 21:45:12

Las expresiones regulares son **patrones** utilizados para encontrar una determinada combinación de caracteres dentro de una cadena de texto.

Para declarar una expresión regular se utiliza **/ regex /**, entonces nosotros declaramos la siguiente expresión regular:

```javascript
//Expresión regular
const regex = /^h/
//Cadenas
const txt = "hola"
const txt2 = "Hola"

//Evaluamos la expresión con el método test()
regex.test(txt); //true
regex.test(txt2); //false
```

> Lo que realizamos en el ejemplo anterior, es... con ayuda del circunflejo(^) le indicamos que evalué una cadena de texto, para ver si esta inicia con la palabra **h**. También podemos utilizar el signo de dólar ($), para que este nos evalué si el carácter termina con dicha letra.

### Coincidencia de una palabra.

A continuación mostramos el código para buscar una coincidencia de cadena.

```javascript
//Expresión regular
const regex = /^hola$/
//Cadenas
const txt = "hola"
const txt2 = "adios"

console.log(regex.test(txt)) //true
console.log(regex.test(txt2)) //false

```

| Regex| Significado                     | 
|------|---------------------------------|
|  ^   |Primera letra de la cadena igual | 
|  $   |Ultima letra de la palabra igual |
|  ?   |el carácter puede venir o no, pero solo una vez|
|  +   |cuantificador que nos dice que puede venir una solo vez o infinitas veces|
| \d   |Solo pueden venir números |
| \D   |Solo pueden venir letras  |
| \w   |Detecta todos los caracteres alfanuméricos |
| \s   |Detecta el espacio |

A continuación mostramos un ejemplo, en el cual lo que denotamos con la expresión es que inicie con 2 o infinitos números(\d{2,}), y después haya una o infinitas letras (\D+) y finalizamos con 2 o infinitos números(\d{2,}).

```javascript
const regex = /^\d{2,}\D+\d{2,}$/
const txt = "12abc68"


console.log(regex.test(txt))

```
Compilation vs. interpretation
Published: 2022-07-13 21:42:01

Computer programming is the act of composing the selected programming language's elements in the order that will cause the desired effect. The effect could be different in every specific case – it's up to the programmer's imagination, knowledge and experience.

Of course, such a composition has to be correct in many senses:

- **alphabetically** : a program needs to be written in a recognizable script, such as Roman, Cyrillic, etc.
- **lexically** : each programming language has its dictionary and you need to master it; thankfully, it's much simpler and smaller than the dictionary of any natural language
- **syntactically** : each language has its rules and they must be obeyed
- **semantically** :the program has to make sense

Unfortunately, a programmer can also make mistakes with each of the above four senses. Each of them can cause the program to become completely useless.

Let's assume that you've successfully written a program. How do we persuade the computer to execute it? You have to render your program into machine language. Luckily, the translation can be done by a computer itself, making the whole process fast and efficient.

There are two different ways of **transforming a program from a high-level programming language into machine language**:

**COMPILATION** - the source program is translated once (however, this act must be repeated each time you modify the source code) by getting a file (e.g., an .exe file if the code is intended to be run under MS Windows) containing the machine code; now you can distribute the file worldwide; the program that performs this translation is called a compiler or translator;

**INTERPRETATION** - you (or any user of the code) can translate the source program each time it has to be run; the program performing this kind of transformation is called an interpreter, as it interprets the code every time it is intended to be executed; it also means that you cannot just distribute the source code as-is, because the end-user also needs the interpreter to execute it.

Due to some very fundamental reasons, a particular high-level programming language is designed to fall into one of these two categories.

There are very few languages that can be both compiled and interpreted. Usually, a programming language is projected with this factor in its constructors' minds - will it be compiled or interpreted?

Thanks for reading my article.
To encourage me continue work, please follow me on Dev.to and Github.

https://dev.to/levintech
https://github.com/levintech
Pt. 1 of Utilizing Spotify's API with RSpotify In a React/Rails Environment
Published: 2022-07-13 21:38:02


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40sz0do24qqy3cwd77ap.png)

As many developers probably know by now - Spotify does a great job at giving access to their API and all of the neat features that come with it. I've spent the past few weeks working on a project which focuses on taking advanced user analytics from Spotify and matching people based on similar taste. 

In order to get my project off the ground I needed to learn how Spotify chooses to authenticate its users - which turns out to be OAuth if you're pursuing more in-depth information. 

Below is a chart that illustrates the authentication process that Spotify wants you to put your users through in order to access their data.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfc4z2655efl61bo51m4.png)

This looks really complicated and if you're someone like me who grew up in the 21st century, reading is not my strong-suit so even though I've probably looked at this flow-chart ~400 times I still don't think I've ever actually read it to completion. 

Regardless... the important things that you should take note of if you want to use Spotify's API is that your Client_id, Client_secret and Redirect_uri need to match EXACTLY. There is a place on the developer dashboard where you can access all of this information and put it into your .env file or wherever you store your secret info (only the client_secret really needs to be kept hidden though). 

**One really important thing that I think Spotify leaves out of its documentation is that you actually need to whitelist users in order to have other users sign-in and use your app.** This is done on the dashboard under "Users and Access". _Make sure that the name and email you put here are an exact match to your user's name (not username) and email._

In part 2 I'll detail a bit about the amazing RSpotify wrapper gem made by guilhermesad on github!
5 Reasons to Use Next.js
Tags: javascript, webdev, nextjs, beginners
Published: 2022-07-13 15:45:20

If you're looking for a React framework that's easy to use and has a ton of features, Next.js is the way to go. Here are 5 reasons why:

1. Next.js is simple to set up and get started with.

2. It has a great community and tons of documentation.

3. Next.js is very fast and scalable.

4. It has built-in features like server-side rendering and static generation.

5. Next.js makes it easy to deploy your applications to production.

##What is Next.js?
Next.js enables developers to create React applications that are fast and scale well. Next.js provides a number of features that make it a good choice for building React applications.

##What are some of its unique features?
###Server Side Rendering (SSR)
One of the most unique features of Next.js is its ability to do SSR (optional per page). This means that your React components will be rendered on the server before being sent to the client. This has a number of benefits, including improved performance and the ability to fetch required data on the server side.
###Static Site Generation (SSG)
Another unique features of Next.js is its ability to do SSG (optional per page). This means that your React components will be rendered at the build time and will be served as static HTML files, which greatly improves performance and SEO, since search engines bots like the ones at Google have all the information they need to work with.
###Code Splitting
Next.js also includes a feature called code splitting. This allows you to split your application into multiple bundles, which can be loaded on demand. This can improve performance by reducing the amount of code that needs to be loaded initially.
###React-Like Component Structure
Next.js is a React framework, which means it's using a React-like component structure. This means that your components are written in a similar way to React components, which means it's very familiar if you already know React.
###Is it the right choice for your project?
###
###How to get started with Next.js
Simply create a new Next.js project using the create-next-app CLI.
```
npx create-next-app my-nextjs-app
```
And that's pretty much it!
Once you have a project up and running, you can begin using the various features that Next.js offers, such as SSR, SSG, and more.



Star our [Github repo](https://bit.ly/3QFgAUf) and join the discussion in our [Discord channel](https://bit.ly/3HQtlYo)!
Test your API for free now at [BLST](https://www.blstsecurity.com/?promo=blst&domain=https://dev.to/5_Reasons_to_Use_Nextjs)!
Cleaning up all local stale git branches
Tags: git, bash, programming, beginners
Published: 2022-07-13 21:15:30

Sometimes, after some great releases (e some broken ones), it's hard to maintain our repo tidy.

To help you dealing with the messy you made creating branches e pushing them away, I found a short command line that remove all local branches that were already merged.

Open your terminal and paste the commando below:

```sh
git fetch --prune | git branch -r | awk '{print $1}' | egrep -v -f /dev/fd/0 <(git branch -vv | grep origin) | awk '{print $1}' | xargs git branch -D
```

It's also available as a Github Gist right here: https://gist.github.com/leandrocrs/428c956144b2b22738765d77e087a188.
Day 95: no focus?
Published: 2022-07-13 21:04:48

Hi!
I don't know how today just ended everything seemed so fast and blurry I can't point out anything that I accomplished today I was struggling with focus and was easily distracted even if there is deadline to meet. usually this would be a sign that I need to rest but I don't feel that tired it just feels weird. I will be sleeping over it maybe something will change but apart from that it was a good day generally
signing off....
Attending My First AWS Summit in New York
Tags: aws, community, news, cloud
Published: 2022-07-13 21:04:37

This was my first time attending an AWS Summit and I highly recommend going if you have never been to one. It was extremely informative and it was great way to meeting new people as well. 

Some of the things that the AWS Summit offered was breakout sessions, customer lighting talks, workshops, chalk talks, partner theater sessions, jam lounge, dev lounge, AWS Training and Certification self-paced labs and AWS Spotlight Labs, AWS DeepRacer League, the Expo, networking reception, and an AWS All Builders Welcome Lounge just to mention a few of the things. 

It was great for all people who are interested in the cloud especially learning more about AWS and what they could offer to you. I attended as many of the events I could have during the summit. The presenters and the amazing people who work at AWS who help put this event on are extremely knowledgeable and friendly. They are willing to answer any questions you may have about the presentation or any other AWS topic you may have. 

The topics I learned about that I'm extremely excited to even learn more about and play around with is [AWS Amplify Studio](https://aws.amazon.com/amplify/studio/) and [Amazon S3 Intelligent-Tiering storage class](https://aws.amazon.com/s3/storage-classes/intelligent-tiering/). AWS Amplify Studio is where you can build react components using Figma. You can build a design using Figma and when you are done you can save your file and make a pull request to make a react component. Amazon S3 Intelligent-Tiering storage class can automatically save you money by optimizing storage costs based on access patterns of your S3 objects. You set up a time frame of when your objects change storage tier after a set amount of days. Then it will change to another tier that will be cheaper to store that data going forward, saving you money. 

I also attended an AWS Customer Council Meet & Greet afterward the summit. It was great to meet some more AWS employees and other AWS customers to hear what they do and how they use AWS.  

I’m excited to attend my next summit.