teleren/devto huggingface dataset:
How to squash commits
Tags: github, git, coding, development
Published: 2021-08-19 15:09:35

When working with Git one important rule is to try to keep your commit history clean, avoiding to write pointless commit message such as "WIP", "TODO", etc...
But sometimes people can do honest mistakes, or they can code away, commit many times with small changes, and then perhaps you want to cleanup your commit history and group your changes under one commit.

### Using the reset command

One way to do it is by resetting your commit history, so for example you have two commits, and you want to squash them in one, you can do this:

```bash
# Reset the history reverting back to the past 2 commits
git reset --mixed HEAD~2
```

Now you will see that the code you changed in the past two commits is again ready to be commited again.

```bash
# Stage all the files
git add -A
# Commit the staged files
git commit -m "Your message"
```

Now to rewrite the history on the remote, you will have push with the `--force` flag to apply those changes to the remote.

```bash
git push --force origin <YOUR-BRANCH-NAME>
```

And now your history is clean as nothing ever happened :-)

### Using the rebase command

Another way to do it is by using the rebase strategy:

```bash
# this lets you interactively select commits
git rebase -i HEAD~2
```

Then select the commits you want to squash by setting `s` instead of `pick`, after that save with whatever editor your are using, and edit the commit message.

And as before you will have to override history with this:

```bash
git push --force origin <YOUR-BRANCH-NAME>
```

This is a much quicker way and it has the advantage of letting you pick which commmits to squash, but the disadvantage is that using rebase could be problematic if you don't know exactly what are you doing, and I would recommend to read [this link](https://www.atlassian.com/git/tutorials/rewriting-history/git-rebase).
API for Email Service - Emailyt.com
Tags: email, saas
Published: 2021-08-19 16:33:15

We built Front-end web applications, without using any in-house backend service. Now, how do we send out emails to users, or developer team about any notifications/exceptions/etc.

Unfortunately, services like EmailJS wasn't able to help for our requirements. So we wrote a service ourselves: www.Emailyt.com that can help any front-end as well as backend based services. You just need to register your application and use the auth-id to use from your code, be it JavaScript or C# or anything that supports APIs.
Thesis survey (PWA)
Tags: pwa, reactnative, flutter
Published: 2021-08-19 16:21:32

Hello, I created a short survey as part of my master's thesis which is oriented on cross-platform mobile development technologies (mainly RN, Flutter, and progressive web applications - PWA). If you could spare 5-10 minutes it would be greatly appreciated! Thank you. Link below
https://forms.gle/Cp3YBbxDSckzbSLi7
Adios ../../../.. relative imports JS
Tags: javascript, react, begginers, vscode
Published: 2021-08-19 16:15:41

Cada vez que creamos componentes, funciones, constantes o cualquier otra cosa en nuestro proyecto en React o cualquier otro framework, solemos hacerlo en la carpeta **src** , y cuando importamos estos archivos solemos hacerlo con las rutas relativas.

Suponiendo que tenemos nuestro proyecto de la siguiente manera:
```
 - src /
   - components /
      - Avatar /
         index.js
      - RoundedButton /
         index.js
```
Al importar nuestros componentes y/o funciones o cualquier archivo dentro de nuestra carpeta src, solemos hacerlos de la siguiente manera:

```javascript
import RoundedButton from '../../components/RoundedButton'
import Avatar from '../../components/Avatar' 
```

Hacerlo de esta manera no implica una mala practica o que estes haciendo mal, el detalle es que entre mas crecen nuestros imports se ve mas sucio nuestro codigo en la parte superior. Que tal se verian nuestros imports de esta manera ? : 

```javascript
import RoundedButton from 'components/RoundedButton' 
import Avatar from 'components/Avatar' 
```

Se veria mas limpio no ? 

Hacer estas importaciones es demasiado sencillo. En tu proyecto crea o edita el archivo **jsconfig.json** si usas Javascript o **tsconfig.json** si usas Typescript, y agrega las siguientes lineas:

