teleren/devto huggingface dataset:
Handling CSS3 Specificity
Tags: css3, html, andela
Published: 2019-06-19 22:52:03

---
title: Handling CSS3 Specificity
published: true
description: Understanding how css3 specificity rules work
tags: CSS3, HTML5, Andela,
---

I know it may sound strange but a lot of developers and engineers still find it difficult to get their way around CSS3 Specificity. If you have  doubts of why this color isn't working or why your font isn't responding to your defined styles set then you have no more reason for doubts, join me as we unveil the secret recipes to handling css3 specificity.

## What is CSS Specificity?
According to MDN

> **Specificity** is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors 

In other words it is just a rule-set that web browsers uses to decide which css property with higher priority  to add on a given element or selectors that matched it.

### How can one calculate specificity?
There are many ways to calculate specificity but I will be showing you the easiest method, it is called the ABCD method.

**A** represent style attribute or inline style, which carries the highest priority 

**B** represent the id selector that carries the second highest priority when applied on an element

**C** represent classes, pseudo elements and attribute

**D** represent elements

From the above description you will understand that **A** have the value of 1000, while **B** have the value of 100, also **C** have the value of 10, and **D** have the value of 1.

If only A is applied on an element, it will look like this:

```
 A = 1
 B = 0
 C = 0
 D = 0
```
And if B is applied on an element, it will look like this:
```
 A = 0
 B = 1
 C = 0
 D = 0
```
If C is also applied on an element, it will look like this:
```
 A = 0
 B = 0
 C = 1
 D = 0
```
And if D is applied on an element. it will look like this:
```
 A = 0
 B = 0
 C = 0
 D = 1
```
Right now looking at the diagram above, I think you have grasp the concept and if you continue  practicing and adding each method together open up your mind to endless possibility or understanding.

Let me know what you think by leaving a comment.
[Video] Down the rabbit hole with WebVR
Tags: cascadiajs2018, videos, javascript
Published: 2019-06-19 21:09:28

