teleren/devto huggingface dataset:
Work report! Week 5
Tags: opensource, perl6, gsoc
Published: 2019-07-01 19:20:47

---
title: Work report! Week 5
published: true
description: This has been my work the 5th week of GSoC 2019.
tags: #opensource #perl6 #gsoc
series: GSoC 2019
cover_image: https://thepracticaldev.s3.amazonaws.com/i/efz8oj2vdq41j61djv17.png
---

Here I am again! This week I have been a little busy with personal matters so I have not been able to work as hard as expected. Anyway, quite a few progress has been made.

# Spinf Off Pod::Convenience [issue #2696](https://github.com/perl6/doc/issues/2696)

This module is used at a lot of different files in [perl6/doc](https://github.com/perl6/doc). Its main aim is to provide functions to work with Pod objects: create them, modify them, etc. I have spun it off in [Pod::Utilities](https://github.com/antoniogamiz/Pod-Utilities), where code have been split between functions that modify pod structure and functions which create Pod objects.

# Pod::To::Cached

As you can see in some issues ( [#1952](https://github.com/perl6/doc/issues/1952), [#717](https://github.com/perl6/doc/issues/717), ... ), we really need a cache system to decrease testing and build time. Parse all pods to get Perl6 code takes a while and currently this is being made around three times in the process.

What we want with a cache system is something like this:

![](https://thepracticaldev.s3.amazonaws.com/i/s2v4lc1s7awwlhu7ryxr.png)

That means, compiles the pod once and use them everywhere. Luckily, [@finanalyst](https://github.com/finanalyst) made a module to compile and cache pod files => [Pod::Cached](https://github.com/finanalyst/pod-cached). 

Last Friday, my mentor, [@JJ](https://github.com/JJ), and I were taking a look to how it was made and solving some issues (you can see my handsome face [here](https://twitter.com/jjmerelo/status/1144514758701395968)).

# Mini-doc set

[Perl6::Documentable](https://github.com/antoniogamiz/Perl6-Documentable) was published last week with all processing related logic so I already know almost all things being considered to generate the doc site.

Because of that, I have updated the doc set in the [mini-doc repo](https://github.com/antoniogamiz/mini-doc), adding a Feature check list to the README.md (suggested by @JJ), containing all things that should be present in that set.

# Closing

Ant that has been all! I know this week has not been so productive but well, some work has been done. This week I will be working on:

- Add index generation logic to Perl6::Documentable.
- Start and hopefully finish the new module responsible of taking a `Perl6::Documentable::Registry` and generate the HTML files needed for the site.
SQL Injection??
Tags: sql, security, webdev
Published: 2019-07-01 19:04:25

So I was working on a PowerPoint to teach some techs how to identify immunohistochemical stains and mistyped a " ' " in our vendor's search box...

Lo and behold, an error message from MYSQL server popped up. It returned a syntax error and recommended changes.

I could be wrong, but I'm pretty sure this means that the search bar was interfacing directly with their server.

I've emailed their IT support in hopes that they'll look into it. It's funny how something from an IT security class I took months ago just popped up in my head like that.
Welcome to the Big Thread Club, Espoir Murhabazi. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-07-01 18:58:53

Espoir joins @helenanders26, @philnash, @florinpop17 and @lauragift21 in the club as the fourth winner of this badge.

{% user espoir %}

The Big Thread Badge is awarded to the person who creates a discussion thread on the site that sparks the most collective comment love (e.g. score as determined by total ❤️ reactions and adjacent ranking factors).

This was Espoir's thread, posted just yesterday:

{% link https://dev.to/espoir/how-do-you-handle-unproductive-days-at-work-2heh %}

Details about this contest can be found in this post:

{% link https://dev.to/devteam/we-ll-be-adding-more-design-and-moderation-clarity-to-tags-like-help-discuss-etc-we-re-also-introducing-a-new-badge-483a %}

Entry is simple: Start a thread that is bound to spark a lot of comments. Ask the community to tell a certain kind of story and get lots of comments! Even if these threads aren't always answering _the deep questions_, they are often great for seeing what the broader community thinks of a topic and are usually a lot of fun!

_DEV employees are not eligible for the Big Thread Badge. 🙂_

## **The International Streak Continues**

This marks 5/5 winners that have gone to folks from a different country with no winners yet from North America. It highlights the global diversity of our community of folks helping one another out. How long will the streak continue? Oceania and Africa are tied for the most awarded continent for the badge at two a piece.

## **Happy Coding!**
Let’s Build: With Tailwind CSS – Movie Production Landing Page
Tags: css, webdesign, tailwindcss, tutorial
Published: 2019-07-02 22:21:53

---
title: Let’s Build: With Tailwind CSS – Movie Production Landing Page
published: true
tags: css, webdesign, tailwind, tutorial
canonical_url: https://web-crunch.com/tailwind-css-movie-production-landing-page/
---

Welcome to the next installment of my Let’s Build: With Tailwind CSS series. In this tutorial, I’ll be replicating [a popular movie production landing page](https://www.wix.com/website-template/view/html/2208?siteId=5a908eca-058f-4651-ab6e-93932b5a39ff&metaSiteId=f0642230-2b55-4c46-bc26-e94a799824e6&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates%2Fhtml%2Fmost-popular) on Wix.com from scratch using Tailwind CSS.

[Download the source code](https://github.com/justalever/tailwind-production-landing-page) to get access to the final result as well as the assets used in this tutorial. Check out the videos for a complete walk-through of the build. The page is fully responsive and uses just a dash of JavaScript for the mobile menu interactivity.

### Part 1

{% youtube uo3i6HZiVMQ %} 


### Part 2

{% youtube 7KaE7qBTpKQ %} 


### Why replicate this template?

I chose this template as a starting point for a number of reasons:

- It’s unique.
- It’s probably not a page you think Tailwind CSS would work well on.
- Being a pre-made template elsewhere means you can do just as good of a job creating a site as these major competitors out there.
- It looked like a fun challenge.
- It’s something you too can follow along to create with me.

This build is a single page landing page that is for a fictitious movie production company. The goal here is to leverage Tailwind CSS without adding much custom CSS at all. At minimum, I added some custom styles for setting defined heights for a looping video background image and a call to action background image at the bottom of the page.

The designs are nearly identical at first glance but I chose some alternate design decisions based on preference. The source code is pretty self-explanatory so I invite you to jump in and follow along!

### The series so far

- [How to Install Tailwind CSS v1.0](https://dev.to/justalever/how-to-install-tailwind-css-v1-0-p42)
- [Let’s Build: With Tailwind CSS – Tweet](https://dev.to/justalever/let-s-build-with-tailwind-css-tweet-3ejh)
- [Let’s Build: With Tailwind CSS – Dribbble Shot](https://web-crunch.com/lets-build-tailwind-css-dribbble-shot)
- [Lets Build: With Tailwind CSS – Responsive Navbar](https://web-crunch.com/lets-build-tailwind-css-responsive-navbar)

The post [Let’s Build: With Tailwind CSS – Movie Production Landing Page](https://web-crunch.com/tailwind-css-movie-production-landing-page/) appeared first on [Web-Crunch](https://web-crunch.com).
Design Your Web UIs Faster by Planning Out Each Different State
Tags: beginners, tutorial, video, webdev
Published: 2019-07-01 18:57:12

---
title: "Design Your Web UIs Faster by Planning Out Each Different State"
published: true
description: "In this 15 minute video, we go over 1 way to quickly break down a UI feature which happens to double as a cheat code for writing tests."
tags: beginners, tutorial, video, webdev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/epksaqzfurmy2rhjb3jm.jpg
canonical_url: https://nickjanetakis.com/blog/design-your-web-uis-faster-by-planning-out-each-different-state
---

**This article was originally posted on May 21st, 2019 at: https://nickjanetakis.com/blog/design-your-web-uis-faster-by-planning-out-each-different-state*

---

Recently I've moved beyond my plan to create a course hosting platform and started to code it. When it comes to laying out or designing the user interface (UI) for a page I often step back and write out each combination of what state that page can be in.

This video goes over that process for a user registration / sign up workflow, setting up a user avatar and also touches on designing a checkout page.

## Breaking Down the UI States for 3 App Features

{% youtube ERSprAyPQC4 %}

#### Timestamped Table of Contents

- 1:33 – Figuring out each state for user registration and authentication
- 4:47 – Knowing what to design before you design it (which saves a ton of time)
- 5:04 – Doing this naturally sets up your test cases
- 5:56 – Breaking down how to handle user avatars
- 11:07 – Going over a few different user states for a checkout page
- 15:30 - Quick recap

#### Reference Links

- [Planning a web application from scratch video](https://nickjanetakis.com/blog/live-demo-of-planning-a-real-world-web-application-from-scratch)

**Have you done this or something similar before? Let me know below.**
Big-O Notation Useful guide
Tags: beginners, algorithms, javascript, webdev
Published: 2019-07-01 18:27:34


Two important things to remember while coding are
* Readability and 
+ Scalability.

There are many ways to solve a problem but a good developer always strive for better efficeint code and performance.

![](https://thepracticaldev.s3.amazonaws.com/i/3uohubbcm8hivqm0il85.PNG)

There comes the Big-O part to scale the time and space complexity of a algorithm/problem.It is helpful in determining the complexity and also scale the performance of algorithm.

Different Big-O terms are
* O(1) - Constant time
+ O(n) - Linear time
+ O(n^2) - Quadratic time 

# O(1) - Constant Time complexity
The constant Time complexity explains that __no matter what size of the input or output, the execution time and the resources used will always be the same__. No matter how many times or where the algorithm is executed, it produces same performance all the time. For example: 


![](https://thepracticaldev.s3.amazonaws.com/i/50qt88du7kcogvs4x3i5.png)

# O(n): Linear Time Complexity
If an algorithm has linear complexity, then __execution time and/or resources used are directly proportional to the input size__. For example:

![](https://thepracticaldev.s3.amazonaws.com/i/sjy6khtlfp5c5n74bsyd.png)

# O(n2): Quadratic Time Complexity
The quadratic complexity is present when the __impact of the algorithm is directly proportional to the square of the input size__.

![](https://thepracticaldev.s3.amazonaws.com/i/zt3ecy5fouxu2gn0y7zq.png)

 This complexity is common in sorting algorithms like bubble sort, insertion sort, and the selection sort.

Here are some of Tricky examples 
This is a good example, if the function takes two different inputs,so Big-O changes to __O(input1 + Input2)__.

![](https://thepracticaldev.s3.amazonaws.com/i/torwgi05dqb8ypunqh0r.png)

For above example,if it is a __nested for Loop__ then the Big-O changes to __O(input1*input2)__.

# Big-O cheatSheet and Graph

![](https://thepracticaldev.s3.amazonaws.com/i/rima9qhnlltvnf1eaft4.png)

![](https://thepracticaldev.s3.amazonaws.com/i/12p50w5c0x37g75uo9hx.PNG)

Feel free to discuss more tricky examples.
Thank you for reading.
What was the first thing you did with a programming language that made you happy?
Tags: discuss, programming, coding
Published: 2019-07-01 18:46:22

I will start. In my early years of learning I wondered a lot how the web works.

The first thing that really made me happy was creating an hyperlink to my facebook page for people to like.
I put it on a dummy blog site I was using to practice HTML.

Feel free to tell me yours
This.JavaScript: State of Frameworks-RxJS Update
Tags: javascript, rxjs
Published: 2019-07-01 17:52:24

Hosted by This.JavaScript, an online event where developers learn about the latest news in JavaScript, State of Frameworks and Libraries covered all the breaking news in the world of frameworks.

On Feb. 19, State of Frameworks speakers, including many of the best and brightest from the development world, gave us updates on all things frameworks.

Here’s some of what [Ben Lesh](https://twitter.com/BenLesh), [RxJS lead](http://reactivex.io/), had to say about [what’s coming up at RxJS.](https://www.youtube.com/watch?v=DFF9eOlTWzY)

## Ben Lesh — RxJS Lead, Angular Team — @benlesh

## Bug Fixes in 6.4.0

RxJS 6.4.0 was recently released. Many of the changes were minor bug fixes, but there were a few important changes. Several of these were related to TypeScript.

RxJS 6 has always been targeting TypeScript 2.8 and higher. This was the first time RxJS developers used a specific 2.8 feature, however. Users who are using 2.7 may have had trouble and may need to upgrade TypeScript.

Users of the shareReplay feature used to experience a bug in the counting feature, in which everyone could unsubscribe from it but the source would keep going. A new update to shareReplay in RxJS gives the ability to opt out of that. Now, if everyone unsubscribes, it unsubscribes from the source.

For the new version of RxJS, we used a feature from TypeScript 2.8 — conditional types — which provides a way to pull a generic type out of another generic type. This can be used in various spots to fix previous issues for users of Redux Observable.

Also, users have been asking for a long time for a takeWhile inclusive option, which is now available.

## Lessons for the Future

The RxJS Core team learned a few major lessons from this last round of changes and updates.

RxJS 7 will remove deprecated APIs and update the types to support TypeScript 3.0 and higher. This puts RxJS in a good position to move over to the smaller version of TypeScript.

The smaller version of RxJS will be Rx 8, while RxJS 7 will see more improvements in types. Well over 60% of RxJS users use TypeScript, so it’s crucial to get that right — sometimes a difficulty in a library that’s functional like this.

*Need JavaScript consulting, mentoring, or training help? Check out our list of services at [This Dot Labs](thisdot.co).*
List of the best post around javascript topics
Tags: javascript, beginners, tutorial, frontend
Published: 2019-07-01 17:42:22

---
title: List of the best post around javascript topics
published: true
description: 
tags: #javascript #beginners #tutorial #frontend
---

These articles are easy to read and understand the concept. 

Scopes - https://overflowjs.com/posts/Scopes-in-Javascript-2019

Es6 functions (Map, Reduce, Filter, Find) - https://overflowjs.com/posts/Map-Reduce-Filter-In-Javascript

Proxy - https://overflowjs.com/posts/Proxy-In-Javascript-2019

Iterables and Iterators - https://overflowjs.com/posts/Js-ES6-Iterables-and-Iterators-2019

Generator-Yield/Next & Async-Await - https://overflowjs.com/posts/Javascript-Generator-YieldNext-and-Async-Await-2019801106

This keyword - https://overflowjs.com/posts/This-keyword-In-Javascript-2019-Javascript-Context

Currying VS Partial Application - https://overflowjs.com/posts/Javascript-Currying-VS-Partial-Application

Javascript Performance Test - https://overflowjs.com/posts/Javascript-Performance-Test-2019-Part-1-for-vs-for-each-vs-map-reduce-filter-find

More articles are coming soon on http://overflowjs.com under javascript category, Don't forget to subscribe to the email list.

The next topics are 
1. Execution Context
2. Closure 
3. Concurrency vs Parallelism
4. Promises

Suggest more topics in the comment that you want the writer to write.

Thanks!
Using themer to make your own colorscheme
Tags: javascript, productivity, vim
Published: 2019-07-01 17:40:39

---
title: Using themer to make your own colorscheme
published: true
description: I made my own colorscheme recently, and themer made it as easy as ever to get started!
tags: javascript, productivity, vim
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lzghrlvnijtrp76lv7qe.png
---

I love a cohesive theme for my laptop, and when you have many different apps that you work with on the day to day ([Slack](https://slack.com/intl/en-ca/), [terminal](https://en.wikipedia.org/wiki/Terminal_emulator), [text editor](https://en.wikipedia.org/wiki/Text_editor), and so on) it can be frustrating and time consuming to create that cohesive theme experience. 

I've also been meaning to try out making my own colorscheme for Vim, but have been frozen a few times with "where to begin paralysis".

Enter [themer](https://themer.dev), the solution to these problems and the tool that allowed me to publish [my first vim colorscheme](http://vimcolors.com/949/garbage-oracle/light).

I used the web version because setting up a colour palette is a new task for me and I enjoyed the visual interface, although I could have substituted the experience with another visual tool. I found it to be a good introduction to potentially using the command line themer tool in the future.

I mean, look at all the generation options it gives you:
![](https://thepracticaldev.s3.amazonaws.com/i/jxqsogvmc30oxvzvht07.png)
It's also [open source](https://github.com/mjswensen/themer) if it's missing a tool and you'd like to [add one](https://github.com/mjswensen/themer#create-your-own-template)!


All in all this tool saved me hours of time that would have been spent editing a vim colorscheme, generated matching wallpapers and other editor themes for me, and produced readable code that allowed me to make some really easy tweaks to said vim colorscheme, so I thought I'd share in case you are also interested in making your own theme(s) but are uncertain of where to start.

The rest of the themes I generated as a part of trying out themer are [here](https://github.com/sansbrina/garbage-oracle-themes) and the unique link to it in themer is [here](https://themer.dev/?colors.dark.shade0=%23371d32&colors.dark.shade7=%23f2e2f1&colors.dark.accent0=%23FB9495&colors.dark.accent1=%23bbbcf0&colors.dark.accent2=%23a9cdd6&colors.dark.accent3=%23C1EDCC&colors.dark.accent4=%23B0C0BC&colors.dark.accent5=%2319D3DB&colors.dark.accent6=%23EFF2C0&colors.dark.accent7=%23aafdb0&colors.light.shade0=%23f2e2f1&colors.light.shade7=%23870058&colors.light.accent0=%23A4303F&colors.light.accent2=%23734D90&colors.light.accent1=%232B5B75&colors.light.accent3=%23376954&colors.light.accent4=%233F59B7&colors.light.accent5=%23684F54&colors.light.accent7=%237B3E19&colors.light.accent6=%235D5255&activeColorSet=light&calculateIntermediaryShades.light=true).
How long should you wait before you ask a girl what operating system she uses?
Tags: humour, discuss, offtopic, os
Published: 2019-07-01 17:28:56

A while ago, I wrote this answer on Quora, it's been over 3 years, so I thought I'll update it.

# How long should you wait before you ask a girl what operating system she uses?

I stand on my previous answer, one should never ask a girl what her operating system is, at least not directly. There are hints and indirect questions that could give you ideas, but please do not ask directly, it gets ugly pretty quick.

So how should you approach this?

First, see what she thinks about updates. Does she hate them? (windows) Does she get excited? (mac, Ubuntu) How frequently does she do it?

Next, see how her computer reacts to certain commands. A good one is ping. ask her to run `ping 4.2.2.4`, if it ever finishes, it is windows.

Then go on and ask about Windows subsystem for Linux. If she is excited about it, she is a Windows user who is enthusiastic about Linux. If she hates it, she is a true Linux user. Neutral means either mac or windows.

Another great tactic is to look at the type of files she uses. Does she use docx format or odt? Does she uses rar, zip or tar.gz? These don't tell us about OS, but certainly tell us about freedom.

Ask her about her editor. Is she an MS Office junky or does she use something else? An emacs person is definitely a GNU/Linux user, while those who use vim might be either a Linux or a mac person.

Look at how she syncs her files, is it Nextcloud/Owncloud? Or does she use Dropbox or maybe even OneDrive? Google Drive doesn't tell us anything, unfortunately.

So, what do you think helps us find out what a girl's OS?
Thanks for the 100K+ views!
Tags: showdev, webdev, beginners
Published: 2019-07-01 17:12:17

---
title: Thanks for the 100K+ views!
published: true
description: I'm over a 100k views! Thank you!
tags: showdev, webdev, beginners
cover_image: https://thepracticaldev.s3.amazonaws.com/i/o0azhjf5j0n8in4x16mb.png
---

Hi there! I'm Peter DeChamp Richardson. I just wanted to thank you all for the 100K+ views and over 2700 followers! It feel awesome knowing that my thoughts and ideas have been read so many times.

I did realize that people outside of work, cared to know what I thought. 

The best part is all the people that commented letting me know how much I've helped them. It's been a very heartfelt experience! 

So thank you! 

![my stats](https://thepracticaldev.s3.amazonaws.com/i/o0azhjf5j0n8in4x16mb.png)

I'd love to get to know you all. Feel free to drop me a line. Add me on here or twitter @codefiendio. or instagram @codefiend

Also checkout some of my other post.

{% link https://dev.to/dechamp/25-years-of-coding-and-im-just-beginning-442n %}

{% link https://dev.to/dechamp/fix-your-memory-write-it-down-or-lose-it-12cb %}

{% link https://dev.to/dechamp/the-burnout-how-do-you-deal-with-it-4i3g %}

{% link https://dev.to/dechamp/delayed-pay-why-is-bull--2bag %}

{% link https://dev.to/dechamp/whats-your-favorite-markdown-editor--70 %}

{% link https://dev.to/dechamp/example-of-data-mutation-and-why-to-avoid-it-4ogj %}

{% link https://dev.to/dechamp/when-failing-to-provide-proper-documentation-comes-back-to-haunt-you-eeb %}

{% link https://dev.to/dechamp/describe-your-coworkers-by-a-single-attribute-of-theirs-365b %}
How do you test react containers using @testing-library/react
Tags: help
Published: 2019-07-01 16:49:37

The intent to @testing-library/react is test what the user see, the things that are rendered on the DOM. As long I could read, that is the philosophy behind the library, and that just fine!

But I was wondering, how do you people test react containers when using this library?

Imagine the situation bellow:

```
const onChange = () => console.log('Hey!')

const Container = () => <Component onChange={onChange} />
```

If it was important to test that Component receives the onChange, how would you do that?

I saw some posts suggesting to mock the Component and add a CSS class (!) based on the fact if it has or has not the prop. But this does not smell very good to me.

Should we just don't test this kind of situation?
1 YEAR AS A NETWORK ENGINEER. AFAR FROM SOFTWARE DEVELOPMENT.
Tags: career, networks, life, cisco
Published: 2019-07-01 16:44:54

Past year i take one of the most adventures choices i have made.
A friend of mine invited me to take the CCNA Routing and Switching course.
I always been in software development world. So it was risky to start a new journey 
in a different area.
 
It was nos eassy to work and learn something new. And outside of my comfort zone.
But i learned a few things that i can apply now. Back at my sofware routine. 
Maybe my experience at networks ended. But the experience is always gratefull.