teleren/devto huggingface dataset:
Improve accessibility with prefers-reduced-motion
Tags: a11y, css, webdev
Published: 2019-10-28 12:42:35

---
title: Improve accessibility with prefers-reduced-motion
published: true
description: 
tags: #a11y #css #webdev
cover_image: https://user-images.githubusercontent.com/17259420/67679023-1f59e700-f956-11e9-83ee-e4058cded98f.png
---

*Making our sites or apps accessible is a major responsibility for all of us developers. Many of us know about adding descriptive alt tags to images or choosing the appropriate color contrast for text with a background, however there are a few out there you may not know about including prefers-reduced-motion.*


One of the biggest joys in front-end development is getting the opportunity to implement really cool animations. Many hours can be spent working alongside designers tweaking a cubic-bezier to make that fade out scrolling animation just right. A well thought out animation can take your site from something simple and bland to lively and interactive. However, not every user enjoys them. Some might be very sensitive to too much motion causing them to feel ill. Fortunately it's become trivial to help these users out by adding a simple CSS property, `prefers-reduced-motion`.

# What it does

`Prefers-reduced-motion` attempts to stop any non essential animations from being triggered when a user specifies so. For example, any fading or sliding animations that are triggered when a user scrolls for an interactive feel, but not essential to the actual site should be left out at the user's request. 

# How to work with it.

Nearly all of us web developers have used media queries in some fashion or another and `prefers-reduced-motion` is as simple to implement as a media query. 

```css
.myAnimation {
   animation: 3s infinite alternate bounce;
}

@media (prefers-reduced-motion: reduce) {
  .myAnimation {
     animation: none;
  }
}
```

That's it to disable any animations you feel aren't essential to the user experience, giving relief to those who may be susceptible to motions. What is essential is left up to you and the designer. Animations that give users feedback like button clicks or successful form submissions would probably be considered essential, but most could be considered unessential. We can also slow animations down or decrease their frequency instead of disabling them all together.

### Browser Support

In terms of [browser support](https://caniuse.com/#search=prefers-reduced-motion), the latest two versions of Chrome, Firefox and Safari all support `prefers-reduced-motion`. The latest Edge also supports it, however IE11 doesn't.
How does Dev internally catch posts that violate TOS?
Tags: meta
Published: 2019-10-28 12:40:26

---
title: How does Dev internally catch posts that violate TOS?
published: true
description: Question on how posts that violate TOS are caught by the internal team
tags: meta
---

This weekend I was endlessly scrolling through the main feed and saw some content that was violating TOS. Some was promoting things like vacations, or posts linking to sites with sexual content. I used the `report abuse` feature to report them, but given the traffic of the site, I am curious if the team has other avenues or tools to catch these types of posts and take them down?
Getting started with iOS: Cocoapods Integration
Tags: ios, cocoapods, tutorial, swift
Published: 2019-10-28 12:40:15

Hey everyone!

We are excited to present you [Thracecode](https://www.thracecode.com/)- friends of ours who use Parse and SashiDo :)

Below you will find the video that Sami, their Co-Founder, and Lead Developer made about iOS integration with cocoapods.

In the video, Sami will show you how to integrate Parse SDK using Cocoapods and how to create your first table on Sashido with Swift 3.

Sami loves playing drums and is a vivid traveler.

[Thracecode](https://www.thracecode.com/) is a full-service mobile app and development company based in New York and Sofia. They turn costumers' ideas into wireframes, designs, and prototypes.

Their main focus is building native IOS and Android apps and deploying them to the App Store.

So without further ado, here is the [video](https://www.youtube.com/embed/B52JCKHCUQs).


If you are interested in making such videos as well, contact us at [hello@sashido.io](mailto:hello@sashido.io) for more information :)

Best,
SashiDo.Io Team
What are some good ways to communicate among micro-frontend applications?
Tags: discuss, architecture, javascript
Published: 2019-10-28 12:38:23



I'm currently doing some research on the viability of having a micro-frontend based architecture for a set of different frontend applications, and came across this tool for making the base application which houses other micro-apps: https://single-spa.js.org/

However, seeing some examples got me wondering what are some ways to structure the application so that the micro-apps can communicate among themselves and also with their parent/container app?

Would love to see some options and discussions for this data-sharing problem :)
For polish frontend devs
Published: 2019-10-28 12:22:15

Po całym tym <a href="https://www.rafalszrajnert.pl/">coaching</a>ujawnieniu kobiety widzące się identyfikują się ze słabszą płcią. Niektórzy uważają, że mężczyźni decydują o własnej wartości. Nadmierna ekspozycja kobiet jako obiektów seksualnych spowodowała przypadki napaści fizycznej i gwałtów. Większość <a href="https://uniqueseo.pl/">pozycjonowanie</a> kobiet wybiera niewłaściwy sposób, aby zdobyć te figurki, które powodują choroby, czasem prowadzące do śmierci. A większość z tego wynika z <a href="https://fitaktiv.pl/">trener personalny</a> reklam, które codziennie wlewają się w życie niewinnych ludzi. Należy budować etykę marketingową, aby podnieść status kobiety w społeczeństwie i dać jej należyty szacunek, ale nie degradować jej.
What happened to Graphical GUI Builders? - Help me understand - (They are still here, I guess)
Tags: discuss, webdev, javascript, frontend
Published: 2019-10-28 11:14:58

---
title: What happened to Graphical GUI Builders? - Help me understand - (They are still here, I guess)
published: true
description: GUI Builders like the one for Swing in Java, were all the rage, what happened to them.
tags: discuss, webdev, javascript, frontend
cover_image: https://thepracticaldev.s3.amazonaws.com/i/mbzonkdsy35tvmlwkt9m.png
---

I am still in college and our syllabus is ancient. They forced us to make a mini-project using Java Swing and PostGreSQL last week. I did create an expense tracker app!

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/pzcvvzx7nf6w5l6i75o2.png)


I was using Swing and used Netbeans's GUI Builder to create the Frames and Windows. It was surprising how easy it was to create things with it. 

Then I wondered, why did we stop using GUI Builder to create Apps, I mean yes, there is BootStrap Studio, but that's just it. I don't see anything like that being used in the mainstream, to build frontend web apps, why is that? 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mbzonkdsy35tvmlwkt9m.png)

