teleren/devto huggingface dataset:
Full Stack Open Part 1
Tags: javascript, fullstackopen, react, mooc
Published: 2020-05-10 11:16:22

And here is the first part of my Full Stack Open Course blog. This part wasn't particularly difficult, but I decided to still write about it, just to be consistent. I have been pretty busy with work this week, so I can safely say that this took me about a week, which I assume is how the course should be paced.

The first two "parts"(1a and 1b) are fairly straightforward. You get introduced to React first, then JavaScript. Everything was really understandable and there are great reading recommendations about JS and React. The exercises of these parts is just setting up react, creating a simple app, and understanding components.

Now the other 2 parts(1c and 1d) go a bit deeper into React. You learn about state management, complex state and debugging. A lot of good developer practices are introduced here. In 1d you actually make two apps, fairly simple looking, but with some functionality. I really enjoyed making them. 

One of the apps in the 1d part is to create a simple feedback app. The last step is to render the components as a table. I spent more time on this than I am willing to admit.

Overall, a great intro to React. Can't wait to start the next part.
Creating Slanted Division in HTML and CSS
Tags: css, webdev, code
Published: 2020-05-10 13:22:20

There are many post on how to create a slanted div using HTML and CSS.
They use pseudo elements which is not required at all. In just five lines of CSS code anyone can create a slanted div.

HTML codes

     <div class="main"></div>
     <div class="skew"></div>