```json
{
   "compileOptions": {
      "baseUrl": "src"
   },
   "include": ["src"]
}
```

You are Ready ! Ahora puedes dejar de usar las rutas relativas y hacer las importaciones de tus archivos mas facil

```javascript
import React from 'react'

import Avatar from 'components/Avatar'
import RoundedButton from 'components/RoundedButton'

const Panel = () => {
  return (
    <>
       <RoundedButton />
       <Avatar />
    <>
  )
}
```
Asi de sencillo es olvidarnos de las rutas relativas...

**Nota:** Esto funciona perfectamente sin hacer mas modificaciones en VSCode, para WebStorm e IntelliJ existe una configuracion para que funcione. Espero pronto actualizar este articulo y compartir como seria la configuracion en los IDE's de JetBrains

Este tip lo aprendi de Nilanth... Puedes ver su articulo original en el siguiente enlace:
https://dev.to/nilanth/no-more-import-in-react-2mbo
Side Project: Content Sharing Platform
Tags: java, webdev, jhipster
Published: 2021-08-19 16:14:00

I'm developing this web application, a Content Sharing Platform allowing homeschooling parents to search, submit, upvote, download or share educational resources via an elegant UI.

`Status: early development phase`

**Description**: a platform allowing homeschooling parents to search, submit, upvote, download or share educational resources via an elegant UI.

**Type of content**: articles, documents, presentations, images, url's, announcements

**Use cases**: sbrowse resources, search on keyword, refined search (subject, topic, age range, key competency), store your resources, share with others

**Key features**: great search experience, paginated results, submit / upvote / download / share resources, user profile, favorites (resources & search actions), user / moderator dashboard

### Status: early development phase

`[x]` Design stage
`[x]` Deploy CI/CD, Dockerize the (boilerplate) backend API and frontend app, Deploy prod server
`[ ]` **Develop the backend API**
`[ ]` Develop the frontend app
`[ ]` Develop end-to-end testing
`[x]` Automated Docker container deploy on prod server


### Design:

