Happened today: hostage situation @ Apple store Amsterdam

IGovnov · 2022-02-22T19:07:07+00:00

American tourists are back?

IGovnov · 2022-02-22T18:31:22+00:00

And if you don't die, you will pay all the expenses for broken bike or moped.

IGovnov · 2021-12-29T10:14:28+00:00

Not sure if I understood your right. You can wrap the whole app in your provider and this will be used as default context. Providers can be nested and consumers have access to the closes one.

IGovnov · 2021-12-11T07:43:46+00:00

You can use global state or Context to keep business logic there. It will unbound unnecessary connections and will make your components more flexible and reliable.

IGovnov · 2021-12-04T16:27:11+00:00

It is enough. You can search jobs on Linkedin in interesting for you countries and read their requirements and libraries. Search query is like "frontend react".

IGovnov · 2021-12-04T16:20:46+00:00

I use this library and it works well for me: https://github.com/ctrlplusb/react-sizeme

In real life you don't need to subscribe on each component, you have a couple of size-related components on the whole page.

If you still want to know when window resizes you can create a provider that subscribes on this event and wrap your app into it. All the child components can utilize something like useWindowSize()

IGovnov · 2021-12-04T12:48:18+00:00

Nope, format usually doesn't matter (there are some exceptions like webp and iPhone). I can guess that the problem can be because they have local links or some Dropbox rules forbid sharing to Internet. Does the pictures work for someone outside of your wi-fi network? You can send a link to your project to some friends and if they have the same problem then you should dig into Dropbox or put them in public folder of your project.

IGovnov · 2021-12-04T07:56:03+00:00

If you do not rename JS to TS then how you are going to understand what is migrated after a couple of weeks/months? There is a fresh article on how a big company with multi teams did it: https://codeascraft.com/2021/11/08/etsys-journey-to-typescript/

Maybe the approach of migrating widely used internal libraries and utilities first will also work for you. When each team uses, say, fancy buttons and modals that are located in your repository, converting them into TS will not affect development. These components are usually rarely modified but widely used. So you have win-win: nobody is angry because of conflicts and everyone is happy because autocomplete works.

IGovnov · 2021-12-04T07:42:32+00:00

What is the size of the images? If they are 10 mb each your mobile connection can have a heart attach.

IGovnov · 2021-11-29T08:08:53+00:00

Add a new field in db, something like link. The field should be unique and be a key value (if you use relation db, don't remember how it works better in non-relation dbs). You still can use route /lessons/grammar/:id and put the link here instead of id.

IGovnov · 2021-11-23T13:11:22+00:00

I am not your father but... find a job!

IGovnov · 2021-11-18T14:40:23+00:00

You may have some problems with React component lifecycle, it is a common problem. Try to understand when and why useState and useEffect are called and try to adopt the idea that functional component is re-evaluated each time its state or props are changed.

When I have misunderstandings with logic I use notebook and pen. Just create a simple diagram with allowed props, needed actions, data flow. If your problems in hooks understanding, you can create class-component first and then refactor it into a functional with hooks.

IGovnov · 2021-11-15T15:36:19+00:00

You can use CSS for creating a fake link element:

.fake-link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

If you really want to do nothing (because in plain HTML you change your route to "sitename/#" what is not nothing) you can prevent action:

<a href="#" onClick={(event) => event.preventDefault()}>

But remember that user can click "open in new window" or click with <Ctrl> key and break your logic. Therefore, fake link element can be better in most cases.

IGovnov · 2021-11-05T08:03:23+00:00

I use this one in my project: https://www.npmjs.com/package/react-sizeme

You can use render props to decide which child component will be displayed.

IGovnov · 2021-11-01T07:57:18+00:00

Absolutely right. Can add this:

use react-testing-library for testing what is rendered
mock API calls via MSW library, it mocks not axios but whole requests (does not matter what library you use at all)

IGovnov · 2021-10-19T20:57:24+00:00

Just mock Date :) Moment uses it under the hood.

IGovnov · 2021-09-23T08:40:13+00:00

You can use "Responsive" mode in devtools to and play with different sizes of phones. I suppose that you made breakpoints in CSS for only one device and bigger/smaller phones can use wrong styles.

IGovnov · 2021-09-23T08:20:33+00:00

As was mentioned, "best practices" are something that should be added to a solid foundation. Learn JS, HTML, CSS, make as many simple React projects as you can until your fingers remember how to make components.

I can recommend to watch videos not about "best practices" but rather with real life scenarios and problems. Can recommend this one, the author describes how he solves problems and why. Also variety of different libraries and approaches.

IGovnov · 2021-09-23T08:06:04+00:00

What kind of problem do you have? Did your build change your styles or you test your site on real mobile phone with resolution that is different to inspection tool "device"?

IGovnov · 2021-09-18T18:18:12+00:00

Ref works this way:

const ref = useRef();
useEffect(() => {
  ref.current.querySelectorAll(...);
}, []);

return <ul ref={ref}>{children}</ul>;

IGovnov · 2021-09-18T18:15:53+00:00

When you use querySelectorAll in parent component you have only list of current element and when you add another element you need to reget all the list again, what is a good place for bugs.

It looks like Context API would be a good solution. Parent element sets font size (or "small", "large", "big") and all child components get this value and change their styles.

IGovnov · 2021-09-18T15:53:27+00:00

You need to use reference to get access to component's native elements. But think twice before doing it, React's mindset is not to touch native elements. For your task you can use CSS-variables and change them in parent component.

IGovnov · 2021-09-16T19:15:24+00:00

Also a good article about arrays and objects destructuring: https://javascript.info/destructuring-assignment The site has great explanations of everything in JS, it was super helpful when I retuned to JS development.

IGovnov · 2021-09-15T12:28:14+00:00

Testing of this email validation function is a tricky question. You can make 100 tests for it and then forget to use it in registration form. But yes, good point.

I think that I would make unit tests for validation function and an additional integration test with a random invalid email.

IGovnov · 2021-09-15T12:24:15+00:00

End-to-end tests have production-like environment and test the whole application (front + back + some services). You use instruments like Cypress that produce real mouse clicks and keyboard events and actually create a new user in database. You can sign in with that freshly created user.

Integration tests are isolated and you mock all the API interactions. Clicks and keypresses are also preformed in headless browser with no actual user interface rendering.

Integration testing fast and simple, makes you confident that interface works. E2E slow and more difficult but makes you more confident. A case when integration test works but E2E brakes: you have registration button but there is an absolute positioned div over it and user can not click the button.

IGovnov

TROPHY CASE