teleren/devto huggingface dataset:
Wizar devlog 12 - Ravioli refactor and PIXI.js begins
Tags: gamedev, typescript, sam
Published: 2020-04-17 15:45:08

This week I started a big refactoring of ravioli to change a fondamental behavior of the reaction system.
At the result, the reaction will be more atomic which is why I first start this project. If I want to change one player name in a list of 1000 players, I don't want observers who listened to the entire players list refresh as well.

My brother experimented Ravioli [here](https://codesandbox.io/s/ravioli-submachine-gun-v1-9lsh3) and [here](https://codesandbox.io/s/ravioli-glove-v1-ito9q) to mimic a submachine gun fire/reload and some pattern recognitions. It was a cool experience because it is the first time someone else deep dives into Ravioli. I have noticed some improvements to add:
- add default acceptor to reduce the boilerplate (when it is just a set value)
- retains action names which leads to the new step and inject them in the delta state

I also notice the need to have a component tree, which is on my todo list after this big refactor.

Also I [played with pixi.js](https://codesandbox.io/s/morning-thunder-h120t) for the first time for futur tutorial improvement :) This was a great experience and fits well with Ravioli.
What tools are you using to test cross browser?
Tags: discuss, webdev, javascript, help
Published: 2020-04-17 15:40:47

I'm curious what tools people are using to help them test cross browsers. Have looked into [BrowserStack](https://www.browserstack.com/?campaignid=1058969025&adgroupid=69973100151&adid=334987378941&gclid=EAIaIQobChMIos-2suXv6AIVxYCfCh0pBgExEAAYASAAEgJDWfD_BwE) and VMs, but not super pleased with either of those solutions.
Taking beautiful screenshots of your Slack app
Tags: Slack, backgroundremoval, webapp, screenshots
Published: 2020-04-17 15:40:04

Hey there fellow Slack developer! I guess you are also in the process of wanting to take some great looking screenshots of your brand new creation in action.

So, you fire up your Slack app, type in the magic words, or maybe click some magic buttons, and the content you want to picture for all eternity appears.

But.

It is in the Slack App. So… Whatever you are screenshotting might appear in the context of something else entirely.


Let's look at a modal as example.

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

Doesn't look all too friendly, eh? The darkened background, the lines of text hidden in it,…Would be a lot nicer if it would be white.

Presenting your app the way it deserves

Our little quick tip builds up on one realization: Slack is a web app. Hence, you can also open it in the browser. Seeing where we are going with this?

Yup. That also means we can use the Web Developer Tools available in any browser to selectively hide, show and modify content to our liking! As a matter of fact, this is how we take the screenshots for our [Tack Release Notes](https://www.codista.com/en/blog/tack-march-20-update/), which we then run through [Squoosh](https://squoosh.app/), to further slim them down.

{% youtube S3CvjaidGF4 %}

The above video is in Firefox, but you can do this in Chrome or Safari as well.

Now, what you can see me doing:

1. I have our development workspace open.
2. I try to create the state I want to screenshot.
3. Then I do a right click, anywhere on the page, and hit Inspect Element. Which in turn fires up the Developer Tools. Now I see the HTML and CSS, and can manipulate both freely.
4. I remove the darkened background from the modal. You can see my mouse clicking there.
5. Afterwards I hide the entire Slack Chat UI. This works by selecting it in the HTML part of the window and then hitting the H key on my keyboard.
Note that I move my cursor inside the Web Developer Tool Window. This keeps highlighting the section represented by the HTML I am hovering over. Super helpful!
I close the tools and am ready to take a screenshot.
6. Now, you can do anything with this. You could change the shadow (via the CSS property `box-shadow`), make the window smaller, highlight something a bit better etc.

All of this without having to fire up any image manipulation program (what a long way to say "Photoshop").
What was your win this week?
Tags: discuss, weeklyretro
Published: 2020-04-17 15:27:06

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![simpsons-friday](https://media.giphy.com/media/26BRBxVOurb0jmlJ6/giphy.gif)

Happy Friday!
Easy Web Worker integration in VueJS
Tags: vue, webworker, mainthread
Published: 2020-04-17 15:26:35

# The main thread

Web workers are super handy to make heavy computation and not blocking the main thread. So the user doesn't have his webpage blocked by too much JavaScript working behind.

# Example in VueJS

We can see how to use them easily in VueJS. Start by installing comlink-loader. Wait, what is Comlink? And comlink-loader?

[Comlink](https://github.com/GoogleChromeLabs/comlink) is a library that simplify the way we call web workers, it will be as simple as calling an async function in our code. This lib was created by [Surma](https://github.com/surma).

[comlink-loader](https://github.com/GoogleChromeLabs/comlink-loader) is simply the webpack loader that we will use to tranform files `*.worker.js` into web workers.

So here we go:
```bash
yarn add -D comlink-loader
```

Now, here's the trick to add the loader in your vuejs configuration. It is explained [here](https://cli.vuejs.org/guide/webpack.html#simple-configuration).

```js
module.exports = {
  configureWebpack: (config) => {
    config.module.rules = [
      {
        test: /\.worker\.js$/i,
        use: [
          {
            loader: 'comlink-loader',
            options: {
              singleton: true
            }
          }
        ]
      },
      ...config.module.rules
    ]
  }
}
```

Finally we can use it this way:

1. Create a file that ends with `.worker.js` and export async functions,
```js
// utils.worker.js

export const helloWorld = async (params) => {
  // heavy computing goes here
}
```

2. Import them in vue files.
```js
import { helloWorld } from '../workers/utils.worker'

export default {
  name: 'HelloWorld',
  data: () => ({
    msg: ''
  }),
  async mounted() {
    this.msg = await helloWorld()
  }
}
```

Remember, it will always be async methods, so make sure to await them.

Set and done!

You can have a look at the quick example I've made to illustrate how web workers can impact user experience here: [vue-worker-example.netlify.app](https://vue-worker-example.netlify.app). See if the button is clickable when the page is computing with and without background tasks.

Thanks for reading!
Objects Intro
Tags: javascript, beginners
Published: 2020-04-17 15:24:17

---
title: Objects Intro
published: true
description: Intro to objects
tags: javascript, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/isxuhhqepwv248ymkyr2.jpg
---

#What are objects?
Objects are data that contain <mark>**key-value pairs**</mark>.
We store our key-value pairs within curly braces. If we want to store more than one key-value pairs, we have to separate each one of them with a comma.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eqmsrtpmm5m6yaet0you.png)
We may think of the objects in Javascript like the objects in the real life, for example the oven and his characteristics:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2lctaacg9n7t832ieye7.png)
#Object values
Objects may store primitive and object value, therefore every valid value for the JavaScript language.
#Getting the value of a property
We may get the value of a property (<mark>**Key**</mark>) in two ways:
through object name + a period (".") + property or through object name + square brackets ("[<mark>**plus "property "**</mark>]").
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mqjw4z9s5zgps4ox4umg.png)
There is two circumstances where we have to use square brackets:
first, when the property is a value of a variable:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/76ou8alul6oonlqx8cvs.png)
second, when the property name is an invalid identifier that
respect this rules:
. when it is not one word
. when it starts with a number
. when it is a [reserved keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)
. when it doesn`t consist only of numbers, letters or underscores.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/01l63ykdzhnzo90ybd7u.png)
#Setting the value of a property
We may set the value of a property with the name of our object followed by a dot and then our value.
Or, name of our object followed by square brackets inside double quotes then our value.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9bh54nrfly56tojpk885.png)
#Deleting properties
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ujfl0z57qqzklffshxb.png)
#Functions are object in javaScript
Functions are a special kind of object in JavaScript:
- we may assign a property to a function like an object
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eo5ca2l7t7tpcupacmza.png)
- we may assign a function like a value of a property.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h9f9q7sa20r0trd2vjo3.png)
  A function that becomes a value of a property is called method and
  as a normal function we may put inside arguments.
We may call our method with dot or square brackets
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/baygbivo385hw7bxuwjz.png)
Coding-Games-Competative-programing-HUB
Tags: coding, games, teamup
Published: 2020-04-17 15:20:39

Coding-Games-Competative-programing-HUB(TEAM UP) 
Coding Games is offering a Team based Online Coding Copmetition . in which teams from Google and Microsoft is also participating . join my team from May 12 to 25
For that purpose i have created a org in github join my org asap
About Ruby Hash#[]= (Assignment)
Tags: ruby, hash, documentation
Published: 2020-04-17 15:17:03

---
title: About Ruby Hash#[]= (Assignment)
published: true
description: 
tags: ruby, hash, documentation
---

Get more information and more examples at my AboutRuby project:
* [AboutRuby project](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#-assignment)
* [Plus this](https://github.com/BurdetteLamar/AboutRuby/blob/master/core/Hash/api/markdown.md#modifying-an-active-hash-key)

Here's the write-up over at the Ruby project:
* [Ruby project](https://ruby-doc.org/core-2.7.0/Hash.html#method-i-5B-5D-3D)

My main page is [here](https://github.com/BurdetteLamar/AboutRuby#about-ruby).

TL;DR

I've been working on enhancements to the documentation for the Ruby project.  Getting these enhancements posted to the Ruby project has been very slow.  They're not actually meeting resistance;  I know because my many PRs for enhancing class ENV were accepted (though not rapidly).  It's just that everyone is busy.

Anyhow, I'm stashing all this stuff on in my own project, called AboutRuby.  The piecemeal migration from there to the Ruby project is not going to be completed in my lifetime (I'm 77 years old).

So:  I'm going to blow my own horn here on DEV, to encourage you to use the enhanced documentation.
I've Built an UX Skeleton Generator! ☠️🖍️
Tags: javascript
Published: 2020-04-17 15:14:51

Hi all! In my [last post](https://dev.to/sanderdebr/speed-up-your-ux-with-skeleton-loading-18ja) someone asked if there is a website that just generates a skeleton screen for you. I couldn't find one and this seemed to me like an awesome project to build! So I build one.

**Check it out:**
➡️ https://sanderdebr.github.io/skeleton-generator ⬅️

I decided to build a drawing tool that generates the CSS code for you, as well as an image of your skeleton (using [html2canvas](https://html2canvas.hertzen.com/)). I've used vanilla JS for this project to improve my JS skills. For the CSS I've used [tailwind](https://tailwindcss.com/).

![video](https://i.ibb.co/cCLyQHL/ezgif-com-video-to-gif-1.gif)

**Functionalities:**
- Adding and removing blocks or circles
- Changing the color of the elements
- Changing the grid size
- Dragging and resizing elements
- Resizing the whole canvas
- Generating an example HTML/CSS page with your skeleton

I started out with using the HTML5 canvas element, but I found out it is way easier to handle regular div nodes than to use the canvas for e.g. dragging and resizing multiple elements.

**Things I would like to add:**
- Shiny gradient effect
- Saving your skeleton in localStorage (object that holds all current elements is already there)
- Smoother dragging and resizing
- No loss of elements when changing the grid size

*Pleas be aware that this app is a prototype and there are bugs in it, I've also did not use any bundler (for fast development reasons) so the code does not work in older browsers or Edge currently.*

I hope this if of use to someone. Please let me know any feedback so we can make this tool better 😄

Repository can be found [here.](https://github.com/sanderdebr/skeleton-generator/)
User Login In React JS with OvermindJS
Tags: react, javascript, tutorial, webdev
Published: 2020-04-17 15:07:57

Simple authentication flow using [OvermindJS](https://overmindjs.org/) and reactjs, using ionic framework components for the user interface. This the second part in a series of videos looking at how to use [OvermindJS](https://overmindjs.org/) as an alternative state management library for your javascript projects.

>This project is written using reactjs with typescript and [Ionic Framework](https://ionicframework.com/docs/react)

Setting up the state was pretty straight forward except for ensuring the types are set appropriately.
```javascript
export type IState = {
  error: any;
  currentUser: any;
  isLoggedIn: boolean;
};

const state: IState = {
  error: null,
  currentUser: null,
  // derived value
  isLoggedIn: derived<IState, boolean>(
    (state: IState) => state.currentUser != null
  ),
};

// state config
export const config = {
    state,
    actions
}

// hook to provide access in components
export const useApp = createHook<typeof config>();
```
The authentication flow with protected routes is a fundamental basis for most applications. This example shows not only that flow, but the use of how to protect routes using the `PrivateRoute` function below.
```javascript
export interface PrivateRouteProps extends RouteProps {
  component: any;
}

const PrivateRoute: React.SFC<PrivateRouteProps> = ({
  component: Component,
  ...props
}) => {
  const { state } = useApp();
  // use overmind to see if we have a user?
  let authUser = state.isLoggedIn;

  // if i have the login path, handle it differently...
  if (props.path === "/login") {
    return authUser ? <Redirect to="/" /> : <Route component={Login} />;
  }
  return (
    <Route
      {...props}
      render={(innerProps) => {
        return authUser ? (
          <Component {...innerProps} />
        ) : (
          <Redirect to="/login" />
        );
      }}
    />
  );
};
```
And the application of that function in the setup of `react-router` in 
```javascript
const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/login" component={Login} exact={true} />
        <PrivateRoute path="/home" component={Home} exact={true} />
        <PrivateRoute
          path="/message/:id"
          component={ViewMessage}
          exact={true}
        />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);
```


- Application code can be found on github - [Source Code](https://github.com/aaronksaunders/user-login-overmind-react)
- Check Out All By Technical Post: https://dev.to/aaronksaunders
- Overmind: https://overmindjs.org/
- Ionic Framework and ReactJS https://ionicframework.com/docs/react

{% youtube 7u7AQ3YYteg %}
Using CSS Flexbox in Reactstrap
Tags: react, webdev
Published: 2020-04-17 14:54:52

So as I was preparing my new website from a website template I found on the internet, I came across this patch of code

```js
<Row>
    <Col lg="6" md="6">
    ...
```

And I was wondering that those props mean. Anyone who used HTML tables will find these similarly named components familiar, but might get lost with these numbers that are assigned to `lg`, `md` and so forth. I'm going to explain what they do here in case someone elsestumbles into this problem.

Many websites are using the CSS Flexbox layout system, which divides the webpage width into 12 equal parts. Depending on how wide the screen is, only one the props listed in `<Col>` will be used.

The number inside the prop indicates how wide the column should be in 1/12ths of a screen. You can put multiple Col components after each other like this:

```js
<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>
```

And that will put three columns side by side. In the second snippet I posted there are even more props which you probably don't know, so let's go over those. What I found from experimenting with the Responsive Design Mode in Devtools is:

* xs prop is only used on phone-sized screens.
* sm prop is only used on tablet-sized screens.
* md prop is only used on small PC displays such as laptop screens.
* lg prop is only used on large PC displays like 1080p screens.
* and finally, the xl prop, which was not used in these examples, is for very large displays like 4K screens.

I hope this helps someone else who's learning Reactstrap.
Facing Error while accessing customer name link using id.
Tags: python, django, help
Published: 2020-04-17 14:41:00

When I click on Customer name which has id=1. Then "customer() missing 1 required positional argument: 'id' this error has occurred.

This  is my customer view:
''' 
def customer(request,id):
    customer=Customer.objects.get(pk=id)
    order=customer.order_set.all()
    return render(request,'accounts/customer.html',{'customer':customer, 'order':order})
'''


This is my URL.py:

'''
 

from django.urls import path
from . import views

urlpatterns = [
    path('',views.home,name='home'),
    path('customer/',views.customer,name='customer'),
    path('product/<int:id>/',views.product,name='product'),

]
'''
Blocks UI (ALPHA)
Tags: news, react, javascript
Published: 2020-04-17 14:36:14

# Check out this website: https://blocks-ui.com 🌟


A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI.

The editor reads and writes production-ready React code, making it an innovative tool for teams.

Imagine prototyping a page as people talk in a meeting and having production-ready code to get started on afterwards.

# Could it be that simple?
NPM packages for backend Node.js development
Tags: node, codenewbie, beginners, javascript
Published: 2020-04-17 14:22:07

Was diving a bit into Node.js during the COVID-19 pandemic,
and I thinks it's great for backend web development .
Not to forget that npm packages ease out the development process.
So, here are a few useful npm packages for web development.

https://www.npmjs.com/package/mongoose
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2nvapv2n8h1x3aunyhop.png)

https://www.npmjs.com/package/nodemon
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7s6ote222vzbla4zn5xa.png)

https://www.npmjs.com/package/helmet
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dq5ylf6vlg56hewxhffu.png)

https://www.npmjs.com/package/express
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1aqg90hksfwyczokuwst.png)

https://www.npmjs.com/package/winston
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b9mlzuwknh4ojd7n8fsh.png)

https://www.npmjs.com/package/jest
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uob7rqvmuy4kzz8lgyl3.png)

https://www.npmjs.com/package/bcrypt
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/91kkcqzsa2drvyoqqgd9.png)

https://www.npmjs.com/package/@hapi/joi
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bu6o12sury2lqdi42keb.png)
Daily Challenge #228 - Best Profit in Single Sale
Tags: challenge
Published: 2020-04-17 14:17:08

---
title: Daily Challenge #228 - Best Profit in Single Sale
published: true
series: Daily Challenge
description: Find the best outcome through buying and selling.
tags: challenge
---
You're a buyer/seller and your business is at stake. You need to make profit... Or at least, you need to lose the least amount of money! Knowing a list of prices for buy/sell operations, you need to pick two of them. Buy/sell market is evolving across time and the list represent this evolution. First, you need to buy one item, then sell it later. Find the best profit you can do.

Input:
A list of prices (integers), of length 2 or more.

Output:
The result of the best buy/sell operation, as an integer.

Example:
Given an array of prices [3, 10, 8, 4], the best profit you could make would be 7 because you buy at 3 first, then sell at 10.

Tests:
max_profit([10, 7, 5, 8, 11, 9])
max_profit([3, 4])
max_profit([9, 9])
max_profit([10, 7, 5, 4, 1])

Good luck!

***
_This [challenge](https://www.codewars.com/kata/58f174ed7e9b1f32b40000ec) comes from wontonst on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_