teleren/devto huggingface dataset:
Daily Reflection CSS 1
Published: 2020-07-22 17:33:21

Today, I officially began my daily reflection.
每天都要记下自己的思考。

About the Netflix Clone project, I found this difference:
/* codes */
.container {
	max-width: 70%;
	margin: auto;
	overflow: hidden;
	padding: 0 2rem;
}

About overflow: hidden, if the things in the container are bigger than it, they will not be all shown, some of them will be cut off,  and the sizes of the photos will not change.

So I changed it to overflow: initial, now everything is in the container, and the photos' sizes are adjusted.
Best 4 web design inspiration sites
Tags: webdev, design, inspiration
Published: 2020-07-22 17:29:01

Web developers (and other designers) often use and are in need of daily inspiration to fuel their designs. Many designers look towards popular website brands or UI trends and styles. Some use popular platforms that host design showcases, these can help web designers a lot when trying to find the perfect inspiration for a website.

Below I will list the best 5 modern inspiration sites and resources web designers use today to help them design beautiful and modern web solutions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l2trimsgeglhb980ij2f.png)
<h3>1. Pinterest</h3>
Pinterest has a host of design inspirations in a variety of forms and styles. From websites to logos, to product designs Pinterest has everything you need to get that inspiration for your next design project
https://www.pinterest.com

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6mipkmhe01ssppn648gy.jpg)
<h3>2. Behance</h3>
Behance is a online portfolio/showcase for product designs, website design, architectural designs and much much more. They have all the inspiration you'll ever need for a lifetime, and the users are super talented.
https://www.behance.net

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o1vz2anyi7qiaa5g5qjm.png)
<h3>3. Dribbble</h3>
Dribbble has some world class designs for web, product, multimedia and much more. I've personally found numerous modern designs which inspired some of my projects and i haven't regretted it.
https://dribbble.com

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8j6397reeo8jq7bekvrj.jpg)
<h3>4. Pixpa</h3>
Pixpa is an online portfolio for designers and photographers. It features some nice modern designs and inspirations for web designers and photographers. 
https://www.pixpa.com/

There you have it. The most popular online sites to fuel your daily inspirations. Check these out and good luck with your next project!
Data Science Track at EuroPython 2020 Online
Tags: europython, data
Published: 2020-07-22 17:19:15

