profile
viewpoint
Eddy EddyVinck @deity-io The Netherlands www.eddyvinck.nl Front-end developer from the Eindhoven area in The Netherlands. I like working with React.

EddyVinck/ConfTalks 50

⚠️ Development is currently on hold 🎥 An open source index of already recorded and scheduled conference talks to help you decide if you should go. Built for all developers 👩‍💻👨‍💻

EddyVinck/Internetstorm 2

a theme I made based on Webstorm

EddyVinck/Activity-Randomizer 0

Unfinished activity generator app with Google Sheets integration

EddyVinck/Adamant 0

Webshop built with React, NextJS, Styled Components, Apollo, GraphQL and NodeJS. Tested with Jest and Enzyme.

EddyVinck/api-design-node-v3 0

[Course] API design in Node with Express v3

EddyVinck/artgeeks.github.io 0

This is the official website of ArtGeeks - The Art Club of IIT Mandi

EddyVinck/complete-intro-to-react 0

A Complete Intro to React, as Given for Frontend Masters

issue commentmdx-js/mdx

Unexpected HTML output in aside > details > ul

Thanks @ChristianMurphy, I guess I just never came across this use case before using MDX.

EddyVinck

comment created time in 3 days

issue openedmdx-js/mdx

Unexpected HTML output in <aside> > <details> > ul

<!-- Ouch, sorry you ran into a bug. Thank for taking the time to report it!

Please fill in as much of the template below as you’re able.

P.S. have you seen our support and contributing docs? https://mdxjs.com/support https://mdxjs.com/contributing -->

Subject of the issue

I don't think the output for this MDX this is correct:

<aside>
  foo bar baz

  <details>
    <summary>foo bar baz</summary>

    In no particular order

    - foo
    - bar
    - baz

  </details>
</aside>

Outputs:

<aside>
  foo bar baz
  <details open="">
    <summary>foo bar baz</summary>
    <pre>
      <code>
        In no particular order

        - foo
        - bar
        - baz
      </code>
    </pre>
  </details>
</aside>

This is not a place to ask questions. For that, go to Discussions

Your environment

  • OS: Ubuntu 20.04 <!-- Name and version of operating system -->
  • Packages: "@mdx-js/mdx": "^1.6.19", "@mdx-js/react": "^1.6.19", "gatsby-plugin-mdx": "^1.2.25", and "@mdx-js/runtime": "1.6.19" in the codesandbox below <!-- Names and version of required packages -->
  • Env: Node 12.6, yarn 1.21.1 <!-- Version of node, npm, yarn, or names and versions of browser -->

Steps to reproduce

https://codesandbox.io/s/mdx-forked-tls88?file=/src/App.js

Expected behaviour

It should output <ul> and multiple <li>

<aside>
  foo bar baz
  <details open="">
    <summary>foo bar baz</summary>

    In no particular order
    
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
    </ul>
  </details>
</aside>

I ran the expected output through https://validator.w3.org/#validate_by_input and it passed, so I'm not sure why I'm getting the unexpected output.

Actual behaviour

It should not output <pre> and <code> in this example.

created time in 3 days

startedinversify/InversifyJS

started time in 6 days

startednexxtway/react-rainbow

started time in 7 days

startedpinojs/pino

started time in 10 days

startedzkat/make-fetch-happen

started time in a month

issue commentdownshift-js/downshift

[hooks]: Suggestion: keep dropdown open when clicking outside the document

