teleren/devto huggingface dataset:
Learning CSS
Tags: css, webdev
Published: 2020-10-13 22:39:34

---
title: Learning CSS
published: true
description: A guide to learning Cascading Style Sheets
tags: css, webdev
//cover_image: ![A black square with the words CSS is awesome inside with some of the word, awesome overlapping and outside of the black container box](https://dev-to-uploads.s3.amazonaws.com/i/n16bq9su2sk381p0gmtm.jpg)
---

![A black square with the words CSS is awesome inside with some of the word, awesome overlapping and outside of the black container box](https://dev-to-uploads.s3.amazonaws.com/i/n16bq9su2sk381p0gmtm.jpg)

I know. Learning CSS is daunting, it is difficult at times, and there are always changes happening and browsers handle things differently than others. It's tough. You can also do it. Here is how I did it and still do.

I am writing this article after seeing a tweet earlier that said (paraphrasing) "Don't like CSS? Learn a CSS framework." That's irresponsible and cause for future problems and issues. Here is why.

I've never known a CSS framework to have every single piece of vanilla CSS in it. You may have to write your own, you may have to ditch it and go with something else. CSS frameworks aren't up-to-date with the latest that I know of. 

You're falling behind with some piece of CSS that could work better than a JS fix. You're dealing with a framework that don't or doesn't have a feature in CSS that works in all browsers, such as `place-items`, `place-content`, or `place-self`. Not now anyway.

It causes future accessibility issues. If you know me, you know I am an Accessibility Advocate. What is going on with the web year after year is, we are (designers and developers and persons in-between) ruining the web with muddled code and inaccessible sites and apps.

You're learning how to do it wrong. Not learning CSS first before you dive into a framework is like diving into React without learning the basics (and intermediates) of JavaScript first. You're throwing the baby out with the bath water.

I've been developing both front and back end for over 21 years now and I can assure you, when you learn CSS first, it's daunting and hard, but when it all comes together, it is fun and exciting to learn!

Here is what I tell everyone who asks (or doesn't):

1. Ask questions. Ask **all** the questions.
2. Keep learning CSS.
3. Ask more questions. **No question is a "stupid" question**.
4. Find people in CSS that are widely-known and ask questions.
5. Keep learning and don't let the difficulties get to you.
6. Go a step beyond. Learn how browsers work!
7. Find me on social media and ask me. If I can't answer it, I'll find someone who can.

Learning a framework works for some. I don't suggest it and have always written every line of CSS for every project I have done, do, and will do. It's fun and it is fun to be able to manipulate pixels and blocks of content in the browser.

It can be fun for you too. Just take the time needed to learn CSS first. I bet you won't regret it.
Help, how to organize or to create a study plan
Tags: help, beginners, webdev
Published: 2020-10-13 22:21:11

Hello, I'm curious about how other developments organize the time for study, I'm in the university but I have a problem, when I study CSS or javascript I expending all my day on that, I just can't stop, I feel I need have control or balance about my study. I hope someone can help me with ideas :)
Subscription API for devs
Tags: showdev, react, beginners, javascript
Published: 2020-10-13 22:12:40

This is Subscriptionly.io a dashboard and API for developers to easily and effectively hook into our system and have us manage your subscriptions. We are still in Beta mode but encourage devs to sign up for our free service now. We are a pay as you grow model meaning that you start out with a free subscription no matter what and as you grow to a certain number of users you then start paying. 
We are getting ready to launch V1 of our API but feel free to use our dashboard to start adding users now. 

Let me know if you have questions comments or are interested in contributing or potentially working for us. 

We are seeking funding as well so if you know of anyone looking to invest we are all ears!

contact us at info@subscriptionly.io Thanks all!
Contributors wanted: Practice your Svelte and TypeScript skills 👩‍💻👨‍💻
Tags: contributorswanted, opensource, webdev, svelte
Published: 2020-10-13 22:07:59

## 👾 An Evolutionary Database System for Modern Hardware

[SirixDB](https://sirix.io) is an evolutionary, accumulate-only database system. Each new commit stores more data in a new snapshot, which shares common data with the previous revisions. The system never overwrites data. It supports a single read-write transaction per resource concurrently to N read-only transactions. Furthermore, in stark contrast to other database systems, the persistent, durable tree consists of variable-sized database pages. Versioning takes place at a sub-page level according to a novel sliding.

## 🐣 [Svelte based Frontend](https://github.com/sirixdb/sirix-svelte-frontend)

![Screenshot Depicting Diffs](https://github.com/sirixdb/sirix/raw/master/Screenshot%20from%202020-09-28%2018-50-58.png)

Moshe Uminer and I are looking for contributions to a frontend for the system mentioned above. The frontend is pretty new (the project started a few months ago), thus there's a lot of work to do.

{% github sirixdb/sirix-svelte-front-end %}

{% github https://github.com/sirixdb/sirix-svelte-frontend/issues/10 %}

{% github https://github.com/sirixdb/sirix-svelte-frontend/issues/249 %}

The idea is to build a frontend, which can interactively depict the differences between revisions of the data and visualize the result of time-travel queries.

In general, it would be great to provide a similar space-filling approach (modified Sunburst-View) like the one I once developed for my [master's thesis](https://github.com/JohannesLichtenberger/master-thesis/raw/master/Master/Thesis/thesis.pdf):

{% youtube l9CXXBkl5vI %}

{% github https://github.com/sirixdb/sirix-svelte-frontend/issues/250 %}

{% github https://github.com/sirixdb/sirix-svelte-frontend/issues/251 %}

Furthermore other, related views are imaginable. I'm open to new research ideas :+1:

I'm for instance also interested into how best to present the result of time travel queries to a user / analyst.
Android Studio 4.1: Embedded Emulator

Tags: androidstudio, emulator, android, studio
Published: 2020-10-13 22:01:21

 I was very excited to see the tweet from the Android Studio's official twitter handle.

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

Immediate action from me was to update my Android Studio.

The first change I noticed was the new icon for Android Studio.

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

Then I watched this YouTube video to see the new features. (https://www.youtube.com/watch?v=Yhbr6u7f3ME)

Out of all features, in this blog, we're going to see about the Embedded Emulator.
This feature is really important for those who work on a single monitor and have to switch between the code and emulator for testing the app.
 
I know that feeling!

So I thought to try this new feature.

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

I created a new login template project.

 Then I clicked the "Emulator" menu that can be found on the right side bottom.
 

I could see the instructions to open the Emulator Settings shown below.

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

You can click the "Emulator settings" menu directly from here, or you can open the Preferences and search for the emulator

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

Enable the checkbox

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

Then click Apply.


Now try to execute the app. At this point, ensure that no active emulators are running.

Unfortunately, nothing happened. Still, I saw only the instructions to launch the emulator in the tool window and not the emulator.

Then, I tried to launch the emulator once again. I saw this error popping.

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

I was not sure about the things happening. So I created a virtual device. 

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

I executed the app again and targeted the new device.

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

அடங் கொய்யால!


All seems to be fine now. I'm able to execute the app in all virtual devices and more importantly, the emulator is now embedded in the Android Studio.  I don't have to switch my windows anymore while developing an Android app.

Here is my full window

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

Not all features are available yet. But I still love it.


Thank you to all the developers who worked all day to give us this feature.
Create Linked List with .reduce
Tags: javascript, reduce, linkedlist
Published: 2020-10-13 21:39:00

Easy, readable, and simple way create linked list use built-in function.
```javascript
    // Array
    const linkedList = arr => arr
        .reduce((next, val) => { return {val, next} }, null)
```
Can use any type of data
```javascript
    // Map or Set
    const linkedList = map => Array.from(map.values())
        .reduce((next, val) => { return {val, next} }, null)
```
Can use `.sort` or `.reverse()` to change direction and order
```javascript
    // Object
    const linkedList = obj => Object.keys(obj)
        .map(key => obj[key])
        .sort((a, b) => b - a)
        .reduce((next, val) => { return {val, next} }, null)
```
Ritchie CLI: A customizable automation tool
Tags: productivity, opensource, hacktoberfest, automation
Published: 2020-10-13 21:29:12

Nobody likes repetitive tasks. To avoid them, most IT professionals use automations on a daily basis.

There are many tools available on the market to help, such as [Ansible](https://www.ansible.com/), [Chef](https://www.chef.io/products/chef-automate), [Puppet](https://puppet.com/), [RunDeck](https://www.rundeck.com/), [Selenium](https://www.selenium.dev/), ...

However, those tools focus on specific jobs (SysAdmin, SRE, QA, ...) and aren't always adapted to perform tasks related to other areas.

### A customizable CLI ?

[Ritchie CLI](https://ritchiecli.io) lets users configure their own CLI to execute daily operations, and eventually share their commands with others.

In a few words, this open source tool allows to create, store and share any kind of automations, executing them through command lines.

![docker](https://dev-to-uploads.s3.amazonaws.com/i/v5o53jo5uw31lhwn5ggl.gif) 

One of the main benefits of Ritchie is that your can create your automations using **any programming language**, which make it accessible to any professional with programming knowledge.

Moreover, it won't be necessary to redo automations that you own on other tools. You can easily use them on Ritchie, executing them through command line, or adapting your current script to the tool structure.

### How does it work ?

In Ritchie's context, a formula is a script that can be executed automatically or interactively through a command line.

Adapting an existing script to Ritchie structure allows you to run it locally or through Docker, and to share it on a Github or Gitlab repository.

![formulas - en](https://dev-to-uploads.s3.amazonaws.com/i/b7y33p5ik4kluqm6rokm.jpg)

For example, there are currently some formulas to simplify the use of AWS CLI, others integrated with Bitbucket, Apache Kafka or Github API, or even some to create a scaffold of a Spring Boot project.

![aws](https://dev-to-uploads.s3.amazonaws.com/i/xtk6oey3vvumvu98d1cp.gif)

![github-insights](https://dev-to-uploads.s3.amazonaws.com/i/tzuav5vayi05657kd7o8.gif)
  
### Want to contribute ?

The project started a few months ago, and we have many ideas to improve its usability.

The core has been implemented using Golang, and we currently have templates to create formulas in more than 10 languages such as Python, Java, ShellScript, Ruby, Go ([complete list here](https://github.com/ZupIT/ritchie-formulas/tree/master/templates/create_formula/languages)). You can also add new templates which aren't available yet.

All Ritchie repositories are participating the #hacktoberfest challenge, you can find [all issues here](https://github.com/search?q=org%3AZupIT+label%3Ahacktoberfest+state%3Aopen+type%3Aissue+user%3AZupIT+ritchie&type=Issues&ref=advsearch&l=&l=).

We are also looking for feedback, so if you eventually test the tool ([tutorials and challenges here](https://docs.ritchiecli.io/)), give us your impressions in the comments below. 

Thank you for reading!
Celebrating Ada Lovelace Day !
Tags: stem, adalovelace, womenintech, adalovelaceday
Published: 2020-10-13 21:08:11

Today we are celebrating Ada Lovelace Day !!

Ada Lovelace was an english mathematician and is recognised as “the first computer programmer” due to the creation of an algorithm for a computing machine in the mid-1800s. She was one of my first inspirations after my parents and my oldest brother to come to the Technology area.

Her childhood background also resembles mine, she had ability with math since little, focused on studying as much as possible and not having a father figure when little ! She is a truly inspiration to me and hopefully to many other women out there.

The Ada Lovelace Day was created in 2009 by Suw Charman-Anderson and it is now held every year on the second Tuesday of October. It is an international celebration of the achievements of women in science, technology, engineering and maths (STEM). The goal of this celebration is to motivate and bring more women in STEM, creating new role models and support women already working in this area.

You can find more about this day and how to support here: https://findingada.com/
I’m Lisa Sy, a Product Designer at DEV/Forem - AMA
Tags: ama, meta, design, hacktoberfest
Published: 2020-10-13 21:04:32

Hello, I'm [Lisa Sy](https://dev.to/lisasy), a Lead Product Designer at [Forem](https://www.forem.com/).

I’ll be joining [Nick Taylor](https://dev.to/nickytonline) and [Christina Gorton](https://dev.to/coffeecraftcode) tomorrow on [Dev's Twitch stream](https://www.twitch.tv/thepracticaldev) to talk about what I do as a product designer at Forem, Forem’s design system, the design process, and more. 

**I would love to answer any questions you have about working as a product designer, my design process, design systems & tooling, and more.** 

**Feel free to ask any questions you have in the discussion thread below!**

_And don't forget to join the stream tomorrow, October 14th at 5 PM UTC. Details:_ 

{% listing https://dev.to/listings/events/walkthrough-wednesday-oct-14th-at-1pm-edt-fj3 %}

![cute dog](https://media.giphy.com/media/xT0xeuOy2Fcl9vDGiA/giphy.gif)
Dealing with Timezone in JavaScript
Tags: javascript, timezone, webde, date
Published: 2020-10-13 17:58:13

### Dealing With Different Timezone in JavaScript

##### At some point in developer's life he has to deal with different timezones. And I guess it was my turn. 

#### Why we need to deal with timezone ?
>So let's just say that, one user from India, one from Canada, and one from Australia makes a new request for 10th January 2020. But the thing is that date is not same for all the users because of the different timezone which they are following.

Let's frame this in another way:
* You are creating an international cab service, which accepts user's request date and time and according to that cab driver will provide service. If no cab driver accepts user's service before 8 hours then it will be marked as expired.	
* Now you get a call from Australia and a customer will say, by the way we are  9.5 hour ahead from your country. And you will be like okay we can make an exception. Now after 3 hours a customer calls from India and says that by the way we are 4 hours ahead from your country. Now if you think about that, then you will realize  that there are more than  24 timezone. So at that time request expiration or deletion would not be easy because at that time we have to deal with all the timezone according to your customer.
	Because at that time you use the same 10th Jan 2020 -12 Hours Logic then it won't work for the all the customers.

#### How to deal with timezone ?

So one way to deal this problem is with JavaScript's **getTimezoneOffset()** function which returns the difference of request date and utc date in minutes.   

 	getTimezoneOffset(): JavaScript getTimezoneOffset() method method returns the time difference between UTC time and local time, in minutes. It can either positive or negative depending upon user's local timezone from his machine.
  
* So what one can do is just store the 10th Jan 2020 for all the users as UTC Timestamp and in another DB column you can store the offSet Difference value.
	
* So whenever we want to check date for expiration or deletion purpose or any date related operations, we can just subtract the value (which is in minutes) from the original requested date. 
	 
* So this way we can get the requested date in our current date and time. And after that we can find the difference between user's request date (which is now converted to our local timestamp) and current date(local time).

One Another way to deal this is using **UNIX Timestamp**.   

	UNIX Time : Unix time is a system for describing a point in time. It is the number of seconds that have elapsed since the Unix epoch, minus leap seconds, the Unix epoch is 00:00:00 UTC on 1 January 1970.
 
* You can convert user's local time into UNIX time and then you can store it in the database and whenever you want to check for expiration or deletion you will just get the difference between request data's UNIX time and current time UNIX time.

#### Conclusion
 I'm not saying this is 100% fail proof but I this solution worked for me. And I hope it will help you to give you a kick start. It might not be the best solution, but it gets the job done.
How do you keep development projects on your PC organized?
Tags: beginners, discuss, webdev
Published: 2020-10-13 20:54:04

---
title: How do you keep development projects on your PC organized? 
published: true
description: Keeping development projects organized can be a difficult task when you have a lot of them, what methods do you employ to keep yours organized on your computer? 
tags: beginner, discuss, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/pfox085q1484408s7b8n.jpg
---

Keeping development projects organized can be a difficult task when you have a lot of them, what methods do you employ to keep yours organized on your computer?
MIT's Psychopath Ai
Tags: career, mixedreality, machinelearning, programming
Published: 2020-10-13 20:46:03

Post #5

they called it "NORMAN" 

So, if you have only saw AI villains in movies like Arya(eagle eye), WOPR(wargames) and plenty lots which is just a science fiction. Have you heard about real evil AI program ? 

Bias is the most common term in ML which is the most sensitive factor of ML. suppose we have a model to predict weather and the data we train the model is all about hurricanes so what would you expect ? Can you expect this model be predicting about rainy day ? no....

This is what happend to Norman AI which was image captioning neural network which was fed wrong data(deliberately) to see how does it caption good pictures. 

It's not a mistake infact neither complicated. You fed model with criminal records and train on police officers record and use it on civilian. What result it would yield ? 

You can find more about Norman project on MIT site:
http://norman-ai.mit.edu/

Thanks for reading 😊
Test article
Tags: javascript, react, tutorial
Published: 2020-10-13 17:27:25

For integrating with dev.to's API. 

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee **the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of** will.

which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. 

But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
An idead for secure voting system using ML and Blockchain 
Tags: blockchain, python, 100daysofcode, webdev
Published: 2020-10-13 20:28:33

Post #4


🎭 //Personal Opinion// 🎭

Note: This is just an approach I'm writing and it has nothing to do with politics etc😊

Most shouted solution to mail in voting confusions/scams by replacing it with Blockchain & artificial intelligence! 

It's almost impossible and total waste of time for someone tries tempering with block data(hash) right ? 

Then why not Blockchain in voting system? It would be easy enough to opt. just an app with option to submit vote and associate every individual vote with their social I'd and face scan(ML part) 


Backend: vote+social I'd number +faceID and store it in the blockchain network. This way, no one will even think about challenging these votes because blockachin is in there since the beginning right 


This will be one time setup which will reduce billions of cost handling mail in vote procedure. 


Machine learning: a middleware will be required. if someone tries to vote again then this middleware will catch it so all it has to do is validating face before it gets submitted to blockchain and this kind of model are already available 


Leave your suggestion/question if you understand this approach

Thanks for reading 😊
when Github gets confused 
Tags: 100daysofcode, git, devops, webdev
Published: 2020-10-13 20:20:13

Post #03


/> git config core.filemode = true 


this value is default set to true and no doubt this can waste good amount of your time if your team has been using different OS


Testcase: you and your colleagues are working on same repo. Your colleague has windows and you got linux. he makes some changes. 


You take pull and resume your work. Once you ready to push your code. You run git status and boom. Lots of files you haven't even touched after merging are now showing up as modified


This is because the editor you are using has different settings by host OS itself and that's why it's taking tabs and whitespaces in consideration 


Solution: set that configuration value to "false" and it's all fine 


Thanks for reading 😊