teleren/devto huggingface dataset:
Bubble effect using only html and css
Tags: html, css, webdev
Published: 2020-11-11 14:21:06

Hello friends, In this blog, I am sharing a snippet based on how to create nice looking bubble animation effect using only HTML and CSS. First of all, I have taken a couple of span tags and gave them a particular height and width and a border-radius property to make them round. I gave a fixed position value and set an animation for them. Later I have given each of them left and an animation-delay value.  After that, I have used CSS keyframes to create bubble animation.<a href="https://www.divinectorweb.com/2020/11/bubble-css-animation.html">Download the code</a>
How to debug JavaScript code in Chrome
Tags: javascript, devtools, debugging
Published: 2020-11-11 14:16:55

---
title: How to debug JavaScript code in Chrome
published: true
description: In this tutorial, we'll take a look at how to use some of the tools available to use to debug JavaScript code in the Chrome browser.
tags: javascript, devtools, debugging
---

Originally published [here on YouTube](https://youtu.be/geIztShEk6I).

(Please give me a thumbs up and subscribe if you found this useful or follow me on Twitter: [@codebubb](https://www.twitter.com/codebubb) 🙏).

00:00 Introduction
00:38 Project overview
01:27 Finding errors in the console
03:40 Setting breakpoints
07:09 Using the Scope tools
09:08 Watched expressions
09:51 Accessing Variables in the console
10:32 DOM Breakpoints
11:51 Conclusion

— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —

So in this JavaScript debugging tutorial, we'll be taking a look at how you can use the Chrome Dev tools to find errors in the code running in your web pages or apps.

We'll first take a look at how you can diagnose errors in the console and jump directly to the part of your code that is causing that particular error.

We'll then look at how you can use the developer tools to set breakpoints in the JavaScript code running on a  page and step through the code that is running to identify problems with variables and other aspects of the app that's running.

We'll also look at some of the other tools that are available in Chrome such as the scope tool and watched expressions.

Finally, we'll take a look at how you can access variables in the console whilst debugging JavaScript and also how you can setup DOM breakpoints to investigate problems with your code.
HTML SPACE or HTML ENTITY: How to create non-breaking Space in HTML.
Published: 2020-11-11 13:51:50

---
title:HTML SPACE or HTML ENTITY: How to create non-breaking Space in HTML.
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

It seems you want to create texts with spaces in between like this "This is     Ayobami" or you want to move a text to the next line and you have realized pressing the spacebar or the return key has no effect.

That can be very confusing for a beginner that just started learning web development.

In this tutorial, I will show you how to do it -- the ugly and the loving ways.

#&nbsp: nob-breaking space
To create extra spaces before, after, or in-between your text, copy the &nbsp; (non-breaking space) extended HTML character and paste it wherever you need a space. That means you have to paste it times the number of spaces you want. E.g "My name is &nbsp; &nbsp; Ayobami" -- two spaces created.

#How to do it with CSS

You can simply wrap the word you want to space with a span tag and use CSS padding to space it a bit as in:

"My name is <span class="two-spaces"> Ayobami</span>

.two-spaces {
  padding-left: 5px;
}

You can add padding size you want ( greate or lesser than 5px).

#b:line-breaking space.

Whenever you want to move a text to the next line in HTML, you can just <b> tag before the text. For example, if you want "Ayobami" in the text below to go to the next line, we just have to add <br> before it as in:

HTML: "My name is <b> Ayobami".
Result: " My name is
Ayobami" (Ayobami is now in another line).

That is it. Goodluck! 


Subscribe to my news-letter to always get my tutorials in your inbox: [You Too Can Code](https://aw194b5a.aweb.page/p/5c07dec9-f1bd-4a8f-a788-87e4f0a6a6a1)
Check if a file exists with Nodejs
Tags: node, javascript
Published: 2020-11-12 01:14:37

---
title: Check if a file exists with Nodejs
published: true
date: 2020-11-11 13:49:42 UTC
tags: nodejs, javascript
canonical_url: https://phongduong.dev/blog/check-if-a-file-exists-with-nodejs/
---

If you need to check if a file exists without opening or modifying with Nodejs, you use `fs.access()` method.

```javascript
const fs = require("fs")

fs.access("file.txt", (err) => { 
    console.log(err ? 'not exist' : 'exist');
  }
)
```

The callback's argument is an `Error` object if the check fails.
Secrets of the Shenandoah garbage collector
Tags: java, garbagecollector
Published: 2020-11-11 13:42:51

Join Stephanie Crater for a deep dive into a few garbage collector secrets including:

👉 What work-stealing is & how it's used to redistribute tasks within a GC cycle
👉 Interesting GC fundamentals
👉 What's really going on behind the scenes in the #JVM
https://youtu.be/WcSqLvxwzbA?list=PLEx5khR4g7PIiAEHCt6LGMFnzq7JjO8we
Homepage Template Bootstrap
Tags: css, html, webdev, bootstrap
Published: 2020-11-11 13:36:44

In this blog, I am sharing another bootstrap-based snippet on creating a homepage template using bootstrap. I am using animate CSS to make an excellent text animation while bootstrap carousel works. I used a static background image for the carousel so that only the text animate.<a href="https://www.codingflicks.com/2020/11/homepage-template-bootstrap.html">Download the Source Code</a>
How to use job searching resources effectively?
Tags: jobsinduabi, jobssearchdubai, dubaijobsearch, jobhunt
Published: 2020-11-11 13:12:17

Looking for job search resources is surely time-consuming but still result-oriented. You may not be able to find the exact resources but while on it, you will find something valuable that can help you with your job hunting and can give greater opportunity in getting hired.

Here are some of the resources to help you speed up your job search:

<b>Job sites:</b>

<a href="https://www.vacancies.ae">Vacancies</a> is one of the well-known portals in the United Arab Emirates makes it easier for job seekers to search for specific jobs using the filter option. Other important features are also included for easier use of the website.     

- Steps for Start-Up
- Create a jobseeker account (free of charge) the either create or upload your CV
- Use search bars to help in finding the desired job
- Manage filter based on your requirements to get better results
- Job Alerts are automatic and up-to-date

<b>Company Pages:</b>

Nowadays, when you heard the word “social media” it is not only about Facebook anymore. Job portals are in trend to cope up with the interest of the people and the best part is it helps them in searching the company, the right person-in-charge for every application, and allow them to interact through chat with the employers, recruiters, and other job seekers.

<b>Professional Friends:</b>

There are a lot of sites now that gives opportunities to job seekers to apply for their desired post. Most of these sites will help them connect with the professionals and even be friends with them. To give an idea, LinkedIn is one of the platforms that can help you build your confidence by interacting with different people on different levels. Some can even assist you in building a powerful resume.

<b>Industries and Magazines:</b>

Make sure to read related articles about the job you are applying for. Except for the company website, the reviews of other people and as well their old employee counts. You will be able to know if applying to the company or employer posted job is a great opportunity you can look forward to apply on latest <a href="https://www.vacancies.ae/jobs/jobs-in-dubai">jobs in Dubai</a> which are published in the magazines.

<b>Career Fares and Announcement:</b>

Stay tuned for the upcoming events. A lot of job opportunities await you on job fairs. You can also directly interact with employers and recruiters of different companies. Ask them questions, inquiries, and submit applications with the number of available job openings.

Hard work is important. Opportunities will not just to you in an instant. You have to do something to make it happen. Keep on looking and soon you will have your dream job. It may take a while but surely, it will be worth it.
What Role do You see Developer Advocacy having in Developer Happiness?
Tags: discuss, devrel, developers, happiness
Published: 2020-11-11 13:29:04

A colleague of mine, [Naiyarah](https://dev.to/naisofly), just pointed me towards [a report was just published about the happiness of developers around the globe](https://cult.honeypot.io/developer-happiness-index/global-insights). It is a very comprehensive report and looks at various breakdowns of developers happiness. 


![Chart of developer happiness across regions](https://images.ctfassets.net/cjwb7umaxoxv/6qCjgtJMspuXY89mkppUZ0/b1478b07ef8ce54fb0c6afbc528a3aa4/DHI_22.jpg)

Much of the initial part follows the [World Happiness Report](https://happiness-report.s3.amazonaws.com/2020/WHR20.pdf) and talks of things like work/life balance, healthcare, safety, political stability, etc.

But the latter half of the report then dives deep into the lives of developers specifically and looks at autonomy, tooling, workplaces, etc.

![Infographic on online communities](https://dev-to-uploads.s3.amazonaws.com/i/rhe1nrm2s0syecx2wekz.png)

It was interesting to see that the particular lump of world I happen to be on, the UK, has the highest rating of happiness with respect to online communities.

And that got me thinking... as a developer advocate, my job is to help developers to learn about, access, and utilise technology. To build community. To listen to developers and their experiences and feed that back to the product teams.

But what contributes to *happiness*? What things can developer advocates, or developer relations people do specifically to help improve developers *happiness*?

Comment below if you have any specific ideas.
DevJobs.app on Producthunt
Tags: webdev, webflow, startup
Published: 2020-11-11 13:14:45

Devjobs.app is a curated job board for software developers looking for both remote and in office positions. From software engineers, to experts in JavaScript, DevOps, Android, Full-Stack, and more! Your next great opportunity, is on DevJobs.app.

![screenshot](https://dev-to-uploads.s3.amazonaws.com/i/9wb7i3vq94z1o2nvrqho.jpeg)

Having worked as a talent acquisition professional for over ten years I noticed a trend when looking for top software developer talent. When smaller companies are looking for talent their job post get lost in the mix with all the larger organizations. I then also noticed that the niche job boards that target developers are expensive limiting access to smaller organizations looking to find top talent...There had to be a less expensive solution...

So I decided to build it myself! This is the first product I've built myself and launched. To bring this project to life, I used many tools here are just a few:
- Webflow
- Typeform
- Stripe

For developers:
New jobs are posted daily, and get the jobs delivered straight to your inbox in weekly newsletter.

![email sign up](https://dev-to-uploads.s3.amazonaws.com/i/416vwse5w1gyu9a8lapo.jpeg)

If you're hiring:
You can post a job for 30 days for $59.00 USD. Your opening will also be featured on the homepage and included in our weekly jobs newsletter sent to software developers looking for a career change.

Check us out https://www.producthunt.com/posts/devjobs and provide some feedback.
Daily Developer Jokes - Wednesday, Nov 11, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-11 13:00:28

---
title: "Daily Developer Jokes - Wednesday, Nov 11, 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=Wednesday%2C%20Nov%2011%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/5e12588c48015.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:
```
[Please Enter New Password]

fortnight

[Error: Password is Two Week]
```
 -->
Equilibrium Integrates with Bluzelle Decentralized Oracles to Power Cross-Chain Liquidity on Polkadot
Published: 2020-11-11 12:52:50

📢 Equilibrium, the first decentralized cross-chain money market built on Polkadot, has announced a partnership with Bluzelle. The project will integrate Bluzelle’s decentralized price feed to power its main DeFi services like lending, borrowing, and trading.
Equilibrium is a one-stop money market that combines pooled lending with the ability to generate synthetic assets and to trade. Polkadot’s cross-chain bridges let users utilize assets from multiple major platforms like Bitcoin, EOS, Ethereum, Binance Chain, and so on.
Equilibrium chose Bluzelle as its oracle solution for these outstanding features:
Fast pricing intervals. The crypto market is volatile and any fluctuation can greatly impact the programmatic interest rate of borrowing and lending on Equilibrium. We want price data to be as accurate and up-to-date as possible. Bluzelle oracles provide real-time prices for crypto assets and refresh this data every several minutes. New and historical values are stored in Bluzelle’s decentralized database, which are ready for grab quickly and won’t be constrained by congestion issues on other blockchains.
High-quality price data. Bluzelle’s oracles aggregate market data from a wide variety of reliable sources, and are operated by a decentralized network of nodes. We use a five-step process that votes in and out data from reputable places and runs statistical analysis on prior price to ensure accuracy and validity, to arrive at a blended value that can be trusted and stored.
Advanced security triggers. Bluzelle Oracles run statistical analyses of data from different sources, as well as against historical values. It generates warnings when a price point appears out of the ordinary, preventing any bad actors from creating a flash loan attack by altering the price feed. This adds an additional safety net for protecting users’ assets on Equilibrium.
“We believe that reliable and diversified price feed is the important part of any DeFi protocol. It is crucial specifically for Equilibrium’s unique on-chain risk management system that is constantly assessing protocol’s solvency and underpins all products built on top of it. Thanks to Bluzelle our price feed becomes more redundant without a need in complex development,” says Alex Melikhov, CEO of Equilibrium.
“The integration of Bluzelle’s high-quality decentralized price feeds will make Equilibrium a more secure avenue for users to lend, borrow and trade crypto assets within its platform. We are thrilled to help Equilibrium accelerate as the leader in cross-chain DeFi,” says Pavel Bains, CEO of Bluzelle.
About Equilibrium
Equilibrium is the first decentralized cross-chain money market that combines pooled lending with synthetic asset generation and trading. Equilibrium is set to open up the vast potential of the DeFi market and become its #1 app by offering exceptional services to the users of major crypto assets that were previously isolated.
Website | Telegram Community | Twitter | Blog
Index Systems Recruitment 
Tags: recruitment
Published: 2020-11-11 12:39:21

I'm Quark, a 17-year-old boy. There are 2 thing I love inclife: coding and helping people. Due to that, after thinking about how could I help people and code at the same time, I realized I could create an organization to help programmers.

That's how the idea of Index Systems was born inside my head. Until one month ago that I released its website. But I still have a problem, I would like to found this project together with someone to make it more dynamic.

This is my request for anyone who wants to help me either developing tools, making educational articles / videos or any other way of helping me.

If you are interested you can contact me drecltt through here ir email me at quark@index-systems.xyz
What is Java Runtime Environment
Tags: java, programming, education
Published: 2020-11-11 12:31:33

It's also integral to the intranet applications & other like - E-business solutions that are the inspiration of corporate computing. Installing this update will make sure that your Java applications/program still runs as safely & efficiently as always.

<h2>Java Runtime Environment</h2> 
The JRE is that the Java Runtime Environment, it covers most end-users needs. Contains everything required to run Java applications/program on your operating system. it's a package of everything necessary to run a compiled Java program, including the JVM (Java Virtual Machine), the Java Class Library, the java command, and other infrastructure. However, it can't be wont to create new programs.

<b>Learn complete</b> <a href="https://usemynotes.com/what-is-java-runtime-environment/">What is Java Runtime Environment</a> <b>and Architecture of JRE</b>

<h2>Java Development Kit</h2>
The JDK is that the Java Development Kit, the full-featured SDK for Java. it's everything the JRE has, but also the compiler (javac) and tools (like Javadoc and JDB). it's capable of making and compiling programs.

Usually, if you simply care about running Java programs on the computer you'll only install the JRE. It's all you would like. On the opposite hand, if you're getting to do some Java programming, you would like to put in the JDK instead.

Sometimes, albeit you're not getting to do any Java development on a computer, you continue to need the JDK installed. for instance, if you're deploying an internet application with JSP, you're technically just running Java programs inside the appliance server. Why would you like the JDK then? Because the appliance server will convert JSP into Java servlets and wishes to use the JDK to compile the servlets.

<b>Learn complete</b> <a href="https://usemynotes.com/what-is-jvm-jit/">What is JVM</a> <b>and JIT.</b>
If statements on Github Actions
Tags: github, tutorial, beginners
Published: 2020-11-11 12:04:49

Hey there!

Last week I faced the need to have different steps to be run when Github Actions was executed. Today I brought you a simple solution to how I managed to achieve this. Be warned, the important content of this post will be the Github Actions Workflow.

```yaml
on: push

jobs:
    project-a-or-project-b:
        runs-on: ubuntu-latest
        name: Project A or Project B

        steps:

        - name: Checkout Main repository
          uses: actions/checkout@v2
          with:
            path: ./mainRepository
    
        - uses: actions/setup-go@v1
          with:
            go-version: '1.9.3' # The Go version to download (if necessary) and use.

        - name: Run Main Repository 
          id: main
          run: |
            cd ./mainRepository &&
            OUTPUT=$(go run main.go | tail -1) &&
            echo "::set-output name=OUTPUT::$OUTPUT"
    
        - name: Run Project A
          if: steps.main.outputs.OUTPUT == 0
          run: |
            cd ./mainRepository/projectA &&
            go run main.go
        
        - name: Run Project B
          if: steps.main.outputs.OUTPUT == 1
          run: |
            cd ./mainRepository/projectB &&
            go run main.go
```

Step by step:

We define a workflow that will be run on a 'push' event. We name this job 'project-a-or-project-b' and we assign it to a ubuntu container with the latest version possible.

Our main program only calculates a random number between 0 and 1. We could say it's mostly a flip-coin program. If we get 0 we will run our 'projectA' program and if we get 1, we run 'projectB'

```golang
package main

import (
	"fmt"
	"math/rand"
	"time"
)

func main() {
	s1 := rand.NewSource(time.Now().UnixNano())
	r1 := rand.New(s1)
	result := r1.Intn(2)
	fmt.Println(result)
}
```

Inside 'projectA' and 'projectB' there's just a Print indicating which routine is being run

```golang
package main

import "fmt"

func main() {
	fmt.Println("I'm running Project A")
}
```

Our first step on the workflow is going to check-out the main repository in the ./mainRepository folder and then it will install go 1.9.3 in order to run the main program.

Once we get to the 'Run Main Repository' step, we assign it the id 'main' which will allow us later to get it's outputs. So we define an output of the program:

```bash
OUTPUT=$(go run main.go | tail -1)
```

and then we indicate Github Actions that the OUPUT variable is going to be an output on that step:

```bash
echo "::set-output name=OUTPUT::$OUTPUT"
```

Now it's time to know which side our coin landed on:

```yaml
if: steps.main.outputs.OUTPUT == 0
```

We can define an if statement on the steps that will depend on our OUTPUT from the last step. You can get your outputs concatenating the string 'steps.{step_name}.outputs.{step_output}

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

That's it for today. I'll leave you the [repo](https://github.com/tomassirio/goGithubActions/) so you can check if you are missing something while trying it
What is Synthetix? Everything you need to know about one of the leading DeFi protocols
Tags: investing, defi, altcoins, technology
Published: 2020-11-13 09:42:07

---
title: What is Synthetix? Everything you need to know about one of the leading DeFi protocols
published: true
date: 2020-11-11 12:16:15 UTC
tags: investing,defi,altcoins,technology
canonical_url: https://medium.com/coinmonks/what-is-synthetix-everything-you-need-to-know-about-one-of-the-leading-defi-protocols-bc19bdd2949c
---

[![](https://cdn-images-1.medium.com/max/860/1*WcNxGWTXHyz5Y8DcHNH-rQ.png)](https://medium.com/coinmonks/what-is-synthetix-everything-you-need-to-know-about-one-of-the-leading-defi-protocols-bc19bdd2949c?source=rss----721b17443fd5---4)

Synthetix (SNX) is one of the leading platforms in decentralized finance (DeFi).

[Continue reading on Coinmonks »](https://medium.com/coinmonks/what-is-synthetix-everything-you-need-to-know-about-one-of-the-leading-defi-protocols-bc19bdd2949c?source=rss----721b17443fd5---4)
Material Design Colors
Tags: webdev, design, color, material
Published: 2020-11-11 11:45:55

Out of color ideas? Material Design Color Palette will help you quickly decide which color to choose for your project. Colors are taken from Google's Material Design Guidelines. 

“Color in Material Design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.”

Material design is a visual language and design system developed by Google with an almost flat style and vibrant color schemes. The Material Design color system can help you create a color theme that reflects your brand or style. [Material design colors](https://hexcolor.co/material-design-colors) helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways. Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.

**https://hexcolor.co/material-design-colors**