CSS codes

     .main{height: 70px;background: #000;}
     .skew{height: 40px;background: #000;transform: skewY(2deg);margin-top: -20px;}

Just try this code and you will be easily able to create slanted division using HTML and CSS.
Day 15 of #100DaysOfCode: TypeScript + CRA + Redux (use useSelect and useDispatch instead of connect)
Tags: 100daysofcode, typescript, redux, react
Published: 2020-05-10 13:19:24

## Introduction
We have learned different ways to use Redux
* Redux on Day 12 (connect) 
* Redux on Day 14 (useSelect and useDispatch)

Today we learn how to use Redux with TypeScript

## Installation
```
yarn create react-app react-redux-ts --template typescript
```

## Roles
1.Reducer and actions
* As same as Day 14
* The only difference is to add interfaces on Reducer, Action, and State
```javascript
const { combineReducers, Action } = Redux;

//types
const GET_PRODUCTS = 'GET_PRODUCTS';
type GetProductsAction = Action<typeof GET_PRODUCTS>;

//state
interface ProductsState {
    products: array;
}
const initState = {
    products: [],
}

//reducer
const ShoppingCartReducer = (state: ProductsState = initState, action: GetProductsAction) => {
    switch(action.type) {
        case GET_PRODUCTS:
            return {
                ...state,
                products: action.payload
            }
        default:
            return state; 
    }
} 

const rootReducer = combineReducers({
    products: ShoppingCartReducer
});

type RootState = ReturnType<typeof rootReducer>;

//action
const getProducts = ():GetProductsAction => ({
    type: GET_PRODUCTS, 
    payload: [{
        category: 'food',
        name: 'noodles',
        size:'large',
        price:100      
    },{
        category: 'food2',
        name: 'noodles',
        size:'small',
        price:50      
    },{
        category: 'food',
        name: 'rice',
        size:'large',
        price:120      
    }]
});

```

2.store
* As same as Day 14
```javascript
const { createStore } = Redux;

//store
const store = createStore(
    rootReducer
);
```

3.Provider and the parent component
* As same as Day 14
```javascript
const { Provider} = ReactRedux;

const app = (
    <Provider store={ store }>
        <ContentContainer/>
    </Provider>
);
```

4.The child component and useSelect, useDispatch
* As same as Day 14

```javascript
const { useDispatch, useSelector } = ReactRedux;
const selectProducts = (rootState) => rootState.products.products;

//child component
const Content = () => {
    const disPatch = useDispatch();
  disPatch(getProducts());
    return (
        <Menu/>
    )
}

const Menu = () => {
   const products = useSelector(selectProducts);
   return (
        <div className="container menu-container">
            <div className="row">
                {products.map(product => (
                    <MenuItem product = {product}/>
                ))}
            </div>
        </div>
    )
}

```

## Implementations

{% codepen https://codepen.io/JenHsuan/pen/ZEboxQP %}  

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
A praise to Microbundle
Tags: javascript, bundler
Published: 2020-05-10 13:02:43

Microbundle is a zero-configuration bundler for tiny modules, powered by Rollup and created by Jason Miller  the inventor of Preact.

I tested it in the past on a few projects and was always impressed by the ease of use and the performances. Out of all bundlers I tested, Microbundle has always been the one delivering the smallest builds.

[Microbunlde v0.12 was released few days ago](https://github.com/developit/microbundle/releases/tag/0.12.0) this was a good opportunity to test it again and I have to say that I am SOLD !!!

I am working on a typescript library project. My bundler was a mix of Typscript transpiller, Babel and Rollup. Lots of settings I had no clue about and lots of time spent trying to tune it. 

I switch to Microbundle and it: 
- Worked out of the box
- Removed at least 10 packages from my `package.json`
- Reduced the build size by 2
- Delivers out of the box `umd`, `CommonJS/Node`, `types` and `module` builds

🙏 🙏 Thanks Jason & team 👏👏
{% user _developit %}
A story about a Brazilian journalist who became Web developer in the Netherlands.
Published: 2020-05-10 12:50:35


Seven months ago, I was in a completely different place than I am right now, I was in a job that I did not fit in, without much hope to find something better. Then, I saw a post on Linkedin about scholarships for women who want to start their career in tech.  

My first thought was: “This is not for me”. I was never comfortable with technologies. Since I graduated in communication and study humanities my whole life, I thought I was good with people, not with computers. 

I am not afraid to take challenges, so I decide to apply for it, and for my surprise, I got the scholarship.

January 20, I was attending my first class. 

##Lost in the middle of algorithms

The first month was the most overwhelmed of my life. We had 8 hours of class every day, five days a week. In one day, we had to learn at least three different concepts. 

I was utterly lost, mostly because the last time that I studied math was in 2010 and was not even good at it. Now, I was sitting in class trying to remember how we can discover the average of an array of number – yes, I did not know what ‘average’ was. 

We must solve two algorithmic challenges per week, and I had to spend at least 10 minutes trying to understand the problem. I was uncomfortable with all those tons of information, and, because of that, many times, I wondered if this field was something for me or if I had made a colossal mistake. 

##The right amount of effort


![Alt text of image](https://images.pexels.com/photos/34580/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)



After the terrible result of my first JavaScript test, I woke up. The test made me see that if I wanted to achieve something in web development, I had to stop using my background as an excuse and put some effort into it. 

I spent the next three months studying and creating projects. All the information that I learned I applied right away, building websites, or creating new features. There was not one second of my time that I was not coding or thinking about it. I started to read about code, listen to podcasts about development, and even watched the series Silicon Valley.

I am not going to say that it was easy, but now I am extremely comfortable coding, and I am entirely passionate about it. New technologies finally do not make me scared, and my background in humanities is not hunting me anymore. Instead, I believe that being a communicator helps me to code and build applications that better respond to the user’s needs. 

To sums up, if you are facing a career transition, remember that if you put in the right amount of effort and like what you are doing there is absolutely nothing that you can not achieve. 

Did you like this piece? Have a subject that you would like me to write about? Please let me know.
Monitoring and Observability related questions? (What should I write about?)
Tags: devops, microservices, monitoring, sre
Published: 2020-05-10 12:04:18



Hello!

I'm the co-founder of [SigNoz](https://signoz.io) , a lightweight application monitoring tools and I live and breath monitoring & observability :)

I'd like to contribute to the Dev community, answering questions relating to monitoring & observability.

What questions do you all have? / What should I write about?

Pranay
Fetch in Reactjs
Tags: react, fetch, usestate, useeffect
Published: 2020-05-10 12:00:57


A hook that implements `fetch` in a declarative manner.

- Create a custom hook that takes a `url` and `options`.
- Use the `React.useState()` hook to initialize the `response` and `error` state variables.
- Use the `React.useEffect()` hook to anychronously call `fetch()` and update the state variables accordingly.
- Return an object containting the `response` and `error` state variables.

```jsx
const useFetch = (url, options) => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
      } catch (error) {
        setError(error);
      }
    };
    fetchData();
  }, []);

  return { response, error };
};
```

```jsx
//Example
const ImageFetch = (props) => {
  const res = useFetch("https://dog.ceo/api/breeds/image/random", {});
  if (!res.response) {
    return <div>Loading...</div>;
  }
  const imageUrl = res.response.message;
  return (
    <div>
      <img src={imageUrl} alt="avatar" width={400} height="auto" />
    </div>
  );
};

ReactDOM.render(<ImageFetch />, document.getElementById("root"));
```

#### Live Demo

https://codesandbox.io/s/xenodochial-wind-z2djq?file=/src/index.js


#### More Code Snippets 

https://www.snipbits.dev/
Daily Developer Jokes - Sunday, May 10, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-05-10 12:00:30

---
title: "Daily Developer Jokes - Sunday, May 10, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20May%2010%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e0be565.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ How did pirates collaborate before computers ?

___A:___ Pier to pier networking.
 -->
May 10 — Daily CodeNewbie Check-in Thread
Tags: codenewbie, checkin, beginners, discuss
Published: 2020-05-10 12:00:29

---
title: May 10 — Daily CodeNewbie Check-in Thread
published: true
description: A daily thread to ask questions, share progress, and stay accountable!
tags: codenewbie, checkin, beginners, discuss
series: Daily Checkin
---

You are encouraged to use this daily thread to:
- Ask for help (all questions encouraged)
- Explore topics you’re curious about
- Share something you’ve written or read
- Celebrate your wins
- Stay accountable to your goals
- Support your fellow programmers

Happy Coding!

---

_Interested in joining the twice-weekly live [#CodeNewbie Twitter chats](https://twitter.com/search?q=codenewbie)?  You can find us [on Twitter](https://twitter.com/search?q=codenewbie) each Wednesday at 9pm ET (1am GMT on Thursday) and Sunday at 2pm ET (6pm GMT)!_
Transparent Responsive Contact Us Form 2020 using HTML & CSS only [Video Format]
Tags: css, tutorial, beginners, html
Published: 2020-05-10 11:42:05

{% youtube F6o3rHnWaBI %}

In this **2020 tutorial**, we'll create **Transparent Responsive** Contact Us Form using **HTML & CSS** only. This project is suitable for all especially **beginners**.

📕 Things covered in this video:
- How to create an awesome Contact Us form
- Flexbox 
- Linear Gradients 
- CSS transitions
Estimating Working and Pricing in Development
Tags: webdev, career, productivity
Published: 2020-05-10 11:21:25

Estimates are an important part of doing development or design. There are estimates for fixing bugs, estimates of hours to deliver a project, and estimates of how many weeks that will take.

{% youtube QIsEtT95o3A%}
<center>[Youtube: Estimating Working and Pricing in Development](https://youtu.be/QIsEtT95o3A)</center>

## Hour Based Pricing Estimates

When doing estimates I like to:
* Break things down into smaller parts, ie. home page, about, contact pages for a website
* Break down large items like home page into sections, header, etc
* Figure how out much API's take to do
* Use these as the baseline to create a great total figure to pass to the client
* If you get questions on what estimates are, you have real world examples of what it should cost

## Value Based Pricing Estimates

Estimates can also be done with value based pricing. Estimating on this is a bit harder, because you have to undrestand what the value to the client is. This can be done by knowing how much money they will save or make via the website.

Some things I like to do for value based pricing:
* Use evidence to show how you set your pricing
* You're not defined by the time you put in, but the value you provide, thus;
* Value based pricing allows for more time and effort into projects
* It can sometimes be easier to figure out value based pricing in comparison to development pricing
* There is more wiggle room with value based pricing if things need to be done or re-done

Development hour/based pricing needs to be precise, so if you make any mistakes, you have to eat the cost and time for that, which can be a very difficult thing to do.

Design is different when estimating because it depends on so many factors, such as what the client knows, what you know, the current inspiration and ideas out there. I might talk a bit more about this in the future but usually, they require a bit more time and more difficult to estimating because you have to figure most things out for your client especially when they are not sure what they are doing.

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Join "Hack Coworking Online"
Tags: hackathon, event, challenge, coding
Published: 2020-05-10 10:39:25

---
title: Join "Hack Coworking Online"
published: true
description: Interested in the future of work and workspaces?
tags: #hackathon, #event, #challenge, #coding
---

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

Hi everyone! If you are interested in the topic of future of work/ future of workspaces, join Hack Coworking Online, the hackathon I am organizing at the end of this month. 

The idea behind it is to invite developers, designers, architects, marketers and coworking communities to co-create products/services along *technology in the workplace*, *access systems in the workplace*, *safety*, *health*, *community tools*, *space management tools* and more. 

If that sounds interesting, have a look at the event details here: https://www.eventbrite.com/e/hack-coworking-online-covid-19-edition-tickets-103794131040 and do not hesitate to reach out if you have any questions!
CSS Smooth Font Edges
Tags: css, smooth, font, svg
Published: 2020-05-10 10:30:36

I'm a web developer, but I'm also a graphic designer.

Last week I bumped into this awesome free Photoshop action for creating [Smooth Edges in Photoshop](https://www.photoshopsupply.com/actions/smooth-edges-photoshop-action-free).

The action basically creates smooth edges for shapes, image cutouts and fonts.

I thought this would be a great exercise to try and **use CSS to smooth font edges**.

## Let's Get Started ##
I used CSS filters to make round smooth edges for the *Raleway* font.

CodePen Demo:
<iframe height="300" style="width: 100%;" scrolling="no" title="Smooth Edges CSS" src="https://codepen.io/inegoita/embed/BaoxmeG?height=300&theme-id=16997&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/inegoita/pen/BaoxmeG'>Smooth Edges CSS</a> by Ion Emil Negoita
  (<a href='https://codepen.io/inegoita'>@inegoita</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Github Gist: [CSS Smooth Fonts](https://gist.github.com/codingdudecom/605353461d4c35536fe3dbf0048d0ecf)

## SVG Filters Stack ##

To smooth the corners and edges of the *Raleway* font I added a SVG filter to the `div` containing the text via the CSS class `smooth`. Here's how the CSS class looks:

```css
.smooth{
    filter:url(#smooth);
}
```

To reference the SVG filter with the ID `smooth` I used the `#smooth` reference.

Now, for the smooth filter itself, I defined it like this:

```html
<svg viewbox="0 0 100% 100%">
  <defs>
    <filter id="smooth">
      <feMorphology operator="dilate" radius="0" />
      <feGaussianBlur stdDeviation="3" />
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComponentTransfer out="rounded1">
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComposite in2="rounded1" in="SourceGraphics" operator="in"/>
    </filter>
  </defs>
</svg>
```

That might seem complicated, but it's not that bad.

Here's the SVG filter stack explained:
- `feMorphology` this is used to thicken the font if needed. In my case I used a radius of 0, because the font *Raleway* is already thick enough
- `feGaussianBlur` this will create a blurred version of the text. I used a radius of 3 for the blur.
- `feComponentTransfer` I used several of this which are actually like Photoshop levels adjustments. They basically increase the contrast. I applied them only on the `alpha` channel, because the Gaussian blur generates transparency and I want the font to be smooth and with full opacity
- `feComposite` I used the final pass to combine the original text (`SourceGraphics`) and the `rounded1` result of the last `feComponentTransfer` pass to get the final result.

Here's how the intermediary & final results look like
![Smooth SVG Filter](https://dev-to-uploads.s3.amazonaws.com/i/spd3ug56woscqgkz6iqg.jpg)
GraphQL - NodeJS vs PHP. How to choose?
Tags: graphql, beginners, php, discuss
Published: 2020-05-10 09:56:51

Following [my recent face-slap](https://dev.to/attkinsonjakob/how-to-send-code-sample-when-applying-for-a-job-2b3m) when I realized I have no personal project  to submit when applying for a job, I decided to start one. Right away.

While my idea is, currently, not very well defined, I do know I want to implement some public API and present the data in an interactive way. However, the focus would be on the back-end.

Therefore, I decided to go with GraphQL. My experience with setting up a new project and choosing how to build the infrastructure is limited (read: I never did it). Hence, I'd like to ask for help to kickstart the project.

1. GraphQL means I have to choose between NodeJS and PHP. I don't have a strong opinion on any of them. Usually I'd just do what my employer / architect decides. I'm not sure which one to choose, would be a learning curve either way. However, I did notice that there seem to be a little more documentation available for NodeJS.
2. Any good advice or tutorial on how to set up everything? I know what I have to do once i get to the "write code" part. I'm a bit lost on how to get there.

Worth to mention: this is meant to be just a personal project, a playground, to learn GraphQL and to be able to submit some code next time I apply for a job.
🌍Timer Countdown - Christmas edition (CSS + JS) [YouTube LIVE]
Tags: javascript, tutorial, frontend, timer
Published: 2020-05-10 09:50:08

⬇️ In this video I 'll show you how to build JavaScript countdown applications for any target date and time. I use the JavaScript date object to establish two dates and then I made some simple calculations. Once we get the total seconds between the two dates and times we can break the seconds down to minutes, hours, days and even years if your target date is far into the future.

video starts at: 0:16

###Useful links
- Codepen: https://codepen.io/EleftheriaBatsou
- Working project: https://codepen.io/EleftheriaBatsou/pen/wvKjrVP
- Images: https://www.pexels.com/photo/christmas-board-decors-1303098/ or https://unsplash.com/s/photos/christmas-background
- On youtube: https://youtu.be/ikQ4Fofe1g0

###If you guys recreate this project send me a link to check it. 

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

👋Hello, I' m Eleftheria, an app developer, master student, public speaker, and chocolate lover.

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

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

🙏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/eleftheriabatsou/)