teleren/devto huggingface dataset:
UX Challenges
Tags: design, ux, uiweekly, beginners
Published: 2021-04-06 14:20:08

My partner Taylor and I just launched some new UX Challenges.

👉 https://uxtools.co/challenges/

We made these so that designers can learn and practice crucial UX skills. There are too many clichéd UI exercises out there. These challenges are different:

👩🏻‍💻 Based in the real world. This isn't another fake redesign or "create an ATM for a centaur." Every exercise looks like a project you'd get in real life.

🛠 Practice important skills. UX is more than just UI. Each challenge helps you understand and train a specific UX skill like card sorting or usability testing.

💪 Stop reading: try UX. Nothing improves design skills faster than doing design work. Practice solving problems and see what real UX work is like.

💼 Get tangible takeaways. Have fun with mini projects, then walk away with a deliverable to put in your portfolio or use as a talking point in interviews.

Each challenge has a real-world scenario, a task aimed at helping you practice a specific skill, hand-picked references if you need help, and recommended tools.

Follow along on 🐦 [Twitter](https://twitter.com/uxtoolsco/status/1379388395286376449): we'll be re-sharing and posting feedback for people who share their completed challenges there.

Let us know what you think!

Will you take on one of the challenges?
Matt's Tidbits #93 - Getting started with React Native
Tags: mattstidbits, reactnative, tidbittuesday
Published: 2021-04-06 14:16:00

[Last time I shared a few IDE-related tidbits.](https://medium.com/nerd-for-tech/matts-tidbits-92-a-few-neat-ide-tidbits-9222a69be53f) This week, I have some quick tidbits on getting started with React Native!

My latest project is using React Native (with TypeScript), so I've been doing a lot of studying and preparation.

One of the tutorials I went through had me set up a fresh project using React Native's TypeScript template. Unfortunately, I discovered that it wouldn't build for iOS! After a little searching, it turns out there's a known issue: https://github.com/facebook/react-native/issues/30836

In my sample project, I took the approach of commenting out the "Flipper" dependency, which allowed the app to build successfully.

I know React Native gets a lot of bad press, but in my opinion, the underlying principles modeled in React (unidirectional data flow, etc.) are awesome, and native Android development could benefit a lot from using patterns like this! If you're interested in learning more, this "Thinking in React" article from the official React website (and the rest of their "Main Concepts" documentation) were especially helpful: https://reactjs.org/docs/thinking-in-react.html

As an Android developer, I haven't had many reasons to use Xcode before, but I'm excited by the idea of getting to develop for iOS (I've been an Apple fan for the past 25+ years). I did run into one issue (at least on my somewhat locked-down work laptop) - the standard instructions of installing Cocoa Pods via the `gem` command didn't work for me. But, I was able to get it working by installing them via `brew`.

It's also important to make sure the Xcode Command Line Tools path is set in Xcode->Preferences->Locations. If it's not, you won't be able to build iOS apps in React Native!

Have any other helpful tidbits for someone getting started with React Native? Let me know in the comments!

Interested in working with me in the awesome Digital Products team here at Accenture? [We're hiring!](https://www.intrepid.io/careers)
Shorts ( 30 seconds read ) on application security vulnerabilities every dev should know
Tags: javascript, beginners, tutorial, webdev
Published: 2021-04-06 14:15:31

Security is always an afterthought in the development process. But with the increasing number of cyber-attacks and data leaks, the concept of application security and the requirement to embed them from the design stage itself is now critical than ever before. 

Most of the attacks that lead to data breaches and leaks are results of simple programmer mistakes or lack of security awareness. 

Please find the short reads on the top 5 vulnerabilities that are causing major security risks in the application explained in the form of microideations. 

1.[Cross site scripting ( XSS )](https://portal.microideation.com/viewer/ideation/6039da65873d00482c4422a8)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqmxpfdkyoxo2ym1m17q.jpg)
2.[Cross site scripting ( XSS ) - Mitigations](https://portal.microideation.com/viewer/ideation/6039ddb9873d00482c4422bb)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aed4akg554yw3pgw98bk.jpg)
3.[Improper input validation](https://portal.microideation.com/viewer/ideation/603b8e61873d00482c4422df)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whkapea0uaxzz91ywkdn.jpg)
4.[Improper input validation - Mitigations](https://portal.microideation.com/viewer/ideation/603b90dd873d00482c4422e1)
5.[Cross site request forgery](https://portal.microideation.com/viewer/ideation/604e3f45873d00482c44237a)
6.[Improper restriction of operations](https://portal.microideation.com/viewer/ideation/603e51c8873d00482c442301)
7.[SQL Injection](https://portal.microideation.com/viewer/ideation/603f9781873d00482c442306)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4qb7z2ttutxrhd2z7et.jpg)

You can discover, navigate and bookmark these and other development-related ideation content on the microideation app for free ( no mandatory registration, no ads ) .

Download the app 
https://play.google.com/store/apps/details?id=com.microideation.app

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu3t1um0qu1cc8lzffto.jpeg)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ua4bi0861nau13x5inn.jpg)
Tales from the Scrum Dungeon: Reset your @*@&ing password
Tags: scrumdungeon
Published: 2021-04-06 14:13:17

---
title: Tales from the Scrum Dungeon: Reset your @*@&ing password
published: true
description: When generating output that a user might see, even if it is randomly generated, make sure that it is sanitized!
tags: scrumdungeon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5twlj7oc82zk7ykr2h8.png
---
One web app I had the pleasure of working on was accessible to external customers.  As with almost any other online system, customers would occasionally forget their passwords.  This required a call to customer support, along with some account verification, to get a password reset.  This wasn't the best use of customer support's time, and was a bit of a security hole.  Most online systems allow a user to request a password reset, with an email sent to the customer's email address containing a password reset link.  The particular web framework we were using didn't have this functionality built in, so it had
to be added.

The developers in question designed a system that would generate a randomized token associated with a specific account.  Anyone in possesion of the token could use it to reset the account's password within a given timeframe of the token being created (e.g.: 5 minutes).  A URL link was generated that contained the token, and inserted into an email that was sent to the client.

Only the tokens weren't sanitized.

That's right.  Just like [the certification with a swear in it](https://dev.to/joelbennett/tales-from-the-scrum-dungeon-the-certification-with-a-swear-in-it-1lk4).

Because the URL was inserted into an email that was sent to customers, customers were potentially being sent URLs containing swear words.  Luckily this was discovered fairly quickly, and fixed before we heard of any cases where customers actually received any @*@&^ing password resets.

Remember: sanitize both your inputs, and your outputs!
Has using Linux changed your life?
Tags: discuss, linux
Published: 2021-04-06 14:08:08

I am curious to listen to other people whose lives have been changed by Linux.

I personally got into programming, and got the fun of the dev world, after I switched to Linux from windows, about 1 year back.

What is your story with Linux? I am curious to know. 

Please comment. (but possibly keep it brief)
The attraction of Test::Fatal in Perl
Tags: programming, exceptions, perl, qa
Published: 2021-04-06 14:06:08

---
title: The attraction of Test::Fatal in Perl
published: true
date: 2021-04-06 14:00:00 UTC
tags: Programming,exceptions,Perl,QA
canonical_url: https://phoenixtrap.com/2021/04/06/the-attraction-of-testfatal-in-perl/?utm_source=rss&utm_medium=rss&utm_campaign=the-attraction-of-testfatal-in-perl
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbtz817h2r343xi6z5ea.png
---

In February I wrote an [article surveying exception handling in Perl](https://phoenixtrap.com/2021/02/22/exceptional-perl-failure-is-an-option/), recommending that developers [use Test::Exception](https://phoenixtrap.com/2021/02/22/exceptional-perl-failure-is-an-option/#testing) to make sure their code behaves as expected. A commenter on Reddit [suggested I check out Test::Fatal](https://www.reddit.com/r/perl/comments/lq5iu5/exceptional_perl_failure_is_an_option/gofr7u4/?context=3) as an alternative. **What advantages does it hold over Test::Exception?**

- It only exports one function compared to Test::Exception’s four: `exception`, which you can then **use with the full suite of regular [Test::More](https://metacpan.org/pod/Test::More) functions** as well as other testing libraries such as [Test::Deep](https://metacpan.org/pod/Test::Deep).
- It doesn’t override the `caller` function or use [Sub::Uplevel](https://metacpan.org/pod/Sub::Uplevel) to hide your test blocks from the call stack, so if your exception returns a stack trace you’ll get output from the test as well as the thing throwing the exception. The author **considers this a feature** since Sub::Uplevel is “twitchy.”

To ease porting, Test::Fatal also includes two functions, `dies_ok` and `lives_ok`, replacing Test::Exception’s functions of the same names. `dies_ok` **does not provide the exception thrown**, though, so if you’re testing that you’ll need to use `exception` along with a [TAP](http://testanything.org/)-emitting function like `is()` or `like()`.

And that’s it! **Either is a valid choice**; it comes down to whether you prefer one approach over another. Test::Exception is also included as part of [Test::Most](https://metacpan.org/pod/Test::Most)’s requirements, so if you’re using the latter to reduce boilerplate you’ll be getting the former.

Postscript:

I’d be remiss if I didn’t also mention [Test2::Tools::Exception](https://metacpan.org/pod/Test2::Tools::Exception), which is the **preferred way to test exceptions using the [Test2](https://metacpan.org/pod/Test2) framework**. If you’re using Test2, ignore all the above and go straight to Test2::Tools::Exception.
Liskov Substitution Principle
Tags: liskov, lsp, solid, oop
Published: 2021-04-06 13:55:01

---
title: Liskov Substitution Principle
published: true
description: liskov substitution principle
tags: liskov, lsp, solid, oop
---

# Liskov Substitution Principle

The Liskov Substitution Principle (LSP) states that when you substitute a parent object reference with an object of any of its subclasses, the program should not break.

If a thing looks like a duck and it quacks like a duck, then it better be a duck.

Suppose that your duck has a baby duck. The baby duckling also looks like a duck and quacks like a duck and it also... breathes fire. Whoopsie. That's not supposed to happen.

In this quack analogy, the duck is the parent class. It exhibits duck-like attributes. These duck-like attributes are parts of the duck contract (a duck contract sets up a certain expectation of what a duck class should be like). The duckling is the subclass. Being a descendent of a duck, you expect it to also exhibit duck-like attributes. However, this fire-breathing ability violates the contract because ducks don't breathe fire. This is a violation of the Liskov Substitution Principle.

The LSP doesn't prevent the subclasses from adding new methods. A `babyDuck` class can have differing attributes like `size = "small"` and `color = "yellow"` while the parent class has attributes `size = "medium"` and `color = "brown"`. These differences won't violate the LSP because they fall within the user expectation. The subclasses don't need to return identical outputs as the parent, but they need to be consistent. A duck subclass with `fireBreathing = true` attribute is not consistent because it is not the trait of a duck. It is a duck-dragon chimera. 

At the heart of LSP, it's all about having consistent interfaces and following contracts.
CSV Output Files in Robot Framework
Tags: testing, robotframework, csv, automation
Published: 2021-04-06 13:52:54

When trying to improve an existing testing framework, I came up to the point where the output log.html file was not compatible with the rest of the test automation framework already in place.

This "old" test automation framework NEEDED to be fed with a CSV file. Therefore any addition to it has to be compliant with this rule.

That is how I found [this solution](https://github.com/sebastian-pazmay/robot-csv) in which after each test case a CSV file is "filled". There are two different approaches using python and robot framework open-source libraries.

The code can be found [HERE](https://github.com/sebastian-pazmay/robot-csv). It has acceptable documentation but it is still only a POC.
Day 85,86,87,88,89,90:100DaysOfCode
Tags: 100daysofcode, programming, productivity, database
Published: 2021-04-06 13:45:23

codeforces icpc eurasia finals couldnt solve a single problem :(

started studying binary heap, min heapify,extract,max heap,build heap....

completed studying jdbc connection in springboot(along with mysql with basic crud operations along with creating a table through apis.)

https://github.com/singhtaran1005/spring_db  ->you can have a look to my code here.


wrote one article on strong number using shell script(waiting for it to get published),

started studying jpa , hibernate and spring beans (basically internal factors while writing apis in spring)..
practised some 1000+rating ques on codeforces.

contest on codechef(practise contest based on icpc format) team solved 2-3 ques out of 8-9.

overall a nice week :)
You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Automation to get Github repositories insights reports
Tags: python, devrel, showdev, github
Published: 2021-04-06 13:26:12

In a day-to-day work with Developer Relations, you need to be able to extract metrics to evaluate what you do, on social networks or events 🔎 📊

Github may not be considered as a social network, but as I've been implementing and creating contents there too, I thought it could be interesting to monitor the engagement that shared repositories can generate.

To do this, I created an automation in Python using [Ritchie CLI](https://ritchiecli.io/). This automation generates a report in .csv format with several insights about my public and private repositories 🕵️

Thinking about making it more practical, I also set up a workflow using [Github Actions](https://docs.github.com/en/actions) with a CRON to add new reports weekly and allow me to follow the evolution of my work.

The insights reports .csv file looks like the following one:

![report-sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06ra8lf21cttyigj6nd3.png) 

Those files will be generated and stored on the proper Github repository.

Anyone can use it, just create a new repository based on this one: [repositories-reports](https://bit.ly/repositories-reports) (with Fork or Clone) and add 2 secrets to the new repository:
- a secret ACCESS_TOKEN ([you can create one here](https://github.com/settings/tokens))
- a secret USERNAME_CREDENTIAL with your Github User account.

The full automation implementation is in python and may be found here, where the main file is this one: https://github.com/GuillaumeFalourd/formulas-github/blob/master/github/get/insights/src/formula/formula.py

The Github Action workflow is this one: https://github.com/GuillaumeFalourd/repositories-reports/blob/main/.github/workflows/1-reports-generator.yml if you want to perform something similar on other repositories.

**Let me know if you have any suggestion or feedback!**
How to learn to set up a project with various technologies?
Tags: graphql, typescript, help
Published: 2021-04-06 13:16:07

I want to learn and practice writing a GraphQL API. I have a fun idea to build something and I want to get started ASAP.

The biggest issue is that I haven't really set up projects from ground up (Gatsby / Gridsome projects don't count).

I want to build my API using the following:
* TypeGraphQL
* Apollo Server (/w Koa)
* Mysql DB + TypeORM
* Typescript

For many front-end projects or REST APIs I can find tons of courses on Udemy and YouTube, yet there ain't much (well, anything really) that makes use of the above.

Any suggestions on how I should approach this?
Figma Tutorial: Create a Post Page For a Social Media App | Part 3/3
Tags: figma, tutorial, design
Published: 2021-04-06 13:06:51

Before you continue please take a couple of minutes to read [Part 1](https://eleftheriabatsou.hashnode.dev/figma-tutorial-create-a-post-page-for-a-social-media-app-or-part-13) and [Part 2](https://eleftheriabatsou.hashnode.dev/figma-tutorial-create-a-post-page-for-a-social-media-app-or-part-23) they are about wireframes and designs. This post will cover the basics of prototyping.

## Step 1: Creating Pages
This is our basic design (Image 1)

![Part_3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615657560290/aObc7gFnR.png)
*Image 1*

Duplicate the Designs and rename it to Prototyping (Image 2). Let's connect the pages!
![Part_3_2.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615657634724/npGqJ68nZ.png)
*Image 2*

Double click on the menu icon from Home, use the "+" symbol and connect it with the menu. From the menu click on the "Home" and connect it to the Home page (Image 3). The default animation is Instant, you can either change it or leave it as it is (I personally used the "Move In" animation, and I set the direction to the right).
Hit the play button to check your animation. 

![Part_3_3.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1615658102284/zz3xr01sS.png)

*Image 3*

Add the rest of the connections according to your design.
Click play to check your prototype!

That's it. Simply, right?

**************************************


👋Hello, I'm Eleftheria, a front-end developer, master student, freelancer, public speaker, and chocolate lover.

🥰If you liked this post please share.

🍩Would you care about buying me a coffee? You can do it here: [www.buymeacoffee.com/elef](https://www.buymeacoffee.com/elef) but If you can't that's ok too!


[![cofGif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1616336641314/ycZgZ44G3.gif)](https://www.paypal.com/paypalme/eleftheriabatsou)


**************************************

🙏It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.

🌈[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/elef_in_tech)
7 extensions you must use in Visual Studio Code
Tags: webdev, html, javascript, beginners
Published: 2021-04-06 12:43:23

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

## 1.  [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 

This extension is a must-have if you work with websites

It will launch a development local server with a live reload feature for static and dynamic pages.

That means that you no longer need to reload every time you make a change

## 2.  [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 

It is an opinionated code formatter

Prettier enforces a consistent style by:

-parsing your code and re-printing it with its own rules that take the maximum line length into account

-wrapping code when necessary

## 3.  [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag) 

This is an extension that will save you a lot of time when working with HTML.

All you need to do is create the first tag and this will automatically the close tag.

## 4.  [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 

This is another extension that will save you time when working with HTML.

When you'll change the name of one tag, this will automatically change the name of the paired one too.

## 5.  [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 

This extension will save you a lot of headaches when working with a programming language like JavaScript.

It will allow matching brackets to be identified with different colors.

## 6.  [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) 

This extension will help you when working with color hex codes in CSS

It will style these colors found in your document and make it a lot easier to see what colors you work with

## 7.  [Kite](https://marketplace.visualstudio.com/items?itemName=kiteco.kite) 

This is one of the best extensions I ever used in VS code

It is an AI code completion for languages like JavaScript, Python, C++ and more

This will help you write code faster by showing you the right information at the right time

## The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
What is new in Tailwind CSS 2.1?
Tags: tailwindcss
Published: 2021-04-06 12:29:49

A brand-new version of Tailwind CSS dropped this Monday. It’s packed with great new CSS utility classes and brings the JIT (Just in Time) engine into the core package. In this article I take a closer look at the new utility classes and I show you how you can use them in your Tailwind projects.

Update 2.1 brings support for CSS filters natively to Tailwind CSS. This is something that I waited for and I’m really excited about. Can’t wait to explore all the new possibilities that those new filters bring.

Read the full article here:
https://www.themes.dev/blog/what-is-new-in-tailwind-css/