teleren/devto huggingface dataset:
CSS Only Loader
Tags: css
Published: 2020-05-11 06:35:24

Today I want to make a basic `CSS` Loader and show you guys and girls how easy it is to make one yourself.

We can make one with only one `div` and a couple of lines of `CSS`.

But let's also dive into making some variants.

## HTML Structure

```html
<div class="loader"></div>
```

That's all folks! Just one simple div.

## CSS Basic Loader

```css
.loader {
  border: 16px solid #f4f4f4; /* Background color */
  border-top: 16px solid #8f95d3; /* Animated color */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: load 2s linear infinite;
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
```

Let's break down how this works exactly.

We start by setting a `border-color` on our element. We make the top border a different color so 25% of our element is now coloured differently.
`Border-radius: 50%` makes it a round object instead of a square.
We then give it a specific dimension and add our animation.
In our animation we transform the object from zero to 360deg, this will make it spin.

You can see the result in this demo:

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="rebelchris" data-slug-hash="zYvjjqN" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Only Loader">
  <span>See the Pen <a href="https://codepen.io/rebelchris/pen/zYvjjqN">
  CSS Only Loader</a> by Chris Bongers (<a href="https://codepen.io/rebelchris">@rebelchris</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## CSS Loader alternatives

As mentioned and as you can see in the codepen we have some other options.

For option two (the two bars) we just add another border at the bottom like so:

```css
border-bottom: 16px solid #8f95d3; /* Animated color */
```

As for the three balls we add a div to our loader and style like such:

```css
.loader-three .ball {
  position: relative;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 3px;
}
.loader-three .ball:before {
  content: '';
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 19px;
  top: -14px;
}
.loader-three .ball:after {
  content: '';
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 42px;
  top: -21px;
}
```

This will create three balls on the border with [pseudo-elements](https://daily-dev-tips.com/posts/css-pseudo-elements/)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
SSC Result 2021 Bangladesh
Tags: security, results, bangladesh, examinations
Published: 2020-05-11 06:08:58

Hi there, if you wanna get SSC Result 2021 for Bangladesh education board then you can check it on the official website of www.educationboardresults.gov.bd. The result will be published between the date of 23rd-25th December 2021.
You can check here https://resultmama.com/ssc-result-2021/
If you want to see Full marksheet <a href="https://resultmama.com/ssc-result-2021/">SSC Result 2021</a> click here.
Full Marksheet also can see here at <a href="https://bestbdjob.com/ssc-result/">SSC Result 2021</a>
How To Check <a href="https://resultmama.com/how-to-check-ssc-result-via-sms/">SSC Result 2021 by SMS</a>
You may also check your SSC/Dakhil/Equivalent results via short message. To check results in this procedure please Type SSC (Space) First three letters of your education Name As of (DHA) <Space> Your examination roll number <space> Examination Year as '2021' and Send to 16222 Number. 
E.G: SSC DHA 176543 2021> 16222.
<a href="https://resultmama.com/wp-content/uploads/2020/05/ssc-result-publish-date-compressed.jpg</a>
Oversize Images Finder Tool
Tags: weboptimization
Published: 2020-05-11 06:07:47

Large image is always hurt my optimization job some time loading behavior is hidden those image from PageS peed Insight Please checkout this tools and use it for finding the Oversize Images on your website 

Installation has done by standard npm install 
```
npm i -g oversize-images-finder
```

After you install just run command following and define your target API

```
oversize-images-finder --url [url]
```

The tool will display the result of inspection

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

Now you can see which images are oversize and should resize original image
What is UNO Platform?
Tags: android, ios, webassembly, uiweekly
Published: 2020-05-11 05:46:40

What is UNO?

The Uno Platform is a Universal Windows Platform Bridge that allows UWP-based code (C# and XAML) to run on iOS, Android, and WebAssembly. This allows the use of UWP tooling from Windows in Visual Studio, such as Xaml and C#, to build an application as much as possible on Windows, then validate that the application runs on iOS, Android, and WebAssembly. The XAML User Interface (UI) provides the ability to display the same XAML files on Windows, iOS, Android, and WebAssembly platforms. Uno also provides support for the Model-View-ViewModel (MVVM) pattern on all platforms, with binding, styling, control and data-templating features.
Why UNO?

Developing for Windows (phone, desktop, tablet, Xbox), iOS (tablet and phone), Android (tablet and phone) and WebAssembly at once can be a complex process, especially when it comes to the user interface. With Xamarin, C# comes to all these platforms; however, it only provides transparent translations of the UI frameworks available for iOS and Android. Most non-UI code can be shared, but when it comes to the UI, almost nothing can be shared.

One can avoid learning the UI-layout techniques and approaches for each platform, Uno.UI mimics the Windows XAML approach of defining UI and layouts. This translates into the ability to share styles, layouts, and data-bindings while retaining the ability to mix XAML-style and native layouts.

UNO is a platform for building native mobile, desktop, and Web Assembly apps with C# and XAML from a single codebase. Sharing logic between platforms has always been relatively simple, but sharing user interfaces was not really possible. This meant that, with the help of Xamarin.Forms, you could have a similar look and feel on your Android and iOS devices, but not for the Web. This is where UNO is closing the gap. With UNO, you can write the UI once. With the use of native controls, UNO deploys the native UI look and feel to all the other platforms, meaning, you write the same code for a button regardless of the platform the button is for.

Read more here: https://medium.com/@rlogicaltech/uno-platform-open-source-cross-platform-8d5b4114a23e
Clarity and Communication, fundamental techniques in Software Architecture
Tags: Architecture, Development, Software, Programming
Published: 2020-05-11 05:32:36

*Technical decisions, project goals, specifications, and restrictions frequently are communicated in large Microsoft Word documents, extensive paragraphs, and many tables with change control.*

I regard it is not the best approach to share knowledge, decisions, and establish a convenient work environment around a project and their members, I have two reasons that support my thoughts:

- No one on your team is going to read and memorize a 50-page architecture document.

- We are living in an environment that demands cross participation or cooperation instead of accepting a lot of instructions ruled by the architects or technical leaders.

According to that, I recommend a few ideas to be agile, have effective communication, leadership, and simplicity in complex scenarios.

**Tools to transmit thoughts**
Use diagram modelers in order to communicate your ideas and workflows. Often this method promotes a better scope understanding and allows identifying several restrictions at first sight.
Options: Visio or Enterprise Architect, and so forth.

**Post-it notes or whiteboarding**
Architects, leaders, developers into a room in order to draw, divulge, and share technical considerations. At the end of the session, you could want to snap some pictures and share them with the team in order to provide valuable stuff for reviews or future discussions.

**Expose details about architectural decisions**
After taking all the conclusions, concerns, concepts, or opinions, it is time to expose the framework or approach, involve the technical people in the architecture process, and validate if we are in a good shape regarding the needs of the project. A collaborative environment will improve communication inside the team.

Repeat the process. Architectures do not have to be rigid.

{% medium https://medium.com/@luisfernando_ch/clarity-and-communication-fundamentals-techniques-in-software-architecture-1e72f81144f7 %}
100daysofcode Flutter
Tags: 100daysofcode, flutter
Published: 2020-05-11 04:42:37

day 62-63/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Today learn firebase authetication login with email n password,implement handling error
https://github.com/triyono777/100-days-of-code/blob/master/log.md

mungkin saya harus mengganti jadwal 100days_of_code menjadi pagi
Atomic-CSS in Styled-components
Tags: react, atomiccss, styledcomponents
Published: 2020-05-11 04:20:08

---
title: Atomic-CSS in Styled-components
published: true
description: How you can achieve atomic-CSS UI pattern using styled-components.In this post. I will try to make to introduce you with a CSS design pattern which is currently gaining popularity in the frontend community.
tags: #react, #Atomic-css, #styled-components,
---
##Atomic CSS using styled-components

***Disclaimer***: I'm no expert on Atomic CSS. I have just learned this pattern and excited to share my knowledge. If you want to deep dive in this topic please refer links in the resources section

In this post. I will try to make to introduce you with a CSS design pattern which is currently gaining popularity in the frontend community.
Also, I will be showing you how you can achieve this with styled-component in your react app.

### What is Atomic CSS?

The definition according to [css-tricks](https://css-tricks.com/lets-define-exactly-atomic-css/) is 

***Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.***

According to me, it's a functional way of writing CSS. Writing smallest possible utility and then composing it to achieve bigger components.

### Mixins in Style-components 

In order to compose styles in styled-components, we will be using mixin.
Let's look into a small example of a mixin.

```jsx
const padding = props => (props.padding ? `padding: ${props.padding}px;` : "padding: 0px;");
const Box = styled.div`
  ${padding}
  background-color: red;
`;
``` 
 then you can use this in your react components like this

```jsx 
 <Box padding={20}>Box</Box>
``` 

### Now using mixins to achieve Atomic CSS
```jsx
const padding = props =>
  ({ padding } ? `padding: ${props.padding}px;` : "padding: 0px;");
const bgr_blue = `background-color: #357edd;`
const br_20 = `border-radius: 20px;`

const Box = styled.div`
  ${padding}
  ${bgr_blue}
  ${br_20}
`;
```

###Full Working Example

You can find full working codesandbox example [here](https://codesandbox.io/s/basic-atomic-css-7ds8f?file=/src/App.js)

***

Resources:

[CSS-Tricks](https://css-tricks.com/lets-define-exactly-atomic-css/)
[Atomic CSS-in-JS](https://sebastienlorber.com/atomic-css-in-js)
[Styled-system] (https://varun.ca/styled-system/)
Web Monetization for Creatives
Tags: gftwhackathon
Published: 2020-05-11 04:05:30

---
title: Web Monetization for Creatives
published: true
description: How to enable creatives to monetize their work
tags: gftwhackathon
---
My initial thought was how to get web monetization directly into the hands of the creative community? Sure, Mozilla had started working on this with VR developers, but it was better suited to developers. How do we get writers, artists, and videographers to monetize their work with no coding?

I believe the solution is a site generator/management tool that allows them to utilize their own WM wallet to collect micro-payments from their audiences directly. The signup/initial site creation process would require the user to set up or supply wallet information. The provided page templates would suggest what could be premium content to utilize the WM features. 

This should be a learning experience for me. I am starting the project by learning a new framework (Vue.js) to assist with development. The server will do most of the hard work, though, hosting the various web sites and uploads. I will have to pay special attention to how that traffic is routed and secured. I am beginning by setting up most of the front-end. I do worry this is a bigger project than can be pulled together in under a month, but I am hopeful. Even if I cannot finish it by June 5th, who knows, it could grow further?

Let me know if you have any thoughts or suggestions below. I am looking forward to building this application. If you would like to checkout the progress, please check the code out at {% github https://github.com/jakesweb/incinicreator %}.
What Do You Call Something That Is Better Than HTML/JSX/Hyperscript?
Tags: javascript, webdev, discuss, frontend
Published: 2020-05-11 03:49:31

If there was something that was better than HTML, JSX, Hyperscript and templating languages for constructing and combining DOM nodes for creating web applications, what would you call it?

I am attempting to build this and I need to call it something and I am looking for help finding a good name. I need to call it something in order to talk about it so for the moment I am calling it Tagscript.

Here is some information about what Tagscript is trying to be:

1. Pure Javascript, requiring no compiler or transpiler.
2. It is not a templating language. It does not use tagged template literals to embed HTML.
3. No Virtual DOM
4. It is something like Hyperscript but without the syntax repetition and clutter.
5. Uses modern Javascript features (ES6) for modern browsers.
6. It supports fine grained declarative DOM updates that are controlled by the developer.
7. Matches the element structure of HTML (giving the familiarity of HTML), but is not HTML. It is valid Javascript.
8. Uses a combination of regular Javascript features to give a declarative, concise, clear syntax to show, create and combine DOM elements and their properties.

So far here are the names I like best:

1. Enhanced DOM Functions (EDF)
2. Ultrascript
3. Tagscript
4. HTJS (Hypertext Javascript)

I like the name "Enhanced DOM Functions" because the functions provided by Tagscript are enhanced DOM functions.

I like Ultrascript because it plays off of Hyperscript which plays off of Hypertext Markup Language (HTML).

I like Tagscript because Tagscript is like what HTML would be if HTML was Javascript.

But maybe there are better names. What do you think?

Tagscript is not ready for initial release yet. But if you would like to be notified when it is released so you can check it out then let me know and I will add you to the release list. 

Leave a comment or message me or mention me on twitter (https://twitter.com/mudgen) or send me an email: nick@perfectabstrations.com. Also I am very interested in feedback and contributions people might want to make.
Building a web component module with hybrids
Tags: javascript, webcomponents
Published: 2020-05-11 03:44:53

---
title: Building a web component module with hybrids
published: true
description: Took a new look into how far web components have come in 3 years. And tried a component framework called Hybrids. 
tags: JavaScript, web components
---

{% youtube oYtHzzZ93gw %}

Took a new look into how far web components have come in 3 years. And tried a component framework called Hybrids. 

We will build a web component in a module using hybrids. Hybrids is a framework to make building web component modules easy and quick. I will live code a web component in under 10 minutes.
React vs. Vue.js – An Explorative Comparison
Published: 2020-05-11 03:42:16

Link: https://blog.joshsoftware.com/2020/05/06/react-vs-vue-js-an-explorative-comparison/

Unless you’ve been living under a rock, you’ve probably heard of Facebook’s wildly-popular React JavaScript library for building single-page web application. You’ve may have also heard of Vue.js, a full-featured utility that can be leveraged for the same purposes. But which one is right for your project?

In this article, we’ll explore some of the differences and similarities between the two. We’ll start with some simple comparison points, then move on to more complex topics.

It’s worth remembering as you read this article that React and Vue are both trying to solve one problem – SPA UI management – in different ways. While both utilities focus on code-reuse through the idea of components, the fundamental thinking behind React and Vue is somewhat different, and each has a unique way in which it addresses the problem of building modern single-page web applications.
Coder’s Block
Tags: gratitude, webdev, watercooler
Published: 2020-05-11 03:39:20

Coding is an art. I don’t mean just the design. The way you design your schemas, create APIs, and write the code for the front-end. There’s an imprint of the creator. If you spend enough time with someone and see their code you can get an understanding of how they write code and see their personality expressed in the code they create. 

Currently, I’m having Coder’s Block. Going through Flatiron School provided challenges and time restraints. I was still in control of what kind of projects I created. However, that pressure and what felt like impossible timelines, didn’t leave space for anything except creating and building. 

There’s no shortage of app ideas, tutorials, etc. None of those are the problem, ideas are plenty. If you give me enough time, I could fill that time discussing my own. However, what’s missing is the drive to code again. Holding the weight of personal and world issues is a heavy burden. This burden is usually eased by coding. I can code (with music) and for that time not be concerned with the outside world, just the code. Building something. 

So, where do I turn when I have Coder’s Block? Movies? Music? I tried, it just didn’t cut through. It’s one feeling to consume art and another level to create art. [The science](https://www.healing-power-of-art.org/art-and-the-brain/) backs it up. This is your brain creating art: 

![Your Brain on Art](https://dev-to-uploads.s3.amazonaws.com/i/2m5kxkv23kppxykuw4m4.jpeg)

Tl;dr Your brain likes art. And so does mine. I miss creating. I miss learning. I believe I’ll get back to it. 

Until then, music will stay on rotation and I’ll continue to take in inspiration. And give myself space to feel and focus on gratitude. I’m grateful to have more tools to create. And for the little victories every day.
Troubleshooting and Adding Google Maps to individual Nuxt js pages
Tags: nuxt, vue, javascript
Published: 2020-05-11 03:02:54

````
Update[New]: If you need simple Location Autocomplete, I have created new Gist: check this out and staff if find useful :) 
https://gist.github.com/lakhbawa/73409735265a5c48d48bc55c70e54993
```
I had a very hard time figuring out the best solution to add Google maps API into Nuxt js Project. It was because of several issues and the unique nature of Nuxt js.
My Goal was Simple
* Add google maps API only on those pages where it is being used.


# I tried varies techniques, and most of them were initiating some issues.
Some of the issues I was facing were.

* Script was being appended to the page as many times as the component was loaded.
* It was being hard to know when maps API was loaded.
* I simply didn't want to add maps API to all pages, which could be easily achieved by adding a script in nuxt.config.js

What were the techniques I tried?

1. I tried to use head() element of nuxt js page, which appends the scripts to head section of the page

Problem: 
- Every time component was loaded, it would append the script again to head section of the page, so the script was being appended multiple times in the page.
- It was also not working as expected when I would reload the page

2. Using packages https://www.npmjs.com/package/google-maps and https://www.npmjs.com/package/google-maps-api-loader, they were simply not working 

3. Vue2-google-maps - It was appending the maps API code to the whole codebase so increasing the overall page size.

What was it that worked.

I used mounted() hook of page component to the first check if google variable already exists (if yes, that means API is already loaded).


```
mounted() {
// if (!process.server) {
    if (typeof google === 'undefined') {
      const script = document.createElement('script')
      script.onload = this.onScriptLoaded
      script.type = 'text/javascript'
      script.src = `https://maps.googleapis.com/maps/api/js? 
      key=${apiKey}&libraries=places`
      document.head.appendChild(script)
    } else {
      this.onScriptLoaded()
    }

    // }

}
```
It would call onScriptLoaded() method.

```
methods: {

onScriptLoaded(event = null) {
// YOU HAVE ACCESS TO "new google" now, ADD YOUR GOOGLE MAPS FUNCTIONS HERE.

      // if (event) {
      //  console.log('Was added')
      // } else {
      //  console.log('Already existed')
      // }
 }
}
```

I hope it will save somebody's time. Thanks for reading and Have a good day.
Why I stopped #100DaysOfDesign Challenge 😔

Tags: design, webdev, challenge, 100daysofdesign
Published: 2020-05-11 02:39:28

During last month (April 2020), I started #100DaysOfDesign challenge where I was planning to work on at least some design and complete more projects in small amount of time. But from last two weeks, I have stopped this challenge. Someone might say that I am giving excuses because I was not able to maintain the challenge and yeah at some point it is true. I accept that at some point I failed to maintain this challenge but there are other reasons as well.

My Co-Op does not have proper times for each day. I mean there is specific schedule but it varies for me to start or end the job each day. After sitting on desk for 8 hours straight, I do not like to sit there more and spend another 1 or 2 hours for design and/or write a blog on this. although I have maintained around 22 to 25 days from which I have wrote blogs until the 16th day of the challenge. After that day, I stated working on Budget Tracker App (2nd version of my old [Expense Tracker App](https://expense-tracker-app.now.sh/) project).

![Budget Tracker — Index Page](https://dev-to-uploads.s3.amazonaws.com/i/v3jelrxqbkp5lqrholf2.jpg)

When I was working on Budget Tracker, I was looking on some videos in YouTube and realized that I really need my own portfolio website live as soon as possible. Because of that reason, I dropped the Budget Tracker app on index page and I started planning my website. As it was my first portfolio and I wanted it perfect, I spend more time before I started designing the website!

At this time, I also realized that I also have other things in my life that I want to do and I want to start working on them as soon as possible. I currently have Service Administrator Co-Op and it requires constant attention which makes me tired after 8 hours. Few days ago, I was having back pain also. I am not saying that I will not be designing but I do not think that I will be able to spend 1 hour on designing after such long hours of work. I wish I might be able to complete such challenge in future 😞.

_Please checkout my profile to see my past blog posts on this challenge. Feel free to drop comment that what are your opinions on such challenges? And did you have to drop it because of such reasons?_