teleren/devto huggingface dataset:
My experience with Javascript (JS)
Tags: webdev, javascript, beginners, programming
Published: 2022-06-22 00:00:32

Being one of the most popular and arguably one of the most useful languages, I've found that JS is really hard to get into for myself. I started off coding with c++ and Java, and since javascript is similar I assumes that it would be fairly simple to get into, but understanding how JS works with the components of a website and how to properly use it in a full stack situation is far more difficult than what meets the eye. This is my personal experience and everyone is different, but I believe that JS is much harder to implement properly than other languages. But with this difficulty comes increased customization and better adaptability to whatever project or website you want to use it on.
Javascript Style Guides
Tags: webdev, javascript, programming
Published: 2022-06-21 23:38:16

A style guide contains general rules about how to write code. They could include a better way to indent, where to place a function etc.

Here is a list of JavaScript Style Guides to checkout:

    ●Google JavaScript Style Guide
    🔗https://google.github.io/styleguide/jsguide.html
    ●Airbnb JavaScript Style Guide
    🔗https://github.com/airbnb/javascript
    ●Idiomatic.JS
    🔗https://github.com/rwaldron/idiomatic.js
    ●StandardJS
    🔗 https://standardjs.com/
Github tip #2 (EN)
Tags: github, webdev, beginners, html
Published: 2022-06-21 23:27:42

Do you know is possible use github as a host **FOR FREE** for you website?

Don't know it? Just follow this thread

Github has **Github pages** tool from any repository is possible host your website.

The link for the web will be something like this one: http://senhorbento.github.io

To active it is pretty simple, just go on your repository click on settings -> pages

In source just chose a branch and the source folder, where the index.html is, (for default is selected the root folder) and click in save.

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


If everything is alright, in you repository will show an icon next to the description from your last commit, indicating everything is correct and in the right bottom corner will appear a indicator from the github pages like is this [repository](https://github.com/senhorbento/senhorbento.github.io)

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

The link for the page will be available on the pages section in the settings from your repository, like in the example below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxvwqokq4o8q19fgod5q.png)
Busca nos históricos do terminal - Reverse Search
Published: 2022-06-21 23:18:01

Dica para uso no terminal: 

Buscar por um comando

É possível acessar o histórico de comando através do reverse search. 

Para ativá-lo basta pressionar CTRL+R no terminal.

Agora é só digitar parte do comando ao qual se busca e o bash retornará alguma sugestão do histórico. Caso encontre o comando, basta pressionar ENTER, o comando é executado.

Caso o comando pesquisado ainda não esteja sendo mostrado, continue a pressionar CTRL+R quantas vezes forem necessárias, até encontrar o comando.

Para cancelar o reverse search basta pressionar Esc ou CTRL+C e você retornará ao estado anterior do seu terminal.

Curtiu?

Compartilha ai sua experiencia com o histórico no terminal.

Assista ao pequeno video que mostra o uso na prática:

https://youtu.be/0re8fMFKZlk
Github tip #1 (EN)
Tags: sql, github, database
Published: 2022-06-21 23:14:33

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68nj0hw2lrrd61mmasad.png)
 
Do you know that is possible add SQL as a language on your repository?

Just add " *.sql linguist-detectable=true " in your .gitattributes, if you repository don't have it, just create it and add this line.

