teleren/devto huggingface dataset:
Algorithms are like recipes
Tags: beginners, datascience, watercooler
Published: 2021-05-02 11:31:23

Algorithms are like a pita bread recipe. There's a problem being solved (making good pita bread), ingredients required (pieces of input), a sequence of steps to follow (recipe instructions), and the resulting output, in this case, pita bread of a certain quality.

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

Algorithms can provide the same output given a specific input, always - these are called deterministic algorithms; or they can result in a different output when the steps involve an element of randomness or uncertainty - these are called stochastic algorithms.

The algorithm for a .max(x, y) function might involve comparing two numbers to find the maximum. Inputs are x and y, and the algorithm finds the largest - somewhat easy to intuit how it works.

The algorithm for Photoshop to cut a background might involve iterating through all the pixels in an image and finding edges or areas of contrast - there's a set of well known techniques for this.

The algorithm for Netflix might involve comparing the category of videos you've watched with the categories of all other movies out there to provide you with recommendations...

...or, it might compare your demographic data with other user's data, and provide you with recommendations based on movies they have watched - these algorithms' outputs are more difficult to estimate.

You might have heard of the joke: An algorithm is a word used by programmers when they don't want to explain what they did...

Deep learning models are solving some of the toughest problems today, but they're often mysterious in their workings. The future calls for algorithms to be more transparent, understandable, and accessible to people of varied skillsets - a mammoth of a challenge for us all!

If you enjoyed this thread, check out my book: [Grokking Artificial Intelligence Algorithms with Manning](http://bit.ly/gaia-book), consider [following me for more](https://twitter.com/RishalHurbans), or join my mailing list for infrequent knowledge drops in your inbox: [rhurbans.com/subscribe](https://rhurbans.com/subscribe).
Illegal string offset
Tags: php, help, mysqli, array
Published: 2021-05-02 11:10:57

I am following an online tutorial to build a message form using PHP and Mysqli. Then I hit a problem.  I got an 'illegal string offset' message.  I checked my code and the code online and all for one line they match.

The code for the array is in a php tag: 
...
$rows = [];
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
	$rows = $row;
}
...

The code that should display the messages:

...
<div class="msgFrame">
<?php
    foreach ($rows as $row);
?>
<div class="content_1">
    <img class="name" src="http://qlogo3.store.qq.com/qzone/1262283870/1262283870/100?1481718124" alt="photo">
	<div class="mainInfo">
		<div class="userId"><a href="#">zipple</a></div>
			<div class="coninfo">
				<?php echo $row['content']; ?>
			</div>
		<div class="time">2019-12-19  23:46:11</div>
	</div><!-- mainInfo end -->
</div><!-- content_1 end -->
...

There was a <?php endforeach; ?> tag after the last div but this cause a parse error.

I used var_dump($rows); die() in the top php tag where the $rows = []; resides. This gave me data, and using the source page this is what was outputted:

array(3) {
  ["id"]=>
  string(1) "3"
  ["content"]=>
  string(13) "newer message"
  ["add_time"]=>
  string(10) "1619873188"
}

array(3) {
  ["id"]=>
  string(1) "1"
  ["content"]=>
  string(91) "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit"
  ["add_time"]=>
  string(10) "1619869605"
}

If it helps, there are three entries (test) in the database [id] = 1, etc, and text and time in three rows.

I have no idea what is wrong or how to solve it. I would appreciate any help.
11ty and web components, an awesome combination
Tags: webdev, webcomponents
Published: 2021-05-02 10:59:29

