teleren/devto huggingface dataset:
Bootstrap 5 in 15 minutes
Tags: bootstrap, bootstrap5, webdev, tutorial
Published: 2020-07-04 14:19:51

{% youtube 0BruUF9dSW8 %}

Gists
Settings : https://gist.github.com/shahbaz17/59e7eec1dbc3672449ff51662f432ed3 
index.html : https://gist.github.com/shahbaz17/bc105ee262a45cd373c862552551f490
main.scss : https://gist.github.com/shahbaz17/906310bd2087bdb20e0abdd205cff1da
_style.scss : https://gist.github.com/shahbaz17/5fe6c96bffcc7d1c5df4009083834139
JS1024 started! Javascript & GLSL competition
Tags: competition, js1024, javascript, webgl
Published: 2020-07-04 13:30:33

### **JS1024** is a online contest where people submit short programs under 1024 bytes, made in JS, HTML or GLSL.

Some of you might be familiar with [JS1K](https://js1k.com) or [js13kGames](js13kgames.com). Both of them are code-golfing competitions. JS1k ended last year, so I thought it will be nice to recreate it because some of the demos from there were amazing!

JS1024 started on **1st** of July and ends on **15th** of July.

**These are the rules:**
    • Your code must have a maximum of 1 KiB of code
    • No malicious/harmful code allowed
    • It's not allowed to extract personal data from users
    • No external files allowed (external scripts and images will be automatically blocked)
    • Do not share your private participant key (you will use it to rate other projects)
    • You should also upload a readable (and commented) version of your code to help people understand it

Sounds easy, right?

**There are also 4 categories:**
    • Classic canvas (JS, context 2d)
    • p5.js project (JS)
    • Shader demo (GLSL)
    • No shim (HTML, everything is made from scratch)

The person with the highest rating in each category gets the fabulous #1 place and some money.

[Press here for more details](js1024.fun). Check it out, the entry is free.

Good luck!
Day 4: Learning more about Tailwind CSS
Tags: tailwindcss, learning, todayilearned
Published: 2020-07-04 13:22:21

I’m still on the 7th screencast: “[Customising your Design System]([Customizing Your Design System - Tailwind CSS](https://tailwindcss.com/course/customizing-your-design-system))”.

In the config file, recap… where all the defaults are located. So where I left off is where the section for `spacing` values are, and the last entry there is:

```
’64’ : ’16rem’,
```

In this example, we want a bigger spacing. You can add `72` to the `tailwind.config.js` 
- To get the value, all you need to do is  “72/4” and that is “18rem”, which is slightly bigger. I didn’t know about this at all, so it was certainly a **TIL** moment. 

*(Note: I'm not a designer, so I'm behind on various foundational things like this, and still so much to learn as a person the on the outer fringes.)*

After the 8th screencast, the webinars are venturing more using Vue. It's great if you used it before, but I was getting by until the assumption that you know the setup of Vue and how everything works. So I had to branch off and pick that up also. 

But this is rather frustrating though as it's from the official Tailwind CSS site... might be slightly less awesome at this moment in time.

Anyway, I wanted to learn more about Vue (given Coding Grace did facilitate a couple of VueJS workshops in the past[1][2] given by the amazing [Irene Yeriskin](https://twitter.com/rene_iy))

[1] https://www.codinggrace.com/events/introduction-vuejs/103/
[2] https://www.codinggrace.com/events/partnership-vue-vixens-sligo-workshop/107/

So I'll be back (or I'll start writing a newbie learning VueJS post 🤣🤔).

![](https://media.giphy.com/media/brHaCdJqCXijm/giphy.gif)
Laravel 7 Vue JS Live Search Example
Published: 2020-07-04 13:18:52

<!-- wp:paragraph -->
<p>Laravel Vue js live search example. In this tutorial, you will learn how to implement live search in laravel vue js apps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You may work with laravel and vue js apps. And want to implement live search functionality in your laravel vue js apps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This tutorial will guide you step by step to implement live search in laravel vue js app.</p>
<!-- /wp:paragraph -->

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Run Make auth Command
Step 4: Create Model And Migration
Step 5: NPM Configuration
Step 6: Add Routes
Step 7: Create Controller By Command
Step 8: Create Vue Component For Live Search
Step 9: Create Blade Views And Initialize Live Search Vue Js Components
Step 10: Run Development Server

Visit the following blog url for more detail => https://www.tutsmake.com/laravel-vue-js-live-search-example-tutorial/
Laravel 7 Vue js Crud Example
Published: 2020-07-04 13:12:33

In this tutorial, you will learn how to create laravel vue js crud application.

This tutorial will teach to step by step on how to creating vue js spa crud application in laravel.

<!-- wp:paragraph -->
<p>Follow the following steps and implement spa crud with vue js in laravel. And as well as learn how to implement backend APIs for vue spa crud app:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Download Laravel Apps</li><li>Configure Database Details</li><li>Install NPM Dependencies</li><li>Create Migration, Model and Controller</li><li>Define Routes</li><li>Create Vue App</li><li>Create Vue Components</li><li>Define Vue Routes</li><li>Import All to app.js</li><li>Run Development Server</li></ul>
<!-- /wp:list -->

For more detail, checkout this blog => https://www.tutsmake.com/larave-vue-js-spa-crud-example-tutorial/
Polyphony - fine-grained concurrency for Ruby
Tags: ruby
Published: 2020-07-04 13:09:08

---
title: Polyphony - fine-grained concurrency for Ruby
published: true
description: 
tags: #ruby
//cover_image: https://direct_url_to_image.jpg
---

Polyphony is a new Ruby library for building concurrent applications in Ruby. Polyphony provides a comprehensive, structured concurrency model based on Ruby fibers and using libev as a high-performance event reactor.

Polyphony is designed to maximize developer happiness. It provides a natural and fluent API for writing concurrent Ruby apps while using the stock Ruby APIs such as IO, Process, Socket, OpenSSL and Net::HTTP in a concurrent multi-fiber environment. In addition, Polyphony offers a solid exception-handling experience that builds on and enhances Ruby’s exception-handling mechanisms.

Polyphony includes a full-blown HTTP server implementation with integrated support for HTTP 1 & 2, WebSockets, TLS/SSL termination and more. Polyphony also provides fiber-aware adapters for connecting to PostgreSQL and Redis servers. More adapters are being actively developed.

More information on the [Polyphony](https://digital-fabric.github.io/polyphony) home page.
Laravel 7 Vue Axios Get Request Tutorial
Published: 2020-07-04 13:06:40

In this laravel vue js Axios get request example, you will learn how to fetch records from database and pass data blade to vue js components using axios get http request in laravel.

This tutorial will guide you step by step on how to retrive data from database using axios get HTTP requests and as well as how to render data on vue js components in laravel. 

#Laravel Vue JS Axios Get Request Example Tutorial

<!-- wp:paragraph -->
<p>Just follow the following steps and make Axios HTTP get request in laravel with vue js and pass data blade views or controller to vue component laravel:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Step 1: Download Laravel Fresh Setup</li><li>Step 2: Setup Database Credentials</li><li>Step 3:&nbsp;Generate Fake Data</li><li>Step 4:&nbsp;Add Routes</li><li>Step 5:&nbsp;Make Controller By Command</li><li>Step 6:&nbsp;Install Vue Js dependency</li><li>Step 7:&nbsp;Create blade file and layout</li><li>Step 8: Run Development Server</li></ul>
<!-- /wp:list -->

For more detail, checkout this => https://www.tutsmake.com/laravel-vue-js-axios-get-request-example/
Send Form with Vue js in Laravel 7
Published: 2020-07-04 13:03:17


#Laravel Vue JS Axios Post Request Example Tutorial

Just follow the following steps and make Axios HTTP post request in laravel with vue js and submit form data to the controller:

Step 1: Download Laravel Fresh Setup
Step 2: Setup Database Credentials
Step 3: Make Migration & Model
Step 4: Add Routes
Step 5: Make Controller By Command
Step 6: Install Vue Js dependency
Step 7: Create blade file and layout
Step 8: Run Development Server

Check out the following post for more info:-

https://www.tutsmake.com/laravel-vue-post-axios-request-example/
REACT TEST(jest) MENTOR
Tags: react, testing, javascript
Published: 2020-07-04 12:29:32

I am looking for a REACT TEST Mentor, I am a passionate self-taught programmer.i've experienced in front end in 5 years & react for 2 years.
it gets discouraging sometimes, I need someone who is willing for me to reach out to for advice or help. I will be glad if you help me out ...
15 React Native App IDEAS: BEGINNER TO EXPERT [WITH FREE TUTORIAL]
Tags: reactnative, beginners, codenewbie, tutorial
Published: 2020-07-04 12:06:20

If you know react then react native is quite easy to learn. So If you are just starting then I’ll suggest you first learn react js and then come into react native. React native looks tempting to learn at first, but if you know react js then it will be very easy for you. Check those projects ideas

# Starter Project ideas

## Login Screen
{% youtube 1xu1eeRCPEk %}

## Todo App
{% youtube xb8uTN3qiUI %}

## Image Gallery
{% youtube QwhrAjp4X_Y %}

## Movie Search
{% youtube 6fqwWwHwC6U %}

# Intermediate Project ideas

## Beer Finder
{% youtube L1yMn4QSf8U %}

## Chat App
{% youtube eR1vP-W1emI %}

## Wallpaper App
{% youtube 4VKynwqAMp0 %}

## Airbnb UI clone
{% youtube 95646Jd5X2w %}

# Advanced Project ideas

## Plant App
{% youtube gyiwFcrVRCM %}

## Podcast 
{% youtube Q3R9MPAJFRQ %}

## Augmented Reality
{% youtube MXnaUkmLXok %}

## Vpn App
{% youtube jQARai_-UIY %}

# Expert project ideas

## Instagram bot
{% youtube AVQQF_J3Az0 %}

## E commerce
{% youtube _MBAqgRUAYo %}

## Taxi App
{% youtube CB_nXOOz_AY %}

## Meet up App
{% youtube qmNPpoVkY2Y %}

I know it’s a huge list but thanks for reading this whole thing! Share this with your friends to help them!

Here Instagram version of the post –

{% instagram CCN-1e_gp2W %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/project-ideas-for-react-native-beginners-to-expert/).

I’ve started a programming community on discord. Click to join [Discord Channel](https://discord.gg/uDj2JtH)

I've two free PDF for you
- [Learn JavaScript in 30 Days](https://blog.nerdjfpb.com/javascript-in-30-days-free-pdf/)
- [Node JS In 30 Days](https://blog.nerdjfpb.com/node-js-in-30-days-free-pdf/)

You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) or [instagram](https://www.instagram.com/nerd_jfpb/)
Is Zoom doomed?
Tags: discuss, watercooler, security, news
Published: 2020-07-04 12:03:52

---
title: Is Zoom doomed?
published: true
description: 
tags: discuss, watercooler, security, news
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/w9iwsmdb7jnv4nd3xyov.png
---

Ever since the pandemic hit us, Zoom has been the go-to meetings app for many of us.

But yesterday, JioMeet was launched as an alternative for Zoom in India, and it instantly started trending because its UI is exactly the same as that of Zoom. Honestly, this was the first reaction for many of us.

![disbelief](https://media.giphy.com/media/l3q2K5jinAlChoCLS/giphy.gif)

Followed by this:

![](https://media.giphy.com/media/3o72FfM5HJydzafgUE/giphy.gif)

### "Let the drama begin!"

But on a serious note, this was quite a weird move by Reliance Jio, and I'm still trying to understand what their angle is. Some people think they did it for the sake of providing an easy transition for many Indians, especially those who might not be very tech-literate. But I can't help but think there's more to the story.

I admit many people are happy to have an Indian app for video-conferencing, especially amidst the huge #MadeInIndia campaign being pushed by the government of India. Plus there have been so many privacy and security concerns around Zoom lately. So yeah, this might be a net positive. Many other countries are also trying to switch to indigenous solutions, I hear.

Zoom currently has an insane valuation, but do you think this might be the beginning of the end for Zoom? I'm curious to know what you guys might think.
Let’s discuss this!

Or you can respond on Twitter!

{% twitter 1279354837809762304 %}
Daily Developer Jokes - Saturday, Jul 4, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-07-04 12:00:04

---
title: "Daily Developer Jokes - Saturday, Jul 4, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Jul%204%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12590f4ba3c.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you call a computer that sings?

___A:___ A-dell.
 -->
I'm Giving Away Coding-Related Books
Tags: books, giveaway, beginners
Published: 2020-07-04 11:35:13

---
title: I'm Giving Away Coding-Related Books
published: true
description: I'm giving a few coding related books. Most of them are in German, but two are in English. You just have to pay for the shipping. I hope those books can help anyone learn stuff, even if they are a little dated.
tags: books, giveaway, beginner
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uqvdkxam58iu5cmrk6wy.jpg
---

Hi everyone,

I'm giving a few coding related books. Most of them are in German (sorry for that), but two are in English. You just have to pay for the shipping. I hope those books can help anyone learn stuff, even if they are a little dated.

Just check out my twitter thread. It contains all the books.

{% tweet 1279368992969326592 %}
{% tweet 1279372429899575297 %}
{% tweet 1279372583805296640 %}
Top 10 Blogging Tools For 2020 
Published: 2020-07-04 11:33:52

Blogging is a skill that you need to polish just like every other skill if you want to become one of the best bloggers in 2020. To achieve that position first you need to be passionate about blogging, develop strong work ethic, learn SEO and most importantly you should have the knowledge of the industry that you are working in. 

In this article, I have put together top 10 blogging tools to which you can refer to enhance your blogging experience and keep your readers engaged in your content. This list of blogging tools is actually a list of resources that all types of bloggers can take advantage of no matter if they are professional, part-time or personal. 

But before you immerse yourself in acquiring knowledge of blogging tools I want to take a moment to inform you about SFWP Experts. It is the <a href="https://www.sfwpexperts.com/website-design-los-angeles-california/">prominent web design Los Angeles company</a> that offers lots of services to clients across the world, some of those are blog site design and development, search engine optimization, and online marketing. In addition to this, we also offer website copywriting with our web design services so that your brand could have maximum impact on your target users and encourage them to do business with you. 

<b>Read More:</b> <a href="https://sites.google.com/view/top-10-blogging-tools-for-2020/home">Top 10 Blogging Tools For 2020</a>

<b>Read More Articles:</b>
<a href="https://www.sfwpexperts.com/21-best-woocommerce-themes-2020-for-your-ecommerce-website/">21 Best WooCommerce Themes (2020)</a>
<a href="https://www.sfwpexperts.com/what-is-a-lead-magnet-13-useful-examples-of-lead-magnet/">What Is A Lead Magnet? Explained With 13 Best Lead Magnet Ideas 2020</a>

<b>Contact Details:</b>
213-277-9177
la@sfwpexperts.com
<a href="https://www.sfwpexperts.com/website-design-los-angeles-california/">Wordpress Website Design Company</a>

<b>Visit Reference Profile Websites:</b>
<a href="https://bit.ly/2NRGxAM">https://bit.ly/2NRGxAM</a>
<a href="https://bit.ly/3grogGO">https://bit.ly/3grogGO</a>
<a href="https://bit.ly/38mjO9O">https://bit.ly/38mjO9O</a>
<a href="https://bit.ly/3gnnpHn">https://bit.ly/3gnnpHn</a>
<a href="https://bit.ly/2BujFoA">https://bit.ly/2BujFoA</a>
<a href="https://bit.ly/2VDtNlG">https://bit.ly/2VDtNlG</a>
<a href="https://bit.ly/2C2gIeE">https://bit.ly/2C2gIeE</a>
<a href="https://bit.ly/3im7V8i">https://bit.ly/3im7V8i</a>
<a href="https://bit.ly/3dLx2hi">https://bit.ly/3dLx2hi</a>
<a href="https://bit.ly/3dTwlTc">https://bit.ly/3dTwlTc</a>
<a href="https://bit.ly/2CSCMZJ">https://bit.ly/2CSCMZJ</a>
<a href="https://bit.ly/2BujFoA">https://bit.ly/2BujFoA</a>
<a href="https://bit.ly/2BYfLnX">https://bit.ly/2BYfLnX</a>
<a href="https://bit.ly/2BsL8a4">https://bit.ly/2BsL8a4</a>
<a href="https://bit.ly/2NNRfse">https://bit.ly/2NNRfse</a>
<a href="https://bit.ly/2YYacif">https://bit.ly/2YYacif</a>
<a href="https://bit.ly/3iqpK6h">https://bit.ly/3iqpK6h</a>
<a href="https://bit.ly/2YVYox1">https://bit.ly/2YVYox1</a>
<a href="https://bit.ly/2ZzRNHz">https://bit.ly/2ZzRNHz</a>
Where/How do you get your ideas?
Tags: discuss, help
Published: 2020-07-04 10:49:47

Hi @all,
I currently have a lot of time to learn and try new things and would like to use all that new stuff on real world appications. But I am struggling with ideas for libraries/apps that really bring value to someone.
How do you come up with ideas for such stuff?

I'm thankful for any input on this topic.

Cheers Julian
How to add custom code block in WordPress website?
Tags: help, wordpress, webdev, discuss
Published: 2020-07-04 10:24:21

I want to show the project code on my WordPress site. But the default code block is too simple. I want like this type of code block on my WordPress website. 

![custom code block](https://dev-to-uploads.s3.amazonaws.com/i/s4kaikq23mmxa2ji59k5.jpg)

Example: Just like the [css-trick](https://css-tricks.com/) website code block.

Is it possible? which plugin or script should I use to achieve this type of code block?
Road to Genius: advanced #39
Tags: javascript, beginners, codenewbie, computerscience
Published: 2020-07-04 10:01:40

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function PES(nums) {
  const ret = [];
  for (let i = 0, temp = 1; i < nums.length; i++) {
    ret[i] = temp;
    temp *= nums[i];
  }
  for (let i = nums.length - 1, temp = 1; i >= 0; i--) {
    ret[i] *= temp;
    temp *= nums[i];
  }
  return ret;
}

let A = PES([1, 4, 5]);
A = A[0]

// A = ? (number)
```

In today's challenge we need to figure out `A[0]`'s value, where `A` is an array and output of the function `PES([1,4,5])`.

On first sight I have no clue what `PES` does, except that it contains two for-loops and a couple of multiplications; looks like some basic math, so it shouldn't be too hard.

The quickest way to solve this is brute-force, we only have 3 input numbers, so let's do that in pseudo-code:
```JS
--- first for-loop (forwards)
ret = []
temp = 1

  ret = [1]
  temp = 1*1 = 1

  ret = [1, 1]
  temp = 1*4 = 4

  ret = [1, 1, 4]
  temp = ... // I don't care

--- second for-loop (backwards)
ret = [1, 1, 4]
temp = 1

  ret = [1, 1, 4*1]
  temp = 1*5 = 5

  ret = [1, 1*5, 4]
  temp = 5*4 = 20

  ret = [1*20, 5, 4]
  temp = ... // I don't care


return ret=[20, 5, 4] = A
```

We find that `A[0] == 20`.

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/fdz1mgpslipuum3rgo5o.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
How to create RSS feed with HTML content in Django
Tags: django, python, rss
Published: 2020-07-04 09:59:53

I am not feeling super comfortable writing this blog post because I don't know much about setting up a RSS feed with Django and including HTML in the content but when I was trying to do this for my own blog I could not find any up-to-date tutorial showing how to properly include HTML content.

I had various issues regarding encoding of the HTML entities so my content was full of stuff like this:

```
&lt;p&gt;Hello&lt;/p&gt;
```

And when I finally solved this issue I noticed that RSS readers would display the HTML in an "not-rendered" form so readers would see something like this:

```html
<p>Hello <span class="code">World!</span></p>
```

Instead of properly formatted text based on the HTML provided.

As of right now [my RSS feed](https://nemecek.be/blog/feed/rss) should be working pretty ok and I hope this little guide will save someone a bit of time when creating their own RSS feed with HTML content and fighting the escaping.

Django has pretty good [docs about RSS](https://docs.djangoproject.com/en/3.0/ref/contrib/syndication) which will get you started with creating the basic structure, setting up urls etc. But there is very little about providing your custom template and using HTML.

Below is shortened example of my feed:

```python
class BlogPostsFeed(Feed):
    title = "Filip Němeček Blog"
    link = "https://nemecek.be/blog/swift-and-ios"

    description_template = 'rss_feed.html'
```

The most important part there is the `description_template` which tells Django where to find template file for individual RSS entries. The alternative is the `item_description` method but I had zero luck using it with HTML. It works fine if you have plain content and can just pass it along.

And finally let's have a look at my `rss_feed.html` template file:

```django
{% autoescape off %}
<![CDATA[
{{ obj.title }}

{{ obj.html_content|safe }}
]]
{% endautoescape %}
```

I am pretty sure this is not the best solution out there but it works fine for me and I have a RSS feed with proper HTML rendering. 

![RSS feed](https://nemecek.be/media/images/image.png)

The `<!CDATA[` wrapper is very important for RSS to display your HTML. But of course it was getting escaped so I turned escaping. The `obj` is the item automatically passed into the template by Django.

So in my case this is my blog post which has among other stuff a `title` and `html_content` attributes.

Please let me know if you have any questions or improvements regarding creating RSS feeds with Django.

Btw there is [handy website](https://fakecake.org/myfeedsucks/) to test your RSS feed.