I am running into this as well. I tried using onsStateChange but without success.

  const { getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection({
    initialSelectedItems: [items[0]]
  });
  const { isOpen /* , ...other properties */ } = useSelect({
    items,
    onStateChange(changes) {
      switch (changes.type) {
        case useSelect.stateChangeTypes.ItemClick:
          return {
            ...changes,
            isOpen: true
          };
        default:
          return changes;
      }
    }
  });

The thing is, the ItemClick is actually running and thus returning the state, but it seems it still gets overridden somewhere. I haven't used this library a lot in the past, but this is the first time I'm using the hooks and I am a little confused as to why this isn't working.

<details> <summary>full code here</summary>

import React from 'react';
import { useSelect, useMultipleSelection } from 'downshift';

export const MultiSelect = ({ items, label = 'Choose an environment', children }) => {
  const { getDropdownProps, addSelectedItem, removeSelectedItem, selectedItems } = useMultipleSelection({
    initialSelectedItems: [items[0]]
  });
  const { isOpen, getToggleButtonProps, getLabelProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({
    items,
    onStateChange(changes) {
      switch (changes.type) {
        case useSelect.stateChangeTypes.ItemClick:
          return {
            ...changes,
            isOpen: true
          };
        default:
          return changes;
      }
    }
  });

  return (
    <Box>
      <Label mb="sm" {...getLabelProps()}>
        {label}
      </Label>
      <Button {...getToggleButtonProps(getDropdownProps({ preventKeyAction: isOpen }))}>{children}</Button>
      <List {...getMenuProps()} position="absolute" bg="black" css={{ zIndex: 3 }}>
        {isOpen &&
          items.map((item, index) => (
            <ListItem              
              key={`${item}`}
              {...getItemProps({
                item,
                index,
                onClick() {
                  if (selectedItems.includes(item)) {
                    return removeSelectedItem(item);
                  }
                  addSelectedItem(item);
                }
              })}
            >
              {item}
              <Checkbox readOnly checked={selectedItems.includes(item)} />
            </ListItem>
          ))}
      </List>
    </Box>
  );
};

</details>

jorgemoya

comment created time in a month

PR opened downshift-js/downshift

Remove shit

<!-- Thanks for your interest in the project. Bugs filed and PRs submitted are appreciated!

Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Also, please make sure you're familiar with and follow the instructions in the contributing guidelines (found in the CONTRIBUTING.md file).

If you're new to contributing to open source projects, you might find this free video course helpful: http://kcd.im/pull-request

Please fill out the information below to expedite the review and (hopefully) merge of your pull request! -->

<!-- What changes are being made? (What feature/bug is being fixed here?) -->

What: :hankey:

<!-- Why are these changes necessary? -->

Why:

<!-- How were these changes implemented? -->

How:

<!-- Have you done all of these things? -->

Checklist:

<!-- add "N/A" to the end of each line that's irrelevant to your changes -->

<!-- to check an item, place an "x" in the box like so: "- [x] Documentation" -->

  • [x] Documentation
  • [ ] Tests
  • [ ] TypeScript Types
  • [ ] Flow Types
  • [x] Ready to be merged <!-- In your opinion, is this ready to be merged as soon as it's reviewed? -->

<!-- feel free to add additional comments -->

+1 -1

0 comment

1 changed file

pr created time in a month

push eventEddyVinck/downshift

Eddy

commit sha 918262b34c87b153ff073b43eb03813cbffc109e

Remove shit

view details

push time in a month

fork EddyVinck/downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

http://downshift-js.com/

fork in a month

starteddfahlander/Dexie.js

started time in 2 months

startedjakearchibald/idb-keyval

started time in 2 months

issue commentrecharts/recharts

Time series example

Thanks @dsandmark!

So to summarize: make sure the value on the XAxis is a unix timestamp and then add the following to the XAxis component

<LineChart data={data}>
  <XAxis
    // Makes the chart a time series chart
    tickFormatter={unixTime => format(fromUnixTime(unixTime), 'MMM')}
    type="number"
    domain={['auto', 'auto']}
  />
</LineChart>

After reading the docs I'm still not entirely sure what ['auto', 'auto'] does, but I believe it positions the ticks evenly like a time series chart would. It even added a tick outside of my data range with the correct date. I even briefly checked the source code but it wasn't very clear to me since there's a lot going on.

Hyllesen

comment created time in 2 months

startedgetify/You-Dont-Know-JS

started time in 2 months

startedPaulieScanlon/gatsby-mdx-embed

started time in 2 months

issue openedmicrosoft/vscode

Import suggestions not showing the source (only shows `Auto import from '...`)

<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ --> <!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ --> <!-- Please search existing issues to avoid creating duplicates. --> <!-- Also please test using the latest insiders build to make sure your issue has not already been fixed: https://code.visualstudio.com/insiders/ -->

<!-- Use Help > Report Issue to prefill these. -->

  • Version: 1.48.0-insider
  • Electron: 7.3.2
  • Chrome: 78.0.3904.130
  • Node.js: 12.8.1
  • V8: 7.8.279.23-electron.0
  • OS: Linux x64 5.3.0-62-generic

Steps to Reproduce:

  1. Try to import a file with the import suggestions (in my case, type <BarChart
  2. See the import suggestions and notice they don't show the source of the import

image

This makes it very hard to decide which import you need when names of functions or components overlap.

<!-- Launch with code --disable-extensions to check. --> Does this issue occur when all extensions are disabled?: Yes

created time in 3 months

issue commentDefinitelyTyped/DefinitelyTyped

[styled-component] Support css prop

Here is my setup for using object styles.

import "styled-components"
import {
  CSSProp,
  InterpolationFunction,
  ThemedStyledProps,
  CSSObject,
} from "styled-components"
import { theme } from "../styling/theme"

type CSSFunction = (args: { theme: typeof theme }) => CSSObject

declare module "react" {
  interface Attributes {
    css?: CSSObject | CSSFunction
  }
}

type Theme = typeof theme

// https://github.com/styled-components/styled-components-website/issues/447
declare module "styled-components" {
  export interface DefaultTheme extends Theme {}
}

Which allows you to write it like this:

<div
  css={({ theme }) => ({
    marginBottom: theme.spacing.lg,
  })}
>
  <Img fluid={featuredImage.childImageSharp.fluid} />
</div>

I couldn't find a solution online so I'm sharing mine. Not very experienced with TypeScript so far but this worked well for me.

sarod

comment created time in 3 months

startedleonardomso/33-js-concepts

started time in 3 months

more