teleren/devto huggingface dataset:
Complex Custom Hooks with createContext();
Tags: react, hooks, javascript, reacthooks
Published: 2020-05-07 16:44:14

---
title: Complex Custom Hooks with createContext();
published: true
description: Complex Custom Hooks with createContext();
tags: react, hooks, javascript, react-hooks
---

###Tell me what you think in the comments :)
The reason I like this way of creating hooks is, it is easier & cleaner to provide executable functions to components. Any suggestions or tips?

I know the title says Complex Custom Hooks but this example is very simple so everyone can follow.

I use this way of creating Custom Hooks also for complex Mutations with React Apollo, so all the mutation logic is inside my hook and the component has only markup all it gets are the functions from the custom hook.

The difference to normal hooks is you need to wrap your -
component who needs the data with the Context.Provider to use the hook.

##CodeSandbox Example

https://codesandbox.io/s/useaddtask-complex-hooks-with-context-hooks-api-w2pn5?file=/src/App.js
Create a turtles' race with Python!
Tags: beginners, tutorial, codenewbie, python
Published: 2020-05-07 16:40:23

Yeah you got it.
Today we'll be making turtles' race by the Python language.
The first main requirement here is the turtle module. Basically, this module lets us to introduce smaller-scale graphics in our Python. 
The next one is the random module.

Let's get started 😜

✅ Firstly, import the required modules.
```python
from turtle import *
from random import randint
```
💡 There are different shapes of pointer available in the turtle module(like arrow, classic and turtle). As ours is a "Turtle Race", we need the 'turtle' and 'classic' shape.

✅ We'll use the classic shape to trace the racing track.
```python
# classic shape turtle
speed(0)
penup()
goto(-140, 140)

# tracing the racing track
for step in range(15):
  write(step, align='center')
  right(90)
  for num in range(8):
    penup()
    forward(10)
    pendown()
    forward(10)
  penup()
  backward(160)
  left(90)
  forward(20)
```
✅ List the specs of the first turtle, enter the turtle in the track and set the turtle ready for the race.
```python
# first player details
player_1 = Turtle()
player_1.color('red')
player_1.shape('turtle')

# first player proceeds to racing track
player_1.penup()
player_1.goto(-160, 100)
player_1.pendown()

# 360 degree turn
for turn in range(10):
  player_1.right(36)
```
✅ Do the same for the rest of the turtles.
```python
# second player details
player_2 = Turtle()
player_2.color('blue')
player_2.shape('turtle')

# second player enters in the racing track
player_2.penup()
player_2.goto(-160, 70)
player_2.pendown()

# 360 degree turn
for turn in range(72):
  player_2.left(5)

# third player details
player_3 = Turtle()
player_3.shape('turtle')
player_3.color('green')

# third player enters in the racing track
player_3.penup()
player_3.goto(-160, 40)
player_3.pendown()

# 360 degree turn
for turn in range(60):
  player_3.right(6)

# fourth player details
player_4 = Turtle()
player_4.shape('turtle')
player_4.color('orange')

# fourth player enters in the racing track
player_4.penup()
player_4.goto(-160, 10)
player_4.pendown()

# 360 degree turn
for turn in range(30):
  player_4.left(12)
```
✅ Use the randint() to set the speed of the turtles.
```python
# turtles run at random speeds
for turn in range(100):
  player_1.forward(randint(1,5))
  player_2.forward(randint(1,5))
  player_3.forward(randint(1,5))
  player_4.forward(randint(1,5))
```
##That's it ! The race is ready to begin 🐢🐢🐢 
##You can also refer my GitHub repo:
{% github divyakelaskar/Turtle-Race no-readme %} c
Covid-19 App Design in Figma
Tags: ui, design, tutorial, beginners
Published: 2020-05-07 16:40:21

Designing an App UI in Figma can seem tricky. In today's video, we create this Covid-19 App Design with some nice use of colors, box shadows, font sizing and more. I go through the whole design process of how I built this. This is a pretty simple design but hopefully you enjoy the process.

