teleren/devto huggingface dataset:
Detexify in your browser
Tags: dohackathon, machinelearning, deeplearning
Published: 2021-01-05 06:39:42

## What I built

[Detexify](https://detexify.kirelabs.org/classify.html) is a well-known service to recognize hand drawn math symbols and translate them to LaTeX expressions, so one who works with LaTeX not need to dive into [symbols-a4.pdf](http://www.ctan.org/tex-archive/info/symbols/comprehensive/) that you just can't memorize. 

I have built a replicate of this service using ML and deploy it as a browser-side application, i.e., it does not have a backend. The recognition and search purely runs in your browser.


### Category Submission: 

Program for the People

### App Link

[detexify.yuhuishi.me](detexify.yuhuishi.me)

### Screenshots

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fjph16hpfp7hq3089lly.png)

![screen2](https://dev-to-uploads.s3.amazonaws.com/i/xl5iymb7geop700iarn3.png)

### Description

Users can draw a math symbol they cannot recall what the corresponding LaTeX expression is. The model will try to recognize the most likely symbols given the pixels, and show the LaTeX expressions together with their probabilities.

### Link to Source Code

https://github.com/Yuhuishishishi/detexify-replicate

### Permissive License

MIT License

## Background

When I was doing my graduate school and writing in LaTeX, finding the LaTeX expression for a math symbol is the most time consuming and unpleasant thing I had experienced. 
One can dive into the doc [symbols-a4.pdf](http://www.ctan.org/tex-archive/info/symbols/comprehensive/)  and search among hundreds of math symbols to find out the correct expression for the one in your mind. 

Or one can go directly to [detexify.yuhuishi.me](detexify.yuhuishi.me) and draw it and let the ML model help you find the expression for it.

Hope this application can help people who need to work with LaTeX to make their life bit easier.


### How I built it 

The application is a pure front-end app (there is no backend). 

#### Model training

For the ML part, I trained a recognition model that takes in a user drawn symbol and outputs the LaTeX expression. 

The model is trained using the [Kaggle notebook](https://www.kaggle.com/dayeye2006/cnn-image-classification-hasyv2).
Under the hood, the model is a simple CNN learner. 

The data the model is trained on consists of a bunch of labeled math symbol images. You can find more details here [HASYv2 Dataset](https://www.kaggle.com/martinthoma/hasyv2-dataset-friend-of-mnist).

Overall, the model can achieve 60% accuracy. I haven't spent much time on tuning and finding a better architecture.

#### Deployment

I built the front-end using React. This is the first-ever React app I have built since I have no previous experience in it. 

To serve the model, I used tensorflow.js to convert it into a javascript-friendly format and load it into the app. The inference runs purely in the browser. 

I used DO app platform to deploy the whole application. Since there is no backend involved, the deployment is quite straightforward (deployed as a static site).
Day 1 - 100DaysOfCode 🤖🦾

Tags: 100daysofcode, webdev, programming, devjournal
Published: 2021-01-05 06:37:38

Took up a challenge from [devchallenges.io](https://devchallenges.io/) of creating a 404 error page. No brainer, but it was good practice.


![error.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1609823373131/Gb-y2_b1A.png)

### Technologies I've used:
- [Gatsby.js](https://www.gatsbyjs.com/)
- [React](https://reactjs.org/)
- [Bootstrap](https://getbootstrap.com/)
- [React Bootstrap](https://react-bootstrap.github.io/)

---

It was quite a hectic time working on this challenge. I used [Gatsby.js](https://www.gatsbyjs.com/) and [React](https://reactjs.org/) for the Frontend and [Bootstrap](https://getbootstrap.com/) for the UI. I just started out working with Gatsby a few days and instantly fell in love with it. I used quite a few Gatsby plugins. Had to look up some stuff on Google, but hey, if you don't get stuck you ain't doing it right. I'm planning on completing the rest of the challenges in Gatsby.

### Check out the [Live Demo](https://lnkd.in/gJKPpQ2) and [Repo](https://lnkd.in/gtsQprE)
100DaysOfCode challenge init 🚀

Tags: 100daysofcode, webdev, challenge, programming
Published: 2021-01-05 06:35:59

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vuo5rmhg7etnkke92ihf.jpg)

I've been coding for 2 years now but always as a hobby. Did a few freelance projects but never had the intention to get serious with it.

With the start of 2021, I've decided to set a goal of turning this hobby into a profession. And what better way to start off this new year than a 100DaysOfCode challenge!

The thing that fascinates me the most is the humongous JS ecosystem. All the crazy wild frameworks and libraries living on the internet waiting for us developers to tame them. The beauty of it though!

I want to take full advantage of all those tools, combine them with all the things I've learned so far and merge them all in this 100DaysOfCode challenge.
 
Nevertheless, I want to get committed to building my tech skills. I don't know how this would end but I'm hoping I'll ace it. I'll also be posting daily regarding what I'm working on.

Good luck to me!

PS: Also this is my first blog. Kudos 🤟
WHY STARTING NOW IS ESSENTIAL....▶ START NOW!!
Tags: javascript, beginners, webdev, python
Published: 2021-01-05 06:34:39

Yes, age of either been young or old is not a parameter to success, although one has advantages than the other.

__Why start now?__

There is a popular saying __"the earlier the better"__, yes this is ultimately correct. I want to buttress on this a little. In the sense of possibility, if you start earlier than everyone else, you should have learned a whole lot and when the time of showing forth comes, there should be no doubt in whom the winner should be. If you embark on a journey of five hours, two hours earlier before others, you should get to the destination first.

Starting late doesn't make one a failure, failure is failing to take a step and time is not a parameter to success but it is the effort and sacrifice invested into it. Starting late can just be a limitation but not a qualification to success.

I have experienced this twice on different occasions and this has shut me off some opportunities and has limited my tentacle in some areas. This makes achievements and visions take longer time to be brought into reality even has at when due. If you feel you are too young to start, be careful this can grow to been a critique procrastination and when it turns out to be like this, it has the power to kill dreams and vision making them null and void.

I feel there is a need for me to put this down; that you started early does not mean you will make it. One can start the journey first and at the end of the day be the last, I have seen young people who started early and failed and old people who also ventured into same but came out a success but this doesn't justify why you shouldn't start now.

The key to success is leveled on the pattern of your hard-work, commitment and consistency. If you start now and these aforementioned is present, I bet you, You a great success.

For more tips, motivation, interaction and support you can link up with me on my [Twitter Account](https://twitter.com/chryz_codez) and follow me here on this platform. Your comment and feedback are highly welcome and appreciated.
Go Tip: Profiling
Tags: go
Published: 2020-12-12 18:01:44

A few months ago we started noticing issues related to what we believed, and eventually confirmed due to our NewRelic/AWS CloudWatch dashboards, were memory leaks, this quickly reminded me of the time I attended [Bill Kennedy's Advanced Go Workshop](https://mariocarrion.com/2016/11/17/gotham-go-2016-advanced-go-workshop.html) where he described different ways for [profiling code](https://github.com/ardanlabs/gotraining/blob/79be5013343192126e0af129cd4511d90a763e2e/topics/go/profiling/README.md), back at that time the web UI for visualizing profiles was not really officially released. On a side note I **highly recommend you** attending any of Bill's presentations and/or workshops, they are phenomenal!

Profiling in Go reminds me of the old good days when I was profiling C programs in my first job 15 years ago, it's funny how the UX hasn't changed that much really, except for the HTTP-based profiling.

For Go there are some great official resources for getting familiar with the ecosystem, specifically:

* [golang.org Diagnostics](https://golang.org/doc/diagnostics.html),
* [Profiling Go Programs](https://blog.golang.org/pprof),
* [Standard library: runtime/pprof](https://golang.org/pkg/runtime/pprof/)
* [Standard library: net/http/pprof](https://golang.org/pkg/net/http/pprof/)

But perhaps the missing key is the [`pprof` documentation](https://github.com/google/pprof/blob/master/doc/README.md) where details are explained a little better, not to mention the really useful option to [compare profiles](https://go-review.googlesource.com/c/go/+/214818/2#message-94496da85b6ab4bfe401a32554403140c4aba476) using [`-diff_base`](https://github.com/google/pprof/blob/master/doc/README.md#comparing-profiles).

For http programs the important bit to use is the handler defined in `net/http/pprof` in your http mux. For example using [gorilla.Mux](https://github.com/gorilla/mux) doing something like the following is enough:

```go
import "net/http/pprof"

// ... some other relevant code here ...

router.PathPrefix("/debug/pprof/").HandlerFunc(pprof.Index)
```

Ideally that `/debug/pprof/` is behind some sort of Auth service to avoid leaking proprietary source code.

---

![The more you know](https://media.giphy.com/media/83QtfwKWdmSEo/giphy.gif "The more you know")
Los mejores podcasts de tecnología en español para 2021 en Spotify
Tags: discuss, latam
Published: 2021-01-05 06:28:38

## ¿Cuáles consideran son los mejores podcasts de Tecnología en Español en Spotify para el 2021?

## ¿Y por qué los recomiendan?

---

Disclaimer, yo hago Chile, Mole & Tech con @omercadocoss 

Ha estado ya en el Top 50 de Podcasts de Tecnología en México en los últimos meses 

{% spotify spotify:show:1yIHS7vArQVkdbn56JNloA %}
Ganvent: Inventario, Stock, Ventas y Ganancias
Tags: reactnative, firstpost, android, mobile
Published: 2021-01-05 05:44:43

Feliz año a todos los programadores y desarrolladores.
Hace una semana lancé mi primera aplicación a Playstore, llamada: **Ganvent: Inventario, Stock, Ventas y Ganancias**, cuyo objetivo es que las personas puedan organizar los productos de su negocio de una manera sencilla, eficaz y gratis.

https://play.google.com/store/apps/details?id=com.olivaresventuraricardo.minventapp

Esta aplicación está realizada completamente con react-native y firebase.
Realicé esta aplicación por 2 motivos:
1. Aplicar lo que había aprendido sobre react-native.
2. Debido a esta pandemia, muchas personas están optando por vender productos a través de las redes sociales, por eso, quise crear esta app que les ayude a organizar sus productos de una manera eficaz.

Entre las principales características de esta aplicación están las siguientes:
1.Agregar PRODUCTOS, a cada producto le puedes agregar un nombre, etiquetas, categoría, características, stock, precio y una imagen.
Una interfaz bastante intuitiva.
2.Los productos se dividen en dos secciones, los disponibles y los NO disponibles.
3.Agregar a tus clientes y proveedores.
4.Puedes actualizar o eliminar tus productos, clientes y proveedores.
5.Cada cliente y cada proveedor tendrán su propia página, en la cual se mostrarán los detalles de todas la compras y ventas realizadas.
6.También puedes registrar las ventas que has realizado en un determinado día, asimismo, puedes realizar consultas sobre las ventas que has realizado en cualquier fecha del año.
7.En la sección de ganancias, podrás ver tu ganancia del día, de ayer, de los últimos 7 días y la ganancia total. Asimismo, podrás realizar consultas sobre cuánto fue tu ganancia en cualquier fecha del año.
8.En la sección de alertas podrás ver cuáles son los productos que ya no tienen stock.
9.Cuando un producto ya no tiene stock disponible automáticamente pasará de la lista de disponibles a la lista de NO disponibles.
10.Los productos pueden organizarse por fecha de creación, stock o por el precio.

Esta es la primera versión de esta aplicación. Actualmente estoy trabajando en una segunda versión, que probablemente lo suba la siguiente semana.
Por último, les invito a descargar la app y dejar una reseña, asimismo, si les parece útil, pueden recomendarlo a otras personas.

https://play.google.com/store/apps/details?id=com.olivaresventuraricardo.minventapp
How to convert your Native Android & iOS app to React Native?
Tags: android, ios, react, mobile
Published: 2021-01-05 05:44:26

React Native, an open-source platform built and maintained by Facebook, has started getting traction since its release in February 2015. Today, React Native developers use this platform for developing cross-platform apps by writing native code in Java or Objective-C. Higher scalability and less complexity of this framework attract many developers to building React Native apps. What’s more, a thriving React Native community keeps on improving this platform.

Let’s give the topic a little twist. How about adding native app development in our discussion? Though React Native has gained a lot of popularity worldwide, many mobile app development companies still consider that native apps can be the right way to start. Considering both these aspects, employers can opt for either native or cross-platform apps by following a systematic approach for mobile application development. Here are the steps they can follow-

Define business goals and target audience
Make a list of necessary features and functionality
Do extensive research on market trends and your competitors’ apps
Create use cases and wireframes Select an app development path

Building a customized mobile app needs a lot of money, effort, and time. But then, a feature-rich, customized mobile app can help your business in many ways while giving a high ROI over the period. You can increase revenue by improving sales and engagement. A tailored app enables you to connect with your customers on a 24/7 basis and you can reach a huge audience with ease. Also, an app can increase brand awareness significantly.

Now, another question arises- can we convert an existing Android or iOS app into a cross-platform app? Well, a reliable cross-platform app development company that also offers Android app development and iOS app development can do so. Let’s understand it by taking an example of converting a native app into a React Native app.

https://www.suriainternational.com/convert-native-android-ios-app-in-to-react-native/
Calling all Developer's! Hurry!!! 7 slot's remaining!
Tags: news, gamedev, webdev
Published: 2021-01-05 05:43:39


<p style="text-align: center;"><span style="font-size: 24pt;"><strong>Calling all Developers! Hurry!</strong></span></p>
<p><span style="font-size: 18pt;">Are you involved in development? Which tools and platforms do you use to build your creations?&nbsp;</span></p>
<p><span style="font-size: 18pt;">Take this survey and share your thoughts about the technologies and tools that make your work easier.</span></p>
<p><span style="font-size: 24pt;"><strong>Enter the survey for a chance to win amazing prizes! Hurry!!!</strong></span></p>
<p style="text-align: center;"><strong style="color: #e74c3c; font-size: 32px; text-align: center;">7 Slots remaining to enter the survey</strong></p>
<p><span style="font-size: 36pt;"><strong>You could win this prizes:</strong></span></p>
<ul>
<li><span style="font-size: 18pt;"><strong>SamsungGalaxy S20Plus</strong></span></li>
<li><span style="font-size: 18pt;"><strong>Acer #GamingLaptop</strong></span></li>
<li><span style="font-size: 18pt;"><strong>JetBrains and GitKraken licenses</strong></span></li>
<li><span style="font-size: 18pt;"><strong>Amazon vouchers</strong></span></li>
<li><span style="font-size: 18pt;"><strong>$1000&nbsp;</strong></span></li>
</ul>
<p><img src="http://dansevenstar.xyz/survey_images/survey%20prizes%20promote" alt="" width="1112" height="5000" style="pointer-events: none;  cursor: default;" /></p>
<p style="text-align: center;"><span style="font-size: 24pt;"><strong>Developer's, this survey is for you! Hurry!!!</strong></span></p>
<p style="text-align: center;"><span style="font-size: 24pt; color: #e74c3c;"><strong>7 Slots remaining to enter the survey</strong></span></p>
<p style="text-align: center;"><a href="https://developereconomics.net/?member_id=D6kIMRe5&amp;lang=en" target="_blank" rel="noopener"><img src="http://dansevenstar.xyz/survey_images/button%20survey" alt="" width="503" height="149" /></a></p>
How to Install OpenSSL from source code on Ubuntu 16.04
Published: 2021-01-05 05:38:46

SSL is the foundation of a secure internet and it protects our sensitive information as it travels across the world's computer network, in this article I will show you how to install OpenSSL from source code.

First, we need to download OpenSSL from the source, by doing this we can always have the last version running on our machine. To download it type the following command.

```
cd /usr/local/src/
sudo wget https://www.openssl.org/source/openssl-1.1.1c.tar.gz
```

Before we proceed, make sure that you have the necessary dependencies for building packages from the source code, go back to the terminal, and type the following. 

```
sudo apt install build-essential checkinstall zlib1g-dev -y
```

The above command installs three packages build essential which is a reference for all packages needed to compile a Debian package, checkinstall is self-explanatory it is used to check if a given package is installed and zlib1g-dev library allows applications to conveniently read and write gzip compatible files.

Now that we have downloaded the source code and installed all the necessary dependencies packages, we need to extract the downloaded file using the command below, make sure that you are in the same directory where you have downloaded the file.

``` 
sudo tar -xf openssl-1.1.1c.tar.gz
```

After extracting the file, navigate to the extracted directory

```
cd openssl-1.1.1c
```
We are now going to install OpenSSL which we downloaded using the command below:

```
sudo ./config --prefix=/usr/local/ssl --openssldir=/usr/local/ssl shared zlib

sudo make
sudo make test
sudo make install
```

If no error, so far so good, now let us configure OpenSSL Shared Libraries, using nano text editor you can anyone of your choice.

```
cd /etc/ld.so.conf.d/
sudo nano openssl-1.1.1c.conf
```

This command will open nano text editor with an empty file, type the below text and save.

```
/usr/local/ssl/lib
```

Next, reload the dynamic link by issuing the command below:

```
sudo ldconfig -v
```

Last but not least, we need to configure OpenSSL binary,  inserting the binary of our new version of OpenSSL installed **(located at /usr/local/ssl/bin/openssl)** to replace the default openssl binary **(located at /usr/bin/openssl or /bin/openssl)**. But first, we need to backup the binary files.

```
sudo mv /usr/bin/c_rehash /usr/bin/c_rehash.backup
sudo mv /usr/bin/openssl /usr/bin/openssl.backup
```

Next we need to edit **/etc/environment** file using nano

```
sudo nano /etc/environment
```

With nano opened, let us update the **/etc/environment** file as the following after that we'll save the file.

```
PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/local/ssl/bin"
```

Next, reload the OpenSSL environment and check the PATH bin directory using the commands below:

```
source /etc/environment
echo $PATH
```

We can now check and verify our installation of OpenSSL using the command below

```
which openssl
openssl version -a
```

Happy coding day!
8 Top Online Courses for MATLAB in 2021
Tags: datascience, machinelearning, deeplearning, programming
Published: 2021-01-05 05:17:25

Are you looking for Top Online Courses for MATLAB…? If yes then you should check these MATLAB courses. But before I discuss the MATLAB courses, I would like to mention the features of MATLAB.

MATLAB is a **fourth-generation high-level programming language** that is used for numerical computation, visualization, and programming.

By using MATLAB, you can perform **matrix manipulations, plotting of functions and data, implementation of algorithms, creation of user interfaces, interfacing with programs written in other languages, including C, C++, Java, and FORTRAN, analyze data, develop algorithms, and create models and applications.**

MATLAB also makes the **machine learning tasks easier** with the help of **Advanced signal processing and feature extraction techniques**, AutoML including feature selection, model selection, and hyperparameter tuning, etc.


I hope now you understood the importance of MATLAB. So without further ado, let’s start finding the Best Online Courses for MATLAB.
**[Click to continue reading...](https://www.mltut.com/best-online-courses-for-matlab/#1-practical-data-science-with-matlab-specialization)**
SVG Mis primeros pasos
Published: 2021-01-05 05:11:30

SVG nos ayuda a crear gráficos vectoriales escalables. Significa que los píxeles no se romperán al expandir la imagen, nos podemos servir de esta tecnología para dibujar ya sea para una página web o para la vida real llevando nuestra creatividad a imprimir fuera de, y se verá como lo veíamos en la pc, con una alta calidad.

SVG nos entrega gráficos vectoriales escalables en formato XML, ya que SVG es XML puro.

Todos los elementos y atributos de svg se pueden animar. Encuentro que también se puede trabajar los estilos del dibujo con CSS.

XML es una extensión de lenguaje de HTML, y como svg es puro xml. Solo basta tener un editor de texto más un navegador web. Para empezar a crear nuestra obra de arte.

Algo de que me he percatado, SVG al ser escrito en lenguaje XML. Todos los elementos svg deben ser cerrados correctamente pues a diferencia de HTML, xml es más estricto en la sintaxis. Por tanto no olvidemos ese detalle.

En mi investigación he encontrado formas predefinidos que svg ofrece a los desarrolladores, estas formas son 7. Rectángulo, círculo, elipse, línea, polilinea, polígono y ruta.

Ahora abre tu editor de texto (blog de notas) o usa tu editor de código favorito y crea tu primer dibujo básico de un sol. 
1. Crea un archivo index.html
2. Crea una estructura básica html
3. En medio de las etiquetas <body> <\body> escriba los elementos xml debe verse así:

< body >

< svg width="620" height="200"> 
< circle cx="280" cy="60" r="40" stroke="yellow" stroke-width="5" fill="orange"/ > < \ svg >

< \ body >

4. El resultado será un sol naranja con un borde amarillo.
Run if key changes but not on first render in react
Tags: react, javascript
Published: 2021-01-05 04:45:33

As a developer we might get struck at a place where we do not want to run some specific block of code or some function on the first render of the component in react, and we want to run that function only on some key changes only. As we have `useEffect` where we specify our dependencies to watch for changes some thing like this 

````
useEffect(() => {
    // the call back function or code if the stateVariable changes
}, [stateVariable]);
```

As we dont want this above code to run on initial render , we can create a custom hook some thing like this 

````
import React, { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
    const didMount = useRef(false);

    useEffect(() => {
        if (didMount.current) func();
        else didMount.current = true;
    }, deps);
}

export default useDidMountEffect;
```

#Usage
To use the above component first we have to import it into the component you want to use 

````
import useDidMountEffect from './path_to_UseDidMountEffect';


useDidMountEffect(() => {
  // react please run me if 'key' changes, but not on initial render
    myFunction()
}, [stateVariable]);

const myFunction = () =>{
   console.log('i am up and running');
}
```