teleren/devto huggingface dataset:
I made CSS Scan Pro - The definitive browser extension to work with web design.
Tags: showdev, css
Published: 2019-12-14 23:16:56

---
title: I made CSS Scan Pro - The definitive browser extension to work with web design.
published: true
description: CSS Scan Pro is a browser extension that makes it radically easy to get the looks of any website. Hover over any element, and copy its entire CSS with a single click.
tags: showdev
---

👋 Hi everyone! :)

💦 After months of hard work, I finished my newest product: [CSS Scan Pro](https://cssscanpro.com).

It makes it radically easy to get the looks of any website. Hover over any element, and copy its entire CSS with a single click.

{% youtube YiZh5y5rwEc %}

- Supports Chrome, Firefox, and SAFARI!
- Live edit CSS and check/copy all the changes made
- Get the color palette of any website
- Color eyedropper - pick any color from any element (even images)
- Ruler - advanced distance measurement system in real-time
- @keyframes scan - understand how every CSS animation works
- Pseudo-classes scan (:active, :focus, :first-child, …)
- Pseudo-elements scan (:before, :after, :first-letter, ...)
- New DOM tree control to precisely target elements
- … +

That's a lot of features, while still being ultra-fast, light-weight, beautiful and smooth, [CSS Scan Pro](https://cssscanpro.com) now is the smartest and most complete browser extension for CSS inspection.

🎁 **[Try the free demo on our website!](https://cssscanpro.com)**

🙏 I worked hard on this one so I’m excited to share with you and genuinely interested in hearing what you think about it.

💌 Thanks to everyone that already bought it and supported my work!
If you have any ideas or suggestions, I'm all ears.
The power of teaching
Tags: firstyearincode, learning, techtalks
Published: 2019-12-14 23:05:17

I've always loved to teach, even when I was in primary school. I recently realised that one reason I love it so much is because of how it deepens my own understanding of a subject.

Most of us here are learning new things every day - a new language, a new library, a new framework, a new design paradigm, a new development process, deploying on a new hardware technology ... there is so much to explore! Whatever it is that you are learning now, make teaching a part of your learning. 

Write a tutorial, make a video, write a blog post, give a lightening talk at your next local meetup. Submit a paper to a conference, volunteer to do a lunch and learn at work. 

When we have to prepare something to use to teach others, or to explain what we know or have done, we exponentially deepen our own understanding of that topic. What I've realised recently is that this, more than anything else I do, contributes to how quickly I learn and master new things!
Feature voting for your mobile app
Tags: android, ios, feedback, growth
Published: 2019-12-14 21:20:06

App development is fun. And it sucks because it's a higly competitive market, only the best mobile apps succeed and prosper. Building what users really want is essential for survival and success.

Choosing the best feature to build next is a difficult task. Many dependencies are to be considered, any feature-decision comes with advantages and drawbacks. 

![Choosing the best feature to build next is a difficult task](https://productific.com/image/5c7a3969ed2bed2441ec560a)

Besides all the uncertainties there is also good guidance available: your **active users**.

They use your product on a daily basis. They know what provides value to them and how your product can improve. Letting your users suggest improvements and vote for new features is a great way of engaging and including their perspective. After all, you and your users share a common goal: **improving the product**.

![User feedback](https://productific.com/image/5c7a4064ed2bed2441ec560b)

**Feature voting** gives you the ability to see which improvements are desired most - by real users. By voting for new features users shape a roadmap for your app that optimizes user experience and product success at the same time. A product with happier users is a better product and a better product leads to greater business growth. 

**Tool support** drives growth. Some general purpose collaboration tools like Trello and Asana are optimized for "love at first sight": you start using it, like it immediately and want to put it to action anywhere in your business. While you can use a general purpose tool for feature voting, it can be a pain because these tools aren't tailor-made for shaping a product roadmap. 

[Productific](https://productific.com), a leightweight SaaS tool for roadmap voting, gives you additional benefit:

* Users engage in a dedicated tool, no chunky spreadsheets or task boards. 
* Users can contribute new ideas directly via "request new feature", without having to use generic "create task" or "new entry" buttons. 
* Feature requests are mapped to new or existing features in your backlog, you can also ignore requests when they are outside your targets. 
* Users can view and vote on existing ideas
* Users can forward, share and comment ideas - built in. 
* Users do not need to go through your support team to influence the product roadmap.
* Users can see which improvements are being worked on and stay engaged 
* Ideas are automatically ranked to show the most attractive ones on top

That's all you need to identify the most attractive new features for your mobile app - and increase your app's popularity.
What are you using for Project Proposals/Invoicing?
Tags: watercooler, discuss, productivity, career
Published: 2019-12-14 21:19:50

# Front Matter
I've been freelancing for about four years now. I can't count the number of project proposals I've done during that time. That's a lie, I could, but then I have to look through the black hole that is my Google Drive.

# My Process
To give you an idea of how the process works for starting a new project, it looks a little something like this:

1. Usually get a referral from someone, which will come in the form of an e-mail (normally).
2. I e-mail said person trying to get a gauge on what type of project it is.
3. When they respond back, I'll do a bit of research and schedule a call to discuss it more in-depth.
4. After I close the call, I give myself a couple of days to develop what I call the "Tech Design". This translates to a Google Doc full of stuff like:

* Technology I'm going to use (Gatsby, etc.)
* Hosting
* Schedule Breakdown
* Pricing

5. When finished, I e-mail the client with the Google doc Link. They'll take a look and I'll get a written agreement by having them acknowledge the terms in via e-mail.
6. Do the Project!
7. Invoice via Freshbooks
8. Wait 10 years for them to pay.

# Your Process
There is always room for improvement. What are you doing for this process? I've got invoicing down, Freshbooks makes it super easy, but I think I can do better with the proposals.

Thoughts?
Getting started with Quasar framework
Tags: codeguru, vue, quasarframework, aws
Published: 2019-12-14 21:13:56

{% youtube BK66mQTSl7U %} 

Hello code guru's welcome back. 

In this video we will see how to get started with Quasar framework by setting up development environment and quickly creating a hello world quasar app for both web and desktop.

If you like more content from us please do consider supporting us on Patreon at https://www.patreon.com/codeguru

Please do not forget to provide your feedback  or any topic suggestion in the below comments section.

You can also find us on 
twitter   : https://twitter.com/codeguru_io
facebook  : https://www.facebook.com/codeguru.io
instagram : https://www.instagram.com/codeguru.io/
Youtube   : https://www.youtube.com/c/codeguru_io
Getting started with Quasar framework
Tags: codeguru, vue, quasarframework, aws
Published: 2019-12-14 21:07:29

{% youtube BK66mQTSl7U %}

Hello code guru's welcome back. 

In this video we will see how to get started with Quasar framework by setting up development environment and quickly creating a hello world quasar app for both web and desktop.

If you like more content from us please do consider supporting us on Patreon at https://www.patreon.com/codeguru

Please do not forget to provide your feedback  or any topic suggestion in the below comments section.

You can also find us on 
facebook  :  https://www.facebook.com/codeguru.io
instagram : https://www.instagram.com/codeguru.io/
Youtube    : https://www.youtube.com/c/codeguru_io
CORS Problem Workaround for Consuming DEV.TO API on Your Website
Tags: cors, devtoapi, php
Published: 2019-12-14 20:47:39

---
title: CORS Problem Workaround for Consuming DEV.TO API on Your Website
published: true
description: Using a PHP script as a proxy between your Website and DEV.TO API
tags: CORS, DEV.TO API, PHP
---
Ok recently while updating my website to pull my blog posts from DEV.TO instead of WordPress I kept getting a CORS failure in my browser. So I started investigating and found that DEV.TO's TLS Certificate is malformed, in that it is not issued to DEV.TO but to the server on which DEV.TO runs. This is enough to prevent a browser from accessing when making asynchronous calls. Now I've already [asked about this problem](https://dev.to/jrsofty/having-problems-cors-with-the-dev-to-api-6f), and [I've been informed](https://dev.to/ben/comment/illf) that it is on the "TODO" list. Since the API is still in beta, I figure it's not too urgent. Yet I still wanted to have my posts displaying on my website! So how did I get around the CORS protection of my browser? Simple, I built a small PHP script that when called makes a call to the DEV.TO API, and the returns the result with the correct headers. Since it is located on my website's server, CORS is not a problem.

To help others I've provided the PHP script below, all you need to do is modify the URL portion to the correct DEV.TO API endpoint.

    <?php

	header('Content-Type: application/json; charset=utf-8');

	$curlHandle = curl_init();
	curl_setopt($curlHandle, CURLOPT_URL, "https://dev.to/api/__ENDPOINT__");
	curl_setopt($curlHandle, CURLOPT_RETURNTRANSFER, 1);
	
	$result = curl_exec($curlHandle);
	curl_close($curlHandle);
	
	echo $result;

    ?>
Conducting Practice Technical Interviews For PoC: Year End Retrospective
Tags: interviewing, inclusion, diversity
Published: 2019-12-14 20:46:16

In June, I offered to do [practice interviews](https://twitter.com/annthurium/status/1136141297012469761) for people of color seeking software engineering jobs. It was one small thing I could do to make the industry less white.

Helping people navigate the utterly broken, terribly racist system of technical hiring feels like a [form of white saviorism](https://en.wikipedia.org/wiki/White_savior).  That makes me deeply uncomfortable. At the same time, interviewees have expressed genuine gratitude for the time I've spent with them. I believe there is value in this work. I don't want to tell this story as if I'm sort of hero for doing the bare minimum. I'm not. The bar for allyship is **depressingly low**.

This post is for public accountability and to share a few things I've learned.

I conducted a total of 22 interviews. Out of those folks, 4 updated me to let me know they got job offers. 🎉 I also referred 2 people to others for more specialized interviews outside my area of expertise.

Here are some things I learned:
- Set up a gCal or a [Calendy](https://calendly.com/) with bookable appointment slots. Doing so cuts down on the back and forth about scheduling.
- Let people know how to give you a heads up if they can't make it. Before I was explicit about cancellation procedures, I had a lot of no-shows.
- Think about what time zones you want to accommodate if you're interviewing over video chat. I interviewed people as far away as Bangalore, Lagos, and London, which was surprising.
- I offered candidates the choice to write code on their machine and screenshare, or use [Coderpad](https://coderpad.io/). (Yo Coderpad, it would be great if you had some kind of discounted plan for folks doing grassroots work to get more underrepresented people into tech.)
- Language agnostic questions are the most flexible. If people want to interview in a language you're unfamiliar with, ask them to teach you as they go. I love learning from interviewees.
- Don't let the interview be the end of the conversation. Ask how else you can help interviewees. You can refer them to other folks for additional practice interviews. You can keep your eye out for open jobs. You're not just dispensing help, you're growing your network of awesome people which is a win-win for everyone.

I'm going to keep conducting interviews as long as there's demand. [My DMs](https://twitter.com/annthurium) are open. Please hit me up if you're interested.

White folks in tech: how are you showing up for people of color in tech, and in the world? How are you [educating yourself](https://www.nytimes.com/2019/05/29/books/review/antiracist-reading-list-ibram-x-kendi.html)? Since being an ally is an *ongoing practice*, not a fixed identity, we all have areas of growth. Next year I'd like to do better at [amplifying and supporting](https://www.fastcompany.com/90397620/how-to-be-better-allies-to-women-of-color-at-work) people of color in my workplace. It's long past time we all did our part to dismantle racism, so let's hold each other accountable.
Setting Up Storybook with TypeScript in Create React App
Tags: react, typescript, storybook, javascript
Published: 2019-12-14 20:15:55

Out of the box, you can't write stories using TypeScript within a CRA generated application since the webpack config is only setup to process regular `.js` and `.jsx` files. Not to worry! We're going to fix that by creating our own webpack config where we'll specify the additional things in order to get it working with our TypeScript components.

## Step 1

The first thing you'll have to do is install a TypeScript loader. For this tutorial, I've chosen `awesome-typescript-loader` as it was recommended on the Storybook website. *Note: This package should be saved as a dev dependency, which we can do by adding the `-D` flag*.

```
  yarn add -D awesome-typescript-loader
```

This will allow us to process TypeScript files in our story files.

## Step 2

Once you've got this dependency installed, you'll need to configure the actual webpack config. To do this, we'll need to create a separate file in order to configure our build server within the `.storybook` directory.

```js
// .storybook/webpack.config.js
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};
  
```

Here we're informing webpack that it should use the `awesome-typescript-loader` whenever it encounters a `.ts` or `.tsx` file, something that it didn't know what to do with before.

## Step 3

We're almost done! Next up, I updated the Storybook config file extension to `.ts` and updated the imported file extensions from `.jsx` to `.tsx`. *Note: The `?` character is a regex expression that marks the preceding character as optional -- this allows us to include both `.ts` and `.tsx` in a shorthanded manner.*

```js
// .storybook/config.ts
import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /\.stories\.tsx?$/), module);
```

---

And that's it! Now, we can write stories by importing our TypeScript React components.
I made PocketBook.cc 🌻 a Google Keep alternative that lets you create notebooks and manage important notes📝🦄
Tags: showdev, react, javascript, webdev
Published: 2019-12-14 19:40:59

*Note: I've moved the domain from .ml to .cc*

A lot of times I have to note down something important. Sometimes it could be an important point of tech or I might have to write down my feelings and Notebook, Pen are not always accessible.

With [PocketBook.cc](https://pocketbook.cc), I wanted to create a place where you can write down anything you want! It could be your secret or an important point or your todo list.

PocketBook stores data in browser storage(IndexedDB) by default so that you can write down your deepest secrets without letting any company read your data.

# Demo
[A 37-second youtube video of pocketbook.cc demo]
{% youtube g5zASA2V0NI%}

# Key Features
- Stores data in browser storage by default thus keeping your data private.
- Works offline.
- You can use it without a login/registration.
- Downloadable (Go to more options on the main page and click download button(I've only tested in Chrome yet))
- You can choose to make your notebook remotely accessible which puts notebook content in cloud storage and thus you can edit its content from other devices as well.


So what do you guys think about this project? Do let me know in the comments below! 

Thank you so much for reading this🌻

For more information on how I store the data, check out https://pocketbook.cc/info

**PocketBook Link:** [https://pocketbook.cc](https://pocketbook.cc)

---

*Edit2: I've moved the website from pocketbook.ml to pocketbook.cc (Some countries and browser were not supporting the domain), Since the indexeddb data is domain-specific, the notebooks you made on pocketbook.ml will not be accessible from .cc. For the users who have data on .ml domain will get an option to move data on the main page of .ml website*
Mirroring a GitLab repository into a GitHub repository
Tags: gitlab, github
Published: 2019-12-14 19:40:09

Using GitLab's native "Repository Mirroring" function, we can make changes to a GitLab repository that will also be made to a GitHub repository! And of course, vice versa.

## Why would I do that?

For two reasons:

1. Due to the popularity of GitHub, there are many more integrations with it than with GitLab.

2. Due to GitHub's popularity, your project is more likely to be found there than on GitLab.

Think of it this way, if I haven't convinced you to use both GitHub and GitLab simultaneously:

> You work in the comfort of GitLab, and when you're done, your work gets sent to GitHub automatically, without you having to remember to do anything!

<br/>

> When your GitLab project goes to GitHub, it is more likely that it will be seen by your potential users in addition to enjoying Github integrations!

## How can I do that?
It's simple! Just watch this is vídeo: [Learn about GitLab Mirroring - YouTube] (https://www.youtube.com/watch?v=ovs-HS0JgqY)

It's not mine, but it taught me how to use it.

***Thanks for reading and a fun fact: You known the red fox likes the white wolf?***
CRUD WebApp in Rust with Yew
Tags: rust, yew, webassembly
Published: 2019-12-14 19:37:11

---
title: CRUD WebApp in Rust with Yew
published: true
description: Create CRUD Rust web application using Yew Framework
tags: #rust #yew #webassembly
cover_image: https://thepracticaldev.s3.amazonaws.com/i/bnmdurcxbp9xb8d20wzr.png
---

I'm completely newbie in [Rust] but I created an small CRUD Web app in Rust with [Yew], this pretty amazing, I hope this can help to devs have an initial approach of Yew to create apps with [Web Assembly] :heart_eyes:

[Here is the code]

[Here is the code]: https://github.com/joselo/rust-crud
[Yew]: https://github.com/yewstack/yew
[Rust]: https://www.rust-lang.org/
[Web Assembly]: https://webassembly.org/
Giving back to the spanish speaking community.
Tags: codenewbie, beginners, spanish, career
Published: 2019-12-14 19:31:55

If you are interested in reading this article in Spanish, check out my brand new blog [The Developer's Dungeon](https://www.patferraggi.dev/blog/2019/dic/devolviendo-a-la-comunidad/)

After years working as a developer, I am still amazed how little quality content there is for the Spanish speaking community, we spent entire days reading documentation, tutorials, courses all in English, damn if you think about it even programming languages are in English. This is how an IF statement might look if it was written in Spanish.

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

Only a few months back I started noticing how important it is to know English and how lucky I am for having that benefit, I can read documentation, books, and work with people from tons of other nationalities, especially now that I am living in another country.
Once I realized this it also made me realize that there is other developers out there that are not as lucky, they might be learning English but lack the skill to read a full book or even ask questions in platforms like Stack Overflow, can you imagine that?

This is why I made the decision of putting some effort to grow the spanish speaking community and help other in their journey, my idea is not to replace English content at all, but to help those who are still learning English or want to communicate in their own language. I am currently focusing on Functional Programming and Software Architecture, if you like these subjects please don't be shy and take a look at my blog, I will posting once a week, always in Spanish.

You don't speak Spanish? don't worry, I will translate everything and make sure to continue being active here!

Nos vemos pronto!.
How To Setup Testing Environment For Laravel Console Packages?
Tags: help, laravel, packagedevelopment, phpunit
Published: 2019-12-14 19:27:21

---
title: How To Setup Testing Environment For Laravel Console Packages?
published: true
tags: help, laravel, packagedevelopment, phpunit
---
I want to test my CLI package for Laravel in isolation meaning without setting up a Laravel app then putting it inside the `packages` directory and loading it via composer.

I've been struggling to figure out a way to write tests for my Laravel CLI package since last week. I tried using `testbench` but I failed to configure it to make it work. I've been reading tests and `composer.json` files for may popular packages and tried following them but with no luck.

Looking forward for some help. I really appreciate it.

Thanks in advance.
HIDDEN FIGURES
Tags: books, discuss
Published: 2019-12-14 19:27:05

I am currently reading Hidden Figures - finally - by Margot Lee Shetterly and I had a thought about Women in STEM...

I’m only on the prologue but Shetterly explains,

>...the surprisingly large numbers of black and white women who had been hiding in a profession seen as universally white and male, the body of work they left behind was a revelation.”

When I hear, "we need more women in tech," I'm wondering have women always been in STEM but just never got the recognition they deserved hence why we never learn about them?  Have they just been verbally demoted to "the girls," human computers, that have been overshadowed and virtually erased by their male "lead scientists."

As someone who has a foundation in art it makes me think of women like  Katsushika Ōi, the daughter of the famous painter Hokusai (The Great Wave off Kanagawa) who finished many of his paintings.  Have we just been given the titles of assistants rather than recognizing ourselves as painters and scientists etc in our own right?