{% youtube c8FTctE_ui4 %}
<center>[Youtube: Covid-19 App Design in Figma](https://youtu.be/c8FTctE_ui4)</center>

Some things included in this video are:
* SVG placement
* Spacing for the UI
* Color selection
* Workflow and layout

Do you want to see the original file, check it out in my link below:
https://www.figma.com/file/xZdaXojUT7RCQAmMwAxcIi/Covid-19-Figma-App-Design?node-id=0%3A1

## 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)
Build Candy Crush in vanilla JavaScript!
Tags: javascript, tutorial
Published: 2020-05-07 16:20:52

In this walkthrough, I show you how to build Candy Crush in pure JavaScript, HTML, and CSS. 

This walkthrough is great as it will show you how to drag and drop elements in JavaScript. This is a very popular element in building many JavaScript projects.

In addition to this, we will also be practising using inbuilt methods such as:

- addEventListener()
- setAttribute()
- setInterval()
- some()
- every()
- forEach()
- includes()
- contains()
- add()
- remove()
- createElement()
- appendChild()
- push()
- continue

And many more.

I would love to see your finished game to please do tag me on YouTube, Twitter (@ania_kubow) or Instagram (@aniakubow) :)

I made the background myself, so if you want to use it go for it! I don't mind :) You will find it in the link below.

For images or my final code, please see my GitHub here: https://github.com/kubowania/candy-crush

{% youtube XD5sZWxwJUk %}
Hello 👋, Everyone, I just launched my New Blog
Published: 2020-05-07 16:20:51


Hello everyone,
I hope you are staying safe?

I have a little news to share, I just launched my blog and I am so excited.
I started this blog for beautiful reasons.
1. I find Software engineering and Machine learning engaging, interesting, and would like to use my blog as a medium to share my learning journey (challenges & success).
2. I love to write beginner-friendly tutorials to help starters, ML enthusiasts get better at software engineering practices, machine learning, and statistics.
3. Love to share how software development adds values to different business domain.

You can check it out here https://oluchiorji.com

Cheers🚀
The concise web framework
Tags: framework, kotlin, alpas, webdev
Published: 2020-05-07 16:19:29

---
title: The concise web framework
published: true
date: 2020-05-07 16:18:07 UTC
tags: framework,kotlin,alpas,web-development
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/736/1*WlTIS0AF685BRqIuDwZaJQ.png)

