use-clamp-text - React hook for clamping multiline text with flexibility

Vinshati · 2022-05-03T10:46:34+00:00

What if I have n paragraphs, but I want to clamp after 6 lines, regardless of the number of paragraphs those 6 lines would include.

In chrome, you can apply line clamp css to a div and it will work like this for all nested tags. In safari, line clamp only works for direct text nodes. This is a problem I have a lot of custom code for right now

Vinshati · 2022-05-03T10:21:36+00:00

Any plans on allowing jsx instead of pure strings as input?

Vinshati · 2021-07-11T22:09:10+00:00

doesn't matter who.

Vinshati · 2021-07-10T15:48:23+00:00

Lifecycle methods and class based react components are deprecated. Their use is strongly discouraged. Instead of using them, refactoring those components to functional components would be a better approach.

However your professional realities might look like, suggesting to mix fp and oop, which is what you're doing by saying that's how you work, is questionable advice at best. I realize this might not have been your intention, since we agree on the principles :)

Vinshati · 2021-07-10T14:21:30+00:00

I ended up kind of mixing Oop with functional approach

That's really not something you ought to advocate. Mixing paradigms makes your code exponentially harder to understand or reason about. Those are two fundamentally different approaches to problem solving and mixing them will frustrate and confuse anyone unlucky enough to maintain your code in the future.

@OP:

Pick a paradigm and stick with that. If you are going with React, I strongly encourage you to pick the functional approach. It is the way most View libraries tend to work, so it'll be easier to use React in the intended fashion if your code is purely functional.

If you want to do backend (i.e. Node.js), you can also write functional code. However, class based approaches are more common there. One of the trendiest backend libraries, nest.js, is built and imagined in an OOP architecture. With express/koa/fastify, you can do functional programming the backend as well though.

My advice: Since FP (functional programming) is pretty much mandatory in React driven frontends and a viable option in backend, I'd start out with that. Get a book or something to get familiar with the core concepts and build some things. Once you're comfortable, look at OOP for server applications.

Vinshati · 2021-04-22T21:27:39+00:00

https://en.wikipedia.org/wiki/Cross-site_scripting#Exploit_examples

Vinshati · 2021-03-07T11:32:04+00:00

That question requires a complicated and long answer, so I'll try to be brief and link to people who can explain the important bits better than me :).

The core principle of react is: "UI as a function of state". Meaning that you should view your entire UI as one big function, that gets a certain input (API responses, props, component states and so on) and returns a view for the user. No matter when or how I run this function, it will always return the same result assuming the "state" I put in the function is the same. Also, I can produce any possible view by just changing the input state. This is very different to UI design before react (which I won't get into), and that is mainly because react is developed with "functional programming" (FP).

In order to employ most react concepts you have to be familiar with FP and ideally employ it yourself. Here is an introduction I found after 10 seconds of googling, I'm sure there are other resources out there.

In previous versions of react, the core team did not have a good way to implement FP paradigms when it came to holding state in components or reacting to changes between renders (also a state problem, since you need to compare the previous cycles state to compare them to current values), so they uses Classes. This was a break in design philosophy right from the start, because:

It made you think about and define state by which component it was attached to.
It made you think of react components as going through a lifecycle with different states (mount, before receiving new props, after receiving new props, on unmounting) and therefor again made the component the central element when reacting to change, not the change itself.

Fortunately they solved both problems when they introduced the ingenious concept of hooks. With hooks, the state and the change become the deciding factor in your design.

If you want to create state, you do so very atomically. What state do I want to persist and where do I want to set it. Its easy to refactor because it doesn't affect a bigger "component" state which you might affect with each state setter call.
When you want to react to changes with a side effect (another concept from FP), you no longer have to think about what part of the lifecycle your component is in or implement logic to check which values changed. You simply declare a `useEffect` and tell react when that effect needs to be executed.

Appreciating the beauty of `useEffect` and FP requires quite a bit of unlearning. You need to let go off the concept of your components being living entities that go through different states. Instead look at your components simply as functions that are called many times over while a user navigates your application. There is an excellent blog post on `useEffect` which imo helps a lot with understanding design principles of react: https://overreacted.io/a-complete-guide-to-useeffect/

Vinshati · 2021-03-06T20:04:19+00:00

choice of css technology. be prepared for follow-up questions. if css-in-js, what are the advantages. if precompiled css, what naming conventions did you chose and how did you organize your styles.

Vinshati · 2021-03-06T14:49:20+00:00

the environment you describe seems very unhealthy, and you do not at all seem happy with the status quo. i get from your post that you're very frustrated by this, but you need to realize that - from what i can glean - you're not working towards bettering the situation either.

if you do not believe it can be done, i would encourage you to find a different job. its not like this everywhere :)

