Jane Ori

Posted on Jul 17, 2022

Share your ideas that never made it to production

#javascript #webdev #discuss #css

Got any ideas buried in your git history that never made it to production?

Give it a chance in the spotlight; Throw it in a codepen or just talk about it in the comments below!

Here's my contribution:

Prior to the launch of augmented-ui v1.0.0 in 2019, early builds of the website's introductory animation also featured this 3D CSS animation behind it. The background animation was removed for performance reasons but still exists in the commit history. 💜

Hopefully this codepen helps give life to the idea that couldn't make it to production ~

// Jane Ori

Top comments (51)

BaasMurdo • Jul 18 '22 • Edited

An idea I had privately in my head. Basically a single browser that you can choose what render engine and javascript engine to use.
For instance when opening a new tab, you could choose a Blink render engine with a V8 javascript engine and that would be Chrome.
But you could then open another tab, a combination of WebKit and Nitro and then it would be Safari.

The whole idea is that web developers can see / test everything in one browser that renders it the same as they would in the real Chrome / Edge / Safari.

Kristoffer • Jul 21 '22

Like this? responsively.app/

BaasMurdo • Jul 21 '22

Almost. so this seems to render in different sizes or devices if you will.
But for theMacBook Pro 13" for instance, you can't seem to select via which render engine (browser) to open the site in.
I might be wrong, but at a quick first glance it seems to use a Chromium type of render engine.
Where my thought is to implement a choice of different render engines, rather than a choice of device size (although still very useful)

So that you can see a site, the way it would actually render on an iPhone X but in Chrome & Safari (using their native rendering)
if that makes sense ?

Kristoffer • Jul 21 '22

Right. Makes sense. Would be very useful with a combination of both if that's possible.

BaasMurdo • Jul 22 '22

Hell yea ! would be awesome !

BaasMurdo • Jul 21 '22

hmmmm interesting, let me give it a go and get back to you.

Zubair Khan • Jul 21 '22

I thik browserstack has that thing

BaasMurdo • Jul 21 '22

Yea there are a couple of place that you can pay to spin up some virtual machines / devices, they work quite well in most situations.

Medea • Jul 17 '22

a website which would give you songs to listen to based on your song taste and your mood

Filip Ilić • Jul 18 '22

But I have Spotify

Medea • Jul 18 '22

Yes but Spotify doesn’t have albums for every mood.
But yeah I realised it was a stupid idea and gave up half way through

Vipul Dessai • Jul 18 '22

no they have no, based on the mood, like "life sucks" :-P

Medea • Jul 18 '22

but is that based on your music taste?

Vipul Dessai • Jul 18 '22

yeah, they do make daily mix or discover weekly, they pretty much align with my music taste.

Medea • Jul 18 '22

Oh yea

BaasMurdo • Jul 18 '22

Deezer has something like this.

Medea • Jul 18 '22

Oh okay

BaasMurdo • Jul 18 '22

How good it actually works is an entirely other discussion lol, but in theory they have this kinda functionality.

JoelBonetR 🥇 • Jul 18 '22

Youtube music and spotify also had a work on that 😁

Medea • Jul 18 '22

Yea I saw Spotify’s and it’s funny how I used Spotify Auth for the project

Guilherme • Jul 18 '22

I also had this mood based song player in my idea list! But yeah I never even tried to get it started.

Medea • Jul 18 '22

I actually started on it and made a function for that, but just had other enhancements I didn’t bother doing

JoelBonetR 🥇 • Jul 18 '22 • Edited

If you make one that adds you songs step by step to raise you from a bad mood to a good one progressively it would be a top tier product 😁

Medea • Jul 18 '22

I might try some day! Thanks!

Aurélien Delogu • Jul 18 '22

Last.fm?

Medea • Jul 18 '22

oh.

Taufik Nurrohman • Jul 18 '22

A client-side JavaScript syntax highlighter that fetches only the required language files based on class names and/or data-* attribute.

JoelBonetR 🥇 • Jul 18 '22

Something like a new i18n plugin?

Taufik Nurrohman • Jul 19 '22

No. A source code highlighter.

JoelBonetR 🥇 • Jul 19 '22

Didn't get it then. Can you explain it with detail and use-case? Thank you :)

Taufik Nurrohman • Jul 19 '22 • Edited

See this example that uses custom builder. Currently there is no way to load the language files dynamically. You still have to load them all at once even if you don’t need it.