[Alpas](https://alpas.dev) is a concise web framework built with the wonderfully statically typed Kotlin development language.

Previously, I showcased using Alpas for a [Stripe payment example](https://dev.to/armiedema/accept-a-stripe-payment-example-with-alpas-11ej). I used the standard file structure to create that example and showed how you can easily add Gson into the Alpas framework.

However, after looking through my previous post and while thinking how concise Alpas is as a framework, I wanted to tweak the example a bit to reduce the code and show off Alpas’s conciseness.

The result is the image at the top of this post.

In the revision, I brought everything into a single file, simplified the routes, removed some unnecessary code, and switched from Gson to Jackson, which is already built into Alpas.

The result is a nice, clean, single page of back-end code that works with Stripe’s payment example.

As in art, less is more. 🎨

* * *
Help me build a open source linear algebra library in Javascript
Tags: help, opensource, mathematics
Published: 2020-05-07 16:16:43


Still stuck at home cause the pandemic? Do you have more time to dedicate to your projects? 
Since I like **math** and I have more time to dedicate to my projects, I’ve started an open source [linear algebra library](https://github.com/paolodelia99/computational-linear-algebra-js) for javascript, just for fun and for learning new stuff. 
If you have more time to dedicate to your projects and you’re also passionate about math, consider to contribute to the library! 

I’ve already implement the basics operation for **matrices** and **vectors**, and now I’m working on more challenging computations such as matrix decomposition, find the eigenvalues and eigenvectors of the matrix.

I also made a todo list for all the things that I wanna implement.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zc8v6cvsjnempnhcumbc.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bth64ozat3gkxmf6gamz.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7i33fw1ww3yfr38d7bfl.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jrg0yksi84orjw3jd96r.png)

As you can see there’re a tons of thing to do, I’ve never thought the todo list would become so big!  

All the contributors are welcome! I can’t do it alone! Thanks!

This is the github repo

{% github https://github.com/paolodelia99/computational-linear-algebra-js no-readme%}
The simple and useful trick for Google Maps!
Tags: tutorial, beginners, codenewbie, webdev
Published: 2020-05-07 16:13:52

Hi developers! :heart_eyes:

Recently I found one simple but very useful trick in the Google maps. I hope it will be useful for you too. :wink:

You can add the google maps direction link without using any Google API. Just putting the simple URL. And this method is completely free. :tada:

`https://google.com/maps?daddr=<put your destination>`

For example [this is a direction to the New York City](https://www.google.com/maps?daddr=new%20york%20city)

In HTML it looks like this:

```html
<a href="https://www.google.com/maps?daddr=new york city">
    Direction to the New York City
</a>
```

Are you know the other interesting tricks for Google Maps? Share it in the comments below. :point_down:

:star: [Follow on Twitter](https://twitter.com/epranka)
:star: [Check my GitHub](https://github.com/epranka)
:star: [Let's connected on LinkedIn](https://linkedin.com/in/epranka)

Feedback and questions are very appreciated! :heart:
Ε5: New to a UX workplace? Know these 22 things!
Tags: ux, ui, design, designer
Published: 2020-05-07 16:13:00

💪We will talk about soft skills every new UX designer should be familiar with.
Most specifically you'll find tips about:
- Designing & Ways of Working
- Team and Culture
- Working with others
- Learning and Skills

⬇️Previous episodes:
- [Are You New to UX? Here Are The Best 5 Tips (And How To Actually Make Them Work)](https://dev.to/eleftheriabatsou/e2-are-you-new-to-ux-here-are-the-best-5-tips-and-how-to-actually-make-them-work-4id4)
- [Should Designers Learn To Code & Why It's Not A Good Question] (https://dev.to/eleftheriabatsou/e1-should-designers-learn-to-code-why-it-s-not-a-good-question-860)!
- [7 Practical & Effective Methods To Improve At Visual/UI Design](https://dev.to/eleftheriabatsou/3-7-practical-effective-methods-to-improve-at-visual-ui-design-3480)
- [To Be a Successful UX Designer Give up these 15 Things](https://dev.to/eleftheriabatsou/4-to-be-a-successful-ux-designer-give-up-these-15-things-j0c)

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

This is a new series on my channel and I'm going to be talking about UX and UI.
This is the 3rd episode out of 8.
If you have any feedback, please do share it with me. Thank you.



😎Top 3 list:
- How to stay motivated | A developer's edition | @BatsouElef: https://youtu.be/qMvEtb5OxNo
- How to be a Better Problem Solver | Tips and solutions: https://youtu.be/dELt7yKIxIA
- Simple Tips to Build a Personal Brand as a Developer (+ personal examples): https://youtu.be/7s0o1gi0iP0

🥰If you liked this video please share

🍩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/)
NavBar with CSS Grid & Flexbox tutorial 2020 | Awesome HTML Navigation Bar [Video Format]
Tags: css, tutorial, beginners, html
Published: 2020-05-07 16:08:26

{% youtube SaaZjq6JEkQ %}

In this **2020 tutorial**, we'll create a beautiful **Responsive NavBar using HTML CSS Grid and Flexbox**. This project is suitable for all especially **beginners**.

📕 Things covered in this video:
 - How to create an awesome navbar  
 -  CSS Grid  
 -  Flexbox
Everything GitHub announced at Satellite 2020 in 15 minutes [video]
Tags: techtalks, github, opensource
Published: 2020-05-07 16:04:55

Discussions! CodeSpaces! Code scanning! Yesterday, GitHub announced a ton of new features and updates as part of Satellite, their yearly conference. In this video, @signalnerve recaps the keynote talk from Satellite, covering everything that was announced at the conference, in a little over 15 minutes!

{% youtube ejjWyoflCKs  %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!
how to connect mysql using python script
Published: 2020-05-07 15:53:25

Hello everyone, I'm learning python from 2019, now I am interested in how to connect MySQL with python. I have been gone through all tutorial, try everything but can't able to make the connection in between database to my python script. and the error looks like this (mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on 'My Host:3006' (11001 getaddrinfo failed)). Can you please help me to figure it out.
Media Query: prefers-reduced-motion
Tags: css, css3, animation, a11y
Published: 2020-05-07 15:35:16

## Why we use animations
Animations are not just awesome to see, but they can help deliver a message, or help the user in some way. They are only useful when done right, when there's a reason why you need to use them. They are very easy to get wrong, to be too much, too slow, too fast. Motion can guide the user or get their attention. 

A common scenario where animations are used is when loading something. Users hate waiting, so a simple animation can help distract them. With the right animation, the user might even enjoy waiting. 😄

## Love it or hate it
I love animations, but others could have a very different opinion, and that's fine. For some it's a matter of taste, but for others it's about health. Some people get sick because of animations. It has become common to have the option to tone down or turn off animations on your device. This is a real problem, even if it is not very common. 

So should we stop using animations altogether? **No!**

## CSS Media Queries
CSS has been advancing a lot lately, making our styling not only better to look at, but also smarter. We can cater for more people, easily.

One of the media queries in CSS is *prefers-reduced-motion*, which uses the mentioned setting of the operating system. This makes it super easy for us developers to know if the user wants to dial down the animations. Keep in mind that this media query only returns two values: **no-preference** or **reduce**. You cannot know if the user wants to completely remove the animations or just reduce them from this media query, so it's not perfect, but it gives us enough information to work with.

### How To Use
It's used just like any other media query. You use it to overwrite the previous styling. I would put it in the bottom and target the transitions of every element. However this highly depends on your situation, as some styling is more complex. In this case I am only using CSS transitions to keep it simple.

```CSS
button {
  background-color: red;
  color: blue;
  transition: all 0.5s; /* this transitions all supported properties on change */
  padding: 15px;
  border: 2px solid green;
}

button:hover {
  background-color: blue;
  color: white;
  border-color: red;
  transform: rotate3d(1, 1, 1, 15deg);
}

@media (prefers-reduced-motion) {
  * { /* disable all transitions */
    transition-duration: 0s;
  }
}
```
```html
<button>
    CLICK ME!
</button> 
```

### Browser Support
Browser support is pretty good! All the major browsers support it, apart from IE, nothing new there.  

![prefers-reduced-motion browser support](https://caniuse.bitsofco.de/image/prefers-reduced-motion.webp)
Why I Want To Leave My Work
Tags: career, tech, work, job
Published: 2020-05-07 15:26:52

What's your work industry? Retail? Marketing? Real Estate? 

Believe it or not, the importance of tech in your company will vary based on where you work. 

Tech isn't innovative and vital all around across the board. 

My first job out of college was at a marketing agency. It was a decent job, but most of their websites were old with outdated code. My primary duty was to update these websites with promo codes, that was it. There were no new technologies, no optimizing layouts, no database enhancements, nothing.

![marketing](https://dev-to-uploads.s3.amazonaws.com/i/ohpru8jjatzo9b6kkwe3.png)

Marketers aren't going to look at tech directly. They want numbers, data, and how to get to that bottom line; it only makes sense. Tech only plays a role if it gets them what exactly they want. 

Or take another example, Apple. Surprise, it's primary focus is in their marketing. How do you sell and keep selling? I know of people who worked there, and they tell me that their engineers fall second to their design department. Sure, tech plays an essential role, but it's their focus and dedication to design that sells.

![Apple](https://dev-to-uploads.s3.amazonaws.com/i/xt264cpmn6tgl8w64okx.png)

These aren't bad things, but it goes to show that it's not always about tech innovation everywhere you go. 

Each company has its priorities, but tech is always going to be needed. Unfortunately, you're not always going to be as valued as you'd like.

Now let's bring it back to perhaps the worst place to do tech work, eCommerce/retail. As someone who works in this industry, I find that not only do I get poorly paid, I'm also not as valued.

I have skills and knowledge that would most definitely be useful, if not grown much more exponentially if I wasn't at a company that puts their retail stores first before technology. 

My reality is that the company I work for caters to a generation that wants to go out and shop for clothes rather than purchase them online. At the very least, this is what's keeping me at the job, and I'm grateful.

However, for these reasons is why I precisely want to leave my company. I majored in computer science in college because I had a passion for innovating, building, and improving things. But, if a company hinders you from doing these things, isn't it fair to move on from it?

<strong>Ask these questions to yourself when looking or at your current job</strong>:

<ul>

<li>Are you satisfied?</li>

<li>What are your long-term career goals?</li>

<li>Are you looking to take more ownership?</li>

<li>If so, how about a startup?</li>

<li>How about this...Are you looking forward to Mondays?</li>

</ul>
___

When you're first starting, don't be picky. 

If you're well into your career, start looking for a change if your work does not align with your passions. You're going to be working for most of your life, the least you can do is invest your time into a company that you feel takes you seriously and develops you in ways you'd like.
Modify MS Project files in TypeScript or JavaScript using Aspose.Tasks Cloud API.
Tags: javascript, msproject, asposetasks, oracleprimavera
Published: 2020-05-07 15:18:31

<a href="https://products.aspose.cloud/tasks/family">Aspose.Tasks Cloud</a> is a REST API for manipulating and converting <a href="https://www.microsoft.com/en-us/microsoft-365/project/project-management-software">Microsoft Project (MPP, XML, etc.)</a> and <a href="https://www.oracle.com/industries/construction-engineering/primavera-products/">Oracle Primavera (XER)</a> documents. It allows you to work with all aspects of a project as well as offers a wide range of export options allowing developers to convert supported project formats to a number of industry-standard formats (PDF/Excel/Images). 
Our <a href="https://products.aspose.cloud/tasks/family">Cloud SDKs</a> are wrappers around REST API in various programming languages (PHP, Python, Node.js), allowing you to work with MS Project/Oracle Primavera documents in the language of your choice quickly and easily, gaining all benefits of strong types and IDE highlights.
Before we get started, I want to say a few words about legal use Aspose.Tasks Cloud API. For receiving successful responses from the server, you need to sign up for free on https://id.containerize.com/signup so you can get your own <a href="https://dashboard.aspose.cloud/#/apps">App SID and App Key</a>. 
These credentials will be used in a further example. We also will use 'fs' module for read\write files, but you can use whatever is more convenient for you. After you get SID and Key for your app, we will need to install SDK package, just like that:
```npm i @asposecloud/aspose-tasks-cloud```

When it's done, let's create an instance of Tasks.Api:

{% gist https://gist.github.com/aspose-com-gists/f192129474774971a10338ff3bd27672 file=UploadFile.js %}

Good! Now we can do whatever we want with our project. Let's add a new task:

{% gist https://gist.github.com/aspose-com-gists/f192129474774971a10338ff3bd27672 file=AddTasks.js %}

Simple isn't it?. Now let's look at the result:

{% gist https://gist.github.com/aspose-com-gists/f192129474774971a10338ff3bd27672 file=DownloadFile.js %}

Well, that's it. We just tested adding tasks to the project file. But what if you want to add, modify, delete or take <a href="https://github.com/aspose-tasks-cloud/aspose-tasks-cloud-node/blob/master/test/calendarsTests.ts">calendar</a> from your project? Or do some stuff with your <a href="https://github.com/aspose-tasks-cloud/aspose-tasks-cloud-node/blob/master/test/assignmentsTests.ts"> assignments</a>? Or deal with some another part of the project? SDK source code contains a large number of use cases which you can see <a href="https://github.com/aspose-tasks-cloud/aspose-tasks-cloud-node/tree/master/test">here</a>. 
I hope you enjoy using this tool to manipulate your MS project files.