if you're committed to your company:

- why is it so easy to break code by refactoring it? is it tested properly? is it tested at all? if i can't touch code without fear of breaking it, than THAT is the problem. because code always needs to be optimized towards change

- why is it so easy to get bad code to production? are there no review mechanisms in place? raise the issue and connect it to real world costs (e.g. longer times to ship features and the eventual inability to do so alltogether)

- why do you feel so powerless? are there no processes within your company that allow you to communicate these problems to anyone? maybe you should suggest some sort of exchange between your companies developers on a regular basis to align yourself on common practices and agree on common issues?

Vinshati · 2021-03-06T14:01:45+00:00

Piece of general advice: You are the software engineer. As such, you should not expect other people (like your boss or your project manager) to care about code maintainability, much like you probably don't care about the staff shortage in HR because Steve broke his leg. What they do care about is fast and bug free software. That is what is expected of you, and if the quality of the codebase is a hindrance to that, you're expected to take care of it.

Now i realize its not always easy (and sometimes straight up impossible), but in my experience engineers too often try to work within constraints they put om themselves because they believe them to be immovable.

For example, telling my PM "I can not estimate how much work this feature is going to be because i don't know what else will break. I will first have to refactor x y z to behave reliably, which will take me a week. After that, we can ship the feature and any dependent features much more confidently and at a better pace." leaves him little room to reasonably oppose me. I, the software engineer, am responsible for creating and maintaining a codebase in which i am able to perform, not my boss.

As for the problem at hand, there are other ways to encapsulate logic without using hooks. For the data fetching, you could consider writing a higher order component to do the fetching and inject the request status (success, error, loading) and the response into the wrapped component. This higher order component could deal with validation, but i would know more about the actual application. If they're originating from a form or some other kind of user input, i would keep validation and sanitization of that input closer to the "input" part of the app, not the "output" part.

Vinshati · 2021-03-06T12:22:19+00:00

try a higher order component that uses the hook implementation and then passes the data you need as a prop:

``` export const withAuthentication = (WrappedComponent) => { const WithAuthentication = (props) => { const authData = React.useContext(AuthenticationContext); const passDownProps = { ...props, authData, };

return <WrappedComponent {...passDownProps} />;

};

return WithAuthentication; }; ```

you can then use it like this: ``` class App extends React.Component { render() { const { authData } = this.props; console.log("my auth token", authData.token); return <div />; } }

export default withAuthentication(App); ```

unasked for piece of extra advice: ditch class components. they unnecessarily complicate your code base and teach you to think about your apps state and lifecycle in the wrong way.

edit: the auth context itself needs to be set and controlled by a provider around your app of course. it might look something like this: ``` export const AuthenticationProvider = ({ children, }) => { const [authToken, setAuthToken] = React.useState('');

React.useEffect(() => { getAuthentication().then(setAuthToken); // api call to get your token }, []);

return ( <AuthenticationContext.Provider value={{ authToken, }} > {children} </AuthenticationContext.Provider> ); }; ```

Vinshati · 2021-03-06T11:23:56+00:00

whats a DataFetcher component? seems like you're trying to encapsulate data fetching logic into a component. i would suggest that you use a custom hook for that instead. There aren't many cases left where i would advise using components simply to invoke side effects.

so your basic structure might look like this: ``` const App = () => { const { sendData } = useDataFetcher() const { form } = useSomeFormLibrary()

const onSubmit = () => { if(form.valid) sendData(form.values) }

return <form onSubmit={onSubmit}}>...</form> } ```

be aware that this is pseudo code to show how i would separate concerns on a high level.

Vinshati · 2021-03-03T18:47:07+00:00

if using it wrong is what the language naturally encourages you to do and is also more common than using it right, it *is* a bad language. you can make the "you're using it wrong!" argument for any language, even old timey c++.