![design](http://images.ctfassets.net/miz0cgjcqgye/4npYG5TiwIaNqk4ASIADAZ/4790d9a3fd092c41a2b5d334338c9955/ta3limnew.png)


### Tech stack:
 * [JHipster](https://www.jhipster.tech)
 * [Java 17](https://openjdk.java.net)
 * [Spring Boot](https://spring.io/projects/spring-boot), [Spring Content](https://paulcwarren.github.io/spring-content)
 * [React](https://reactjs.org)
 * [MySQL](https://www.mysql.com)
 * [Keycloak](https://www.keycloak.org) (Identity and Access Management / SSO)
 * [Elasticsearch](https://github.com/elastic/elasticsearch)
 * [S3 object storage](https://aws.amazon.com/s3)
 * [Docker](https://www.docker.com) (test & production)

### Source code:
Work in progress: https://github.com/JeroenAdam/ta3lim

That's all for now, more to be announced later.
What did I learn by reviewing merge sort again.
Tags: algorithms, python
Published: 2021-08-19 16:09:18

After graduated from college, I rarely study in algorithm questions, because I don't have to implement special algorithm most of my time. I did use BFS one or twice when I deal with the workflow problem, but most of the time you don't bother. Also, software engineering is a board topic. Being a good software engineer means more than just using efficient algorithm, and a readable O(n^2) solution is better than a complicated O(nlogn) solution if there are no performance issues.
Therefore, this is very refreshing and eye-opening when I revisit the merge sort algorithm.

The implementation of merge sort is O(nlogn) because T(n) = 2T(n/2) + C, the C is n, you could think of we do this O(n) operation log(n) times.

This is something that I oversee when I learn this algorithm, when C is something that is better then O(n^2) this is automatically a better solution than O(n^2).

Let say we want to count the number of value which is smaller than self like [this question](https://leetcode.com/problems/count-of-smaller-numbers-after-self/).

Since counting numbers that is larger than self is O(n), then we can use the idea of merge sort to divide and conquer the problem and obtain O(nlogn).
4 things that shouldn't go in the alternative text in images
Tags: html, webdev, javascript, begginers
Published: 2021-08-19 16:03:39

Accessibility is a standard developed by the W3C. It allows us to optimize our interfaces to ensure access to people who may experience some kind of impediment to access the content.

Alt text also known as "alt attributes" describe the appearance and function of an image on a page.

Today I share with you this that someone once told me. What shouldn't go in an alternative text in images

```
<img alt=" " >
```

❌ Don't start alt texts with "Image of...", "Photo of..." or similar. This is added by default.
❌ The photographer's name. 
❌ Don't put keywords. 
❌ Irrelevant words to position yourself in google. This isn't how alt text works.



What other advice would you give? 😀
Static vs Dynamic Websites
Tags: webdev, html, wordpress, codenewbie
Published: 2021-08-19 15:58:42

When talking of websites, you must remember that websites are of two types. One is a static website, and the other is a dynamic website. 

It depends upon you and your necessities to go with any one of them. 

Both static and dynamic have their benefits and disadvantages. 

If you want games and attractive elements on your website, you may go with a dynamic website. But do remember that you'll face some cons too.

Likewise, a static website would be great if you need a few pages on your website with permanent content (which requires no changes). However, you'll go through some issues here as well. 

You can learn more about static and dynamic websites at https://tiiny.host/blog/static-vs-dynamic-websites/.
4.Modelling
Published: 2021-08-19 15:56:30

Now in this part we use machine learning algorithms to predict our data.Now I know most of you are
asking what’s machine learning?
Check here for more:
To answer your question machine learning is a branch of Artificial intelligence which uses algorithms
and being given input data ,algorithms learn from this past data and are able to predict future events
after learning through past experience data.
In advanced stages are more more algorithms which are categorized in a field called Deeplearning
3.Data Preparation
Published: 2021-08-19 15:51:43


For learning intro to statistics check here.
For Mathematics for data science intro check here.
In this section we perform :

1.data cleaning(wrangling)----eg.filling missing values ,dropping duplicates,standardizing columns
2.data analysis(univariate and bivariate analysis)
3.data preprocessing,Encoding variables
Scaling and normalizing our data—scaling using STANDARDSCALER AND NORMARIZING USING
MINIMAXSCALER
4.Checking of outliers
5.Binning our features
6.Feature engineering
7.Checking correlation
Visualizing our features using ggplot In matplotlib
Visualizing using percentages on our bars charts
Also can filter columns which have same data types
Checking for imbalanced datasets using visuals and using smote or nearmiss to balance them—
especially classification problems.—accuracy is not a good metric to measure imbalanced
datasets.
Performing feature selection and importance.check here-
>https://www.kaggle.com/swet44/notebook1c

  cheers!! Happy learning
I can't import my obj file in Three Js
Tags: javascript, threejs
Published: 2021-08-19 15:45:57

the error 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwv17n885bf6cx1kisny.png) 
Html
```
<input type="file" id="importMesh" accept=".obj">
```

Javascript
```
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster();
let arrayObject = [];
let canvas = document.getElementById('canvas')

let renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0xe5e5e5);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


camera.position.z = 250;

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.campingFactor = 0.25;
controls.enableZoom = true;

let keyLight = new THREE.DirectionalLight(
  new THREE.Color("hsl(70,100%,75%)"),
  1.0
);
keyLight.position.set(-100, 0, 100);

let fillLight = new THREE.DirectionalLight(
  new THREE.Color("hsl(240, 100%, 75%)"),
  0.75
);
fillLight.position.set(100, 0, 100);

let backLight = new THREE.DirectionalLight(0xffffff, 1.4);
backLight.position.set(100, 50, -100); 

scene.add(keyLight);
scene.add(fillLight);
scene.add(backLight);


let input = document.getElementById("importMesh");
input.addEventListener("change", function(event) {
  var file = this.files[0];
  console.log('file',file)
  var reader = new FileReader();
  reader.addEventListener("load", function (event) {
    var contents = event.target.result;
    let loader = new THREE.OBJLoader();
    let geometry = loader.parse(contents);
    console.log("load object", geometry);
    var material = new THREE.MeshStandardMaterial({
      vertexColors: true,
      color: 0xec0404,
      overdraw: 0.5,
    });

    var mesh = new THREE.Mesh(geometry, material);

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add(mesh);
  }, false);
  if (reader.readAsBinaryString !== undefined) {
    reader.readAsBinaryString(file);
  } else {
    reader.readAsArrayBuffer(file);
  }
});

let animate = function() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

animate();
```
My HNG internship Journey and Goals
Tags: hng, programming, developer, zuri
Published: 2021-08-19 15:44:36

Hi there, I’m Ikechukwu Anigbata, a tech enthusiast, who is passionate of solving real world problem, it has always been my dream to make big impact in the tech world, making life better with technology, and have big tech firm. I am currently studying Computer Science in Enugu State University of Science and Technology (ESUT). 

As someone who loves coding, I always want build and improve my coding skills, join community of developers and also connect with people of like mind.

I recently completed an internship at [Zuri internship ](https://internship.zuri.team). It was an awesome experience, as it is beginners friendly and has help made me better programmer. From Zuri I heard about HNG internship and decided to every it a try, despite been told it was hard, that only the best makes it to the end.
 I know it is not going to be an easy journey and I have taken the privilege to list out the goals I want to achieve at this internship.

My goals for this internship are:
1. To improve my coding skills through intensive practise
2. Build strong portfolio
3. Connect with other like mind
4. To learn from more experience developers who has been in the game.
5. Build real world projects


Below is some useful beginner tutorial that has help me in my journey so far:
Learn Git & Github
https://youtu.be/SWYqp7iY_Tc
Learn HTML: 
https://www.w3schools.com/html/default.asp
Learn PHP:
https://www.udemy.com/course/php-for-complete-beginners-includes-msql-object-oriented/
Learn UI/UX – Figma tutorial:
https://youtu.be/g6rQFP9zCAM
A Novice,Beginner In Data Science or Are you planning to know best Data Science workflow?
Published: 2021-08-19 15:32:51

### 1. Understand what’s data science
### 2. Data Scientist workflow of a project.
Now lets get our hands dirty.What’s Data Science??
As the word suggests is it a science?

Data Science is an interdisplinary field which involves collecting tonnes of data,analyzing it,generating
insights from data getting better intuitions which can be used in predicting future events.
Mini Markdown Subset
Tags: markdown, javascript, strings
Published: 2021-08-19 15:19:38

This is a speed coded thing that renders a subset of markdown:

{% codepen https://codepen.io/ZevanRosser/pen/QWveyXX default-tab=js,result %}

I think I am going to re-code this one in a few different styles...

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
GitNFTs: Autograph and sell your GitHub commits as NFTs ✨
Tags: opensource, blockchain, ethereum, nfts
Published: 2021-08-19 14:48:46

We just released GitNFT (https://gitnft.quine.sh/) a platform that allows developers to autograph and mint NFTs of their GitHub commits and sell them in the OpenSea marketplace “as art”. Commits can store substantial collector value, either for their historical significance, the coolness/beauty of the code, or the popularity of the author. GitNFT lets both contributors and NFT collectors build upside from that value! 🔮

The world’s digital infrastructure feeds on Open-Source, yet the economic value it generates does not always back-propagate to its creators. GitNFT is a new monetisation mechanism that aims to make Open-Source work economically sustainable ❤️

Please check it out!
I am writing an e-book 📖 about Google searching. What would you hope to learn in such an e-book?
Tags: google
Published: 2021-08-19 14:19:41

---
title: I am writing an e-book 📖 about Google searching. What would you hope to learn in such an e-book?
published: true
description: What would you hope to learn in such an e-book?
tags: meta, google
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jnxj6veqne0srfy8yq8.jpg
---

## __Introduction__

Hello, _Devians_ (_Devians_? Cool or not? Time will tell).

As indicated in the title of this post, currently I am writing an e-book about Google searching titled "Professional Google Searching".

It'll contain my 10 years of experience using the Google Search engine. The e-book aims to make it easier for you to use the search engine to easily find the information that you are looking for.

**I'll make it available on Gumroad for as low as $5.**

This e-book was inspired by the following comment I left on an article about Google searching:

{% devcomment 1b604 %}

## __The question__

**As an avid internet user and someone who uses Google Search daily, what would you hope to learn in such an e-book?**

Please note, I asked the same question on Twitter on August 15, 2021, as evident in the Twitter embed below.

{% twitter 1426964110139351046 %}

_Update March 8, 2022_: _You can get the e-book on AppSumo using the button below_.

<a href="https://appsumo.com/products/professional-google-searching?utm_source=badge" target="_blank" rel="noopener"><img src="https://appsumo2nuxt-cdn.appsumo.com/img/as-badge-featured.cf14670.png" alt="AppSumo badge"></a>
Project folder structure and packages installation
Tags: python, webdev, webpack, flask
Published: 2021-08-19 14:16:00

Create a new folder whatever you want to name it I'm going with **flask_blog**.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay02slypqeldnnadhnkx.png)
 
Now create a virtual environment using **virtualenv**. and activate the virtual enviroment.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x352eyu5zrntzj8nm6k1.png)
 
It's time to install the dependencies of the project. Now firstly install the flask and the other dependencies.

```shell
pip install flask flask-sqlalchemy flask-migrate python-dotenv mysql-connector-python flask-wtf
```
Open the folder in your favourite code editor I'll be use VSCode.

So the folder structure will be like this.

```shell
flask_blog
 |
 +-- application
 | +-- assets
 | +-- controllers
 | +-- forms
 | +-- models
 | +-- views
 | +-- __init__.py
 | +-- settings.py
 +-- venv
 +-- migrations
 +-- config.py
 +-- run.py
```

Now your directory structure will look like this.

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

You can get the updated code on [GitHub Repo](https://github.com/MuhammadSaim/flask_tutorial_blog)

On the next post we will configure our application.

Thanks, will meet on the next one.
Work with stuff in other files in vanilla JS
Published: 2021-08-19 14:05:31

I am reading again [You Don't know JS by Kype Simpson](https://github.com/getify/You-Dont-Know-JS) and I wanted to write about something that I always forget: how to work with multiple files in vanilla JS. I am so used with writing React that when I do womething with vanilla JS I always need to Google this topic. You have two options. For both, we will be using the following structure:

index.html
script-one.js
script-two.js

1. Adding all `.js` files in the `<script></script>` tags in the html

You can list all the `.js` files in the script tag in the html file. This may be fine if you are working with one or two files, but not if you have more files or are constantly adding files as it will be tedious to be adding them by hand. In any case, this is how it works:

```
  <body>
    <div>
      <button id="but-click">Click me</button>
      <section id="hello"></section>
    </div>
    <script src="script-one.js"></script>
    <script src="script-two.js"></script>
  </body>
```

Whatever variable you have defined in `script-one.js` will be available in `script-two.js` and viceversa.

2. Adding the entry point `.js`file in the html file and adding `type="module"`

The other option, recommended if your target browser supports it, is to only add the `.js` entry point file and add the `type="module"` property inside the `script` tag.

```
  <body>
    <div>
      <button id="but-click">Click me</button>
      <section id="hello"></section>
    </div>
    <script src="script-one.js" type="module"></script>
  </body>
```

Then, in `script-two.js` you need to export the variable, like `export const phrase = "How are you?"`. You import it in `script-one.js` like `import { phrase } from "./script-two.js";` and `phrase` will be available for you to use in `script-one.js`. 

It is all explained in [this MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) by the way!