I have made a plugin to overcome that, but never got into stable state. I still consider it buggy.

JoelBonetR 🥇 • Jul 19 '22 • Edited

You don't need to load them all.
Just use dynamic imports...

const translation = (locale) => import(`/translations/lang-${locale}.js`);

or async:

const loadTranslations = async (locale) => await import(`/translations/lang-${locale}.js`);

Another (more robust) example:

/**
 * Retrieves translations from a given locale
 * @param {string} locale
 * @returns {Object}
 */
const getTranslations = (locale) => {
  try {
    const availableLanguages = {
      en: dynamic(() => import('/translations/en.js')),
      es: dynamic(() => import('/translations/es.js')),
    };

    if (!availableLanguages.hasOwnProperty(locale)) {
      console.error(`getTranslations error. Could not load translations for ${locale}`);
      return availableLanguages['en']; // DEFAULT
    }
    return availableLanguages[locale];
  } catch (error) {
    console.error(`${error.message} in ${error.stack}`);
  }
};

Here we are declaring the available langs so it will not fail in runtime trying to load a nonexistent file for any other error, and it will return the default language in case of such error.

You can use next/dynamic if working with Next JS like me in this last example (note that there's no dynamic function declared; if you are not using Next JS, it needs to be done but you can use the first or second example to create a dynamic implementation quickly).
i.e.

const dynamic = (path) => import(`${path}`);

Here you can find a dynamic import explanation from javascript.info

Apart from those options, in most webapps is better to handle translations through the DB so you can build a dashboard and people that work as translators can do their thing on it instead. No more releases to fix a string 😄

Best regards

Ben Hatsor • Aug 9 '22

A plugin like this one?

JoelBonetR 🥇 • Aug 9 '22

Why do you want a plugin when it's so easy to handle with vanilla JS?

Edenn Touitou • Jul 18 '22

A PHP framework that could generate API endpoints based on YAML config files, with form validation and authorization and what not. And with a dynamic database handling all kinds of datas with only 3 or 4 tables.

And then I learnt that APIplatform exists, and does all of that already

Kolja • Jul 18 '22

Great idea!
Can you give me a list of those PHP API platforms?

Edenn Touitou • Jul 18 '22

Here you go

api-platform.com/

Kolja • Jul 18 '22

Thank you, looks overwhelming to me. Maybe a to hard learning curve.

Edenn Touitou • Jul 18 '22

Yeah you would need solid Symfony (the framework on which APIplatform is based) knowledge first to use it. In the end, it's a great tool for prototyping and small project.

Wahyu SA • Jul 26 '22

Exam Companion

Try to build chrome extension to recommend an answer when doing online exam, at least I already know to modify DOM from an extension and build my flask API, but I don't really understand to build the prediction/machine learning part 🤔 and now they used something like exam browser so the extension would be disabled 🤣 and I realize there is no need "prediction/machine learning" things to do that, you can just do it by yourself right ? just choose the answer.. if you need to choose 1 from 5 choices then the prediction should be 20% correct 🧙‍♂️

Jon Randy 🎖️ • Jul 18 '22

What do you mean by 'made it to production'? Not everything needs to be a product, not everything needs to be released, not everything needs to be useful or have a reason to exist... and nothing is ever 'finished'.

Most of my repos are just toys for my amusement - and these are by far the most interesting things to build.

BaasMurdo • Jul 18 '22

and nothing is ever 'finished'

Tell that to the empty cookie box next to me.

JoelBonetR 🥇 • Jul 18 '22 • Edited

Well sometimes I get paid when finishing things so... 😂

Got your point, bet @janeori is thinking about something that you feel like "marketable" or at least "shareable" and ended up in a closed drawer for any issue, lack of time, loss of interest or whatever other reason.

🚩 Atul Prajapati 🇮🇳 • Jul 18 '22

I have a big list, LOL by the way great question

Well • Jul 21 '22

the banner picture hahaha it clearly relates the title.

Peter Vivo • Jul 18 '22

Imho, this design idea is good but, but mandatory run smotth as possible, aroun 60 FPS and more. I did not look the code, but if you could mix with some exsisting UI solution like tailwind then it will be promising.

Melvin Jones Repol • Jul 18 '22

I have a complete based idea about the update on my app the latest update was Feb the update released should be daily for dev and monthly for stable but 5 months later no stable release in the moment the idea turn into rock.. So all of the new features and improvements which is already planned didnt go to production 100% delayed by months...

View full discussion (51 comments)