We are excited to announce a complete [two day data science track at EuroPython 2020 Online](https://ep2020.europython.eu/events/data-science/), happening on Thursday and Friday (July 23 - 24).

Yes, that’s starting tomorrow. Sorry for the short notice 😀

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

# [Data Science @ EuroPython 2020](https://ep2020.europython.eu/events/data-science/)

The data science track is part of EuroPython 2020, so you won’t need to buy an extra ticket to attend. 

We will have a [two day track](https://ep2020.europython.eu/schedule) featuring more than 20 keynotes, full-length talks and posters:

* Keynotes in the Microsoft Room
* Talks in the Parrot Room
* Posters in the Poster Rooms

The full program is available on our [data science page](https://ep2020.europython.eu/events/data-science/).

If you’d like to attend the data science track at EuroPython 2020, [please register for EuroPython 2020 soon](https://ep2020.europython.eu/registration/buy-tickets/).

# Dates and Registration

[EuroPython 2020](https://ep2020.europython.eu/) will be held online from July 23-26 2020. If you want to learn more about the online setup, please check the Setup section on our website. 

[After buying a ticket](https://ep2020.europython.eu/registration/buy-tickets/), please register on our Discord server, following the instructions in the order confirmation email.

You will even be able to buy tickets on the days themselves, however, please be aware that this may cause delays in your Discord signup.

Please see [our website](https://ep2020.europython.eu/) for more information.


Enjoy,
–
[EuroPython 2020 Team](https://ep2020.europython.eu/europython/team/)
https://ep2020.europython.eu/
https://www.europython-society.org/
Bitmaps! Bitmaps everywhere!
Tags: redis, bitmaps, datastructures, database
Published: 2020-07-22 17:05:18

One of my favorite things about learning is the feeling of everything turning into a nail once you've acquired a new hammer.  When I bought an Instant Pot smart pressure-cooker I cooked EVERYTHING in there - with mostly good results.  When you're excited about a new concept or technology, you see the potential applications everywhere!  

This giddiness hit me hard when I learned about Bitmaps.  Bitmaps store information in a very compact and efficient way: with 1s and 0s. We can use these two states to represent the presence or absence of whatever we like.  

In our Redis University Youtube Explainer series we use Bitmaps to store and retrieve partially-explored maps for an old-school RPG game called Mages & Minotaurs.  I love how we are able to store seemingly large maps in a simple string of binary.  

{% youtube 5fmyc5lkwD4 %}

What's even more exciting is the potential for more information storage with Bitfields, Bitmap's big sibling.  Bitfields are able to store values larger than binary (think octal and hex) and this gives us multiple flag options per position.  The sky's the limit!
Joining multiple Strings into one comma-separated String
Tags: javascript, beginners
Published: 2020-07-22 17:02:49

One of the mobile apps I work on displays the user's address.

The API returns the address split across multiple fields in the following format:
```
let address = {
    addressLine1: 'xxx',
    addressLine2: 'yyy',
    city: 'zzz',
    state: 'AA',
    zipcode: 'ddddd'
}
```

The caveat here is that one or more fields could be null/blank depending on what data was entered by the user at time of creating the address. 

However, when displaying on the screen we want to ignore any blanks and show a consistent comma-separated string.


```
let array = [
    address.addressLine1,
    address.addressLine2,
    address.city,
    address.state,
    address.zipcode
];

return array.filter(function(val) {
    return val;
}).join(', ');
```

`.filter()` removes any falsy strings - both blanks, nulls.
`.join()` takes care of adding a `,` only when needed to join multiple strings.
My slider is not working as intended
Tags: react, gatsby
Published: 2020-07-22 17:01:22

Hey everyone. I have been trying to understand what's going on for hours, but could not solve this. 

I am using Gatsbyjs. I have an index page where I query testimonials. I pass the results into a component. But the react-slick puts all the testimonials in the 1st slide multiple times, and all other slides are empty. Assuming I am using the map function wrong. 
Here is the index template's relevant part: https://pastebin.com/NkqvxKsE
Here is the slider component: https://pastebin.com/3vxZtz27
Any feedback is appreciated.
NodeJS Tutorial – 01 – Creating your first server
Tags: node, javascript, tutorial, beginners
Published: 2020-07-22 17:00:02

Learning NodeJS is a great opportunity for every web developer: Tons of jobs, easy to learn and, as Javascript is a MUST on web developing for the FrontEnd, you already know the language!

With this tutorial, you will create your first NodeJS server in less than 10 minutes.

In this video you will learn:

- How to install NodeJS in your computer
- What NPM is
- How to create your NodeJS configuration file
- How to create your first server and the base file
- How to create routes to your server
- How to install Nodemon

{% youtube DkT\_VRqA38o %}


* * *

Related articles:

[What exactly is Node.js?](https://www.youtube.com/redirect?q=https%3A%2F%2Fwww.freecodecamp.org%2Fnews%2Fwhat-exactly-is-node-js-ae36e97449f5%2F&event=video_description&redir_token=QUFFLUhqbmoxNDBDRFJFSkhNTlRxMGtsUEc1a08xN3FRd3xBQ3Jtc0tsWk5kLUFMSWRJb1VvSjN6VVdnSjMyeEZydXNSUFlxYWJnckV6dDJEWWVnZFZTY2pXelZHWVNrcS1qTFVfdnJnSDc5ei05dEppRjdCUERKUi1Hd0hNWlppV3lYcGNmRnIycVZFajc3UEhLcFE2alZFVQ%3D%3D&v=DkT_VRqA38o)

[Pros and Cons of Node.js](https://www.youtube.com/redirect?q=https%3A%2F%2Fwww.altexsoft.com%2Fblog%2Fengineering%2Fthe-good-and-the-bad-of-node-js-web-app-development%2F&event=video_description&redir_token=QUFFLUhqbjlXRHZVWkxEMXBwblpadkQwWnJkY0Q0elI0Z3xBQ3Jtc0tubks5U3d5b3A1TFlvdjlMM2JodVVDZHZPMFUzLXZnSUlUT3JyLXNMaTMwY1FudDkyU3VTTGo5aklCQWdOS1YyQkRXVUZwbjRnNUxET1BSOFFiclRpRl92RldFOEFmeXBqVnlEUDMwb0R4QXVoRWpmRQ%3D%3D&v=DkT_VRqA38o)

* * *

[My Youtube tutorial videos](https://www.youtube.com/channel/UC9OLm6YFRzr4yjlw4xNWYvg?sub_confirmation=1)

[Final code on Github](https://github.com/david1707/node_crash_course)

[Reach to me on Twitter](https://twitter.com/DavidMM1707)
Getting Started with Apache Pulsar
Tags: apache, pulsar
Published: 2020-07-22 16:56:49

---
title: Getting Started with Apache Pulsar
published: true
description: Apache pulsar is a open-source pub-sub messaging system. This blog covers basic commands to get started.
tags: Apache, pulsar
//cover_image: https://direct_url_to_image.jpg
---
## Prerequisite

To run apache pulsar, you need to have the Docker installed on the system. You can download docker from https://docs.docker.com/docker-for-windows/install/ 

## Getting Started

**Note:** Apache pulsar has a cluster and within cluster, we have tenants. Within Tenants, we have namespaces.

1. Start the pulsar instance in Docker

```
docker run -it -p 6650:6650 -p 8080:8080 --mount source=pulsardata,target=/pulsar/data --mount source=pulsarconf,target=/pulsar/conf apachepulsar/pulsar:2.6.0 bin/pulsar standalone
```

2. Check the container id of the pulsar

```
docker ps -a
```

3. Execute into the container bash

```
docker exec -it <container-id> bash
```

4. Get the cluster list

```
bin/pulsar-admin clusters list
```

5. Get the tenant list

```
bin/pulsar-admin tenants list
```

6. Get the namespaces list

```
bin/pulsar-admin namespaces list <tenant-name>
```

7. Get the topics

```
bin/pulsar-admin topics list <tenant-name>/<namespace-name>
```

8. Create a topic

```
bin/pulsar-admin topics create-partitioned-topic persistent://public/default/test-topic -p 1
```

9. To produce a message to the topic

```
bin/pulsar-client produce persistent://public/default/test-topic --num-produce 1 --messages "Hello pulsar 1"
```

10. To Consume a message from the topic

```
bin/pulsar-client consume persistent://public/default/test-topic --num-messages 0 --subscription-name test-topic-sub --subscription-type Exclusive
```

***NOTE: All the above commands assume, you are working on default tenants and default namespaces.***
Welcome Thread - v83
Tags: welcome
Published: 2020-07-22 16:50:23

---
title: Welcome Thread - v83
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![stop motion hello](https://media.giphy.com/media/F0OJGFoTZdhVwQ4lGg/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Exceptional Portfolio(?)
Tags: discuss
Published: 2020-07-22 16:36:00

It was around 2017, when I was looking for my first job, I wanted to make a portfolio that shows my projects and skills. At the same time, I wanted the website to be fast and exceptional. After it was done, I really liked the portfolio. It's been years since I updated the content. Its not very mobile friendly either, but I still kinda like the portfolio. (Maybe I'm a bit biased 😀)

Here are some **weird features** I added at that time to attract people 😅
1. Front page has water wave if you move your cursor (let me know if you notice)
2. Navigation is on the bottom left (I have never seen a second website having that 😀)
3. For some reason, I thought removing the scrollbar is a good idea (in chrome you will not see scrollbar)
4. Skills section has drag-drop functionality (don't ask me why 😀)


**Try it on PC** (mobile UI wasn't a concern back then 😀)

[Portfolio](https://despider001.github.io/)

let me know your experience.
Developer Bingo!
Tags: discuss, bingo, humor
Published: 2020-07-22 16:30:12

---
title: Developer Bingo!
published: true
description: 
tags: #discuss #bingo #humor
//cover_image: https://direct_url_to_image.jpg
---

Tag yourself in the comments, I'm `currently debugging sound drivers` :joy:

![](https://pbs.twimg.com/media/EdiqyJwWAAEeT65?format=png&name=large)
How to visualize a PostgreSQL schema as SVG with SchemaSpy
Tags: postgres, documentation, visualization
Published: 2020-07-22 16:15:05

TLDR: Use the option `-imageformat svg` to generate an ER diagram in SVG format
with [SchemaSpy](https://github.com/schemaspy/schemaspy). 

[SchemaSpy](https://github.com/schemaspy/schemaspy) generates HTML documentation from your database schema, including
Entity Relationship diagrams. I find visualization helpful as a database model
grows.

Out of the box it produces diagrams in png format, like this one in the [Hasura
ecommerce example](https://hasura.io/blog/building-customizable-ecommerce-backend-with-hasura-graphql-apis/):

![database schema with tables user, store, order, cart, product, inventory, and order item. the post linked above describes it in more detail.](https://hasura.io/blog/content/images/2020/04/ecommerce_schema.png)

I prefer [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), because it scales, is smaller, and it is all text.

Using [SchemaSpy](https://github.com/schemaspy/schemaspy) to see what the relations are like is not complicated, *once you
have downloaded the dependencies and figured out the command line options*. And
there are quite a lot of command line parameters. I had to download the
[postgresql jdbc driver](https://jdbc.postgresql.org/download.html) by hand, and specify the path with the `-dp` option:

    <schemaspy-path>$ java -jar target/schemaspy-6.1.1-SNAPSHOT.jar \
      -t pgsql -host localhost -db postgres -o /tmp -u postgres -dp . -p postgres -imageformat svg

The -t <type> option is mandatory. Probably works for anything that has a [JDBC](20200707172959-jdbc.md)
Driver. I use a local database inside a docker container that is only open to my
machine, so I left the passwords and the port at the default settings the
docker-compose configuration came with.

See the comment by Jon Lauridsen below on how to do all of this with a docker one-liner.

If you forget an option, Schema Spy will tell you what was missing. I stuck the
above in a shell script inside my project, so I can easily generate it again. I
left the output as `/tmp`, so when I reboot (rarely), I am forced to create a
fresh diagram. Next step: integrate it into the build script, so I get
a fresh diagram whenever I add database migration files in the `migrations` directory.

SchemaSpy uses [graphviz](20200623081841-graphviz.md) to generate images, the .dot files it uses as input, and
the generated images can be found in `<outputpath>/summary/`

At first I had a one liner for this, and then while writing the post, I found
that SchemaSpy supports SVG natively. It is 'just' another output parameter:

`-imageformat svg`

For more details, see the [Get Started page in the SchemaSpy documentation](https://schemaspy.readthedocs.io/en/latest/started.html) .

I hope you found this helpful. It took me a bit of searching to find SchemaSpy, and the svg option. I'd be interested to know better alternatives, if there are any.
A Simple Android Drivers installer tool
Tags: android, fastboot, adb, drivers
Published: 2020-07-22 16:01:24

I always had issues while installing USB Drivers for Android, like getting USB Device Not recognized error and what not.

I ended up creating a tool which will auto detect the device specific drivers and install those drivers and also it will install the latest adb and fastboot binaries from Google

You will just have to connect your phone with USB debugging and run the tool and that's it 

![Tool Animation](https://github.com/fawazahmed0/Latest-adb-fastboot-installer-for-windows/raw/master/Screenshots/Tool-Animation1.gif)

[Heres](https://github.com/fawazahmed0/Latest-adb-fastboot-installer-for-windows "Heres") the Github Repo with all the instructions
🔥 HTTP Methods with Postman | Rest Assured Tutorial | Day 4  | 
Tags: tutorial, webdev, beginners
Published: 2020-07-22 15:44:49

Hey BugHunters,  In this video, we are going to learn HTTP Methods with Postman

This is Day 4 of the 30 days of API Testing challenge Series. Where will learn the Basics before jumping to API Automation.

[![ Rest Assured Tutorial](https://i.imgur.com/yXo6Mnf.png
)](https://youtu.be/gl2EZtvlNDU "Rest Assured Tutorial")

🚀 All 30 Days Task - https://scrolltest.com/30days/restassured
📌 Join 30 Days Challenge Updates - https://scrolltest.com/tta
🎓 Free Automation MasterClass - https://thetestingacademy.com
📚 REST API testing with Python - https://masterapitesting.com

## HTTP request methods

✅ GET
The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ldc9966ei6abfh0gee9i.png)

✅ HEAD
The HEAD method asks for a response identical to that of a GET request, but without the response body.


✅ POST
The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/61xh2xdsnf2wgg0qomat.png)

✅ PUT
The PUT method replaces all current representations of the target resource with the request payload.


✅ DELETE
The DELETE method deletes the specified resource.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nt9fpxadnihale3c53zg.png)

✅ PATCH
The PATCH method is used to apply partial modifications to a resource.
Specifications
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a9ku687gqutfji6opr73.png)

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
🔥 HTTP Explained in 7 minutes(API Testing Basics) | Rest Assured Tutorial | Day 3
Tags: testing, tutorial, beginners, webdev
Published: 2020-07-22 15:37:07

Hey BugHunters,  In this video, we are going to learn HTTP Explained for beginners

This is Day 3 of the 30 days of API Testing challenge Series. Where will learn the Basics before jumping to API Automation.

✅ What is HTTP?
HTTP stands for Hyper Text Transfer Protocol
WWW is about communication between web clients and servers
Communication between client computers and web servers is done by sending HTTP Requests and receiving HTTP Responses

[![ Rest Assured Tutorial](https://i.imgur.com/r9nh1YB.png
)](https://youtu.be/S20tBE_jQd0 "Rest Assured Tutorial")


✅ What’s in an HTTP request?

An HTTP request is the way internet communications platforms such as web browsers ask for the information they need to load a website.

Each HTTP request made across the Internet carries with it a series of encoded data that carries different types of information. A typical HTTP request contains:

HTTP version type
a URL
an HTTP method
HTTP request headers
Optional HTTP body.

✅ What is HTTP cookie?
An HTTP cookie (also called web cookie, Internet cookie, browser cookie, or simply cookie) is a small piece of data sent from a website and stored on the user's computer by the user's web browser while the user is browsing.

Read more - https://www.cloudflare.com/learning/ddos/glossary/hypertext-transfer-protocol-http/

🚀 All 30 Days Task - https://scrolltest.com/3ra
📌 Join 30 Days Challenge Updates - https://scrolltest.com/tta
🎓 Free Automation MasterClass - https://thetestingacademy.com
📚 REST API testing with Python - https://masterapitesting.com

🔔 Join Facebook Group :  https://scrolltest.com/fb

✅ Automation Tester Community - https://thetestingacademy.com
🐦Follow us on Twitter - https://twitter.com/itstechmode
📖 Like us on Facebook - https://www.facebook.com/scrolltest
🎤 Listen to our Podcast - https://anchor.fm/thetestingacademy

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Free Workshop on Azure Static Web Apps
Tags: react, angular, vue, staticwebapps
Published: 2020-07-22 15:26:42

---
title: Free Workshop on Azure Static Web Apps
published: true
description: Free Workshop on Azure Static Web Apps
tags: react, angular, vue, staticwebapps
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/yfdibc94e50evsmz1k0d.png
---

## Free Static Web Apps Workshop

On July 29th, I'll be hosting an hour and a half workshop teaching you how to deploy and customize a shopping list application to global scale with Azure Static Web Apps Preview.

[Check out the event here.](https://aka.ms/createfrontend)

![Static Web Apps](https://media.giphy.com/media/UvWlSbcZoqITfu3OaT/giphy.gif)

You'll learn how to:

- deploy a web app (choose from React, Vue, Svelte, or Angular)
- Configure your CI/CD to auto deploy
- Add authentication
- Establish authorization roles
- Create custom routing rules
- Setup fallback routing for client side routing rules
- Deploy an API using serverless technology with Azure Functions
- Set up your own custom domain with SSL

There's no catch. You don't even have to sign up. Just mark your calendar for the upcoming Create: Frontend event and show up.