Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Hahaha no judgements. Still I let you some polling thingy I had here that may be more suitable:
constpoll=async({fn,validate,interval,maxAttempts})=>{letattempts=0;constexecutePoll=async(resolve,reject)=>{constresult=awaitfn();attempts++;if(validate(result)){returnresolve(result);}elseif(maxAttempts&&attempts===maxAttempts){returnreject(newError('Exceeded max attempts'));}else{setTimeout(executePoll,interval,resolve,reject);}};returnnewPromise(executePoll);};
poll function is a higher-order function that returns a function, executePoll.
executePoll function returns a promise and will run recursively until the condition is met.
Args explained:
fn: an API request (or another async thingy that suits for this polling).
validate: Test function to see if the data matches what we want, in which case it will end the poll.
interval: To specify how much it wait between poll requests.
maxAttempts: how many tries before throwing an error.
I couldn't sleep last night and read this comment at 3am. Coincidentally, today, I needed this poll. Works great in my usEffect().
The only thing that caught me is that the parameters to the above poll function are in a class, instead of individual parameters.
Thanks for the code!
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Didn't get the meaning of the sentence "The only thing that caught me is that the parameters to the above poll function are in a class, instead of individual parameters." still glad to see it helped you 😁
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Oh! nothing to do with classes it's just it receives an object but this is opinionated as I prefer to have the object structure for those "config" thingies, you can simply delete the brackets on the function declaration like that:
Nice snippet.
The new Promise callback should not be an async function. By passing an async fn to new Promise you’re “double promising”.
Refactoring to not depend on resolve/reject would solve that.
Or maybe
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Having it as async lets you handle the response, the error and any action to perform either it went OK or KO, so it can be customised specifically on it's environment.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Of course but what I want to check is the details on what's happening on this TextDecoder(), it's decode method and also the reason for it to use an array of 8-bit unsigned integers 😂
TextEncoder and TextDecoder convert strings to and from their equivalent UTF-8 bytes. So for example, new TextEncoder().encode('foo 福 🧧') gives Uint8Array [102, 111, 111, 32, 231, 166, 143, 32, 240, 159, 167, 167], where bytes 0..2 represent the 3 ASCII characters "foo", 4..6 represent the single 3-byte character "福", and 8..11 represent the single 4-byte character "🧧" (3 and 7 are spaces).
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
I have an informal stash of useful regexes I copy and paste as needed. Informal meaning it's not quite organized enough for me to cleanly list them here, but it's sort of a system I have that has evolved naturally.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
So this kind of things that are informal till you make a repo out of it because you've used it in like 30 projects and it has been standarized in some sort across your software😂
exporttypePartialBy<T,KextendskeyofT>=Omit<T,K>&Partial<Pick<T,K>>;exporttypeMaybeNull<T>=T|null;exporttypeMaybeUndefined<T>=T|undefined;exporttypeMaybeNil<T>=T|null|undefined;exporttypeAsyncFn=(...args:any[])=>Promise<any>;exporttypeAnyFn=(...args:any[])=>any;exporttypeUnboxPromise<TextendsPromise<any>>=TextendsPromise<inferU>?U:never;exporttypeNullable<T>={[PinkeyofT]:MaybeNull<T[P]>;};exporttypeNullableBy<T,KextendskeyofT>=Omit<T,K>&Nullable<Pick<T,K>>;exporttypeDistributedArray<U>=Uextendsany?U[]:never;/**
* type ID = string | number;
* type T0 = ID[];
* type T1 = DistributedArray<ID>;
* type EQ1 = IfEquals<T0, T1, 'same', 'different'>; // different
*/exporttypeIfEquals<T,U,Y=unknown,N=never>=(<G>()=>GextendsT?1:2)extends<G>()=>GextendsU?1:2?Y:N;exporttypeOptional<T,KextendskeyofT>=Pick<Partial<T>,K>&Omit<T,K>;exporttypeValueOf<T>=T[keyofT];
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
I don't really have snippets I reuse. I might occasionally pinch a function from another project, but there's nothing I can think of that would be worth a snippet, and I've never really remembered to use them when I've tried.
I do have these vim mappings for older PHP projects which don't have much in the way of development tools:
They'll let me paste in a variable dump with my cursor positioned where I need to put in the thing to debug, or a generic stack trace. They also cope with frameworks that do tricky things with output buffering.
I have an rng function that returns a random number between 1-x, and a randomizer function that returns a random item from an array-- the latter is probably used even more than the former!
I also set up a janky function to populate complicated dropdown menus based on arrays and nested arrays (element ID, array, dropdown type). I've ended up reusing it much more than anticipated, so should probably refactor it, ha.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
This is one I made and using across many projects.
/**
* Takes full name and converts into initials
* @param {string} string full name of user e.g John Doe
* @returns initials e.g JD
*/constgetInitials=(string='')=>string.split('').map(([firstLetter])=>firstLetter).filter((_,index,array)=>index===0||index===array.length-1).join('').toUpperCase()
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
For input like Mary Jane Watson, your function returns MJW, and his returns MW.
It's common practice to use only two letters as initials on avatars (eu.ui-avatars.com/api/?name=Mary+J...)
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
That was one of my first thoughts but initials depend on the country, so my name is Joel Bonet Rxxxxx, being Joel my name and Bonet + Rxxxxx my two surnames.
So in this case I'll be JR with this approach which in my country and according to my culture or what is reasonable, it should be JB. (first character of the name + first character of the surname).
That's the main reason for getting separate fields for name and surname/s.
So your name can be "Mary Jane Linda" and your surnames can be "Lee Bonet".
You must restrict your initials to some letter count either one or two, see your initial from the above fn will grow with no. of words in a name which is not favourable to be called 'initials'
And yes my country surnames is at last so picking the last one in my code 😅
Depends on the type of project.
For react websites I have a blocker (loading animation, waiter) which is 80% universal, maybe add a custom (s)css to style it.
I also keep a standard react-table setup that adds a layer upon react-table fixing the issues it has in typescript (types aren't extended when a function is added,)
Nice to meet you, ma fren 🫡. Sorry, I ain't DEVing that much ✍️ , primarily due to the nature of maintaining Open Source projects 👷, while also gigging 💰. Anyways, stay humble like a bumblebee 🐝.
Top comments (52)
This little snippet to sleep
I'm afraid to ask where you need this one 😂😂
I've used it for polling. And... Sometimes you got to do what you got to do 😂
Hahaha no judgements. Still I let you some polling thingy I had here that may be more suitable:
poll
function is a higher-order function that returns a function,executePoll
.executePoll
function returns apromise
and will run recursively until the condition is met.Args explained:
fn
: an API request (or another async thingy that suits for this polling).validate
: Test function to see if the data matches what we want, in which case it will end the poll.interval
: To specify how much it wait between poll requests.maxAttempts
: how many tries before throwing an error.😁
I couldn't sleep last night and read this comment at 3am. Coincidentally, today, I needed this poll. Works great in my usEffect().
The only thing that caught me is that the parameters to the above poll function are in a class, instead of individual parameters.
Thanks for the code!
Didn't get the meaning of the sentence "The only thing that caught me is that the parameters to the above poll function are in a class, instead of individual parameters." still glad to see it helped you 😁
Apologies, I didn't explain correctly.
Initially, I called the poll function incorrectly as follows:
The correct method (using your code) is:
Oh! nothing to do with classes it's just it receives an object but this is opinionated as I prefer to have the object structure for those "config" thingies, you can simply delete the brackets on the function declaration like that:
and we should be good 😁
Nice snippet.
The new Promise callback should not be an async function. By passing an async fn to new Promise you’re “double promising”.
Refactoring to not depend on resolve/reject would solve that.
Or maybe
Having it as async lets you handle the response, the error and any action to perform either it went OK or KO, so it can be customised specifically on it's environment.
instead handling it as generic inside the polling function.
But sure you can tweak it as you wish to fullfill your needs 😄
This one is pretty neat, I also use it sometimes to "mock" API responses like this 👇
I love that one!
Love this
I've never used that one xD
Here are a few of the more generally useful ones:
Those are currently very useful ones!
I've a slightly different base64encode one
I'll check the differences later 😁
The base64 functions from @lionel-rowe are compatible with (most) browser. The fs module is only available in Node.js :)
Of course but what I want to check is the details on what's happening on this
TextDecoder()
, it'sdecode
method and also the reason for it to use an array of 8-bit unsigned integers 😂TextEncoder
andTextDecoder
convert strings to and from their equivalent UTF-8 bytes. So for example,new TextEncoder().encode('foo 福 🧧')
givesUint8Array [102, 111, 111, 32, 231, 166, 143, 32, 240, 159, 167, 167]
, where bytes 0..2 represent the 3 ASCII characters "foo", 4..6 represent the single 3-byte character "福", and 8..11 represent the single 4-byte character "🧧" (3 and 7 are spaces).Thanks you for the explanation! 😁
I have an informal stash of useful regexes I copy and paste as needed. Informal meaning it's not quite organized enough for me to cleanly list them here, but it's sort of a system I have that has evolved naturally.
So this kind of things that are informal till you make a repo out of it because you've used it in like 30 projects and it has been standarized in some sort across your software😂
utils/ts-utility-types.ts
:C'mon show us some functions 🤣🤣
I'm not sure about those TypeDefs honestly, I think it's better to have an inline, let's say:
so it's more clear for everyone than saying
but to keep the honesty in this comment, this is opinionated and I may be wrong 😅
I don't really have snippets I reuse. I might occasionally pinch a function from another project, but there's nothing I can think of that would be worth a snippet, and I've never really remembered to use them when I've tried.
I do have these vim mappings for older PHP projects which don't have much in the way of development tools:
They'll let me paste in a variable dump with my cursor positioned where I need to put in the thing to debug, or a generic stack trace. They also cope with frameworks that do tricky things with output buffering.
That's about it.
😂 I was recently wondering why should I keep doing that for every new project idea, so I made a ts npm package to just import my own code everywhere.
Take a look if you want: npmjs.com/package/js-math-and-ui-u...
I work a lot with animations and free-hand user input so one often use is
getQuadraticBezierCurvePointAtTime
:I have an rng function that returns a random number between 1-x, and a randomizer function that returns a random item from an array-- the latter is probably used even more than the former!
I also set up a janky function to populate complicated dropdown menus based on arrays and nested arrays (element ID, array, dropdown type). I've ended up reusing it much more than anticipated, so should probably refactor it, ha.
We all have those
TODO: Refactor this function/method
at the bottom of our TODO list 😂This is one I made and using across many projects.
It seems a bit overcomplicated to me, I'd do something like:
I think it does the same but... Am I missing something maybe? Probably some use case that is not in my mind 😅
For input like
Mary Jane Watson
, your function returnsMJW
, and his returnsMW
.It's common practice to use only two letters as initials on avatars (eu.ui-avatars.com/api/?name=Mary+J...)
That was one of my first thoughts but initials depend on the country, so my name is Joel Bonet Rxxxxx, being Joel my name and Bonet + Rxxxxx my two surnames.
So in this case I'll be JR with this approach which in my country and according to my culture or what is reasonable, it should be JB. (first character of the name + first character of the surname).
That's the main reason for getting separate fields for name and surname/s.
So your name can be "Mary Jane Linda" and your surnames can be "Lee Bonet".
and still getting ML as initials which would be the most correct output as far as I can tell.
Here I am enjoying all the great, open conversations about programming and now I learn something about other cultures too. #Winning
You must restrict your initials to some letter count either one or two, see your initial from the above fn will grow with no. of words in a name which is not favourable to be called 'initials'
And yes my country surnames is at last so picking the last one in my code 😅
Depends on the type of project.
For react websites I have a blocker (loading animation, waiter) which is 80% universal, maybe add a custom (s)css to style it.
I also keep a standard react-table setup that adds a layer upon react-table fixing the issues it has in typescript (types aren't extended when a function is added,)
The
rafce
shortcut is a life-saver.