teleren/devto huggingface dataset:
30DaysOfHTML Challenge
Tags: html, webdev, javascript
Published: 2021-01-30 23:37:21

HTML(HyperText Markup language) is the building block of all websites. There is no website without HTML. I am the creator of 30DaysOfPython, 30DayOfJavaScript, and 30DaysOfReact. These materials have been trending on GitHub most of the time. My followers have been asking me to produce something similar to JavaScript for HTML and CSS. Some of my followers stack at the DOM section of 30DaysOfJavaScript because of their little knowledge of HTML and CSS. Now, I decided to create 30DaysOfHTML that can be used for people getting started their career as a web developer.

This is for absolute beginners and people who have a dought about their understanding of the HTML. I believe the 30 Days of HTML challenge will help lots of people to join the IT industry with a very good understanding of the web. 
Good luck and Happy Coding!

Join the Telegram group: https://t.me/ThirtyDaysOfHTML
GitHub Repository: https://github.com/Asabeneh/30-Days-Of-HTML


Previous Challenges' repository

30 Days of React: https://t.co/URWNbOHltL
30 Days of JavaScript:https://t.co/MqieTiV7wS
30 Days of Python: https://t.co/TZ4WAhTq9P
Split a video file with ffmpeg
Tags: linux, ffmpeg
Published: 2021-01-30 23:17:06

Say you have a two-parter episode of a show as a single 42 minute long video file.

Split the video from the beginning until the 21 minute point:

```bash
ffmpeg -i input.mkv -vcodec copy -acodec copy -t 00:21:00 output.mkv
```

Split the video from 21 minutes until the end:

```bash
ffmpeg -i input.mkv -vcodec copy -acodec copy -ss 00:21:00 output.mkv
```
My First Post!
Tags: womenintech, firstpost, pocit, bridgethetechgap
Published: 2021-01-30 22:48:25

Hello, Dev World!

I'm Meia and I'm a budding software engineer from Oakland, CA. As a Filipina-American, my love languages are food, comedy, and music. I was drawn to this career for my love of math, learning, and games. My journey to this path is a bit untraditional, but more on that later! 

I'm currently self-learning in a coding boot camp that aims to help womxn and womxn of color (like myself) fulfill their dreams. It's been a long time coming, but I finally feel like I am in the right place.

I'm excited to share my journey here with y'all!
Customer Screen UI
Tags: ux, css, userinterface, codepen
Published: 2021-01-30 22:35:23

<p>Inspired by uidesigndaily.com <a href="https://www.uidesigndaily.com/posts/figma-customers-projects-project-management-card-invoice-day-518" target="_blank">https://www.uidesigndaily.com/posts/figma-customers-projects-project-management-card-invoice-day-518</a></p>

<p>It will be responsive in a couple week :)</p>

