teleren/devto huggingface dataset:
CSS Battle #6 - Missing Slice
Tags: html, css, webdev, tutorial
Published: 2019-06-26 08:56:09

Now that I am a Frontend Developer™, I visit [Berlin.JS][1]. Last time I was there, Cassie Evans gave a wonderful talk on animations using SVG.

{% twitter 1142050104569999362 %}

So I thought to myself, "why not?" Apart from that, Cassie told me to use SVG, because _divs were never meant to be used for drawing_, SVG was. Besides that, you still need to _style_ SVG.
Not that fast. CSS Battle doesn't allow SVGs.
Sad.
Let's solve [number six][2] the usual way.

## 1. Padding

Three divs, squeezed together to avoid a hack like `font-size: 0`, are placed in the middle of the content using paddings. Inline-blocking does the trick. We could as well used margins (that's actually how I did initially), but this time we will not.

```css
<div id="a"></div><div id="b"></div><div id="c">
</div>
<style>
  body {
    padding: 42px 92px;
    background: #E3516E;
  }
  div {
    width: 100px;
    height: 100px;
    display: inline-block;
  }
  #a {
    background: #51B5A9;
    border-radius: 100px 0 0;
  }
  #b {
    background: #FADE8B;
    border-radius: 0 100px 0 0;
  }
  #c {
    background: #F7F3D7;
    border-radius: 0 0 0 100px;
  }
</style>
```

## 2. Transformations

But do we really need that much HTML markup? After all, this is CSS Battle. So, let's at least try to reduce the character count. We know, that a `div` can have a border radius to make it round. We also know that we can selectively modify each of the border sides. And that the border will replicate the side shape. So, we can make a circle, with four different colored borders. But the circle itself, we actually don't need it. What if we don't define it? So, a division of no height or width. This might work.
If you tried to that, you may notice, that the colors are not exactly turned the way we'd need. Well, here is where `transform: rotate(45deg)` comes in play. I just looked at [possible units for rotation][3], just in case we win some more characters: `deg`, `rad`, `grad` and `turn`. But we don't.
When it comes to the border colors, your eyes might stumble upon something odd.
`#0000`, what art thou?
Initially, I wanted to make that part transparent. `rgba(0, 0, 0, 0)` is the solution. 16 freaking characters! Can't we do better? Sure, try `transparent`. It also works. But still long though. What about #00000000, where that `00` stands for `opacity: 0`? Much nicer! But it turns out that [4 character RGBA is supported too][4]!

```css
<div></div>
<style>
* {
  background: #E3516E;
}

div {
  margin: 50px 92px;
  border-radius: 100px;
  border: 100px solid;
  border-color: #FADE8B #0000 #F7F3D7 #51B5A9;
  transform: rotate(45deg);
}
</style>
```

This is the first post, where I try to reduce the number of characters. Do not try to do this at home!
Anyways, which one of these solutions would you prefer? Do you know any others?

[1]: https://berlinjs.org/
[2]: https://cssbattle.dev/play/6
[3]: https://developer.mozilla.org/en-US/docs/Web/CSS/angle
[3]: https://stackoverflow.com/a/27802062
Production Doesn't Have to Be a Big Deal
Tags: webdev, devops, django
Published: 2019-06-26 08:50:02

---
title: Production Doesn't Have to Be a Big Deal
published: true
description: Production is where your app is used by users for the purpose it was built for. That's it.
tags: webdev, devops, django
---

Deploying to production for the first time can feel completely overwhelming.

You're leaving behind the cozy comfort of your development environment, and are sending your little web app off into the unknown. And then there's that nagging feeling that you're missing something very important.

After all, production is that special place, where everything needs to be perfect. You have to do everything **the right way** or else.

...

I don't think that production has to be a big deal. Let's see if it looks less scary once we shine a bright light on it.

## Production isn't magical

Production is where your app is used by users for the purpose it was built for. That's really it.

Does your app contribute to getting business done? Congratulations, you're in production.

## Where is the mystery?

"Production" as a term is completely stuffed with unspoken assumptions and poorly defined requirements.

There is no one-size fits all.

Production is slightly different for everybody. Some people need their app to scale, other need it to be highly available. Their requirements are not necessarily yours.

Production is about serving your users well and helping them get their work done. It's also about making life easier for the people who develop the app and those who keep it running.

You have to work out **your own** goals, based on what you really need.

## What DO you need?

There's a huge difference between doing the bare minimum and doing a great job. Once your users can use your app at all, you are in production. Now it's time to see how you can make everybody's life better, step by step.

The definition of "a great job" is entirely up to you, and not up to what other people think "production" should mean.

What risks can you live with, and what requirements are really important? What can you do to make sure:

* Your app is secure
* Your users can reach your app when they need it
* Your users can rely on your app
* Your users' data is safe
* You can deploy updates
* You can investigate issues
* You can perform routine maintenance
* You can have peace of mind

All of those requirements aren't fixed. There are different answers for different people and projects. It's about your users and you.

Decide on what's important for you right now. See what you can do to make your current setup better.

## Production doesn't need to be a big deal

It's there to serve your users. It should not feel like an endlessly tedious chore for you. Start with the bare minimum, and improve the parts which you actually need. That's really all there is to it.

--

Originally published on [vsupalov.com](https://vsupalov.com/production-no-big-deal/)
How should i start with ASP.NET core and what are the best documents and/or websites to follow?
Tags: dotnetcore, webdev, api, csharp
Published: 2019-06-26 08:47:19

Hi, I am newbie to web development. My boss wants me to build a web api in ASP.NET core to fetch trading data and later on to use it on different trading algorithms. I am asking for guidelines from where should i start and which documents to follow (the official documents on ASP.NET core are a little bit outdated!).
Data Access Components from Devart Now Support Lazarus 2.0.2
Tags: database, mysql, sql, postgres
Published: 2019-06-26 08:29:20

---
title: Data Access Components from Devart Now Support Lazarus 2.0.2
published: true
description: The new release of Delphi Data Access Components by Devart brings numerous updates. One of them is the long-awaited support for Lazarus 2.0.2. 
tags: database, mysql, sql, postgresql
---

The new release of Delphi Data Access Components by Devart brings numerous updates. One of them is the long-awaited support for Lazarus 2.0.2. 

![Delphi Data Access Components](https://i.ibb.co/3fGndzj/DAC.png) 

Devart, a recognized vendor of database management software, announced a new release of its DAC components. The renewed tools support Lazarus 2.0.2 and have improved performance of the SaveToFile/LoadFromFile methods of TVirtualTable, as well as a range of other important updates.

**These are the changes that merit special attention:**
-- Support for a free cross-platform IDE Lazarus 2.0.2; 
-- Implementation of the DefaultSortType property for the entire product line;
-- Improved performance of  the SaveToFile/LoadFromFile methods of TVirtualTable;
-- URL-style connection string format and local connection with IBDAC 6.4; 
-- PgDAC 5.4. introduces function calls in batch operations;
-- In SDAC 8.3, multiple threads can now share a single connection;
-- The Direct Mode in LiteDAC 3.5 has been upgraded to version 3.27.2 of the SQLite engine. 

Data Access Components allow developing multi-platform applications in Delphi, C++Builder, Lazarus (and FreePascal) on Windows, Linux, macOS, iOS, and Android, for both 32-bit and 64-bit platform. These tools provide direct access to popular databases such as Oracle, Microsoft SQL Server, MySQL, InterBase, Firebird, PostgreSQL, SQLite.

For a complete list of updates in this release, please visit the official [DAC page](https://www.devart.com/dac.html).


**About Devart**

Devart is one of the leading developers of database tools and administration software, ALM solutions, data providers for various database servers, data integration and backup solutions. The company also implements Web and Mobile development projects.
For additional information about Devart, visit https://www.devart.com/
Deploy Angular 9|8 App to Firebase
Tags: angular, angular98, angularfirebase, deployangular
Published: 2020-02-01 18:15:48

---
title: Deploy Angular 9|8 App to Firebase
published: true
tags: Angular , Angular 9|8, Angular Firebase , Deploy Angular
canonical_url: https://www.positronx.io/deploy-angular-8-app-to-firebase/
---

The post [Deploy Angular 8 App to Firebase](https://www.positronx.io/deploy-angular-8-app-to-firebase/) appeared first on [positronX.io](https://www.positronx.io).

In this Angular 8 Firebase tutorial, we will find out how to **deploy an Angular 8 app to Firebase cloud hosting** in less than 5 minutes. Deploying an Angular app to Firebase is very easy, and it doesn’t take too much time. Firebase offers a free plan to host your basic app to their server, and the best thing is that it doesn’t require any card. 

Before you **deploy to Firebase** , check out below what firebase free plan offers to you.


[Click here to read more](https://www.positronx.io/deploy-angular-8-app-to-firebase/)
How can I practice best? What are some challenges similar to HackerEarth Circuits? 
Published: 2019-06-26 08:12:31

Hi all,

I have recently learnt to code and I am looking for good competitive challenges (not ACM ICPC level) to practice my skills. I have been loyal to HackerEarth Circuits for a while now but it happens only once a month and I don't find it to be enough practice. Any and all advice is welcome.
CakePHP 3.x based multi-role dashboard back-end template aka Cristeena 
Tags: showdev, php, cakephp, backenddashboard
Published: 2019-06-26 08:12:20

---
title: CakePHP 3.x based multi-role dashboard back-end template aka Cristeena 
published: true
description: CakePHP base backend for the multi-role management with require JS.
tags: showdev, PHP, CakePHP, Backend Dashboard
---
Cristeen will save you from days trouble for initiating a new project. It comes with all the required features you need to initiate a project in CakePHP 3.x.

## Roles

It is a skeleton for creating back end applications with CakePHP 3.x. with basic user module for 3 different roles mentioned as below
1. Director (super admin)
2. Admin
3. User

## Hierarchy 

All of the above roles have separate Dashboard. The user part of the system has a room for integrating a front end of your own choice.

While developing this, the hierarchy has also been kept in mind, like a director can perform an action on both Admins and Users but Admins can only perform actions on Users.

## Speed

I have used RequireJS for loading all the JS in the system which reduces the HTTP request at the time of page load making the system super fast. Moreover, the system is using CakePHP ORM for database interactions making it more and more speedy.

## Support

All the issues opened are welcome and would be taken seriously. I will be more than happy to have collaborators in this for the mutual benefit of all.

## Documentation.

You can find the detailed [documentation of the project here.](https://codebysamgan.com/cristeena-documetation/)

## Git

Here is the [Repository Link](https://github.com/samgan-khan/cristeena)

happy coding.

samgan
I created a Twitter Thread Generator !
Tags: showdev, webdev, opensource
Published: 2019-06-26 05:59:04

Chris here with another weird idea I had to implement last night at 1 A.M. 👋   

{% twitter 1143759250126180352 %}

[Project Link](https://christopherkade.com/twitter-thread-generator/)

[Github Link](https://github.com/christopherkade/twitter-thread-generator)


In case you missed them, here are some other projects I've introduced lately:

{% link https://dev.to/christopherkade/introducing-a-banner-generator-for-your-articles-on-dev-353a %}
{% link https://dev.to/christopherkade/i-created-a-gitignore-command-line-generator-4b0h %}

If you want a heads up on my next projects, or just want to chat about the web, make sure to follow me [@christo_kade](http://twitter.com/christo_kade)

And as always,  
Tweet with caution & respect 💙
Visualize responsive breakpoint with TailwindCSS
Tags: tailwindcss
Published: 2019-06-26 05:12:44

---
title: Visualize responsive breakpoint with TailwindCSS
published: true
description: 
tags: tailwindcss
---


When I was writing a responsive template using TailwindCSS, I felt that it is not easy to know which breakpoint is active.

So I made a simple component that visualizes which breakpoint is active. The following snippet is the implementation of the component:

```html
<div class="fixed top-0 right-0 m-8 p-3 text-xs font-mono text-white h-6 w-6 rounded-full flex items-center justify-center bg-gray-700 sm:bg-pink-500 md:bg-orange-500 lg:bg-green-500 xl:bg-blue-500">
  <div class="block  sm:hidden md:hidden lg:hidden xl:hidden">al</div>
  <div class="hidden sm:block  md:hidden lg:hidden xl:hidden">sm</div>
  <div class="hidden sm:hidden md:block  lg:hidden xl:hidden">md</div>
  <div class="hidden sm:hidden md:hidden lg:block  xl:hidden">lg</div>
  <div class="hidden sm:hidden md:hidden lg:hidden xl:block">xl</div>
</div>
```

Copying this and pasting to your TailwindCSS template, you will see the indicator of the breakpoint on top right in your browser.

![](https://thepracticaldev.s3.amazonaws.com/i/fxc318jvx7c9ra3eigj6.gif)


Also, you can check the live demo at CodePen.

<p class="codepen" data-height="468" data-theme-id="dark" data-default-tab="result" data-user="suin" data-slug-hash="PrKVOa" style="height: 468px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Tailwind CSS Responsive Active Breakpoint Indicator">
  <span>See the Pen <a href="https://codepen.io/suin/pen/PrKVOa/">
  Tailwind CSS Responsive Active Breakpoint Indicator</a> by suin (<a href="https://codepen.io/suin">@suin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Manual error handling
Tags: go, programming, monad
Published: 2019-06-26 04:48:46

---
title: Manual error handling
published: true
description: Manual error handling
tags: Go, programming, monad
---

A common problem of Object oriented languages is the overuse of Exception. You never know which exceptions can be thrown and the error handling is super hard. How many times we see catch blocks that catch everything (Exception or Throwable) and do nothing specific ?

How Go solves this problem?

Go solves this problem having no Exception. However it has it's own problems because of that. Let's see a piece of code that is very error prone 

Please read the full post here:

[Thiago cafe: Having fun in life!](http://thiagocafe.com/view/20190614_go_errors_handling)
React Native dynamically Add View Component on Button Click with Animation
Tags: reactnative, android, ios, javascript
Published: 2019-06-26 04:14:14

---
title: React Native dynamically Add View Component on Button Click with Animation
published: true
description: React Native dynamically Add View Component on Button Click with Animation
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/06/react-native-dynamically-add-view-component-on-button-click-with-animation.html" >React Native dynamically Add View Component on Button Click with Animation </a>

This tutorial explains how to create dynamically add view component with animation in scrollview on button click in react native application. In our last post we have discussed on Dynamically Add / Remove Component With Animation In React Native, so there we are going to  create similar animation effect with add operation, when user clicks on add button present in bottom of the mobile device screen. please do let us know your comments in comment box below for any suggestion, issues etc.

<img src="https://1.bp.blogspot.com/-IFx5fOZqcPQ/XQhtT8P8mMI/AAAAAAAADA4/_Y0mw4NlJkcLJCQ9fvQ2Oop51swRxXe_ACLcBGAs/s400/react-native-dynamically-add-view-component-on-button-click-with-animation.jpg" />

<a href="https://www.skptricks.com/2019/06/react-native-dynamically-add-view-component-on-button-click-with-animation.html" > Click here to read more...</a>
Know your brackets in JavaScript
Tags: javascript
Published: 2019-06-26 04:13:37

Basic syntax in JavaScript for defining and calling functions is:

```js
function foo() {return '🙀'}; foo(); 
// "🙀"
```

With the new [ES6 fat arrow syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) you can also store the function in a variable and then call it in the same way as before:

```js
foo = () => {return '🙀'}; foo();
// "🙀"
```

Arrow functions have an option of [concise body](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Function_body) which have implicit return. You just omit the curly braces and the return statement:

```js
foo = () => '🙀'; foo();
// "🙀"
```

So what if we want to return a hash in a concise body? My first guess would be:

```js
foo = () => {cat: '🙀'}; foo();
// undefined
```

Does not work. Why? Turns out JavaScript has a concept of [labels](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). So `cat` is the _label_ in this code.

To make an **implicit return** of a **hash**, one has to wrap the hash in parentheses:

```js
foo = () => ({cat: '🙀'}); foo();
// {cat: "🙀"}
```

And now if we want to call the function directly, without storing it anywhere, we will have to wrap the whole function definition in parentheses again:

```js
(() => ({cat: '🙀'}))();
// {cat: "🙀"}
```

We might also want to fetch the value of the `cat` key directly. ES6 has a nice [destructuring assignment syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) for that:

```js
let {cat} = (() => ({cat: '🙀'}))(); cat
// "🙀"
```

### Credits

- Stock photo by [Mikhail Vasilyev](https://unsplash.com/@miklevasilyev)
React Native dynamically Toggle between Grid View and List View
Tags: reactnative, android, ios, javascript
Published: 2019-06-26 04:11:42

---
title: React Native dynamically Toggle between Grid View and List View
published: true
description: React Native dynamically Toggle between Grid View and List View
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/06/react-native-dynamically-toggle-between-grid-and-list-view.html" >React Native dynamically Toggle between Grid View and List View </a>

This tutorial explains how to create dynamically toggle between grid view and list view using FlatList component in react native application. This feature enhances the user experience for end user and allows developer to create attractive designs. I think you may have been seen this kind of toggle switching effect in mobile or web based application specially in retail and shopping application. In this example we are going to create toggle switching between grid and list view in react native app.

<img src="https://1.bp.blogspot.com/-J5r-kiCtQOs/XQfF-2TtwpI/AAAAAAAADAA/K1UD7jXt46sLFdZ9nGa2FQLVtguJBKWZACLcBGAs/s400/react-native-dynamically-toggle-between-grid-and-list-view.jpg" />

<a href="https://www.skptricks.com/2019/06/react-native-dynamically-toggle-between-grid-and-list-view.html" > Click here to read more...</a>
React Native Open Web Page in App Using WebView
Tags: reactnative, android, ios, javascript
Published: 2019-06-26 04:08:54

---
title: React Native Open Web Page in App Using WebView
published: true
description: React Native Open Web Page in App Using WebView
tags: #reactnative #android #ios #js
---

Source : <a href="https://www.skptricks.com/2019/06/react-native-open-web-page-in-app-using-webview.html" >React Native Open Web Page in App Using WebView </a>

React Native WebView is a component which is used to load web content or web page. The WebView component imports form core react-native library. Now, it is replaced from the built-in core react-native, and placed in react-native-webview library. WebView is the common component used in both android & iOS applications in react native to Open – Embed online website webpage using custom HTTP URL. Developer can modify the WebView settings according to their requirement. In this example we are going to display and open HTTP URL content in webview component in react native application.

<img src="https://1.bp.blogspot.com/-r3N7BaRbywQ/XQaCZ6JOrxI/AAAAAAAAC_0/w0t88PBZ3jEGQ7_Q3gzwzOiy0IsSdagUwCLcBGAs/s400/react-native-open-web-page-in-app-using-webview.jpg" />

<a href="https://www.skptricks.com/2019/06/react-native-open-web-page-in-app-using-webview.html" > Click here to read more... </a>
6 Tools I always install on Windows
Tags: productivity, tools, windows
Published: 2019-06-26 02:58:48

I'm posting this because got a comment from @tetri lol

To be honest, I'm not really using a Windows machine. Sometimes use it.

If you know anything useful, please tell me!!!

### 1. Visual Studio Code
I tried some editors/IDE for Windows. Eventually, reached vscode. 

https://code.visualstudio.com/download

### 2. Cmder

Windows machine has Command prompt, but it doesn't allow me to use basic linux/unix commands, so don't use it.

https://cmder.net/


### 3. Visual Studio

I don't write c# and use .NET, but I need Visual Studio for openFrameworks and build codes.

https://visualstudio.microsoft.com/


### 4. VirtualBox

Generally, I don't like to click buttons, so just avoid clicking many times.

https://www.virtualbox.org/


### 5. 7-Zip
A thing I always wish if Mac has this since `7z` can save my storage.

https://www.7-zip.org/

### 6. CCleaner

To keep clean my machine as much as possible, but not really sure that this software really helps to do that lol. However, I used to f*** up registry keys and had a tough time. So avoid touching them lol.

https://www.ccleaner.com/

### Other

I don't know still alive or not.
Winamp is the only thing I miss Windows machine.
https://en.wikipedia.org/wiki/Winamp

Things need a GPU
Unity
Software for devices (zed camera etc)