---
title: [Video] Down the rabbit hole with WebVR
published: true
description: The evolution of user interactivity on the web has birthed the growing advancements of web innovation and creativity. Pushing developers and designers to look for unique ways to engage and immerse our users. From utilizing AR in online retail to show what products would physically look like either in a living space or on the users themselves, to banking in VR where low-poly animations are used to teach money management. Let's explore available VR tools, from A-Frame and beyond, and different use cases for developing in VR for the web.
tags: cascadiajs2018, videos, javascript
cover_image: https://pbs.twimg.com/media/DtM87aIU0AMyD94.jpg:large
---
*As we lead up to [CascadiaJS 2019](https://2019.cascadiajs.com), I'm going to share the 24 amazing talks from 2018 here on dev.to. Sit back and enjoy the show!*

![Shannon Foster](https://2018.cascadiajs.com/speakers/shannon-foster.jpg)

The evolution of user interactivity on the web has birthed the growing advancements of web innovation and creativity. Pushing developers and designers to look for unique ways to engage and immerse our users. From utilizing AR in online retail to show what products would physically look like either in a living space or on the users themselves, to banking in VR where low-poly animations are used to teach money management. Let's explore available VR tools, from A-Frame and beyond, and different use cases for developing in VR for the web.

https://www.youtube.com/watch?v=H8crihughSc
xLayers - v1.0.0-beta 5
Tags: javascript, productivity, webdev, design
Published: 2019-06-19 20:50:41

We are happy to announce a new version of xLayers: v1.0.0-beta 5 🎉🎉

Within this release, we have some new features, improvements and small fixes.

Some highlights of this release are:

- Upgraded to Angular V8
- Support for Xamarin 
- Multi translated (ENG, NL)
- Updated support for Stencil One

For the complete changelog [click here](https://github.com/xlayers/xlayers/releases/tag/1.0.0-beta.5)

Here is a sample Xamarin code generated from the Sketch design:
 
![](https://thepracticaldev.s3.amazonaws.com/i/gbu46cfc6yls2gkt3m3b.png)

If you have any questions or want to provide us feedback send us a DM or create an issue at our Github.

Follow `@xlayers_` on Twitter for more updates about xLayers. You also can support us by make a donation on [Open Collective](https://opencollective.com/xlayers)
Composition in concave
Tags: webdev, showdev, javascript, ui
Published: 2019-06-19 20:25:45

---
title: Composition in concave
published: true
description: 
tags: webdev, showdev, javascript, ui
series: concave
cover_image: https://thepracticaldev.s3.amazonaws.com/i/87adqgt2nq7mpktk49kz.jpg
---

*This is a cross-post from my [blog](https://www.matspfeiffer.dev/blog/2019-06-19_composition-in-concave.html).*

Composition of components in [concave](https://github.com/concave-org/concave) is different to other component based frameworks or compilers. In concave you don't compose entire components you just compose render functions which will return HTML.

## Example ##

I have created a simple Todo App to show you some code.

{% codesandbox e5tmc %}

Both imports [list](https://github.com/concave-org/codesandbox-composition/blob/master/src/renderfns/list.js) and [listItem](https://github.com/concave-org/codesandbox-composition/blob/master/src/renderfns/listItem.js) are just functions that return HTML. Arrays will be automatically joined by the [html](https://github.com/concave-org/concave#html) function for less code in your template.

## Pro and contra ##

I created concave to have a simple framework which isn't hiding complex tasks from me. What I want is to have simple and understandable code without "magic". With template composition I can concentrate on how I want to transform data and show it to my users. With other frameworks you have the ability to have e.g. child components and communicate with them, but this is getting more complex with more components you introduce.

On the other side it's harder to isolate common code in components e.g. lazy-loading of data. That's for sure easier with popular frameworks like React. It's not impossible to do it concave - did it on my [portfolio](https://www.matspfeiffer.dev) - but it needs more experience to figure out how things are working in concave. At the end it's just JavaScript!

## Conclusion ##

Components in concave are little bit different to other frameworks when you are familiar with the concept. In concave components are composing render functions and render them with props and state. In my opinion the reusability of render functions is a lot better than entire components because I don't need to think of the internals of this components. If you need component-to-component communication you can dispatch an action and react on that with an [actionReducer](https://github.com/concave-org/concave#component) in another component.

## Links ##

- [concave](https://github.com/concave-org/concave)
Torus , Replit, and GDevelop
Tags: devlog, writeas, replit, gdevelop
Published: 2019-06-21 15:51:36

---
title: Torus , Replit, and GDevelop
published: true
tags: devlog, writeas, replit, gdevelop
canonical_url: https://triptych.writeas.com/torus-replit-and-gdevelop?pk_campaign=rss-feed
---

My life has consisted of working at my day job during Hack Week, working on a browser plugin. Part of the functionality is very similar to this [Torus Demo](https://repl.it/@triptych/triptych-torus-todo) . [Torus](https://github.com/thesephist/torus) is this event driven framework by [@thesephist](https://twitter.com/thesephist). It's pretty cool and has good documentation for such a new project.

At night I'm also getting into [GDevelop](http://gdevelop-app.com) which is kinda like what Godot would be if it was written in React and used Event Sheets. It's free, open source, and works pretty well.

I'm also playing Persona Three Portable, which is simply an amazingly well made game.

![](https://i.snap.as/VilhtLN.jpeg)

If you want to check out the Torus Demo, I embedded it here for convenience.

<iframe style="width:100%; height:600px;" src="https://repl.it/@triptych/triptych-torus-todo?lite=true" allowfullscreen="true"></iframe>

{% replit @triptych/triptych-torus-todo %}
gRPC Advanced Error Handling From Go to PHP
Tags: grpc, go, php, errors
Published: 2019-06-19 18:59:48

The GO community has standardized on using the `status` [package](https://godoc.org/google.golang.org/grpc/status) for sending rich errors in gRPC services back to the client.

This way we can send a status with a `BadRequest` error, and that error message itself could contain many `FieldViolation` errors with information about which field had an error and what the error was.

Those errors are fairly easy to retrieve and use from another GO gRPC client, but in my case I wanted a solution to get that information from a PHP client and there was very little information available.

This shows how to do it:

```php
<?php declare(strict_types=1);

use GPBMetadata\Google\Rpc\ErrorDetails;
use Google\Rpc\Status;
use Google\Rpc\BadRequest;

[$response, $status] = $client->SomeRemoteCall($request)->wait();
if ($status->code !== \Grpc\STATUS_OK) {
    ErrorDetails::initOnce(); // Ensures that the protobuf descriptor is registered

    $details = $status->metadata["grpc-status-details-bin"][0] ?? null; // GO errors / status will be under this key
    if (is_null($details)) {
        throw new HttpException($message, $code, (array) $status);
    }
    $s = new Status();
    $s->mergeFromString($details);
    $errors = [];
    foreach ($s->getDetails() as $anyDetails) {
        $deets = $anyDetails->unpack(); // The details are a repeated Any field.
        $deets->discardUnknownFields(); // Because this was a "Any" field, it has unknown fields such as @type
        if ($deets instanceof BadRequest) {
            foreach ($deets->getFieldViolations() as $fv) {
                $errors[$fv->getField()] = [
                    'message' => $fv->getDescription(),
                ];
            }
        } else {
            $jsonDeets = $deets->serializeToJsonString(); // encode / decode the protobuf to json to get an array
            $errors[$deets->getField()] = json_decode($jsonDeets);
        }
    }

    // Formatted error with main error and a list of cause errors:
    // 'errors' [
    //  'field-name' => 'message describing the error'
    // ]
    $error = [
        'message' => $s->getMessage(),
        'errors' => $errors,
    ];
}

```

The `Status`, `ErrorDetails` and `BadRequest` classes come from the package: `google/common-protos` so be sure to `composer require google/common-protos`
Some of the (slightly) lesser known CSS features
Tags: css
Published: 2019-06-19 18:05:40

The features listed here are from [The State of CSS 2019](https://2019.stateofcss.com/features/).

## Scroll Snap
Scroll snap is just what the name says. It makes the user scrolling "snap" to certain points on the page.
{% codepen https://codepen.io/micahsgilbert/pen/Yopxze %}
More info [here](https://css-tricks.com/practical-css-scroll-snapping/).


## overscroll-behavior
Normally, when an element with a scrollbar is scrolled all the way down or up, then a parent element will begin to scroll as well. `overscroll-behavior` can prevent this by not allowing the parent element to scroll.
{% codepen https://codepen.io/micahsgilbert/pen/qzqXoo %}
(The demo here is somewhat finnicky. You have to be scrolling on an area without text, and stop scrolling when you hit the bottom, then start again.)

More info [here](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)


## will-change
`will-change` is a strange one. It is a way to tell browsers that a property of an element will change. The [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change) states that it should only be used when performance problems are seen, and not in anticipation of a performance issue.
{% codepen https://codepen.io/micahsgilbert/pen/EBNwxL %}
This is probably a useless demo, but it shows that sometimes rapid changes could require a will-change tag.


## @supports
`@supports` is a query that checks if a browser supports a certain feature.
```
@supports (display: grid) {
  /* code here that gives the grid display instructions */
}

@supports not (overscroll-behavior) {
  /* If it doesn't support overscroll-behavior */
}
```

More info [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)


## Writing modes
This is simply used to change the direction of the text in an element. It's an alternative to rotation of a `<p>` tag. 
{% codepen https://codepen.io/micahsgilbert/pen/OebxBp %}
More info [here](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)

## Wrapping up
I hope you learned a new thing or two with some of the newer CSS features that are out there. If there were any I missed or that you want to add, put them in the comments!
Dynamically Add / Remove Component with Animation in React Native
Tags: reactnative, android, ios, javascript
Published: 2019-06-19 18:35:28

---
title: Dynamically Add / Remove Component with Animation in React Native
published: true
description: Dynamically Add / Remove Component with Animation in React Native
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/06/dynamically-add-remove-component-with-animation-in-scrollview-in-react-native.html" >Dynamically Add / Remove Component with Animation in React Native </a>

This tutorial explains how to add and remove component with animation in react native application. In this example we are going to create add and remove functionality inside the scrollview. In order to use these functionalities in side the scrollview, you have to perform below operation :
1. When user click on add button, then it will add new entry inside the scrollview.
2. When user click on delete button, then it remove that particular enter from the scrollview.

<img src="https://1.bp.blogspot.com/-rB8IQYmHhx4/XQYmDZs98XI/AAAAAAAAC_c/UQYUGN6-NU4eKfaayseepfmceM0pUSW-gCLcBGAs/s400/dynamically-add-remove-component-with-animation-in-scrollview-in-react-native.jpg" />


<a href="https://www.skptricks.com/2019/06/dynamically-add-remove-component-with-animation-in-scrollview-in-react-native.html" >Click here to read more... </a>
Why I fork every project I find
Tags: github, git, webdev
Published: 2019-06-19 17:45:55

---
title: Why I fork every project I find
published: true
description: Forking a project on Github is cheap and easy, and will make you a better developer
tags: github, git, webdev
---

When I run across a cool site, or some application that has a [GitHub](https://github.com) repo, I always do the following:

* Star the repo (obviously)
* Find the author(s) --> follow them!
* Fork the repo

This last item might strike you as odd. If I'm not going to contribute to the codebase, why should I fork it? The answer is simple -- finding things later. Let's say you found some great library for doing graphs on the web. You starred the repo, and bookmarked the link. But ... where is it? You search the web and it's lost to time and space. But wait! You forked the repo! You go look in your repos list and boom! You have probably a slightly out of date version of the code right there, with links to the original. Also - on more than one occasion - the original code is "gone". The repo might have been removed, or the user no longer maintains it. You have a copy that you can use forever in your own list of repos. 

So, if you run across a GitHub repo that you even have a passing interest in, always fork it. And ... you never know you might be inspired to contribute back to the code base!
Tips for interviewing at Microsoft?
Tags: anonymous, discuss, help
Published: 2019-06-19 17:15:47

---
title: Tips for interviewing at Microsoft?
published: true
tags: anonymous, discuss, help
---

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment._
Typescript: First thoughts
Tags: typescript, javascript, discuss
Published: 2019-06-19 16:42:32

---
title: Typescript: First thoughts
published: true
description: Jumping into a Typescript project for the first time
tags: typescript, javascript, discuss
---

# Introduction

Typescript is a typed superset of Javascript. Because it is a _superset_, any valid Javascript is therefore valid Typescript. Typescript aims to produce more secure Javscript code thanks to type-checking, interfaces, generics...

Typescript has gained a lot of popularity lately. In the last [State of Javascript survey](https://2018.stateofjs.com/javascript-flavors/typescript), the percentage of users claiming that they used Typescript and would use it again went from 20.6% in 2016 to 46.7% in 2018.

Personally, I've heard about Typescript, but never took the time to learn it. It was only a matter of time before I ended up working on a project already using Typescript. And the time has come...

_Note: The following thoughts are only personal feelings. My experience with Typescript is limited. I will be glad to receive feedbacks from more experienced Typescript users :wink:_

# Collection of thoughts

## A different mindset?

After spending some time with Typescript, I felt that my approach had to be slighlty different from vanilla Javascript. I suddenly had to think about which types my variables were going to be.

I'll admit that certain questions rarely popped into my head before. _Is this variable going to ALWAYS be a string?_ _What type is this function going to return?_...

Having to think about these things requires a little bit more preparation before I write my code, and different mindset.

## Self-documentation

Code written is Typescript feels more documented, and once I got used to the syntax and knew what I was reading, I felt more confortable with the code other people wrote.

Obviously, this is highly dependent on the developer's efforts. You can write proper garbage with Typescript or elegant readable poetry with vanilla Javascript.

# Conclusion

I'm honestly still conflicted about the utility of Typescript. I'm liking what I see so far, but I'll need to experiment more to have a clear opinion.

I'd love to have feedbacks from Typescript users.

- How was your experience transitioning from vanilla Javascript?
- Did you notice better quality in the code?
- How did Typescript change the development type?
- Do you notice a difference between using Typescript in small teams and bigger teams?

Happy coding :blush:
Save Assembled Word Processing, Presentation, Spreadsheet and Email Documents as HTML
Tags: net, java, documentautomation, groupdocs
Published: 2019-06-19 16:28:12

---
title: Save Assembled Word Processing, Presentation, Spreadsheet and Email Documents as HTML
published: true
description: post
tags: #net #java #document automation #groupdocs
---

Imagine a scenario where you have some Word documents created in MS Word and you want to display them in your web application. So how would you view the content of the file? A suitable and easy solution is if you could get the HTML form of the Word document then it can be viewed in the web browser within your application. Isn’t it great when you could view the documents without having installed some Office viewer? Let’s now find out how did we make use of HTML format in making GroupDocs.Assembly more powerful and useful for you.

Since version 19.5, the assembled Word Processing documents, Spreadsheets, Presentations, and Email files could be saved as HTML with external resources. This means that the generated reports can now be saved as HTML files along with the resources such as images and, as I have mentioned before, you would be able to embed and view the content of the generated reports within your web application. Read more – https://bit.ly/2WRtqqc
Moving beyond //TODO
Tags: learn, ask, todo
Published: 2019-06-19 16:13:58

---
title: Moving beyond //TODO
published: true
description: Two custom task tags I use for personnel growth. Your mileage may vary
tags: LEARN, ASK, TODO
---
We've all seen the //TODO tag. Tags like //TODO and //FIXME are so useful that IDEs will often highlight them and in some cases will add them to generated code, like Eclipse in "surround with Try Catch" It's one of those things that help you do what you need to do. 

Why don't we expand the use of tags to not just help us with a section of code we're working on and have tags that help us become better developers?  This was the idea I had as a junior developer and I think they helped me a lot.

The two tags I came up with are //LEARN and //ASK.

The first time I saw the '?' operator in code like max = (a > b) ? a : b; I made note to //LEARN how this works. Its one of those things that you don't need (and in the case of ? maybe makes things slightly more complicated). //LEARN has helped me to continuously grow. After all you don't need ? just like you don't need to know the For Each loop. You can stick with a for loop and get to the same result, just like you do not need to know contractions but once you do they make you're life easier.

//ASK is similar. When you see code and you want to know "why was it done like this?" or "how does this section work?". 

Both of these markers can be searched for during a code review and/or easily searched for and deleted. Also depending on the IDE can be customized to show up differently than //TODO,
How I test JavaScript-heavy Rails applications
Tags: ruby, rails, testing, javascript
Published: 2019-06-19 15:57:06

A common question I get is how to test JavaScript in Rails applications. My approach is almost radically simple and unsophisticated.

## My Rails + JavaScript testing approach

I think of the fact that the application uses JavaScript like an inconsequential and irrelevant implementation detail. I test JavaScript-heavy applications using just [RSpec + Capybara integration tests](https://www.codewithjason.com/rails-integration-tests-rspec-capybara/), the same exact way I'd test an application that has very little JavaScript or no JavaScript at all. I don't really have anything more to say about it since I literally don't do anything different from my regular RSpec + Capybara tests.

## Single-page applications

What about single-page applications? I still use the same approach. When I used to build Angular + Rails SPAs, I would add a `before(:all)` RSpec hook that would kick off a build of my Angular application before the test suite ran. After that point my RSpec + Capybara tests could interact with my SPA just as easily as if the application were a "traditional" Rails application.

_Side note: traditional Rails applications are fine. Using Rails with React/Vue/Angular/etc. isn't "modern" and using Rails without any of those isn't "outdated". For most regular old boring business applications, Rails by itself without a front-end framework is not only a sufficient approach but a superior approach to an SPA because the complexity of development with plain Rails and only "JavaScript sprinkles" tends to be far lower than Rails with a JavaScript framework._

## Testing JavaScript directly

Despite my typical approach of treating JavaScript as a detail, there are times when I want to have a little tighter control and test my JavaScript directly. In those cases I use Jasmine to test my JavaScript. But it's my goal to use such little JavaScript that I never get above that threshold of complexity where I feel the need to test my JavaScript directly with Jasmine. I've found that if I really try, I can get away with very little JavaScript in most applications without sacrificing any UI richness.