teleren/devto huggingface dataset:
Bootstrap Error Page
Tags: css, html, webdev, weeklyui
Published: 2020-06-08 14:17:33

On this page, we used the bootstrap 4 CSS framework with some basic CSS properties. With the help of bootstrap 4 utility classes and grid systems we made a simple bootstrap error page.

Here we used one grid col-MD-12 class and display flex properties for layouts, but make the centre perfectly we used justify-content centre class and aliment item class of bootstrap. For make more attractive here used google fonts and nice colour combinations we used. This is fully responsive and mobile-friendly user-interface.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Get Source code](https://w3hubs.com/bootstrap-error-page/)
June 8th Side Project Check-in
Tags: discuss, watercooler, checkin, sideprojects
Published: 2020-06-08 14:13:27

---
title: June 8th Side Project Check-in
published: true
description: 
tags: discuss, watercooler, checkin, sideproject
series: Side-project Checkin 
//cover_image: https://direct_url_to_image.jpg
---
# Morning/afternoon everyone!
 I hope you all are getting a good start to your work week! Let's talk about your projects! Did you get some work done on a new idea this weekend? Are you ready to show off a release? Let's share below. 👇
Build Todoist app with Vue.js and Parse Platform (Part 1 - Signup)
Tags: javascript, beginners, tutorial, vue
Published: 2020-06-08 14:03:20

---
title: Build Todoist app with Vue.js and Parse Platform (Part 1 - Signup)
published: true
description: Do you want to build cool apps with Vue.js framework? In this series I will guide you step by step on how to build Todoist-like app using Vue and Parse platform as backend. The first part is about signup flow
tags: javascript, beginners, tutorial, vue
---

{% vimeo 427002953 %}

Do you want to build cool apps with Vue.js framework? In this series I will guide you step by step on how to build Todoist-like app using Vue and Parse platform as backend. The first part is about signup flow
Free illustrations for developers.
Tags: webdev, javascript
Published: 2020-06-08 14:01:32

Illustrations used to create better-designed websites, products, and applications.

More free resources collection - [Collection](https://lagandlog.com/tag/free_resources)

Free icons for your next project - [View](https://lagandlog.com/logs/free-icons-for-your-next-project)

The illustration is a collection of SVG images that prevents image quality degradation in websites with blazing fast loading times.

Here some of the free illustrations we can use and do wish to credit the creator.

###Undraw - https://undraw.co

Collection of open source illustrations which can be downloaded in both SVG and png formats, also with customized colors.

###Drawkit - https://www.drawkit.io

Cool free illustration with weekly updates and customizing options

###Ouch - https://icons8.com/ouch

Modern, classy vector illustrations to create a better-designed website or application. Ouch comes with a variety of categories.

###Vecteezy - https://www.vecteezy.com

The collection of vector art with free licensing and creator attribution is required to use a variety of vector arts.

###Black Illustrations - https://www.blackillustrations.com

Free and beautiful illustrations of black people. With 30+ skin tones. Try it out.

###Flaticon - https://stories.freepik.com

Flaticon provides a product called stories in which we can animate, edit, customize from various categories of vector illustrations.

I personally used stories in my projects and its super cool.

###Freellustrations - https://freellustrations.com

Modern and high-quality illustrations.Free and premium available.

The above list is only a few free illustration providers and you guys feel free to add more to this that you used recently.

###Iconsout - https://iconscout.com/illustrations


Thanks.

###From comments section:
1. https://blush.design/
2. https://absurd.design/

More free resources collection - [Lag and Log Collection](https://lagandlog.com/tag/free_resources)


Note: Go through the website to learn about free licensing on illustrations that you use.


<a href="https://twitter.com/sasiKdharan?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow on twitter @sasiKdharan</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
How to: Mapbox with React.js
Tags: tutorial, react, webdev
Published: 2020-06-08 13:53:49

## Getting started
- Generate a MapBox access token in your [account](https://account.mapbox.com/) page
- Download the npm library using `yarn add mapbox-gl`
- Include the css in the `<head>` of your `index.html` file:
```javascript
<link href='https://api.mapbox.com/mapbox-gl-js/v1.10.1/mapbox-gl.css' rel='stylesheet' />
```

## Creating a map

Create a `BaseMap` component:
```javascript
import React, { useEffect } from "react";
import mapboxgl from "mapbox-gl";
import "./BaseMap.scss";

const BaseMap = () => {
  mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;

  useEffect(() => {
    new mapboxgl.Map({
      container: "mapContainer",
      style: "mapbox://styles/mapbox/streets-v11",
      center: [-74.5, 40],
      zoom: 9,
    });
  }, []);

  return <div id="mapContainer" className="map"></div>;
};

export default BaseMap;
```

* `container`: The HTML element in which Mapbox GL JS will render the map, or the element's string id. The specified element must have no children.
* `style`: choose from a pre-defined Mapbox style or create your own using [Mapbox studio](https://www.mapbox.com/mapbox-studio/)
* `center`: refers to the starting position in [long,lat]
* `zoom`: refers to the initial zoom level

Other option parameters for `Map` can be found [here](https://docs.mapbox.com/mapbox-gl-js/api/map/).

Next, add basic styles in `BaseMap.scss`:
```javascript
.map {
  width: 100%;
  height: 100%;
}
```

Finally, add `BaseMap` into your view e.g. `HomePage.js`
```javascript
import React from "react";
import BaseMap from "~Components/BaseMap/BaseMap";

const HomePage = () => {
  return (
    <>
      <h1>My map</h1>
      <BaseMap />
    </>
  );
};

export default HomePage;
```

## Displaying markers and controls

### Navigation 
This adds a zoom buttons and a compass.
```javascript
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "top-right");
```

### Marker
This adds a marker component.
```javascript
const marker = new mapboxgl.Marker()
  .setLngLat([103.811279, 1.345399])
  .addTo(map);
```

### Geolocate 
This locates the user on the map based on the browser's geolocation API.
```javascript
const geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true
});

map.addControl(geolocate, "top-right")
```

### And there you have it! :tada:
![screenshot of page](https://dev-to-uploads.s3.amazonaws.com/i/pdcvtatlurexis74w9jq.png)

* If you are interested in using Mapbox with Vue.js, I have written a similar tutorial [here](https://dev.to/hmintoh/how-to-mapbox-with-vue-js-2a34)
* Mapbox official documentation [here](https://docs.mapbox.com/mapbox-gl-js/api/) :zap:
CSS Pastel Pallets
Published: 2020-06-08 13:48:51

[www.incengine.com](https://www.incengine.com/?name=Pastel-HTML-Color-Codes&art=pastel_colors)

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/30dl89li0r4yintaf0nm.png)
Building a Virtual Conference Talk
Tags: fun, uncategorized, video, virtualpresentation
Published: 2020-06-16 10:39:34

---
title: Building a Virtual Conference Talk
published: true
date: 2020-06-08 13:37:08 UTC
tags: fun,Uncategorized,Video,virtualpresentation
canonical_url: https://dougsillars.com/2020/06/08/building-a-virtual-conference-talk/
---

Later this month (June 2020), I am speaking at ImageCon, a virtual conference hosted by Cloudinary. We were all supposed to meet in person in April, but like many in person events, it has transitioned into a virtual conference. Virtual conferences place a whole new set of requirements on organisers - do you risk a … [Continue reading Building a Virtual Conference Talk](https://dougsillars.com/2020/06/08/building-a-virtual-conference-talk/)
Invite others to edit your articles on Dev.to
Tags: healthydebate
Published: 2020-06-08 13:36:16

In the spirit of collaborative effort.  Is there a way to invite others to be co-editors of an article?

We can't know everything and can't write about it.  Most of our articles can and should be improved "continuously". Authors of books usually have 3 or 4 people involved (which must include editors).

What's your thought's on a feature which allows the original author to invite others to contribute to any article?  The original author would maintain control of all people editing. 

Advantages: We can keep all of our articles continuously up to date, with most accurate information. This is much different than Stack Overflow where it has a lot of old outdated answers which confuse new people looking for latest greatest answer.

Disadvantages: I can't see any disadvantages.
Career Change...
Tags: discuss, webdev
Published: 2020-06-08 13:32:42

After many years and finding myself unsatisfied with working as a system admin mainly in on-prem VMware/Windows environments, I want to make a a change. As I look deeper and deeper and build more and more usable web pages I am enjoying myself in web development. Does anyone have any success stories of a similar transition that they have made? What kept you motivated? What inspired you in the first place? Any reply would be great. Thanks!
Flying-T-Rex Just for Fun
Tags: javascript
Published: 2020-06-08 13:24:20


__1 . Disconnect your internet on chrome__

__2 . Let T-Rex come at your screen__

__3 . Paste Following code in console__
#### 
    window.Runner().config.SPEED=100;window.Runner().config.ACCELERATION=100;window.Runner().config.MAX_SPEED=100;var ditance = setInterval(function(){   window.Runner().tRex.yPos=1;},100); 
###

__4 . Press Up Key on screen__

__5 . Voila__
My first experience use VIPER in Android App development
Tags: architecture, beginners, android, kotlin
Published: 2020-06-08 13:12:47

Hi everyone! This is my second post here and I want to tell you about my experience using architecture VIPER for Android App development.
First thing, what is VIPER? VIPER is an architectural pattern like MVC or MVVM but it separates the code further by single responsibility.


Each of the letters in VIPER is one component of the architecture: View, Interactor, Presenter, Entity, and Router.
The View is the interface.
The Interactor is a class working between the presenter and the data.
The Presenter is the “traffic cop” of the architecture, directing data between the view and interactor, taking user actions, and calling to a router to move the user between views.
The Entity represents application data.
The Router handles navigation between screens.
For IOS developers, it's more common to work with this architecture because it came from IOS development but, some time ago, this architecture became known to the android world.


My old experience with architecture was MVC which, to a mobile developer, was difficult to use because you don't know where you need to add code and it's hard to test, as well.
 
Honestly, when I started using VIPER, I saw how easy it was to understand. Once you and your team get the principle for this architecture, developing becomes easier and comprehensive, in each feature you develop, you already know how to structure it.
But on the other side, I saw how it can be verbose because you needed to use View, Presenter, Interactor, Router in almost everything. For example, if you just need to put a button on the screen to show a message, you need to create a function inside view and presenter. It would be easier to just put the method in View but if you do that is not VIPER anymore.
56 : Understanding the Computer is a good idea! 
Tags: codenewbie
Published: 2020-06-08 12:42:31

If you are a complete beginner, and not confident enough, I recommend to understand the computer, that is what I did in the beginning, it is possible to follow a systemic curriculum from the internet,

However, I think it is okay to take time to convert yourself from analog to digital, it might get you overwhelmed, the computer process quickly, through the database, what I would like to do again is to make my solution specify via encoding, and discovered that I want to go back focusing on computational thinking, 

personally, I am a big language nerd, I like understanding the other side of any cultures,

As same the logic, I want to know the computer, and talk, how? by applying what I just solved, recognize how I did, why I did it with clear reasons,

This is my own statement, and then I want to be out of my box
1. Math is not really necessary! 
2. Going to well-sturucted academy! 

The programming field is really wide, I think computational thining is my vanilla programming! 

It is really tough to make a decision by yourself, because learning has no answer, and it takes a lot of responsibility! let's take it, with the gratitude! and Be yourself to solve problems:)  


[Computational thinking is worth to invest](https://youtu.be/V9Xy18YEK9M)
Side project update: MVP user flow done
Tags: ux, design
Published: 2020-06-08 13:07:21

Had to kerb my excitement today. Made the mistake of looking at another product with its slick UI and really wanted the same for Markfolder, my new product. 

Forgot that this is just the MVP that I'm designing, ha! 

Having said that, it was good to just let that initial burst of creativity run wild, before then taking the result and cutting back. It allowed me to see where the next versions of the product could go.

Anyway, (cut-down) user journey for MVP is done. 

![You can see both versions here](https://dev-to-uploads.s3.amazonaws.com/i/xgbhaxsihf542jwlj194.jpeg)

Farez
Have you ever used vertical (portrait mode) monitor?
Tags: discuss, webdev
Published: 2020-06-08 13:04:42

---
title: Have you ever used vertical (portrait mode) monitor?
published: true
description: 
tags: discuss, webdev
//cover_image: https://direct_url_to_image.jpg
---
Some days ago I did make a discuss article on would you prefer single ultrawide over multiple monitor setup for your developer needs.

{%link https://dev.to/madarsbiss/ultrawide-vs-multiple-monitor-set-up-your-thoughts-1gn2 %}

Answers did vary, tho most of you did recommend multiple monitor setup. I wanted to extend the discussion a bit on the vertical (portrait mode) screens and their use cases.

Out of curiosity, I thought it would be nice to share, what do you mainly use them for? To save space? To view more code lines at once? To split screen for multiple tools? For reading external sources, docs?
Some Js clean code tips
Tags: javascript, codenewbie
Published: 2020-06-08 13:03:06

Hi Everyone,


Today i am going to tell about some js clean code tips based on code readablity not on performance

###1) No continuous object properties assign:

 ```
 let obj = {};
 obj.a = '1';
 obj.b = '2';
```
We can write the above code as
```
Object.assign(obj, { a: '1', b: '2' });
```

###2) Use object destructuring in function arguments:

  ```
    function print(obj) {
     console.log(obj.a);
    }
  ```
We can write the above code as

  ```
   function print({ a }) {
     console.log(a);
    }
  ```

###3) No unneeded ternary:

```
  let a = b === 10 ? true : false;
  let c = d ? true : false;
```

We can write the above code as

```
  let a = b === 10
  let c = !!d
```
lint rule is https://eslint.org/docs/rules/no-unneeded-ternary

###4) No repeated if check:

```
  if(cond1) {
     if(cond2) {
        // do something
     }
  }
```

We can write the above code as

```
if(cond1 && cond2) {
   // do something
}
```

###5) No unneeded boolean return:

```
 function getBoolean() {
  if(cond) {
     return true;
  }
  return false;
 }
```
We can write the above code as

```
function getBoolean() {
   return cond;
}
```

###6) Converge object destructuring:

```
  let { prop1 } = obj;
  let { prop2 } = obj;
```

We can write the above code as

```
  let { prop1, prop2 } = obj;
```

###7) No Duplicate Imports:

```
  import { a } from 'filepath';
  import { b } from 'filepath';
```

We can write the above code as

```
  import { a, b } from 'filepath';
```

lint rule is https://eslint.org/docs/rules/no-duplicate-imports

I hope you enjoyed this post. Thanks for reading.

Source documentation is https://github.com/airbnb/javascript
Tips for working from home
Published: 2020-06-08 12:56:52

# ☕ [Work from Home](https://github.com/markdown-it/markdown-it-emoji) 

![](https://my-bucket-image2.s3.amazonaws.com/ImageGitHub/expectations-reality.png)

Working from home will become a new reality increasingly present in all companies. It is a possibility that due to digital transformation allows improving the people's quality of life.

##  [Tips](https://github.com/markdown-it/markdown-it-emoji) 😀

### 1. Set up your `workspace`.

### 2. Set yourself a `routine` and set `fixed schedules`.

### 3. Create a `to-do` list.

### 4. Constantly `communicate` with your peers.

### 5. Take your time to `relax`.

### 6. Maintain `good posture`.

### 7. Use external `microphones` and `headphones`.

### 8. If possible, choose a place with `natural light`.

### 9. Use `ethernet connection` for video calls from the computer.

### 10. Use `apps` to organize `tasks`.

### 11. Applications to protect your network and `privatize data (VPN)`.

### 12. Establish a dynamic, `avoid monotony`.

### 13. Boost your `concentration`, use techniques like Pomodoro, `listen to music`.


## [Advantage](https://github.com/markdown-it/markdown-it-emoji) 😉

- Geolocalized offshoring.
- Time-saving. Labor flexibility.
- Increases productivity 5% - 25%
- Increases economic savings.
- Improve liability.


## [Apps](https://github.com/markdown-it/markdown-it-emoji) 🙂

- [Slack](https://slack.com/intl/es-co/)
- [Trello](www.trello.com/)
- [GSuite](https://gsuite.google.com/)
- [Asana](https://asana.com/)
- [Notion](https://www.notion.so/)

> thank you for reading
Wk 2 - MTJ
Published: 2020-06-08 12:56:01

Jun 8 2020
Week 2 of My Tech Journey
<Br>
Well last week went quicker than expected. I completed the HTML portion of freecodecamp.org and created a project website which I will build on with all the knowledge I gain from now on.
<Br>
<Ol>
<B> Objectives for this week: </b>
<li> Start learning CSS </li>
<li> Add to my project website </li>
</Ol>
<Br>
<U> Encouragements: </u>
There has been countless times where I wanted to start learning coding and just didn't know where to start, so it never happened.
Having this blog and writing something, anything, every week has helped to actually get me to learn despite my busy schedule.
I always struggled with choosing what to learn first and so never learnt anything. Picking <b> HTML, CSS and then maybe JavaScript </b> will help me to gather some progress.
I have exams in a month and so I may not spend too much time on coding for now, but any time is better than none at all.
<Br>
See ya next week,
Rae.
Extensibilty through Webhooks Part 1: What are webhooks?
Tags: tutorial, aws, gcloud
Published: 2020-06-08 12:54:33

At the center of my discussion on [Pragmatic Software Design](https://dev.to/brandinchiu/pragmatic-software-design-a94) I discussed the four pillars of what I consider to be successful software solutions.

This post revolves around one of those pillars in particular: _**extensibility**_, and how we can make our solution as easy to work with as possible for other developers and/or services.

### What are webhooks?
A _webhook_ is an automated submission of data over HTTP as a response to some lifecycle event of importance.  Users (typically third-party developers) can register to "listen" to these events by providing a URL, which the service will use to submit a request whenever one of those events fires.

Now, why is this useful?  Before webhooks, retrieving data out of another system often required some kind of polling.  However, polling is inherently inefficient as it generates significantly more network traffic than needed as you constantly ask the service for data.

Webhooks give us the ability to restrict network usage to only the bare minimum needed to obtain the data we're looking for.

As an example, imagine you are looking to integrate with a service that manages users, with another that sends them emails.  Service A is responsible for registering and maintaining your primary source of users.  Service B maintains a separate list of users that have opted-in to receive marketing, and periodically sends them deals on new products.

If Service A supports webhooks for new user registrations, then it can automatically notify Service B each time a new user registers.  Service B can then ingest that data in near real-time, confirm that the user has given permission to receive marketing emails, and then add them to the list of users in Service B.

The true power of webhooks, however, isn't any one specific use-case, but is instead the flexibility for services to integrate with each other in a variety of ways that the initial developers of that service do not expect.  It allows for more efficient use of a team's resources by allowing them to focus on their own service, and instead provide a flexible bridge for others to extend the functionality of that service naturally.

### Adding Webhooks to your service
Now that we have a handle on what webhooks are and why they might be valuable for us to implement, we're going to discuss a bare-bones and quick way to add webhooks to our own application using Amazon Web Services or Google Cloud.

We want to use a cloud service as the backend for our webhooks because we want to decouple the delivery and execution of our events from our actual application.  We want the execution of our webhooks to occur independently from our application -- we're registering endpoint URLs that we do not control and therefore we want any potential errors or issues arising from our webhook requests to be processed externally.

If you're ready, proceed ahead to follow along with the tutorial.
How to build a Healthcare Web App in a day – Webinar
Tags: webdev, nocode, lowcode, appdevelopment
Published: 2020-06-08 12:51:33

Join us to learn how to digitize healthcare business 2x faster.
Just 40 minutes, concise and to the point. Absolutely free. We'll show the entire process of the creation of a functional healthcare web application with responsive design. 
June 11 (Thursday), 7pm CEST, 1pm EST.

If the time doesn’t suit you, sign up to get the playback later.

Sign up here: https://hubs.ly/H0r3HmB0
Data Management Trends From An Investor Perspective - Episode 136
Published: 2020-06-08 12:49:57

<p>The landscape of data management and processing is rapidly changing and evolving. There are certain foundational elements that have remained steady, but as the industry matures new trends emerge and gain prominence. In this episode Astasia Myers of Redpoint Ventures shares her perspective as an investor on which categories she is paying particular attention to for the near to medium term. She discusses the work being done to address challenges in the areas of data quality, observability, discovery, and streaming. This is a useful conversation to gain a macro perspective on where businesses are looking to improve their capabilities to work with data.</p><p><a href='https://www.dataengineeringpodcast.com/redpoint-ventures-data-management-trends-episode-136/'>Listen Now!</a></p>