Nasreen is still coding in 2022

Nuss93 — Tue, 08 Mar 2022 07:35:46 +0000

Happy IWD to all my lady coders!

Programming and coding, the things that used to make me curl up and cry in the study room of my university back in 2016. Now, I can't believe I am coding in 2022.

This year, I wish to dive a lot more into AR, VR and Game Development. I want to be able to create 3D models using software like Blender and use them as assets in the games I develop. I hold on to my 2022 mantra, which is to become a jack of all trades, a master of none. But still better than a master of one.

In 2022, I've achieved so much I've given Game Dev on Unity a try, and I can say that it is quite addicting. The learning process is so much fun!

Besides ReactJS, I've also managed to pick up on React Native and also equipped myself with the MERN stack.

Breaking the bias 👩🏻‍💻

Be more confident! There is no room for impostor syndrome here.
Speak up! When you have great ideas, if something doesn't feel right to you, speak up.
Become an inspiration and role model to all the girls who want to code. I want to come out as a strong person who has got her s*it together, and that other women can do the same if we put our minds to it!

It's not easy being a female coder and trying to set my reputation. I've always have to work twice as hard to gain the respect of people around me, peers or clients.

Now, my team consists of a lot of female coders and I wish to create a safe space for more girls to grow and achieve their dream without the having to go through so much discrimination and bias.

Advocating for myself 💪🏼

Not selling myself short. Despite being scared of the tech industry, I will try my best to speak up on things I believe in.
Being mindful of my current state and acknowledging that I have been making progress regardless of the self-doubt.

I pledge to support women, non-binary folks, and other minorities in tech by…

Being a model representation that they can do it as much as I could!

Keeping things exciting for me and my team ✨

Trying new things! I can't wait to fully understand the basics of Game Development, AR and VR. Perhaps one day I would be able to create something impactful for the community and prove that women can go into tech!

How to localise your ReactJS apps with i18next — but you're using Class Components

Nuss93 — Wed, 22 Dec 2021 10:47:46 +0000

You want to localise your React Apps and add multiple language options to your app, but your app was built years ago when class components were still a thing. You've searched through tutorials to set up localisation on your app, but a lot of tutorials out there mostly explain in the context of functional components, and the React team said that there is no need to make the swap form class to functional components as it will never deprecate.

This article will cover the basics for adding multiple languages to your React app.

1. Install the relevant dependencies

npm install i18next react-i18next i18next-browser-languagedetector --save

2. Create a js file to store your translations

Let's call this file i18n.js. This will be where all the translations are stored

import i18n from "i18next";

i18n.init({
    resources : {
        en : {
            translations : {
                Dashboard_PageHeader_Title : "This is the title in english",
                Dashboard_PageHeader_Body : "This is the body in english"
            }
        },
        my : {
            translations : {
                Dashboard_PageHeader_Title : "Ini adalah tajuk dalam Bahasa Malaysia",
                Dashboard_PageHeader_Body : "Ini adalah perenggan bawah dalam Bahasa Malaysia"
            }
        }
    },
    fallbackLng: "en",
    debug: true,

    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations",

    keySeparator: false, // we use content as keys

    interpolation: {
        escapeValue: false, // not needed for react!!
        formatSeparator: ","
    },

    react: {
        wait: true
    }
})
export default i18n;

3. Import the i18n file and pass it as a prop to I18nextProvider and wrap the entire application with the provider component

// Import files at the top of your file
// Localisation module
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";

...

// in render
render() {
        const { authenticated, loading } = this.state;
        if (loading) return <div style={{ background: '#000080' }}><div className="loading-screen"></div></div>

        return (
            <HashRouter>
                <I18nextProvider i18n={i18n}>
                    <Switch>
                        <Route path="/login" render={(props) => <LoginPage />} />
                        <PrivateRoute path="/" component={RealDashboard} authenticated={authenticated} />
                    </Switch>
                </I18nextProvider>
            </HashRouter>
        )
    }

Now that we are done with setting up your app to have multiple language, we need to set up changing the language settings, and then extract the language as your content.

4. Change the language

You may have a dropdown, radio button or any kind of form for the user to change language. Wherever you choose to call the function to change language, you do so as the following :

// top of file
import { withTranslation } from 'react-i18next';

...

// update your language in your component
class HeaderLanguageSelect extends Component {
    state = { value : 'en' }

    updateLanguage = () => {
        let newlang = this.state.value;
        this.props.i18n.changeLanguage(newlang);
        this.props.toggleModal();
    }
    render(){
        return{ your code here }
    }
}

// export default your component run through withTranslation imported above
export default withTranslation()(HeaderLanguageSelect)

5. Displaying the language

This step is almost similar to step 4, but you call the t as props and refer to the key corresponing to the content defined in your i18n.js file.

// top of file
import { withTranslation } from 'react-i18next';

...

// update your language in your component
class Dashboard extends Component {
    render(){
        return(
            <div>{this.props.t('Dashboard_PageHeader_Body')}</div>
        )
    }
}

// export default your component run through withTranslation imported above
export default withTranslation()(Dashboard)

And that's pretty much it! Hope it helps :)

DEV Community: Nuss93