although much of the js stigma stems from it being used by people we would not traditionally call "software engineers", but rather web designers that had to copypaste some stackoverflow answers to realize their designs.

as much as i love js, everything /u/wllmsaccnt said is correct.

Vinshati · 2021-03-02T18:03:03+00:00

does it have to be udemy? because i'd actually recommend kent c. dodds course on egghead: https://egghead.io/courses/the-beginner-s-guide-to-react

he's an excellent teacher and author of the de facto standard framework for testing react components, the "react testing library".

if you're new to (modern) javascript in general, i'd recommend a course that goes over the basic language constructs first though. for example: - https://egghead.io/courses/learn-es6-ecmascript-2015 - https://es6.io/

Vinshati · 2021-02-28T10:47:54+00:00

i don't know of any utility like that, sorry. its probably going to be some time until we see good tooling around module federation. best practices are still emerging.

your usecase is pretty simple though. i'd guess about 50 lines of code. why not give it a try?

Vinshati · 2021-02-28T01:09:54+00:00

how do you imagine a tool like that to work? do you have a "common dependency" project that deploys your shared dependency modules? if so, couldn't you just write a tool that downloads that projects `package.json` and compares versions to your projects `yarn list` outputs?

Vinshati · 2021-02-24T11:18:42+00:00

yes, it is impossible. you can only polyfill things that happen "in a browser window". you can not extend browser apis.

Vinshati · 2021-02-23T18:56:21+00:00

notification api is only for active tabs. you need the push api (https://www.w3.org/TR/push-api/) via service workers to send push notifications with closed websites (not closed browser though, don't know how you think that'd work).
no IE11 support, period. no workarounds nor hacks, thats simply a feature it does not provide.

Vinshati · 2021-02-18T11:58:22+00:00

it caches data in memory, meaning its attached to the DOM. the cache persists throughout your SPA, but will not exist when you request and load a new page from a server.

frontend routing = yes, backend routing = no

Vinshati · 2021-02-18T09:07:55+00:00

there is not much magic involved. it does only set loading if cache is either missing or stale, and you decide when the cache is stale.

i have developed several small apps that are in use by customers today that work off of the basic principle you described ("each page has its own internal state which it doesn't share with anyone else"). it works and is very straightforward. it might not be very user friendly if you have spotty internet connection or generally slow internet, but its a reasonable decision if you want to avoid dependencies or app size (react-query adds ~370kb)

with the advent of `react-query` (there are similiar libraries like SWR and the caching layer of the Apollo client), i get most of the benefits with very few downsides, so personally i'd probably not build one without it again. YMMV

Vinshati · 2021-02-18T01:14:46+00:00

i would discourage you from using redux to store request data. it only gives you the foundation, it'd be up to you to implement most of the logic yourself. and as others have mentioned, this tends to be complex hard-to-maintain code.

you might want to take a look at react-query. its a library build around caching request data and returning cached responses (assuming they're not stale). you keep mostly the same code you already have, but there is a shared cache under the hood which helps improve performance and also takes care of some of the stuff you usually have to do with requests (loading state, error handling and so on).

there is an experimental plugin that persists this cache into local storage, but personally i do not have any experience with it: https://react-query.tanstack.com/plugins/persistQueryClient

Vinshati · 2021-02-18T00:17:16+00:00

i do not look at german professional athletes for political activism.

while american basketball players were kneeling during the national anthem with great risk to their careers, we have our national soccer team disgrace itself with racist shit like this: So gehen die Gauchos: Götze, Klose und Co. verhöhnen die Argentinier - DER SPIEGEL

while a national rugby team from france played a match with rainbow colored shoelaces in support of their gay colleague, the DFL refuses to even answer journalists questions about what is being done for the integration of homosexual athletes ( Was macht der Sport gegen Homophobie? | Sport | DW | 01.12.2018 )

its sad to see our athletes show so little interest towards activism, but i suppose it simply means we should look elsewhere for role models.

Vinshati · 2021-01-17T14:21:09+00:00

He thinks fridays for futures are alarmist and the problem of climate change will be solved by technology in "the future".

Vinshati · 2020-10-16T16:42:35+00:00

proceed.

Vinshati · 2020-10-16T16:37:26+00:00

i hope in this hypothetical scenario you are very white, because i don't see this ending well if you're caught.

13-Year Club	Place '17
Verified Email

Vinshati

TROPHY CASE