teleren/devto huggingface dataset:
React app renders blank screen on Safari Browser
Tags: react, javascript, safari, webdev
Published: 2020-10-13 17:03:52


I built an app in React that works in every browser I tried, But not on **Safari** (Catalina OS & Version 13.1.2 ). I get no error, no console message, nothing that would give me some idea. It only renders tag in Safari and the screen is blank.

I'm attaching 2 screenshots so that you can see nothing is coming in **Network tab** and **Console**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/91c422lqn7q733jc61g6.png)

&


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

Some people suggest me to clear the **cache** or **turn off the cache** and then reload the page but that doesn’t work for me.

I tried to run my react app locally in safari and then I was getting these error messages in the console :-

**Failed to load resource: A server with the specified hostname could not be found.**

**[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.**

Please do let me know if anyone knows the solution or anyone can give me some suggestion for resolving this problem, let me know in the comments.

That's all folks. Thanks! 😊
GOTO 2020 • Kafka as a Platform: The Ecosystem from the Ground Up
Tags: techtalks, apachekafka
Published: 2020-10-13 17:01:09

{% youtube qjTZ4UeJdoI %}

> Kafka has become a key data infrastructure technology, and we all have at least a vague sense that it is a messaging system, but what else is it? How can an overgrown message bus be getting this much buzz? Well, because Kafka is merely the center of a rich streaming data platform that invites detailed exploration.

> In this talk, we’ll look at the entire streaming platform provided by Apache Kafka and the Confluent community components. Starting with a lonely key-value pair, we’ll build up topics, partitioning, replication, and low-level Producer and Consumer APIs. We’ll group consumers into elastically scalable, fault-tolerant application clusters, then layer on more sophisticated stream processing APIs like Kafka Streams and ksqlDB. We’ll help teams collaborate around data formats with schema management. We’ll integrate with legacy systems without writing custom code. By the time we’re done, the open-source project we thought was Big Data’s answer to message queues will have become an enterprise-grade streaming platform, all in 45 minutes.
How to add Syntax highlight to code in your blog posts
Tags: javascript, codenewbie, blog
Published: 2020-10-13 16:50:40

---
title: How to add Syntax highlight to code in your blog posts
published: true
description: 
tags: Javascript, codenewbie, blog
//cover_image: https://direct_url_to_image.jpg
---

```javascript
console.log("Hello World🙂")
```

If you've ever visited websites that highlight their code like it's in a code editor, you must be wondering. How are they doing it?

[GitHub](github.com/enyichiaagu), [CSS tricks](css-tricks.com), blogs dedicated to programming and even https://dev.to can highlight code.

You must be thinking they wrap everything up in `<span>` tags and give them color classes or something like that.

Wrong ❌

Programmers are lazy. Nobody has that time. 
There's a simpler approach to doing these things.
I'll be introducing you to a library called [prism](prismjs.com). It is used for this specific purpose.

### How does it work
Prism is a syntax highlighting library for web pages. There are others, but I think this one is simple, easy to grasp and easy to get started.

Oh, and css-tricks, [reactjs.org](reactjs.org) and many other websites use prism. So it's definitely not a bad idea to use it.
You can read the [docs](prismjs.com) to see how to do it. But you don't need to. I'll just show you how we do it. Learn from experience, not from docs 😆😆😆

It's just a CSS and a js file. Like bootstrap.

 First of all, download the files from their website https://prismjs.com. 

Link the CSS in the head
```html
<link rel="stylesheet" href="themes/prism.css">
```
and Javascript lower in the body 
```html
<script src="themes/prism.js">
```

Congratulations. You can now type in your code and it would be highlighted.
### How to Code
So we're ready to write a little JavaScript.
```html
<pre class="language-javascript">
  <code>
    function Hello() {
      console.log("Hello World🙂")
    }
  </code>
</pre>
```
and it appears like this.
```javascript
function Hello() {
  console.log("Hello World🙂")
}
```
See? That wasn't so hard. The `<pre>` tag is for making whatever you type not to align to the left or right.
For example, without the `<pre>` tag, this code would appear this way
```javascript
function hello() {
console.log("Hello world🙂")
}
```

That doesn't look so pretty. So you can say the `<pre>` tag prevents the default. And now we have our `hello()` function looking like it was written in a text editor.

Also, don't forget to give it a class of the language you want, in this format.

```html
<pre class="language-css">
```

```html
<pre class="language-java">
```
and so on...
You can use any language of your choice as far as you've downloaded the js file.

Prism also has color themes. In case you don't want your code to look off, or you want to blend it with the background. It's a beautiful library I must say.
Maybe you should check out those [docs](prismjs.com). *gasps
Happy coding.


Follow me on twitter [@EnyichiA](twitter.com/enyichiA) as I tweet about coding and my life in Nigeria.

You can also follow me here on Dev.to if you liked this article.

Good day.
UI Dev Newsletter #26
Tags: html, css, javascript, webdev
Published: 2020-10-13 15:44:37

- [The Widening Responsibility for Front-End Developers](https://bit.ly/33MoXHi)
Chris Coyier covers all aspects of the front-end developer role in great detail.

- [:focus-visible Is Here](https://bit.ly/33O8HFN)
Matthias Ott explains how to use a new CSS feature, :focus-visible, including JavaScript polyfill.

- [Full-Bleed Layout Using CSS Grid](https://bit.ly/3nEofDV)
Josh Comeau shows an elegant solution to make a tricky modern layout using CSS grid.

- [How to Make an Unobtrusive Scroll-to-Top Button](https://bit.ly/3jQ0LcN)
Marcel Rojas shows three different JavaScript methods on how to reveal a “scroll-to-top” button.

- [How to Detect When a Sticky Element Gets Pinned](https://bit.ly/3iQzGVm)
David Walsh shows how to determine when an element becomes sticky.

- [Webpack 5 release](https://bit.ly/3nI9W1o)
Webpack releases a new version which contains architectural improvements and new features.

- [Beautiful CSS 3D Transform Examples](https://bit.ly/3dm0J9Z)
Polypane showcases CSS 3D transforms which create depth and visually interesting elements on your page using perspective.

- [How One Guy Ruined #Hacktoberfest2020 #Drama](https://bit.ly/2GZ0VQE)
Joel Thoms writes about a flood of low quality PR spam.

Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Happy Ada Lovelace Day! Tell us about the women who have inspired your coding journey ❤️
Tags: discuss, wecoded
Published: 2020-10-13 16:33:56

---
title: Happy Ada Lovelace Day! Tell us about the women who have inspired your coding journey ❤️ 
published: true
description: To celebrate Ada Lovelace Day and the legacy of Lovelace, tell us about the women in your life (famous figures, mentors, or family members) that have inspired you to code! 
tags: discuss, shecoded
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9tuz44okh5k7lhl6n7su.png
---

A very happy [Ada Lovelace Day](https://findingada.com/) to everyone! 

Ada Lovelace Day happens on the second Tuesday in October each year and was founded in 2009 by [Suw Charman-Anderson](https://twitter.com/suw). You can learn more about how this day is commemorated internationally via the [Finding Ada Network](https://findingada.com/). 

As you might know, Ada Lovelace was a legendary English computer scientist and STEM icon who is frequently credited as being an early pioneer of computer programming. 

Lovelace was an associate of Charles Babbage (polymath and engineer) and created a program for his early computer prototype, the Analytical Engine. Her talents, contributions, and visions for tech nearly a century before the first programmable computing machine was invented (and during an era of particular social and political restriction of women) have cemented Lovelace as a figure of inspiration. 

### In celebration of Ada Lovelace Day, we'd like to know...

> ### _**Which women have inspired your programming journey? Whether these women are famous figures or family members, we'd love to hear from you, regardless of your gender!**_

#### ... Tell us in the comments below!

Finally, on this day and always, let's not forget that Ada Lovelace represents a fundamental truth that is too often overlooked or suppressed: _aptitude and genius have absolutely nothing to do with gender._ The tech industry in particular needs to do more for women and other underrepresented groups who have helped create the field, especially as just 26% of computing-related jobs are held by women, 3% by Black women, 7% by Asian women, and 2% by Hispanic women. ([source](https://www.ncwit.org/sites/default/files/resources/ncwit_btn_07232020.pdf))
Sqlite 3 - Python Database
Tags: sql, python, programming, database
Published: 2020-10-13 16:33:21

If you were using files to store the program data, here is a better way to store the data,
#**Using built-in Sqlite 3 database in Python.**

So lets start with importing the the Sqlite 3 module in python,

```
import sqlite3
```
Next, lets connect the database with **sqlite**.

```
conn = sqlite3.connect('Client_data.db')
conn.execute('''CREATE TABLE Client_db
                (NAME            BLOB NOT NULL,
                PASSWORD         BLOB NOT NULL,
                EMAIL            VARCHAR(320) NOT NULL);''')
conn.commit()
conn.close()
```
This creates a sqlite database 'Client_data.db', and creates a table named 'Client_db' with columns Name, password and email.

###**Adding values to the database** 

Now that we have created a sqlite database and a table consisting of columns, we can add values to the table.

We can do that like this,

```
cursor = conn.cursor()
params = (username,password,receiver_mail)
cursor.execute("INSERT INTO Client_db VALUES (?,?,?)",params)
conn.commit()
print('User Creation Successful')
conn.close()
    
```
The '?' operator is used to pass the values of a variable, sort of like the 'f' string in Python.

###**Reading from the Sqlite 3 database**

To read from the sqlite database there are two methods,

`fetchone()` : fetches the first row in the sqlite database that matches the passed in filters.

`fetchall()` : fetches all the rows in the sqlite database that match with the filter.

Take a look at the code,

```
conn = sqlite3.connect('Client_data.db')
cur = conn.cursor()
cur.execute("SELECT * FROM Client_db WHERE NAME =:NAME",{'NAME':username})
if cur.fetchone()[1] == password:
     print('LogIn Successful')    
```
This queries the row where the name matches the name passed in, and it fetches the password relating to that username using the `fetchone()` method from the sqlite database, and matches the password with the one passed into the program and if the passwords match it prints out 'LogIn Successful'.

You can find more on the Sqlite 3 Database in python [here](https://www.sqlitetutorial.net/sqlite-python/).



## Peace !
Javascript Array Callback Methods
Tags: javascript
Published: 2020-10-13 16:31:28

## Array Callback Methods

These are some of the trickiest methods to get up and running with in Javascript but also probably some of the most useful ones. Also I've included a useful list of javascript videos after the images so make sure not to miss that!

## Method Images

![Filter](https://i.imgur.com/gc9Cbtf.png)
---
![Map](https://i.imgur.com/sxUx9MO.png)
---
![Some](https://i.imgur.com/gPXnkHh.png)
---
![Every](https://i.imgur.com/4j4y4NM.png)
---
![Find and FindIndex](https://i.imgur.com/LrLYzKG.png)
---
![Reduce](https://i.imgur.com/LV8FkuM.png)
---

## Bonus JS Videos

- **Array Methods =>** https://www.youtube.com/watch?v=CIWHuP8n_KA&t=4s
- **Array Masterclass =>** https://www.youtube.com/watch?v=0rd-WuGtLgI
- **Destructuring Masterclass =>** https://www.youtube.com/watch?v=T03vCdNz6h4&t=2s
- **Everything on Functions =>** https://www.youtube.com/watch?v=fhLFpVeGdoU
- **Iterating Masterclass =>** https://www.youtube.com/watch?v=JFf6ogtBUdo
- **Loops Masterclass =>** https://www.youtube.com/watch?v=Yf6whlVj5qA
- **Objects Masterclass =>** https://www.youtube.com/watch?v=6Ytou94vP9g
- **Prototype Masterclass =>** https://www.youtube.com/watch?v=O_lyavc0lJc
- **Web Components Masterclass =>** https://www.youtube.com/watch?v=qV7jh7ctALg
- **Web Component Styling Masterclass =>** https://www.youtube.com/watch?v=9flT7pFyaXM
- **OOP Masterclass =>** https://www.youtube.com/watch?v=IxbDwmNwnFQ
- **Classes Masterclass =>** https://www.youtube.com/watch?v=O93r_ZB1NfQ
Change array size using length property
Published: 2020-10-13 16:29:40

```js
const arr = [1, 2, 3, 4, 5];
arr.length = 2;
console.log(arr); // [1, 2]
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
On .NET Episode: YARP The .NET Reverse proxy
Tags: aspnet, microservices, dotnet, webdev
Published: 2020-10-13 16:28:44

Reverse proxies can help simplify how clients access your backend services. YARP (Yet Another Reverse Proxy) is designed as a library that provides the core proxy functionality which you can customize to fit your application's specific needs.

In this episode, Jeremy chats with Chris Ross and Sam Spencer about why they decided to start working on YARP. They show us some demos of various YARP features like live reloading, authorization policies and more.


{% youtube 1IqQkNcsqWE %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

<ul>
<li><a href="https://microsoft.github.io/reverse-proxy/articles/getting_started.html" target="_blank">Getting started with Yarp</a></li>
<li><a href="https://github.com/microsoft/reverse-proxy" target="_blank">Yarp on Github</a></li>
<li><a href="https://docs.microsoft.com/aspnet/core/fundamentals/middleware/?view=aspnetcore-3.1&amp;WT.mc_id=devto-c9-cephilli" target="_blank">ASP.NETCore Middleware</a></li>
</ul>
is this out of stock now!?, okay"Notify me feature" in Ecommerce platform 
Tags: react, node, mongodb, express
Published: 2020-10-13 16:26:09

Hello, everyone. recently i started a project using mern stack and it is a ecommerce website basically.

well i want to add a feature called __Notify me__ if something is __out of stock__ in the inventory.🤖

__the motive of this feature is that if you want to buy a product and that product is out of stock right now so you should be able to get notified when that product will come back in the inventory.__

here i am attaching a picture. but right it is button only not working at all.
![Feature photo](https://dev-to-uploads.s3.amazonaws.com/i/d0kfrrgt2kqgo0man6pb.PNG)

now, the thing is that some platform are having this feature or some not. so i want to add this to mine.🤷‍♀️

i am using __reactjs, nodejs, express and mongodb as database__ as development stack. so please let me know what do you think about this feature?

i would love to hear the ideas for implementation.🙌


Thank you, and waiting for reply from all of you.😎
Best sites to create your website colour palette 🎨
Tags: beginners, css, colour
Published: 2020-10-13 16:21:25

As a developer, I feel the pain every time I have to build a web page and I know that I don't have a designer to help me with the styles, especially with the colour, because let's be honest as an engineer I never took a class of design at the university, and I'm a really dull all black, white and blue woman. So these pages have changed the game for me.

#### [1. Coolors] (https://coolors.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tgq0q5an4l3x6i7j6pf4.PNG)

This is the most known page and is for a good reason, it tops the list with a slick, intuitive interface, a growing library of attractive colours, and mobile apps for iOS and Android. Easy to work with and fun.

#### [2. ColorSpace] (https://mycolor.space/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w8dymjmec0rmgge0f0ah.PNG)
This page is ideal if you already have one colour that you know you have to use (like the colour of the company's logo), and I give you an example, once I had to work with a company whos logo colour was orange (I know so hard!!!), but look how beautiful combinations you can achieve even for this colour, and these are only the first 4 palettes there are many more you can inspire from.

#### [3. Color Hunt](https://colorhunt.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ip27qp2j46tib8l9gni1.PNG)

This last one is in case that you have 0 imagination for colours because show you a predetermine catalogue from a lot of different palettes so you can choose.

I hope this will be helpful for someone and thank you so much for reading!!
What is Replatforming?
Tags: security, architecture, technology
Published: 2020-10-13 16:15:38

Rehosting, Rearchitecting, and Replatforming... How to choose a cloud migration strategy based on ROI.
[Read more...](https://auth0.com/blog/what-is-replatforming/?utm_source=newsletter&utm_medium=sc&utm_campaign=what_is_replatforming)
How to manually import files into Middleman site builds
Tags: middleman, ruby, static, ssg
Published: 2020-10-13 16:14:33

---
title: How to manually import files into Middleman site builds
published: true
description: Underscore files (like _redirects) don't get included automatically, so here's how to make it happen.
tags: middleman,ruby,static,ssg
---

[Middleman](https://middlemanapp.com/) is a neat Ruby-based static site generator that provides a good alternative to Jekyll if you want something simpler and not focused on blogging. As such, we're using it for our new company site.

We ran into an annoying bug with it, however.

We're using [Netlify](https://www.netlify.com/) to host the new, Middleman-built site and Netlify lets you use a [`_redirects` file](https://docs.netlify.com/routing/redirects/) to specify all of the redirected URLs you want on your site. Great, except that if you place a `_redirects` file in your Middleman site, it doesn't get copied across into the final build of the site!

It turns out the reason for this is that Middleman treats files beginning with an underscore as special (since they could be [partials](https://middlemanapp.com/basics/partials/)) and you need to manually specify the inclusion of such static files in the build.

Add this to `config.rb`:

```
import_file File.expand_path("_redirects", config[:source]), "/_redirects"
```

`import_file` manually brings a file from one location to another in your final build, so this brings the `_redirects` file in the site's 'source' directory to live at `/_redirects` in the final site and Netlify is happy!
The complete guide to Instant Messaging and in-application chat.
Tags: xmpp, chat
Published: 2020-10-13 16:13:59

---
title: The complete guide to Instant Messaging and in-application chat.
published: True
description: We look at the key considerations of adding chat to your applications. 
tags: xmpp,chat,
//cover_image: https://i.imgur.com/WurFadW.jpg
---

Now more than ever, Instant Messaging is vital to help businesses, teams, and each other, stay connected.

Our MongooseIM team has been building enterprise chat applications for over a decade. To help you and your users stay connected, they've put together everything you need to know about Instant Messaging before building a chat application.

The guide compares the benefits and drawbacks of building your own chat application versus buying a product-as-a-service and looks at what the most desired features of a chat application are.

Read the guide at https://www2.erlang-solutions.com/completeguidetoinstantmessaging3

#XMPP #Chat #InstantMessaging #DigitalSolutions
Bypass Airtable API limit and make unlimited requests
Published: 2020-10-13 15:37:58

Airtable API is limited to 5 API requests per second for each base table. So, we solved this problem for you with NoCodeAPI. You don't have to set up a server for making proxy & caching logic.

### What is NoCodeAPI

NoCodeAPI is a tool to connect with third party application API and give simple secure endpoint to use with your tools & projects.

You can connect with Google Sheet API, Airtable, Instagram, GitHub, YouTube, WordPress, Webflow, Spotify, Twitter, & more. You can view them all in [The Marketplace](https://nocodeapi.com/marketplace)

### Get Started

First of all, you have to signup on [NoCodeAPI](https://nocodeapi.com/login) if you are a new user. If you are an existing user of NoCodeAPI then setup Airtable API with NoCodeAPI.

To setup Airtable API we need 2 values:

- **API key**- You can get your Airtable API key from here https://airtable.com/account
- **Base ID**- Go here https://airtable.com/api and select your form then you can find the base ID in URL & It begins with the app. Ex: https://airtable.com/appofMoPxdu7iQ7hf/api/docs-> **appofMoPxdu7iQ7hf** is the base ID.

Now login to NoCodeAPI, go-to the marketplace, & activate the Airtable application. Click on the button **Make Airtable API** & put the required values into the form.

![Airtable Form](https://dev-to-uploads.s3.amazonaws.com/i/p00cmp1tya72hkfegwej.png)

When you fill all the values click on the button **Create**. That's all, your Airtable endpoint ready to use.

![Airtable API Card](https://dev-to-uploads.s3.amazonaws.com/i/ys5lry920ksklgdsmjg6.png)

In-built **playground** to test these endpoints & **minimal documentation**.

### Benefits

- Your **API Key** is secured
- Bypass limit - We are using caching technology for this.
- Time-Saving
- API response is Fast.
- You can track all your logs
- No Server Headache
- Mini Documentation

### Customize Caching

By default, every **GET** request has 60 seconds of caching means the first API call will come from a third party application API and other API calls under the next 60 seconds from the caching server.

You can customize the caching time if you are a paid user. Just pass cacheTime(in seconds) as query param with endpoint like this.

```javascript
https://v1.nocodeapi.com/gitdansih/airtable/ePcgqeUWUNWgmPmN?cacheTime=900
```

Now your endpoint will be cached for 900 seconds(15 minutes).

That's all guys. You can follow us on twitter for updates [Follow on Twitter](https://twitter.com/nocodeapi)

Thanks.

Original posted here https://nocodeapi.com/bypass-airtable-api-limit