Example repository [here](https://t.co/ZP0DbFIMeA)
WebAPI MIDI en la Web - PoderesSecretosWeb
Tags: webapi, webdeviceapi
Published: 2022-06-21 15:45:43

El objetivo aqui seria: Usar entrada MIDI, tambien salida midi a sintetizadores, emuladores o salidas midi en hardware, poner archivos MIDI como musica de fondo en una experiencia web, pagina, libro en hipertexto, etc. 

-Documentación sobre [Web MIDI API](https://developer.mozilla.org/en-US/docs/Web/API/Web_MIDI_API) 

Demo en codepen de Web MIDI API, creando un instrumento percusivo en pantalla: 
{% codepen https://codepen.io/juliomrs/pen/xxYKvwa %}

Demo en codepen de un teclado/sintetizador MIDI en pantalla: (No funciona, reparacion en proceso)
{% codepen https://codepen.io/juliomrs/pen/NWyZKRd
 %}
 
Reproduciendo un archivo MIDI como musica de fondo en una experiencia web o APP Web. (No funciona, en proceso de reparación) {% codepen https://codepen.io/juliomrs/pen/KKQgeoP %}


---

Por aca estamos en investigación:

https://www.keithmcmillen.com/blog/making-music-in-the-browser-web-midi-api/

Entrada MIDI: https://webmidijs.org/docs/

https://github.com/cwilso/WebMIDIAPIShim

https://jazz-soft.net/

https://jazz-soft.net/demo/SimplePiano.html



En codepen encontre las siguientes librerias javascript para synthetizadores y MIDI en la web:

audiosynth
xsound
scribbletune
timbre
tone

---

Ligas relacionadas a la investigación en proceso:

Aqui esta una que se ve bien, el problema para mi, que pongo demos en codepen, es que requiere vincular varias librerias.

https://github.com/mudcube/MIDI.js/


https://www.smashingmagazine.com/2018/03/web-midi-api/
Replacing Git Command Cheat Sheets with AI Command Search
Published: 2022-06-21 23:04:23

What did I do this weekend? 
I administered a pop quiz to AI 🤓 🤖

Warp recently launched a feature called AI Command Search. It takes natural language descriptions and converts them to terminal commands for you in the matter of seconds.

But the biggest hesitation I had was "How reliable is this command & can I actually trust what it outputs?"

In my experiment, I used a cheat sheet with 24 of the most commonly used git commands. I took the natural language descriptions of these commands, put them into Warp's AI Command Search, and scored the AI based on how well the output matched what was on the cheat sheet. The highest possible score was 24 points, for the 24 commands on this cheat sheet.

**Warp's AI Command scored 22.1/24, for a score of 92%!**

If you're curious about how I scored everything, you can read the blog below 👇

https://www.warp.dev/blog/replace-git-cheat-sheet-ai-command-search
Take Screenshot in react-native.
Tags: reactnative, react, programming
Published: 2022-06-21 22:54:00

---
canonical_url: https://blog.aamchora.space/take-screenshot-in-react-native
---

Taking screenshots programmatically in react-native is very easy. Without further a do, let's start writing a code.
 
**Dependencies**

1. `react-native-view-shot` for taking screenshots.
2. `@react-native-community/cameraroll` for saving the screenshot.

**Install the dependency**

For npm -> `npm install react-native-view-shot @react-native-community/cameraroll`

For yarn -> `yarn add react-native-view-shot @react-native-community/cameraroll`

After installing the dependencies

- Import the ViewShot and CameraRoll

```js
import ViewShot from 'react-native-view-shot';
import CameraRoll from '@react-native-community/cameraroll';
```

- After importing **ViewShot** wrap the area we want to take screenshot using **ViewShot**.

- Now we will use **useRef hook** to create ref.
```js
import React, {useRef} from 'react'; // should be outside the component
```
```js
const ref = useRef(); // should be inside the component
```

- Pass the required props in ViewShot as mentioned below.

```js
 <ViewShot
    ref={ref}
    options={{
    fileName: 'file-name', // screenshot image name
    format: 'jpg', // image extension
    quality: 0.9 // image quality
   }} >

....some amazing content ....
<ViewShot/>
```
- Create a function to take screenshots and paste the below code.

```js
 const takeScreenShot = () => {
   // to take a screenshot
    ref.current.capture().then(uri => {
      // to save screenshot in local memory
      CameraRoll.save(uri,{type:"photo",album:"Album codes"});
      alert("Took screenshot");
    });
  };
```
- Call the above function to take the screenshot.

**And Voila, We're done easy peasy :)**
![easy peasy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emdmqg0dw0aj1a7e6gs4.gif)

**Complete code**

```js
import React, {useRef} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import ViewShot from 'react-native-view-shot';
import CameraRoll from '@react-native-community/cameraroll';

const SomeComponent =() => {
 
  const ref = useRef();
  const takeScreenShot = () => {
    ref.current.capture().then(uri => {
      CameraRoll.save(uri,{type:"photo",album:"QR codes"});
      alert("Took screenshot");
    });
  };

  return (
    <View style={styles.container}>
      <ViewShot
        ref={ref}
        options={{
        fileName: 'file-name', // screenshot image name
        format: 'jpg', // image extention
        quality: 0.9 // image quality
        }} >
        <Text> Some awesome content</Text>
      </ViewShot>
      <Button title="Share QR Code" onPress={takeScreenShot}/>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#171821',
  }

});
```
When to use HashMap instead of Loop
Tags: webdev, javascript, algorithms, programming
Published: 2022-06-21 22:37:17

Many programmers use a **loop** or **filter** where HashMap data structure could be considered.

## Finding user by id using Loops
```js
let userIdToBeSearched = 103;
const users = [
    {id: 101, name: "Josh"},
    {id: 102, name: "Mosh"},
    {id: 103, name: "Eli"},
    {id: 104, name: "Jad"},
    {id: 105, name: "Susan"}
];

let user = null;
for (let i = 0; i < users.length; i++) {
    if (users[i].id === userIdToBeSearched) {
        user = users[i];
        break;
    }
}

if (user) {
    console.log("User Found: ", user);
} else {
    console.log("user does not exit with id: ", userIdToBeSearched);
}
```
The above solution has a time complexity of **O(n)**, where n represents the number of users. If there are 1 thousand users, in the worst case, we will search every user to find a match.

```Considering user id will be unique for each user, this is a good indication to use a HashMap instead of a loop since all keys in the Map are Unique.```

##Finding user by id using Map
```js
let userIdToBeSearched = 103;
const users = new Map();
users.set(101, {id: 101, name: "Josh"});
users.set(102, {id: 102, name: "Mosh"});
users.set(103, {id: 103, name: "Eli"});
users.set(104, {id: 104, name: "Jad"});
users.set(105, {id: 105, name: "Susan"});

if(users.has(userIdToBeSearched)){
  console.log("User Found: ", users.get(userIdToBeSearched));
}
else {
  console.log("user does not exit with id: ", userIdToBeSearched);
}
```
When using a **Map**, it takes constant time **O(1)** to find the user! All great, but note constructing the HashMap from the array still requires **O(n)** time.

In conclusion, use Map when frequently searching based on the **unique** field such as **id**. Please note Map cannot be used in case of searching based on the non-unique field such as **name**

Thank you for reading! Check the part 2 where we discuss **A Practical Use Case** of HashMaps. [When to use HashMap instead of Loop Part 2](https://dev.to/kaleemniz/when-to-use-hashmap-instead-of-loop-part-2-31pi)
Building sepia theme for mobile browser using CSS
Tags: css, extension, webdev, javascript
Published: 2022-06-21 20:12:47

I am building an **iOS Safari extension** that inverts to different themes (Gray, Dark, and Sepia). Gray and Dark work well, but it doesn't work as expected for the **Sepia** one. It change colors of not only the background, but also the content of the page.

Here's the image with the issue:
![Here's the image with the issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dynl97ah27ilfud8ah7d.png)
I want it not to invert the page content, and Here's the target image
![Here's the target image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ym6z6qdd9foxvk5bw5rk.png)

And this is my css files I inject to the page.

```
/* sepia.css */

body {
    background-color: rgb(246, 240, 229) !important;
    filter: sepia(1) !important;
}
```

```
/*dark.css*/

body {
    background-color: rgb(0, 0, 0) !important;
    filter: invert(1.0) hue-rotate(165deg) !important;
}

img,
video {
    filter: invert(1.0) hue-rotate(-165deg) !important;
}
```

```
/*gray.css*/

body {
    background-color: rgb(75, 75, 75) !important;
    filter: invert(0.85) hue-rotate(165deg) !important;
}

img,
video {
    filter: invert(0.85) hue-rotate(-165deg) !important;
}
```


And this is the javascript code I use to send (inject) the css file to the website.

```
//popup.js

insertCSS("sepia.css");

function insertCSS(file) {
    return new Promise((resolve, reject) => {
        browser.tabs.insertCSS({ file }).then(resolve, reject);
    });
}
```
Resucitando el zombie de flash/actionscript
Tags: retro, history, actionscript, haxe
Published: 2022-06-21 21:54:43


Tengo algunas demos de cosas que hize en flash y en algun momento me gustaria resucitarlas con esta tecnologia del wasm.

La investigación apenas comienza, les paso algunos links interesantes sobre el tema.

https://www.infoq.com/news/2020/07/webassembly-flash-eol-legacy/

https://github.com/ruffle-rs/ruffle

https://forum.kirupa.com/t/flash-to-wasm/646016

https://tirupati-tour-packages.com/es/conservacion-del-contenido-flash-con-webassembly-bien-hecho-actualizado-en-febrero-de-2020/
Day 74: Back to basics 2
Published: 2022-06-21 21:43:11

Hi!
In the past two days I realized how much I need to get back to basics of frontend development especially CSS, I noticed a lot of things that I need to level up on about the frontend development and this is now the top priority as I expect to be working on the frontend often this month I need to gear up as soon as possible. I'm still trying to integrate the learning plan in my daily schedule that had became tight these days but I have to find time no matter what. so today I finished most of styles about Login and signup expect some issues with responsiveness tomorrow I will be adding some logic and work on final touches and maybe take a new task 
That's about it
Signing off...
React js Markdown
Published: 2022-06-21 21:22:52

I have a question, I noticed that [VSCode Docs](https://code.visualstudio.com/docs)is built pretty much like the content of its GitHub repository [GitHub VSCode Docs](https://github.com/microsoft/vscode-docs/tree/main/docs) , I ask, is there any relationship between them? can I build a react project using markdown files from the GitHub? I want to write the markdown files in GitHub and use them in my react website, can I do that? Thank you much.
I had my first FAANG interview today...
Tags: beginners, discuss, career, watercooler
Published: 2022-06-21 21:11:48

Never in a million years did I think I would land an interview at a FAANG company. As an Indigenous women from a rural town navigating the tech space, I do not know of a single soul who looks like me or talks like me working at a FAANG company, so the thought of applying never crossed my mind...ever. Honestly, it took for me being laid off and jobless to actually hit the submit button BUT I totally forgot about my girl imposter syndrome. Let's just say she isn't the nicest. 

After applying, I rarely checked my application status because I knew it wasn't going to change. I knew that there was no way they were going to choose me. I knew that there were others who were more qualified, more educated and more connected than me. I stand no chance. Zip. Zero. Nada.

I think what influenced by decision to play it safe in my career was because I knew that the lack of cultural disconnect and sense of belonging would play on my psychological health. Making it difficult to be apart of something and do my work. 

I also recognized the inequalities in STEM with its Eurocentric, exclusionary ideologies that can create an "imposter phenomenon" among POC. 

I acknowledged the fact that I very well could be the only Indigenous person in the room. And that I didn't like.

I didn't want it. 

However, that all changed when I received not one, but two interviews from companies who served as an afterthought, not because I saw myself as better than but less than. You may say "interviews from those companies don't define you" or "you're so much better than those companies", but for me it did. And that is okay because I am now the person who has the potential to be a person that Indigenous women from a rural town that others may relate to.

My purpose is to not just work in the industry and collect a pay check, it is to be an example, a leader, and a voice to others who probably will never hit that submit button. 

*fingers crossed I make it y'all*
🎀 Spring Boot 2.7.0 Released
Tags: java, springboot, news, opensource
Published: 2022-06-21 20:52:00

## 📢 About

Spring Boot `2.7.0` has [just been released](https://spring.io/blog/2022/05/19/spring-boot-2-7-0-available-now) :

{% embed https://www.infoq.com/news/2022/06/spring-boot-2-7 %}

👉 Let's summarize what it brings and what's the next step.

## 🛍️ What it brings

- Support for [GraphQL 1.0](https://www.infoq.com/news/2022/06/spring-graphql/)
- Support for the [`Podman` container engine](https://podman.io/) as an alternative to Docker Engine 
- Dependency management and auto-configuration for [`Cache2k`](https://cache2k.org/)

## 🧰 Testing related features

Hot news around testing as new test annotations are coming for :

- [`ElasticSearch`](https://www.elastic.co/) 
- [`Couchbase`](https://www.couchbase.com/)

## 📖 `/actuator/info` related features

[`JavaInfoContributor`](https://docs.spring.io/spring-boot/docs/current/api/org/springframework/boot/actuate/info/JavaInfoContributor.html) and [`OsInfoContributor` ](https://docs.spring.io/spring-boot/docs/current/api/org/springframework/boot/actuate/info/OsInfoContributor.html )classes have been improved and can now expose more information about :

- Java version & vendor
- Underlying OS

## ⬆️ Dependencies updates

- [Spring Data 2021.2](https://github.com/spring-projects/spring-data-commons/wiki/Release-Train-2021.2-%28Raj%29-Release-Notes)
- [Spring Security 5.7](https://github.com/spring-projects/spring-security/releases/tag/5.7.0)
- [Infinispan 13](https://infinispan.org/blog/2021/10/12/infinispan-13-final)
- [Micrometer 1.9](https://github.com/micrometer-metrics/micrometer/releases/tag/v1.9.0)
- [Elasticsearch 7.17](https://www.elastic.co/guide/en/elasticsearch/reference/7.17/release-highlights.html)
- [H2 2.1](https://github.com/h2database/h2database/releases)
- [Flyway 8.5](https://github.com/flyway/flyway/releases)


## 🛤️ Head to `Spring Boot 3.0`

Based on Spring Framework 6.0, Spring Boot 3.0 will be the next major revision **and will require Java 17 or above**. 


☝️ Spring Boot 3.0, **planned for November 2022**, will be the next version.

Spring Boot 3.0 will also support AOT (ahead-of-time) compilation and native executables thanks to [Spring Native](https://docs.spring.io/spring-native/docs/current/reference/htmlsingle/).
Nextjs dynamic sitemaps not working on production server
Published: 2022-06-21 20:49:48

Nextjs dynamic sitemaps working on localhost but getting 500 Internal Server Error on production server. This url worked on http://localhost:3000/server-sitemap.xml but I am not understanding why it's not working on production https://www.example.com/server-sitemap.xml

here is my code: my index.tsx folder structure is `pages>server-sitemap.xml>index.tsx`

index.tsx



```
import { GetServerSideProps } from "next";
import { getServerSideSitemap, ISitemapField } from "next-sitemap";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const response = await fetch("https://backendapi.farhyn.com/blog-list/");
  const data: any[] = await response.json();

  const fields: ISitemapField[] = data.map((blog) => ({
    loc: `https://www.farhyn.com/blog/${(blog.blog_slug)}`,
    lastmod: new Date().toISOString(),
  }));

  return getServerSideSitemap(ctx, fields);
};

export default function Site() {}
```
Great Tweaks for PopOs 22.04
Tags: programming, linux
Published: 2022-06-21 20:38:50

Hi everyone, if you are running Linux, chances are you tweak your system, or add utilities here and there.  Ever ran that one liner command and rendered your system utterly useless?

I sure have!  How can we guard against this?  The answer is - Timeshift and the btrf file system!

This past week I came across a GREAT YouTube Video by 
[Willi Mutschler](https://github.com/wmutschl) outlining step by step how to create instantaneous recovery snapshots on PopOs using Timeshift. GREAT Video Willi!

I HIGHLY recommend you check his video out here: https://www.youtube.com/watch?v=i8HDHAX1RJc
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9ggf7mk4xrss1mex2tv.png)
 
TimeShift has been such a great tool for me, I also checked out the Owners webpage - and found another great Tweaks Blogpost - specifically where he suggests installing nala, a GREAT improvement to the sudo apt install interface

**From his Tony George's Blog (The creator of TimeShift):**
**Install Nala**
Nala is a prettier frontend for APT that makes it easier to install packages from the command line. It has the same syntax as apt. You can substitute the command nala for all commands that use apt.

**1)Run the below command to install Nala from it’s official repository.**

`wget -O - https://teejeetech.com/scripts/jammy/install_nala | bash
`

**2) Switch to the fastest Ubuntu mirrors in your region:**
`sudo nala fetch`

**3) Update your system:**
`sudo nala update && sudo nala upgrade`

Hope you find this info useful!
Solve UK time changes (DST) with NodeJS and date-fns and Docker (epoch/unix format)
Tags: javascript, docker, timezone, node
Published: 2022-06-21 20:37:23

DST time changes can wreck havoc when in the UK time-zone, where you'll find your times might be one hour behind, especially when using epoch/unix format to save your timestamps.

When using NodeJS with [date-fns](https://date-fns.org/) in a docker container, this simple guide will show how to fix the issue.

`new Date();` might return a time in GMT as compared to DST. Furthermore, using `getUnixTime()` from [date-fns](https://date-fns.org/v2.28.0/docs/getUnixTime) will return an epoch timestamp which will be in GMT.  Converting this back to BST may present a challenge.  

```
const { getUnixTime, format } = require("date-fns");

const date = new Date();
console.log('new Date() print',date, '\n');

const unixTime = getUnixTime(date);

const formatted = format(new Date(unixTime * 1000), 'h:mm aa', {
    timeZone: 'Europe/London',
});
console.log('formatted timestamp with timezone', formatted);

```
Running the above code will give you a timestamp which takes DST into account for correct BST as shown by this screenshot from terminal.

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

You may be wondering about the `unixTime * 1000`.  This is because date-fns `getUnixTime()` gives a unix timestamp without milliseconds, and hence converts to seconds.

The [date-fns](https://date-fns.org/v2.28.0/docs/format) `format()` function accepts a third parameter for time-zone which is why we have used `{ timeZone: 'Europe/London', }`.  

If running in a docker container and it still returns a GMT timestamp, then adding ` - TZ=Europe/London ` as part of the environment section of your docker-compose file will help solve the issue by setting the container time-zone to London.  Example below:

```
test:
    build: ./test
    image: ....
    depends_on:
      - ....
    ports:
      - "1234:1234" # http
      - "1234:1234" # debug
    volumes:
      - ....
      - ....
      - ....
    environment:
      - PORT=....
      - TZ=Europe/London
    command: ....
```