{% codepen https://codepen.io/osmancandulger/pen/RwGzoaK %}
Arrays with a Splash of Filter & Object String Prototype..
Tags: javascript, beginners
Published: 2021-01-30 22:05:54

So lets assume we know what an **Array** is already and *jump* into **Filter** & **String Object**!

```javascript

// TODO: 'filter' out students whose name begins with "A"

const listOfStudents = 

['Adam','Goose','Steve','Ace','Maverick','Aaron']

```
---
```javascript
const aNameStudents = listOfStudents.filter(function(student) {
return student.startsWith('A')
})

```
---

In the *example* above 🔼 **Filter** returns *New* **Array** with elements that meet some *Boolean* condition.👆 **Filter** returns the current element 'student' if our *Callback* returns true ✅ **Soo** we know from my last post that JS distinguishes between 'Primitive Strings' & now we have heard of 'String Objects'..Im not going to give the *MDN* definition in this post 🦾 But *Primitive* values like 'num', cant have properties or methods(because they are not *objects*) under the hood JS, treats *primitive* values as *objects* when executing *methods* and *properties*... 'startsWith' 🔼 is one of those invoked string *methods* that is going to return with a *true* or *false* if string starts with 'A'..
How to use Commitizen - Unify commit messages
Published: 2021-01-30 07:25:59

# Introduction
- I often get lost when entering a commit message
- Commit messages are not unified and not simple

Due to such concerns, I have introduced Commitizen this time.

# What is Commitizen?
Official page
[https://github.com/commitizen/cz-cli](https://github.com/commitizen/cz-cli)

Type　'git cz'　to see your choices.
It's a tool that allows you to create simple and easy-to-understand commit messages just by answering interactively.
![スクリーンショット 2021-01-30 15.39.55](https://dev-to-uploads.s3.amazonaws.com/i/y1ru12k8urfxn5vpti9q.png)

# How to install Commitizen
Type this commands

```
npm install commitizen -g
npm install -g cz-conventional-changelog
echo '{ "path": "cz-conventional-changelog" }' >> ~/.czrc
exec $SHELL -l
```

# How to use Commitizen
Start with the 'git cz' command.
```
git cz
```
![スクリーンショット 2021-01-30 15.39.55](https://dev-to-uploads.s3.amazonaws.com/i/y26woiizwk3vw6nd6npp.png)

This time I just added README.md, so select 'docs'.
![スクリーンショット 2021-01-30 15.40.08](https://dev-to-uploads.s3.amazonaws.com/i/x4hvmrdo3t7rtmq2qxef.png)

I was asked for the scope of this change, so type in 'README.md'. 
![スクリーンショット 2021-01-30 15.40.24](https://dev-to-uploads.s3.amazonaws.com/i/qa2fnkw6fxc8gtmm5pq0.png)

Then enter a short description. 
This time I typed 'add README'.
![スクリーンショット 2021-01-30 15.40.38](https://dev-to-uploads.s3.amazonaws.com/i/kga9ng4tlnhsb1u27vzj.png)

Then enter a long description. 
I didn't need a detailed explanation this time, so I skipped it with Enter Key.
![スクリーンショット 2021-01-30 15.40.51](https://dev-to-uploads.s3.amazonaws.com/i/d0vf973j343bgs586gn6.png)

I was asked if there were any breaking changes, but this time it's no.
![スクリーンショット 2021-01-30 15.41.02](https://dev-to-uploads.s3.amazonaws.com/i/kdbnlupwep5nhklbdejv.png)

I was asked if it was related to the issue, but this is No.
![スクリーンショット 2021-01-30 15.41.13](https://dev-to-uploads.s3.amazonaws.com/i/50hdj5nculfs15c6sfex.png)

That's it.
Let's see what kind of commit message was created.
```
docs (readme.md): add README  
```
![スクリーンショット 2021-01-30 15.41.39](https://dev-to-uploads.s3.amazonaws.com/i/fxttfzm4wdzhi7zqt8pz.png)

# Conclusion
That's how to use Commitizen.
Thank you for watching.

Please follow me on Twitter.
If you have a project, please contact me on Twitter.
https://twitter.com/n199603
Suppress Cache
Tags: javascript, node, cache, discord
Published: 2021-01-30 21:45:00

New project **Open Source** on GitHub ! 

TLDR : Generate randomly a string for clear cache from Cloudflare or other CDN. Using on Mr. Robøt.

This file is used on the bot for no cache files from CDNs. Discord uses Cloudflare for caching management, which can be problematic when you change an image and display it on the platform. Even after a change on your side, Discord can still keep the old version in its cache.

```js
const { getFolderIcons } = require('suppresscache');

getFolderIcons(
  "https://mrrobot.app/Folder/Of/Icons",
  "myFileName.png",
  true,
  false
)
```

Give that :

```bash
[suppressCache] Output : https://mrrobot.app/Folder/Of/Icons/file.png?suppressCache=gb0cqe0j
```

{% github https://github.com/Mist3r-Robot/SuppressCache no-readme %}
ARM shellcode
Tags: security, cybersecurity, assembly
Published: 2021-01-30 21:43:05

---
series: ProtoARM
---

Lets transform the hello world code we wrote in the previous blog entry into a shellcode.

To remove all null bytes, we'll switch to THUMB mode. We also must find or apply some known tricks (e.g. init a register with zero).

This is our hello world in thumb without null bytes:

```asm
root@azeria-labs-arm:~/arm/hello# cat hello.s
.text
.global _start

_start:
	.code 32
	add r6, pc, #1
	bx r6

	.code 16
	mov r2, #6  	@ strlen
	mov r1, pc  	@ load pc
	add r1, #14 	@ add str offset from pc
	mov r0, #1  	@ stdout
	mov r7, #4  	@ nr_write
	svc #1      	@ syscall

	sub r4, r4, r4 	@ r4 = 0
	mov r0, r4     	@ exit 0
	mov r7, #1     	@ nr_exit
	svc #1

.asciz "hello\n"    @ null terminated string
```

We can assemble it and verify it has no null bytes:

```sh
root@azeria-labs-arm:~/arm/hello# as hello.s -o hello.o -mthumb
root@azeria-labs-arm:~/arm/hello# objdump -d hello.o

hello.o:     file format elf32-littlearm


Disassembly of section .text:

00000000 <_start>:
   0:	e28f6001 	add	r6, pc, #1
   4:	e12fff16 	bx	r6
   8:	2206      	movs	r2, #6
   a:	4679      	mov	r1, pc
   c:	310e      	adds	r1, #14
   e:	2001      	movs	r0, #1
  10:	2704      	movs	r7, #4
  12:	df01      	svc	1
  14:	1b24      	subs	r4, r4, r4
  16:	1c20      	adds	r0, r4, #0
  18:	2701      	movs	r7, #1
  1a:	df01      	svc	1
  1c:	6c6c6568 	.word	0x6c6c6568
  20:	0a6f      	.short	0x0a6f
	...
```

Ok let's try it:

```sh
root@azeria-labs-arm:~/arm/hello# ld hello.o -o hello
root@azeria-labs-arm:~/arm/hello# ./hello
hello
```

Good now let's try to execute it from C code. First we retrieve opcodes:

```sh
root@azeria-labs-arm:~/arm/hello# objcopy -O binary hello.o hello.bin
root@azeria-labs-arm:~/arm/hello# xxd -i hello.bin
unsigned char hello_bin[] = {
  0x01, 0x60, 0x8f, 0xe2, 0x16, 0xff, 0x2f, 0xe1, 0x06, 0x22, 0x79, 0x46,
  0x0e, 0x31, 0x01, 0x20, 0x04, 0x27, 0x01, 0xdf, 0x24, 0x1b, 0x20, 0x1c,
  0x01, 0x27, 0x01, 0xdf, 0x68, 0x65, 0x6c, 0x6c, 0x6f, 0x0a, 0x00, 0x00
};
unsigned int hello_bin_len = 36;
root@azeria-labs-arm:~/arm/hello# hexdump -v -e ' "\\x" 1/1 "%02x"' hello.bin 
\x01\x60\x8f\xe2\x16\xff\x2f\xe1\x06\x22\x79\x46\x0e\x31\x01\x20\x04\x27\x01\xdf\x24\x1b\x20\x1c\x01\x27\x01\xdf\x68\x65\x6c\x6c\x6f\x0a\x00\x00
```

We can directly use that `hello.bin`  in [odzhan/shellcode](https://github.com/odzhan/shellcode):

```sh
root@azeria-labs-arm:~/arm/hello# ~/shellcode/runsc -f ./hello.bin -x

[ run shellcode v0.2
[ reading code from ./hello.bin
[ executing code...hello
```

We now have a valid shellcode, ready to be used within string manipulation functions such as `srtcpy` or `fgets` as we encountered previously in this series.
JavaScript Higher-Order Functions
Tags: javascript, codenewbie, tutorial, webdev
Published: 2021-01-30 21:34:20

{% youtube DlFOe-E1m-8 %}

---
A function in another function can either be a returned value or an argument.

See the example below:

```js
const calcSum = (a, b) => {
    return a + b;
};

const sum = calcSum(23, 12);
console.log(sum); // 35

const higherFunc = cost => {
    return `It costs ${cost} dollars.`;
};

console.log( higherFunc(sum) ); // function as an argument
// It costs 35 dollars.
```
---
### Functions as Data
A function can get assigned to a variable. 

See the example below:
```js
const calcSum = (a, b) => {
    return a + b;
};

const sum = calcSum;
console.log( sum(12, 23) ) // 35
```
In the example above, the address in memory of both `calcSum` and `sum` is the same. We only changed the function name from `calcSum` to `sum` as a variable.

---
### Functions as parameters
Higher-order functions can accept functions as parameters. Such parameters are called **callback functions**.

See the example below:

```js
const add = (num1, num2) => {
    return num1 + num2;
};

const mult = (num1, num2) => {
    return num1 * num2;
};

const calculator = (num1, num2, operator) => {
    return operator(num1, num2);
};

console.log( calculator(5, 7, add) ); // 12
console.log( calculator(5, 7, mult) ); // 35
```
In the example above, the parameter `operator` is defined as `add` and `mult` function but also returned as a value, `return operator(num1, num2)`. The function (`operator`) is called a **callback function**.

The function `operator` was called back twice to `add` and `mult`.

```js
console.log( calculator(5, 7, add) ); // 12
console.log( calculator(5, 7, mult) ); // 35
```

---
#### Functions as arguments
Functions can be arguments to other functions.

See the example below:

```js
const calcSum = (a, b) => {
    return a + b;
};

const sum = calcSum(23, 12);
console.log(sum); // 35

const higherFunc = cost => {
    return `It costs ${cost} dollars.`;
};

console.log( higherFunc(sum) ); // function as an argument
// It costs 35 dollars.
```

In the example above, `sum` is a variable that refers to a calling function `calcSum(23, 12)`. 

Since `sum` is a returned value, it can be treated as an argument in a higher-order function `higherFunc(sum)`.

**Happy coding!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>
Preorder Vue.js 3 By Example Book
Tags: vue, webdev, programming, beginners
Published: 2021-01-30 21:32:52

**Promotional Post**

My new book, Vue.js 3 By Example: Build eight real-world applications from the ground up using Vue 3, Vuex, and Vuetify, is going to be published by Packt.

![vue 3 by example book](https://m.media-amazon.com/images/I/41yVFcN-RsL.jpg)

Preorder now by going [here](https://www.amazon.com/Vue-js-Example-real-world-applications-Vuetify-ebook/dp/B08SC36BHY/ref=sr_1_14?dchild=1&keywords=vue+3&qid=1611764651&s=bookssr=1-&14).
Mixing Async / Sync Tasks  in single workflow with RUBICO
Tags: javascript, rubico
Published: 2021-01-30 21:19:54

Awesome library which allows to compose async and sync functions with ease.

Don't conviced ? Look at the following code.
The requests are treated in parallel.

You can try it here : [RubicoTest] (https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHgBMIA3AAgjYF4A5AEZBAPgA6abtyksA9B06S07LrwGCATOKky5irirU8+QgMy7ps1YeVylGoQBYr+20uOOzggKxubBU9KEDgYWGpiCHoERBBhLURhAAYQAF8KdGxcOMJwgAcYACc4fAArBCo6BiZiPGq4Ym4AcxhiAFEoJv5uAAo+AEpufjFuNlpqAFccBnxWjtgZ4gAhAE8ASTZ+tgGQsIiomLxkxF9UjKycPHLKmnpGZjiGpuBufIhCim4sDHzuNOG3CKkwARhA6FIpM9uMRaAAVWjjOAAVSKUEBfGGowABiRiPk4Ih5PIKvR8lAMNQYIRaFA2MV8MRVu86PT8HQsPJYUj5AASYB8NLYyFoaFQWjNBHjNbrAAigPehV6yG4xO4YDa1EI3Aw3CltB1aDY3HFzV4xD0MPhiNoKLRFEtGuIWod1iK8HyMRgWKBHq9N3ovQGrpkDVpMHwptdAF0BiLodzaHK4IDkMIvlovuYvs4vr5oyKfvleqb9TLZQNeonk7sqPsYJFomhYvFzIgtL4ALQnc6ZECYK5xdlwW7VB51OLpaNUKAQNAAa1iqH72TwwLBdBCkzReDxBKJ8kmaHy8+a7NonPX4NoAAFhPgAGz4YQAdnkc-pAA8biEmYU8HA1BFB8dRpNGaRAA)

```js
const { pipe, map } = rubico

const toTodosUrl = id => `https://jsonplaceholder.typicode.com/todos/${id}`

const logTodoByID = pipe([ // fetch a Todo and log it
  toTodosUrl,
  fetch,
  response => response.json(),
  console.log,
])

const todoIDs = [1, 2, 3, 4, 5]

map(logTodoByID)(todoIDs)

```
React Deep Dive: Introduction
Tags: react, javascript, webdev
Published: 2021-01-30 21:02:40

## Hi 👋
This year I've set out to better understand, and be able to articulate, React concepts. 

## Why 🤷‍♀️
I'm a Senior Frontend developer and a Team Lead. I've been working full-time with React for 2 years now. I often intuitively know what I need to do to accomplish something in React, but I find if I have to explain things from a technical perspective, my words are lacking.

## Method 🛠️
1. Read the [React docs](https://reactjs.org/docs/getting-started.html) and explore related material 30 minutes every weekday.📚

2. Write down my notes! For me, writing helps to solidify my learning. I'll usually read something through once to get the overall picture, then read it a second time and take notes as I go. 📝

3. At the end of the week read through my notes, and summarize anything important I learned in a brief blog post. 👩‍💻

That's it! My goal is to be a better technical communicator, but not burn out in the process. 😂 

## Posts ✍️
* [It's Declarative](https://dev.to/laurenmbeatty/react-deep-dive-it-s-declarative-ee2)
* [Element vs. Component](https://dev.to/laurenmbeatty/react-deep-dive-element-vs-component-3ep1)
Some Thoughts About Data Modeling In Jupyter Notebooks
Tags: sql, data, postgres, python
Published: 2021-01-30 20:57:51

---
title: Some Thoughts About Data Modeling In Jupyter Notebooks
published: true
description: 
tags:
  - sql
  - data
  - postgresql
  - python 
//cover_image: https://direct_url_to_image.jpg
---

My job recently sponsored my taking a Nanodegree course at Udacity for data engineering. So far, the projects seem to be done mostly by interacting with various databases (currently PostgreSQL and Cassandra) through python in Jupyter Notebooks set up on their platform. The format they set up the exercises is really rather repetitive an tedious. Each insert is the same thing, many times. I wonder if this is a common pattern among data people, or just an attempt to get you used to writing the SQL. (Although, SQL knowledge and python was a supposedly prerequisite for the course, so this is a bit confusing.)

I've taken to working out the SQL using DataGrip locally first, then implementing the queries through abstracting the queries to classes. It seems wrong to use an ORM when the course isn't (especially, since I know data people often hate ORMs 😀), so I have set up the classes myself. Here is the basic idea:

- Make a meta class that puts all the similar insert classes into a list.
- Make a new class for every typical insert.
- Then abstract away the actual inserts so you can reuse the logic.

Here is the basic code:

```python
# The metaclass
class MetaInsert(type):
    counter = 0
    instances = []

    def __iter__(self):
        return iter(getattr(self, "instances", []))

# This just creates the table
# Should probably take a string for the table name and 
# namedtuples for columns and types - 
# so it could be leveraged for all tables.
def create_cheese_table():
    try:
        cur.execute(f"CREATE TABLE IF NOT EXISTS cheese (id SERIAL, name varchar);")
    except psycopg2.Error as e:
        print(e)

# Example insert class
class CheeseType(metaclass=MetaInsert):
    def __init__(self, name):
        CheeseType.instances.appens(self)
        self._id = CheeseType._counter + 1
        self.name = name

    def insert_row(self):
        insert_str = f"INSERT INTO cheese (name) VALUE ('{self.name}');"
        try:
            cur.execute(insert_str)
            print(f'{self.name} inserted into the cheese table!')
        except psycopg2.Error as e:
            print(e)

create_cheese_table()

cheddar = CheeseType('cheddar')
mozzarella = CheeseType('mozzarella')
muenster = CheeseType('muenster')

[cheese.insert_row() from cheese in CheeseType]

# cheddar inserted into the cheese table!
# mozzarella inserted into the cheese table!
# muenster inserted into the cheese table!

```

This is not the most robust solution, but it works for its use case.

Please LMK what could be improved 😀 or what you would've done differently.
Apollo Server with Express, Babel 7 and ESLint
Tags: apollo, graphql, express, eslint
Published: 2021-01-30 20:54:37

---
title: Apollo Server with Express, Babel 7 and ESLint
published: true
description: 
tags: apollo, graphql, express, eslint
---

In this repository you can find a simple Apollo Server created with Express, Babel 7 and ESLint

https://github.com/rossanodan/cinematheque-apollo-server-playground

As you can see, it's a playground. This means that I will probably change the code day by day as I do practice with `GraphQL` and `Apollo.`

Feel free to fork this repository and to use it as your own to do practice with them.

PS. To use this project you will need an API key for [The Movie Database](https://developers.themoviedb.org/) which I used to fetch some data from.

[Create an account](https://www.themoviedb.org/) and you will be provided of an API key.

## Resources

List of useful resources I used to setup my plauground:

- [setup Babel 7 for NodeJS](https://www.codementor.io/@osazeedoosagie/easy-set-up-babel-7-for-nodejs-rg3zak6pj)
- [install and setup Nodemon](https://www.npmjs.com/package/nodemon)
- [getting started with ESLint](https://eslint.org/docs/user-guide/getting-started)
- [setup ESLint in your JavaScript project](https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf)
- [setting up Apollo Server with Express](https://www.npmjs.com/package/apollo-server-express)

Have fun! :smile:
Django or JS backend?
Tags: django, javascript, backend, python
Published: 2021-01-30 20:43:06

Hello guys!

I have a question regarding what kind of backend is better to use.

Let's assume:

Im developing an application that provides realtime information, and will be used from million of users.
I like the structure of a Django project(i dont call app because in Django app u have inside apps) where u can generate apps and somehow decouple things. Also it very easy to use and the framework is batteries included. This backend would serve a mobile app. 

On the other side there is JS backend frameworks like express and so on but there you can do things in every way u like. You dont have some agreements of development way as in Django for example. But JS is fast(how I read in www).

What I want to say is that for such an application what will be better to use if we assume that:

we need to handle a lot of requests.
we need to have an ease when we develop.
we need to have some agreement/rules in what way need the app(for example APIS) to be developed.

Im not a super experienced developer, im trying to figure all this things out. I really like the skill of programming because it gives u something that I call FREEDOM. FREEDOM to create things that solve problems.

Anyways I would like to thank you in advance for your answers!
Illegal string offset 
Tags: wordpress, php
Published: 2021-01-30 20:34:47

Hi All, 
I updated my site to latest php version 7.4 after that i am getting an error which is:
Warning: Illegal string offset 'tformat' in /home/---/public_html/wp-content/themes/function.php on line 29 and same error on line 31
The coding from line 29 to 35 is:

if($dt_player[0]['tformat'] == 'sub') {
$html_out .= "<div class='imagen blue'>SUB</div>";
} elseif ($dt_player[0]['tformat'] == 'raw') {
$html_out .= "<div class='imagen yello'>RAW</div>";
} else {
$html_out .= "<div class='imagen red'>NEXT</div>";
}

Can some one help to fix this out. Thanks