### Questions

Is the frontend so complicated that we have given up all hope of drag and drop editors? 

Is this no longer possible?

Is this more time-consuming?

Have we gone backtracked and decided that it is easier to do things through code, instead of a GUI? We have been on this route before, correct?

I would love to know your thoughts!


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jzz10i4mittrapuqdvtj.jpg)

_Update - Before I published the post here, I sent a copy of it to my beloved [CodingBlocks Slack Channel](https://www.codingblocks.net/slack/), these were some of the responses that I got. What do you think?_

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/cw3kxv3mhgfam6j3jolh.png)


![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z7rr8ydkp69tb15kep1h.png)

Needless to say, if you aren't already there, you need to be! Join here - [CodingBlocks Slack Channel](https://www.codingblocks.net/slack/)

Also, do check out the [Coding Blocks Podcast](https://www.codingblocks.net/) while you are at it.
50 in Chemistry Ions 
Tags: replit, python
Published: 2019-10-28 11:08:06

There's 50 questions
For each correct answers +1
For each incorrect answers -1

Instructions :
1. No need to clarify in subscript 
2. No need to state bracket
3. Please do not edit the code or it will not work
4. Please press the green run button to start
5. Try your best

Good Luck XD


{% replit @CheungMichael/Chemistry-Fun-Game %}
SEO Agentur
Tags: seo, seoagentur, germany, suchmaschinenoptimierung
Published: 2019-10-28 10:56:31

Von Suchmaschinenoptimierung (SEO Optimierung) über Suchmaschinenmarketing bis hin zu Online Reputation Management und Social Media: Können wir alles - und machen wir auch! Wir sind einer der marktführenden Anbieter für Homepageoptimierung und konnten schon bei mehreren tausend Web-Projekten zeigen, dass wir für den Erfolg unserer Kunden Berge versetzen. Wir brennen für Online Marketing und sind offizieller Google Premium Partner. Als <a href="https://www.sumax.de/seo-agentur.html">SEO Agentur</a> sorgen wir mit Engagement, Erfahrung und Expertise dafür, dass die Online-Präsenz Ihrer Webseite langfristig gesteigert wird.
How to build OpenJDK from source
Tags: java
Published: 2019-10-28 10:51:02

---
title: How to build OpenJDK from source
published: true
description: We look into how to download and build OpenJDK 13 from source. We talk about dependencies and commands for Linux and Windows.
tags: java
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vcywjqc6j1qna0q01b3p.jpg
---

{% youtube gaE0xkRqByc %}

We look into how to download and build OpenJDK 13 from source. We talk about dependencies and commands for Linux and Windows.
I made Listly: All your lists in one place!
Tags: showdev, webdev, javascript, react
Published: 2019-10-28 10:43:09

This past weekend I challenged myself to make something in under 24 hours. So, I ended up making [Listly](http://listly.surge.sh). It is a productivity tool for storing lists of all kinds (Todo Lists, Groceries, Bucket List etc.). Initially I wasn't impressed with the idea but still implemented it as I didn't have any other idea anyways. But it turns out that making lists actually helps in decluttering the mind and is really fun! Anyways on to the stack.

## The Stack

- Front End:
  1. [React](https://reactjs.org)
  2. [Redux](https://redux.js.org)
  3. [Semantic UI](https://semantic-ui.com)
  4. [Sass](https://sass-lang.com)

- Backend:
  1. [Firebase](https://firebase.google.com) (Authentication and Database)
  2. [Surge](https://surge.sh) (Hosting)

I have to admit, that this was the first time I used all these tools together and deployed. It was a tiring yet satisfying experience. I'd like to hear your thoughts on this little project of mine!
[Listly](http://listly.surge.sh)

In case you are curious here's the [source code](https://github.com/godcrampy/Listly).

> Thank you for reading and have a nice day! 🤗
A simple animated timer implementing react-native-reanimated and react-native-svg libraries.
Tags: showdev, reactnative, npm
Published: 2019-10-28 09:31:42


# react-native-animated-timer     ⏰

A simple animated timer implementing [react-native-reanimated](https://github.com/kmagiera/react-native-reanimated) and [react-native-svg](https://github.com/react-native-community/react-native-svg) libraries.
 

![1](https://thepracticaldev.s3.amazonaws.com/i/xbxn60mtndm98bqrrqsv.gif)
![2](https://thepracticaldev.s3.amazonaws.com/i/s2quvrctqbnx933ha043.gif)
![3](https://thepracticaldev.s3.amazonaws.com/i/lqnfcqkn186vfox7g0j8.gif)
![4](https://thepracticaldev.s3.amazonaws.com/i/yj1t83n668yxxmw9xetv.gif)


## Usage

    `import {Timer} from  'react-native-animated-timer';
    
    <Timer
	    radius={350}
	    time={10000}
	    checkPoints={[{time: 1210.23, callback: () => alert('First Check Point')},
	    	        {time: 5310, callback: () => alert('Second Check Point')}]}
	    backgrounds={['blue', 'red', 'http://myimage.com/img1.png']}
	    showTime={true}
	    onTimeFinished={() => alert('AnimatedTimer has finished')}
	    loop={true}
	    pause={pauseFlag}
	    textStyle={{
	    	color:  'red',
	    	fontWeight:  'bold',
	    }}
	    showMilli={2}
    />`


## Full Documenation
https://github.com/dalisalvador/react-native-animated-timer
EPIC-UI framework grid system (help)
Tags: css, contributorswanted, javascript
Published: 2019-10-28 09:14:05

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u9gdr7cmpj5b3a6vvkfj.JPG)
# EPIC-UI

http://ui.epicweb.bg

Hello everyone friends and I are developing css framework but we need help with the grid system. Can someone lend us a hand ?

This is the full explanation of the grid system and how it should work.
https://github.com/epicbg/epic-ui/issues/30
I think you will like the idea because it will solve alot of problems frontenders have, like more breakpoints between MD and SM or between SM and XS, multiple containers with multiple sizes and customizable breakpoints through css variables. 
That's just the idea, we've got no code at all because we finished the documentation of the grid yesterday.
If someone wants to help and has more questions, send us your email to zhoraygevorgyan@epicweb.bg so we add you to team's slack.
Proxy requests to an onion service using TorProxy and Caddy
Tags: tor, caddy, go
Published: 2019-10-28 08:54:13

---
title: Proxy requests to an onion service using TorProxy and Caddy
published: true
description: 
tags: tor,caddy,go
cover_image: https://www.torproject.org/static/images/tor-project-logo-onions.png
---

Sometimes you may want to proxy a subdomain of your website or a local URI on your machine to a page on the [onion network](https://en.wikipedia.org/wiki/Onion_routing). Using [Caddy](https://caddyserver.com) with [TorProxy](http://torproxy.okkur.org) plugin enabled, you can proxy more than one URI to a [onion service](https://en.wikipedia.org/wiki/.onion).

# Installation
You can install Caddy+Torproxy by downloading the binary directly from the [Caddy Build Server](https://caddyserver.com/v1/download) or use the one-step installer script.
Note that you have to install the tor daemon itself on your machine too since torproxy needs that to operate correctly.

## Installer Script
Run the following command to install Caddy with torproxy plugin enabled. Just note that the license used in the command is "personal". Either change the command manually or generate another one-step installer from the [Build Server](https://caddyserver.com/v1/download).
```bash
$ curl https://getcaddy.com | bash -s personal http.torproxy
```

# Configuration
For using Caddy you need to write a Caddyfile and configure the URIs and the endpoints for TorProxy inside that file.
## Optional: Local-Environment Setup
If you just want to test TorProxy on your machine, you have to add an custom hostname to the `/etc/hosts` file on your machine and point it to `127.0.0.1`.
Example `/etc/hosts`:
```
127.0.0.1   mysecretsite.test
```
## Caddyfile
Point the URIs to your endpoint onion services like this example:
```
mysecretsite.test {
  torproxy mysecretsite.test somewhereonthe.onion 
}
```

After writing the configuration, run this command and pass your Caddyfile as a value for `-conf` flag:
```
$ torproxy -conf ./Caddyfile
```

# Extra: Development Build
If you're curious and want to play with the code, you can follow these steps to generate a development build of TorProxy with Caddy included.
Run the following command to get torproxy's source code and switch your working directory to the torproxy repository
```
$ git clone git.okkur.org/torproxy && cd torproxy
```

Then run the following command to download the dependencies to your local cache

```
$ go mod download
```

And then run `go install` or `go build` to compile the source code.

Do not forget to install Tor itself on your machine since torproxy needs that to operate correctly.

Please write an issue on [TorProxy's GitHub repository](https://git.okkur.org/torproxy) if you faced any issues or bugs or just have a feature request :)
Mysql 5.6: alter column to set default to current_timestamp

Published: 2019-10-28 08:40:31

This should be so simple but I'm pulling my hair out trying to figure this out.

This example mimics the migrations I'll run - essentially it's add a new nullable column to the table, set the value to match another column, then default it to current_timestamp/not nullable going forward.

DROP TABLE IF EXISTS testing; 
CREATE TABLE testing (id BIGINT(20), created_at DATETIME); 
ALTER TABLE testing ADD COLUMN new_column DATETIME DEFAULT NULL; 
UPDATE testing SET new_column=created_at; 
ALTER TABLE testing ALTER new_column SET DEFAULT current_timestamp; 
That very last command results in:

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'current_timestamp' at line 1
Svelte, Sapper and the Compiler step by step videos
Tags: svelte, sapper, googlecloud, firebase
Published: 2019-10-28 08:34:05

I'm making some in-depth videos on the Svelte compiler output. We will see how far I get:

📘Svelte and Google Cloud masterclass playlist:
https://www.youtube.com/playlist?list=PLCrwuqjmVebK08Cwz_XB55cNKFfFYOMGo

📘Svelte Compiler playlist:
https://www.youtube.com/watch?v=1LXEN0Pw6y0&list=PLCrwuqjmVebJoaVCVP5NOxEd4DLH6QUgK
Day 1 of #100DaysOfSwiftUI 🚀
Tags: ios, swift, swiftui, iosdeveloper
Published: 2019-10-28 08:15:09

Hello everyone, I'm following the # 100DaysOfSwiftUI challenge. I have completed day 1 challenges. On the first day, I learned about variables, simple data types, and string interpolation. Learning from the basics is very important, especially if we as beginners, must learn from the basics.

Here is an example that you can learn from the beginning

1. Variables
![alt variable.png](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/variable.png)
2. String and Integers
![alt string_integers.png](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/string_integer.png)
3. Multiline string
![alt multiline_string.png](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/multiple_line_string.png)
4. Doubles and Boolean
![alt doubles_boolean](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/doubles_booleans.png)
5. String interpolation
![alt string_interpolation.png](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/string_interpolation.png)
6. Constants
![alt constant.png](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/constants.png)
7. Type annotations
![alt type_annotation](https://raw.githubusercontent.com/arisupriatna14/100-Days-of-SwiftUI/master/Day1/type_annotations.png)

Congratulations, you have learned the basics for swift 🎉
See you the next article in day 2 😁
How you listen to your music while you write code?
Tags: music, career
Published: 2019-10-28 08:09:55

 Hello, I realize in the last 3 months I spend more than 3-4 hours of the day listen relaxing, music like chill music, I'm curious how you guys spend time on work when you listen music, you made a custom playlist or use an existent playlist?
 I ask this because by default I search for a mix on youtube which has around hour time length and this is all 3-4 mix per day and this is my work time, while I write code.

Btw, sorry for user account if it's not ok wanna change it to my real name, Marian Pirvan! Thanks!
Completed the Hacktoberfest challenge and submitted the prize form 🎉
Tags: hacktoberfest, watercooler
Published: 2019-10-28 07:52:14

Just some humble brag for Monday morning :)

During this Hacktoberfest I finally started contributing to open-source projects.

![Programming Cat](https://media2.giphy.com/media/o0vwzuFwCGAFO/giphy.gif)

Submitting 5 PRs and having some of them already merged feels good (+ it's also nice to get the cool T-shirt) 😎
Flutter WiFi Direct Plugin
Tags: flutter, showdev, github
Published: 2019-10-28 06:29:46

Hey,

I started working on a WiFi Direct (P2P) plugin for Flutter. 

https://github.com/mintware-de/flutter_p2p

So far working (Android only at the moment):
- Subscribe to WiFi Events
- Discover devices
- Connect to a device
- Transfer data between the devices using web sockets and streams.

Feel free to collaborate 🙂
Recording USA Constitution History 
Tags: git, constitution, legal, project
Published: 2019-10-28 06:07:07

The USA Constitution is not modified directly and instead modification is described in an amendment.

I played with the idea of using git to preserve the original and still edit the document. It hit hacker news recently so I went to work fixing some glaring problems, and I used gitmoji for some art. 

The biggest failure was I couldn't have it authored on the year ratified. Someone did something similar and played a trick the tools don't support, I didn't see it worth it.

Now there were a few comedic issues open and of course political issues. I've chosen to label and close, mainly because there is nothing I can do.

Now there were some good ideas I don't intend to follow through with. Namely the draft work on the Bill of Rights. I do like the idea of making unratified ones as pull requests. One of the challenges is the tools aren't meant for this type of collaboration as someone could contribute a pull request, but then the amendment lives outside this repo, but realistically that is probably fine.

But it also goes to show that advertising your project is important. 2 years and almost 2000 stars in 3 days.
Bugs, Bugs, BUGS!!!
Tags: discuss
Published: 2019-10-28 05:41:18

---
title: Bugs, Bugs, BUGS!!!
published: true
tags: discuss
---

In your journey building software, do you experience bugs and is it just me who finds solutions to the errors last minute and things start working, when the deadline is almost due?😅😂

Share your experience with bugs while building software...
Google Firestore ORM package in Python
Tags: orm, python, firestore, fireo
Published: 2019-10-28 05:32:00

# [FireO](https://github.com/octabytes/FireO) is ORM package in Python for the Google’s Firestore 

### A modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google’s Firestore. It implements validation, type checking, relational model logic and much more facilities. FireO is more than just ORM

#### Example Usage

```python
class User(Model):
    name = TextField()
    age = NumberField()


u = User()
u.name = "Azeem"
u.age = 26
u.save()
```

Checkout [FireO](https://github.com/octabytes/FireO) Repository in GitHub and give some Feedback
Two-Value Display Properties in CSS
Tags: css
Published: 2019-11-04 04:04:18

---
title: Two-Value Display Properties in CSS
published: true
date: 2019-10-28 05:00:00 UTC
tags: CSS
canonical_url: 
---

The incomparable Rachel Andrew introduces the brave new world of two-value CSS `display` properties:

> the outer `display` type of an element is always block or inline, and dictates how the box behaves in the normal flow of the document. The inner `display` type then changes the formatting context of the children. To better describe this behavior, the CSS Display specification has been refactored to allow for `display` to accept two values. The first describes whether the outer `display` type is block or inline, whereas the second value describes the formatting of the children.

I’m of two minds for this change. On the one hand, this introduces some complexity (e.g., the venerable `display: block` is, in its two-value declaration, `display: block flow`). But on the other hand, with that complexity comes an invitation to web developers to better understand document flow and formatting context—to which Rachel Andrew’s book _[The New CSS Layout](https://abookapart.com/products/the-new-css-layout)_ is an indispensable guide.

The two-value syntax for `display` is currently [only available in Firefox 70](https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility), listed in the compatibility table at MDN under “multi-keyword values.”