[11ty](https://www.11ty.dev/) (Eleventy) and web components is an awesome combination. It is one of my go-to solutions for building web apps.

Setting up a project with [11ty](https://www.11ty.dev/) is pretty simple. You can set it up from scratch or you can use an 11ty [starter project](https://www.11ty.dev/docs/starter/).

This post shows you how to get started using 11ty with [FicusJS](https://docs.ficusjs.org). FicusJS is a set of lightweight functions for developing applications using web components.

The tool we are going to use creates a starter project quickly and easily using 11ty and FicusJS. The tool of choice is [Create Ficus App](https://github.com/ficusjs/create-ficus-app). It is a simple tool that makes creating new projects quick and easy.

The project will contain:
- 11ty development set-up
- FicusJS web components
- Unit testing with [Ava and JSDom](https://dev.to/ficusjs/unit-testing-web-components-with-ava-and-jsdom-2ofp)
- Build tooling for production optimisation

## Getting started

Create Ficus App lets you focus on code, not build tools.

To create a project called my-app, run this command:

```bash
npx create-ficus-app my-app
```

Once the `my-app` directory is created, all you need to do is install NPM packages using NPM or yarn:

```bash
cd my-app

# use NPM
npm i

# or use yarn
yarn
```

## Starter projects

Depending on what you need to build, Create Ficus App offers a selection of starter projects.

More to follow soon!

- Basic app - a simple, single HTML page with inline scripts
- [11ty](https://www.11ty.dev/) app - a Jamstack site based on [11ty](https://www.11ty.dev/)

If you want to choose a starter project, run this command and follow the prompts:

```bash
npx create-ficus-app
```

## Summary

Having a simple tool like Create Ficus App can save a lot of time when creating new projects. It gives you a headstart and allows you to incrementally add new tools and features as your project grows.

If you have any feedback on the tool, please visit the [Github repo](https://github.com/ficusjs/create-ficus-app).
Best VS code extensions used for web development
Tags: vscode, watercooler, webdev, codequality
Published: 2021-05-02 10:46:24

VS Code is one of the best and lightweight code editors. The dark theme and variety of extensions that very developer-friendly. This article mentions best vs code extensions which can help developers to coder faster and cleaner. 

## Thunder Client
Say bye to Postman once you've installed this extension. This extension helps to make API calls on VS code. All you've to do is go to the extension section and install the *thunder client* extension. You'll find a small electrifying icon on the left-hand side. Click on it and you're good to go. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjnsr7shpj3kz4rlzjem.gif)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fc7vgl4h5pu3csz3xlz.gif)




## Markdown All in One
It would be nice if your complete markdown, which includes auto-preview, shortcuts, autocomplete, were managed by a single extension. With this extension, you can have a live preview of your markdown, and using shortcuts like *ctrl+b* and *ctrl+i* makes preparing markdowns less excruciating. 
**For live preview use command ctrl + shift + k + v.**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xirx2pr79egt2b2kc3a.gif)



## Prettier
Developers are most often troubled by the commas and colons or by adjusting the code properly. Prettier code extension manages the code format and aligns it properly so that the code looks **pretty**. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fobn338n24c2mv1mrmu.gif)


## CSS Peek
CSS Peek extension is a handy extension to check for CSS code while typing HTML tags. When you hover over the class name and hit control then you get the CSS code of that class. On clicking on the class it will take you the code on the CSS page. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9ppec1i7aidv4ocpztm.gif)


## Live Server
This server helps to reload the page after saving the code. While previewing the saved code you need not refresh the page manually. It reloads the page and shows to output for recently saved code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edw855oqj987rplod6fu.gif)

## Emmet
Most of the time it's boring to write the complete HTML tag with head and title and other tags within the head tag. Emmet extension gives the initial code for HTML pages. When you type ``` !+tab ``` You get the initial code.


## Auto Rename Tag
This is a very powerful and useful extension for web developers. It auto-completes the ending tag same as the starting one and vice versa. This extension is also useful for React applications.

There are a lot of other VS code extensions which are very handy if you know any please do mention them down in the comment section.
I need some ideas about the new era of technology as a new developer in the world of programing 
Tags: beginners, devops, database
Published: 2021-05-02 10:01:17

all that I need is the cooperation of members from different people that will make a global village that can have and generate same and useful ideas that are developmental in the future.
Am RUHANGABAHO DICKSON and I would like to get some group of people that have a knowledge about either html, java, python or c programming and if you have knowledge try to share with others so that you can also gain some skills from them.
you should know that it is all about practice that will improve your skills mostly in the computing world that is prevailing now. 
nothing is impossible on the side of a programmer.

looking forward to hear from you.
Thanks.
How to Send Encrypted Email on Outlook, Gmail, iOS, & Android
Published: 2021-05-02 07:34:43

 With the rise of the internet, our world started growing a lot faster, a lot bigger. The Internet made everything easier to be it sending some files to your colleague through email or asking help from your friend who is living far away from you.

 

But as Uncle Ben said to our favorite Spiderman, “With great powers comes great responsibility”. Everyone should use the internet responsibly. But it is not the case. Some people use information and messages we send to others for their advantages.

 

And that’s where encryption comes to play. And most common use of encryption is the encryption of emails.

Emails are the most common way of communication between different organizations and between people. There were millions of emails sent and received. Although we don’t know how many of them are encrypted.

 

So if you are wondering how to encrypt your emails read the article carefully and you will thank me later.

 

Let first see what exactly encrypting emails mean.

 

So encryption is a technique used to convert the plain text or a simple text into some hidden text.

So encrypting emails means converting whatever that you are sending to the other person a data, a text or images into something which is not recognizable by simply looking at it or reading it.

Therefore if another person gets hold of this information he won’t be able to identify or specify what is in the data.

 

There are two types of encryption techniques uses to encrypt emails.

 

S/MIME is a short form for secure/multipurpose internet mail extension
 

In this technique, there is a centralized authority that stores your keys.

This technique already installed in the software which is provided by big companies such as Gmail, Outlook, iOS.

 

PGP/MIME is a short form for pretty good privacy/multipurpose internet mail extension
In this technique, there is a decentralized authority.

You can create your key with this technique.

We have to use a third party system to use this technique.

It is generally used in an Android-based system.

 

Both of these techniques two key methods. In which sender has the public key which is available in the public domain and the receiver has the private which is stored somewhere in his system. So to decrypt the data sent by the private sender key is necessary



 [Read Full Story](https://comparecheapssl.com/how-to-send-encrypted-email-on-outlook-gmail-ios-android/)
Expand a card element on click
Tags: css, html, javascript, 100daysofcode
Published: 2021-05-02 09:32:14

A simple CSS & JavaScript implementation of expanding a card on click. Figuring out how to animate the expansion was relatively easy, but I had a hard time implementing the *de-animation* (going from expanded to collapsed). In the end, I had to add a default `opacity: 0` to the very first state when nothing has happened yet, and then later on add a `expanded` class when expanded, and `unexpanded` class when unexpanded (for the de-animation).

{% codepen https://codepen.io/rngueco/pen/qBReWwe %}

Comments are welcome 😊 I still consider myself a front-end dev newbie so I need all the help I can get. I'm having a particularly hard time putting BEM into practice, but I tried with this one (did I even do it right?).

---

If you found this useful, consider [buying me a coffee](https://ko-fi.com/yanski_).
Complete list with reading resources and free books
Published: 2021-06-17 08:24:13

---
title: Complete list with reading resources and free books
published: true
date: 2021-05-02 09:09:09 UTC
tags: 
canonical_url: https://boobo94.github.io/resources/free-books-and-reading-resources/
---

A complete list with reading resources and free books for either students, developers and all types of readers:

- [http://gen.lib.rus.ec/](http://gen.lib.rus.ec/)
- [https://ebooks.adelaide.edu.au/meta/titles/A.html](https://ebooks.adelaide.edu.au/meta/titles/A.html)
- [https://www.reddit.com/r/freeEBOOKS/wiki/febooks](https://www.reddit.com/r/freeEBOOKS/wiki/febooks)
- [https://www.kobo.com/us/en/p/free-ebooks](https://www.kobo.com/us/en/p/free-ebooks)
- [https://www.smashwords.com/](https://www.smashwords.com/)
- [http://manybooks.net/](http://manybooks.net/)
- [http://www.openculture.com/free\_ebooks](http://www.openculture.com/free_ebooks)
- [http://collections.stanford.edu/](http://collections.stanford.edu/)
- [https://www.freeetextbooks.com/](https://www.freeetextbooks.com/)
- [http://home.earthlink.net/~maywrite/golden.htm](http://home.earthlink.net/~maywrite/golden.htm)
- [http://ww17.wocoencuk.com/](http://ww17.wocoencuk.com/)
- [https://www.free-ebooks.net/](https://www.free-ebooks.net/)
- [http://www.getfreeebooks.com/](http://www.getfreeebooks.com/)
- [https://it-ebooks.info/](https://it-ebooks.info/)
- [http://www.allitebooks.com/](http://www.allitebooks.com/)
- [https://www.engbookspdf.com/](https://www.engbookspdf.com/)
ESP32 with Arduino CLI
Tags: arduino, esp32, iot
Published: 2021-05-02 08:06:00

A few days ago I've bought [this beautiful ESP32-based development board](https://www.olimex.com/Products/IoT/ESP32/ESP32-POE-ISO/open-source-hardware). I selected Olimex since it was the only manufacturer with PoE boards available in my region (west Europe). 

Here you can see how it looks with PoE-enabled Ethernet port connected. 

{% twitter 1388518748957691907 %}

And since I'm pretty new in this area I had to fight some battles to make it work with Arduino-cli. Here's some brief description of steps I had to do to successfully upload a sketch to the ESP32-POE-ISO.

> Please note that I'm Mac OS user so some details are relevant only for Apple users. 

## Create a new sketch

```bash
arduino-cli sketch new 01
cd 01
```

Also, download some sample sketches from [Olimex's GitHub account](https://github.com/OLIMEX/ESP32-POE/tree/master/SOFTWARE/ARDUINO/ESP32_PoE_Ethernet_Arduino).

## Arduino config file arduino-cli.yaml

```yaml
board_manager:
  additional_urls:
    - https://dl.espressif.com/dl/package_esp32_index.json
```

## Download the index

```bash
arduino-cli core update-index --config-file arduino-cli.yaml
```

## Install the ESP32 core

```bash
arduino-cli core install esp32:esp32
```

## List the boards

```bash
arduino-cli board list
```

sample output:

```
Port                            Type        Board Name FQBN Core
/dev/cu.Bluetooth-Incoming-Port Serial Port Unknown             
/dev/cu.debug-console           Serial Port Unknown             
/dev/cu.usbmodem009NTNHF15512   Serial Port Unknown             
/dev/cu.usbserial-1310          Serial Port Unknown             
/dev/cu.wlan-debug              Serial Port Unknown 
```

## Try to compile the sketch

```bash
arduino-cli compile --fqbn esp32:esp32:esp32-poe-iso .
```

## Try to upload the sketch

```bash
arduino-cli upload -p /dev/cu.usbserial-1310 --fqbn esp32:esp32:esp32-poe-iso .
```

## Monitor the serial output

```bash
screen /dev/cu.usbserial-1310 115200
```

## Result

After 30 - 40 minutes I was able to start with some basic development. Board is now connected to the Ethernet and it obtained an IPv4 address from my DHCP server.

{% twitter 1388764656853000192 %}

Well, it was easier than I originally thought. Can't wait to test some more complex stuff!
I added a Story Mode to my Game
Tags: unity3d, devlog, gamedev
Published: 2021-05-02 08:02:58

Hello fellow game developers,

I am currently working on a 3D FPS Parkour Game settled in Space. Of course, I want to tell a story with the game. To do this, I made an NPC (Non-Player-Character), that tells you a piece of the story whenever it's relevant for the player.

The goal of the player is to exile the aliens, so the people can continue to build their space station. Because it's not completely finished, there are blocks everywhere, which allow the player to do parkour. 
You can watch my four-minute devlog about it on YouTube: https://youtu.be/jIhRNOPyP-4

Any feedback is appreciated! Have a nice day!
Undo your last git mistake with ugit
Tags: showdev, git, github, productivity
Published: 2021-05-02 08:00:53


So I have been working on this little tool called [**ugit**](https://github.com/Bhupesh-V/ugit) (and was finally able to release a stable version), the goal is to make it easier for beginner to intermediate git users to undo their last (accidental) git command. Because we are not perfect and commit mistakes.

“Oh wait I deleted the _auth-jwt_ branch without merging!! fuck”   
_Opens browser_  
“How to restore deleted branch”  
_Wastes 5 minutes reading the thread,_  
_Brain context switch, losses focus_  
“Aarrgh, Git sucks”

Failure is a good way to learn something new but how many times are you going to mess up with git, if your ultimate goal is to deliver the new feature in your startup as fast as possible, huh? Git is great but it’s not really good with developer experience (DX).

Yo bhupesh, I can just you know _alias_ this command. Oh cool, good luck remembering that alias after 1 month when you fuck-up again.

If you are in the gang of getting things done, adding **ugit** might be a good choice for you.

{% github Bhupesh-V/ugit %}
Ok enough talking.

## What is `ugit`?

It’s just a simple shell script with guided programmatic steps to undo your last git command, powered by FZF built for people who live and work with terminals every day.

## Guided Tutorials

Below are some GIF demos of undoing some git operations, the list is long (around 17 scenarios) but I am only demonstrating some common ones.

### Undoing `git add`
<video width="100%" controls="">
  <source src="https://drive.google.com/uc?export=view&amp;id=1YSHnAp2gDho-a-U7IhXcyo069JuoxMeP" type="video/mp4"></source>
</video>
### Undoing `git branch -D` (Restore deleted branch)
<video width="100%" controls="">
  <source src="https://drive.google.com/uc?export=view&amp;id=1JJ1j3A3SFWlUpusSzrhKZv7espkpcDrk" type="video/mp4"></source>
</video>
## Undoing/Restoring file to previous version
<video width="100%" controls="">
  <source src="https://drive.google.com/uc?export=view&amp;id=1BrUdWc9EbPtuUHZfNIyfLT0NSBu802RR" type="video/mp4"></source>
</video>
### Undoing `git merge`
<video width="100%" controls="">
  <source src="https://drive.google.com/uc?export=view&amp;id=1zZYGyI0DnvmZ2NYl6GdlpE-u1fdzo3T2" type="video/mp4"></source>
</video>

### I don’t like your stupid script

<img height="80px" alt="sad dogo crying" src="https://ik.imagekit.io/bhupesh/blog_content_pics/sed-doggo_e7RD-mM7L.webp">

Cool, I mean we are still friends right?? Friends help friends avoid git mistakes, that’s why I wrote an accompanying text guide on [How to undo anything in Git](https://bhupesh.gitbook.io/notes/git/how-to-undo-anything-in-git).

Share it with your friends, co-workers. No hard feelings

Peace ✌️
ADVANCEMENT OF MOBILE TECHNOLOGY
Published: 2021-05-02 07:54:25

I still remember over the last 8-10 years there is a huge change in advancement of mobile technology.

The era of using modern mobile phones has started over the last decade  but before that people used mobiles to just talk to their loved ones and at that time ,mobiles were just used for the calling purpose.

But, when we entered  in to the last decade usage of internet has just begun. people  used to recharge their mobiles with mobile data where the big bang has just begun.. and at these stage people used to message/ to do chat , listening to songs etc etc etc....

But when in 2016 everything started with free GB of net daily,  and this stage mobile users are using mobile phones for messaging, navigating, ordering food and essentials etc

By the this advancement ,there are lot of e-commerce platforms has emerged where users can buy/sell products and they can but food through some apps and can connect to any human on this world who has a phone with internet connection and everything can be done using mobile then ordering food, sending messages and watching movies in mobiles , and some works can be done with less efforts using mobiles and teaching using mobiles.

In my view there are advantages and disadvantages of mobile phones , if we use mobile phones and internet for the purpose of good then everything will be in control and good for all.
Java Read and Write
Tags: java, github, programming
Published: 2021-05-02 07:01:05

I wanted to learn a little bit about reading and writing to a text file using Java so I made two little programs that do just that.
Check it out

https://www.keaganyoung.com/my-projects/read-and-write
https://github.com/KeaganYoung/ReadAndWrite


#Github #java
Responsive Navigation Menu Bar HTML & CSS
Tags: navigationmenu, responisvenavbar, menubar, htmlcss
Published: 2021-05-02 06:26:23

**Q: How can we create a responsive navigation bar using HTML and CSS?**
A: After reading the given article and watching the video tutorial for creating a Responsive Navigation Bar you will definitely able to create the navigation bar that i have given as an image
Hello readers, today in this blog I'm going to create a Responsive Navigation Menu Bar By using only HTML & CSS. In a previous blog, I have shared How to Create a Sidebar Menu without using JavaScript and now I'm going to create a responsive navbar.

**What is Navigation Menu Bar?**
Basically, the Navigation menu is a horizontal bar where one logo and some hyperlinks exist. It is the most important program on the webpage. The main purpose of the navigation bar is to directly redirect to the web pages by clicking on the hyperlinks they want. Another main purpose of the navigation bar is to make the user's works convenient and easier. The navigation bar should be perfectly fit in all screen devices.

As you can clearly look at the given image of this program Navbar Menu. On the top side, there is one horizontal bar. On the right side, there is one logo, and on the left side, there are some hyperlinks. Bottom of this bar there is a sidebar on the left side actually appears when that webpage moves into small devices screen. We have to put essential hyperlinks inside the navigation menu bar like "Home, About us, Contac us, Privacy policy, terms and & conditions and ofcourse a logo". The minimum we should keep 5 to 7 links to make the best navigation menu.

**You can download all source code from the given link.** 
<a href="https://www.codinglabweb.com/2020/12/responsive-navigation-menu-bar-design.html">Click Here To Download All Source Code</a>