332: Running the Finances of a Startup

Dee and Chris talk about “everything money-related” at CodePen. Dee has been managing this stuff since CodePen’s beginning. First largely pro-bono (sorry, Dee), then later as a side gig and part-time job. Dee is full-time now at CodePen, but finance stuff is only part of her role (programming being the main job). It’s a lot of work, but she likes being able to influence CodePen for the better from multiple angles.

At a big company, all this finance work would probably manifest as a COO. But CodePen is just a midling startup, too small really for a COO, but also too big for a homegrown spreadsheet. Dee gets into all the work that goes into finance, from the vital documents that are the Profit & Loss Statement, Balance Sheet, and Cash Flow, to other work like cohort analysis and cap table work.

Time Jumps

00:38 Working with numbers

01:50 How has money been managed at CodePen?

05:39 Outsourcing accounting

20:40 Sponsor: Retool

22:20 What is the finance job at CodePen?

32:43 Tooling for accounting

Sponsor: Retool for Startups

After working with thousands of startups, we’ve noticed that technical founders spend a ton of time building internal tools—which means less time on their core product. So, we built Retool For Startups—a program that gives early-stage founders free access to a lot of the software you need for great internal tooling.

The goal is to make it 10x faster to build the admin panels, CRUD apps, and dashboards that most early stage teams need. We’ve bundled together a year of free access to Retool with over $160,000 in discounts to save you money while building with software commonly connected to internal tools like AWS, MongoDB, Brex, and Segment.

We give you a head start with pre-built UI components, integrations, and other advanced features that make building from scratch much faster. To learn more, check out our site, apply, join webinars and much more at retool.com/startups.

The post 332: Running the Finances of a Startup appeared first on CodePen Blog.

Flatlogic Admin Templates banner

Top 30 Platforms to Learn React in 2021 (React Tutorial Digest)

The market of frontend developers is booming, and you surely know the main spots and platforms where to learn how to code, where to learn new frameworks and languages; how to fix simple bugs and errors, how to maintain and keep sites up-to-date, and so on and so forth. But nobody will take your hand and lead you through the whole process of development and dependencies. This process should be much slower and more painful without a good foundation and study platform with solid structures, consistently shown material and regularly updated material. The whole path may become significantly easier if you divide it into equal parts, and don’t try to take it hurriedly, from scratch.

Here you will see thoroughly curated platforms with up-to-date React tutorials from the web world. We’ve gathered a list of popular resources, how-to guidelines, articles, YouTube channels with really useful info presented by top-notch experts from the world of web development, as the best way to learn React. As a rule, they entail covering HTML5, CSS, and JavaScript basic concepts which are bootstrap conquering React fundamentals, and other instruments for building interactive web interfaces.

Probably, you could have faced such questions like is react hard to learn, or what is the best way to learn React. But there is no best way to learn React once and forever, as everywhere, everything takes time and effort.

Pick the one tutorial that best fits your needs!

The Best React Courses and Popular Platforms to Learn React:

1. Codecademy

Website: https://www.codecademy.com/

Learn React with Codeacademy! The course gives a strong understanding of the most important React concepts: JSX, class and function components, lifecycle methods, props, and hooks, etc.

● 20 Hours ● For those who already know the basics of JS and HTML

2. Udemy

Website: www.udemy.com

Udemy needs no introduction. This is an American online platform, a huge marketplace with over 155000 courses and 10 million monthly organic traffic. React – The Complete Guide is a top-rated course that became a bestseller among students of Udemy.

● 20 Hours ● All levels ● Price: $89.99

3. Coursera

Website: https://www.coursera.org/

I put 100 you’ve already surfed this platform. Coursera offers tons of courses for all-level developers and absolute zeros in web development. Right off bat, check this full-stack web-development course with React specialization from The Hong Kong University of Science and Technology.

At Coursera, you can start your 7-day free trial, and keep on learning for $49 per month after your trial period.

4. Code with Mosh

Website: http://codewithmosh.com

Moshfegh Hamedani is an inspired software developer with almost 2 million audience on YouTube and 20 courses on Udemi. He has 20 years of experience and keeps to teach React and other popular libraries, frameworks and programming languages on his own platfrom for mastering coding.

● 13 Hours ● All levels ● Price: all-access membership $29

5. Scrimba

Website: https://scrimba.com/

Bob Ziroll offers to learn React absolutely for free. This course contains 59 interactive screencasts and other really engaging material to learn React. Scrimba is  all about avid learning, creating cool stuff and helping others achieve their career goals. Scrimba motivates to become a developer faster, with all necessary resources inside. The platform has also an advanced course called React Bootcamp for experienced developers.

● Level: Advanced ● Price: $124/Year

6. Edx

Website: https://www.edx.org/

World-leading universities like MIT or Harvard offer their t programs and courses. For instance, Developing Cloud Applications with Node.js and React will tell yout how to create a server-side app and deploy it on Cloud.

±5 weeks ● All levels ● Price: free

8. Freecodecamp

Website: https://www.freecodecamp.org

It’s a really big community with its own tech-focused forum and a dozen of tutorials to learn React js. Just randomly dive into this list of free 7-hour React course by Beau Carnes. No worries about how to find the info, all the data is well organized by subsections.

● All levels ● Price: free

9. W3schools

Website: https://www.w3schools.com
W3school is a comprehensive platform with dozens of useful info. It offers a range of open-source tutorials, references, and exercises for developers.

● All levels ● Price: free

10. Careerkarma

Website: https://careerkarma.com/

Software engineering is not just a random collocation, here is a comprehensive guide from a self-taught programmer with really deep knowledge of JavaScript, HTML, and CSS, and Python. Click learn more to know how to learn React, how to start coding, and how to practice your skills.

● All levels ● Price: free

11. Developer.Mozilla: Getting started with React

Website: https://developer.mozilla.org/

Explore more about Mozilla references and guides. There is a good background and use cases, a basic React toolchain setting up process, and everything about how to create a simple starter app. Highly recommended site!

● All levels ● Price: free

12. Javatpoint
Website:

Website: https://www.javatpoint.com/

One more site that has explained all the common-known principles of ReactJS. Currently, it has a strong foundation and a large community as well on its site and on YouTube.

13. Ibaslogic

Website: https://ibaslogic.com/

If you don’t know where to start your path as a front-end developer, read this open-source React tutorial for beginners made by Ibas Majid, a self-taught web developer.

● 22 minutes ● Beginners

14. Reactforbeginners – React JS Crash Course

Website: https://reactforbeginners.com/

This platform aims to position itself as a premium step-by-step training course to dive you into the real world of React + Firebase apps and website components. The course is taught by Wes Bos, a Full Stack Developer, and experienced tutor from Canada. 

● 5 hours ● Beginners ● $82

15. Traversy Media

Website: https://www.traversymedia.com/

One more online platform for developers to learn JavaScript and its frameworks is Traversy Media. There are well-known programming tutorials for all of the latest web technologies starting from the building blocks of HTML. Check their Reactjs Crash course updated in 2021 to understand the core things about React library.

16. Class Central – Free Online React Courses

Website: https://www.classcentral.com/

Full learning courses from the leading universities, like The Hong Kong University of Science and Technology, Filter out the courses by language, by duration, by level, with/or without a certificate. Read out reviews to decide which React course is the right fit for you.

17. Web Dev Simplified

Website: https://courses.webdevsimplified.com/
YouTube: https://www.youtube.com/channel/UCFbNIlppjAuEX4znoulh0Cw

An awesome source of tutorials for self-studying developers. Web dev simplified has a very informative YouTube channel. Learn React today course offers to get the gist of React in less than a day and build your first project quicker.

● 20 hours ● 21 lectures ● $60
Duration: 40 hours

18. Solo Learn

Website: https://www.sololearn.com/

The main concepts from the world coder community. Build powerful interactive user interfaces with React library trusted by devs from Facebook and Uber. The platform has various courses, code playground, blog, and a general audience of more than 200k visitors a month.

19. Ihatetomatoes

Petr Tichy, an Australian Front End Developer, offers to learn React Hooks API, how to use Fetch API to load data, how to render a dynamic dropdown in your React app, and many other essential questions. Here you’ll also find the Ihatetomatoes YouTube channel.

20. Visualstudio code

Website: https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

A step-by-step guide on how to create a React app with create-react-app generator.

21. Tutorialspoint

Website: tutorialspoint.com/

Online education is the best way to gain new skills faster. Tutorialspoint offers multi languages tutorials, ebooks, prime packs and more. Check out the features, advantages, and limitations of the course. Create React App step by step with Tutorialspoint quick guide.

22. PedroTech

Website: https://www.youtube.com/c/PedroTechnologies/

Pedro Machado offers a wide range of videos about Web Development! ReactJS, NodeJS, MySQL, Express, MongoDB, and much more! Reactjs beginner course is also available.

23. React Casts

Website: https://www.youtube.com/c/reactcasts

Here is a channel with short React screencasts containing tips, tricks, and tutorials. Yes, it’s relatively new, but still informative and a good way to know to learn React.

24. HarryWolf

Website: https://www.youtube.com/c/hswolff/videos

Harry Wolfs shares his in-depth experience and personal opinion for JavaScript, its tricks, and many more useful things related to programming. He is a brilliant tutor who explains everything in detail and gives his personal view on this or that programming aspect.

25. The Net Ninja

Website: https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg

Just a golden channel with more than 1000 programming tutorials about JavaScript, React, Vue, Laravel, Firebase, etc. It’s a must to check it out and find your best video to learn Reactjs together with other 778K of subcribers.

26. Anthony Sistilli

Website: https://www.youtube.com/c/anthonysistilli

Here you will find 20-minute React tutorials on different aspects of React: React props, React Router basics, conditional rendering, and other essential things important for a front-end developer.

 27. Chris Hawkes

Website: https://www.codehawke.com/

Chris Hawks offers React advanced crash course as the best way to learn React. The author has an online platform with React course for beginners and a tutorial for advanced React coders. More videos can be found on his YouTube channel.

28. Codevolution

Website: https://learn.codevolution.dev/

Codevolution is a popular source of tutorials on the latest tech in web development! Here you can follow the trends in programming and find out what’s new in React 18.

29. Academind

Website: https://academind.com/

Max and Manuel offer to start learning React.js and how to build amazing websites just for free! These guys share their deep expertise in the form of tutorials here, and in the form of video courses on YouTube. The channel has more than 708k subscribers! We also recommend taking a premium course on NextJS & React – The Complete Guide.

24 hours ● All levels ● Price: $39 for a single course license

30.  Dev Ed

Website: https://www.youtube.com/c/DevEd

Really creative channel to be guided through React and other development tools. Here you will find tutorials on web development, UI instruments, and other tools for web and mobile app development. And 686k of subscribers only prove that this chap from Romania makes superb educational content.

Recap

If you don’t need a full course but are more likely to read some guide or article to resolve specific purposes, we could recommend learning more about online workshops on smashing magazines. One more proven source of high-quality information is the tutorial-focused blog of LogRocket.

We are always happy to share with you everything on React that we know ourselves. It’s never too late to learn something new! So, learn smarter with React tutorials created by Flatlogic. Check out the blog with in-depth thematic articles on React, Angular, Vue, Bootstrap, and many other highly useful aspects of web development. Find your best place to learn React, study hard, and dream big!

The post Top 30 Platforms to Learn React in 2021 (React Tutorial Digest) appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

New Pinned Items UI

In the olden days (like, a few weeks ago), the Pinned Items UI was much less capable. You could certainly pin things, and open up a menu to see a list of what you pinned, but there wasn’t any context. There was no visual preview to quickly identify them. There was no metadata like when it was created or updated.

We’ve updated the UI so now you’re Pinned Items always open up in a modal (it’s the same everywhere now) and you can flip between grid view:

And list view:

We’re hoping this will make it much more convenient to get to items you want to really quickly get back to from no matter where you are on CodePen.

The post New Pinned Items UI appeared first on CodePen Blog.

Flatlogic Admin Templates banner

331: Next.js + Apollo + Server Side Rendering (SSR)

Our goal here was to explore server-side rendering (SSR) in Next.js using data from Apollo GraphQL, for faster client-rendering and SEO benefits.

There are a variety of approaches, but Shaw has set his sights on a very developer-ergonomic version here where you can leave queries on individual components and mark them as SSR-or-not.

There are two “official” approaches:

Apollo’s documentation
Next.js’ example

These are sorta-kinda-OK, except…

They have to be configured per-page
They are mostly limited to queries at the top page level
You’d likely need to duplicate queries with slightly differently handling from client to server
May or may not populate the client cache so that the client can have live queries without having to query for the same data. For example, ay you have data that you want to change on the client side (pagination, fetching new results). If it’s fetched and rendered server-side, you have to fetch again client side or send over the cache from the server so the queries on the client-side can be ready to update with new data.

These limitations are workable in some situations, but we want to avoid duplicating code and also have server-side rendered queries that aren’t top-level on the page.

A probably-better approach is to use the getDataFromTree method, which walks down the tree and executes the queries to fill up the ApolloClient cache. We got this from a two-year old Gist from Tylerian showing a way to integrate getDataFromTree into Next.js. Tylerian’s gist had some extra complications that might’ve been due to older Next.js limitations, but the overall process was sound:

Create a shared ApolloClient instance
Render the page using getDataFromTree() to fill the cache with data
Render the page again with that data using Next’s Document.getInitialProps()

Extract the cache to deliver with the page and hydrate the client-side Apollo cache

The benefits:

Quick to set up
No duplicate queries
Nothing special per page to handle server-side rendering or client-side queries.
Cache hydration to keep client active without re-querying data
Easy to enable / disable server-side rendering for individual queries

Here’s a repo with Shaw’s findings.

Sponsor: Retool

Retool, a fantastic tool for quickly building internal tools, has an even-more-fantastic program tailored to startups. If you have a startup founded less than 5 years ago with less than 10M in funding, you qualify. You’ll not only get 12 months of Retool for gree, but $160,000 of partner deals from companies like AWS, Intercom, Segment, Sentry, Digital Ocean, MongoDB, and more. Go apply!

The post 331: Next.js + Apollo + Server Side Rendering (SSR) appeared first on CodePen Blog.

Flatlogic Admin Templates banner

Best libraries for React I18n

Internationalization is an integral part of modern software development. In addition to English-speaking countries, there are still many paying markets where a project may not be successful without internationalization and localization. Different studies show that 72% of consumers are more likely to stay on a website if it is been translated. Moreover, 55% of consumers said they only buy from websites that are in their native language.

In this regard, the question arises of how to do internationalization at the software development level, namely in the React framework.

In this article, we will look at what internationalization is, how to do internationalization using the i18next library as an example, consider the best internationalization libraries for React, and also find out the difference between internationalization and localization.

What is Internationalization

Internationalization is the process of translating your application into different languages. Internationalization or i18n is the design and development of a product, application, or document content that enables easy localization for target audiences that vary in culture, region, or language.

Translation of the application includes many aspects, such as changing the date, language, position of letters, and the like. Unicode usage, legacy character encodings, string concatenation, etc. are some of the things which assist in designing an application to ensure successful internationalization.

Difference between internationalization and localization

Software localization is different from internationalization (i18n). Internationalization covers areas such as software development and design across different cultures and languages. In other words, internationalization is what allows localization to happen in the first place. Internationalization is typically done by software developers, while localization is done by translators.

Also, an important aspect of internationalization is instead of writing code for each language, you replace code with placeholders that automatically retrieve the correct language for the user without engineering changes.

With localization, you can not only customize the language preference but also number formats, date and time formats, currency formats, keyboard layout, sorting and collection, text direction, and even colors and designs.

Localization also can include the cultural and country-specific aspects of different languages, such as:

Accounting standards;
Links and other resources;
Calendars;
Hand symbols, gestures, or signage;
Culturally appropriate images;
Dates and times;
Spelling and phrasing, such as the differences between the Spanish spoken in Argentina and Spain;
Right-to-left languages like Arabic or Hebrew.

React Internationalization guide

Base project

The basic project for us will be a simple page of text with personal information in two languages – German and English, with text switching by means of a button. We will develop our application using create-react-app.

Prerequisites

This tutorial assumes that you have installed the latest version of Node.js and npm or yarn on your device. Moreover, you need to have some experience with simple HTML, JavaScript, and basic npm and Yarn commands, before jumping to React i18n.

You can view the code for my application by following the following link on GitHub.

Getting Started

In this section, I will help you understand the integration between i18next and React. To make things a bit easier and smooth, we will make use of the Create React App package by Facebook.

The first step is to install the latest release of Create React App. To do this, open console/terminal depending on your operating system and enter the following command:

yarn create react-app [name of your app]

After the setup is complete, type this command in the console and run it.

cd [name of your app]

It will take you to the folder of the project.

Then run the following command to test if the application is installed correctly.

yarn start

If everything is working correctly you will see the working app on the localhost port.

Installing dependencies and making the actual application

Let’s install all required dependencies to develop our i18n application.

yarn add i18next react-i18next i18next-browser-languagedetector

The browser language detector automatically detects the language of your location.

We also use react-bootstrap in our application, but it is optional.

Let’s create the content for the translation. In my case, it will be the information about me and the page look like my personal in app.js file. The code will look like that:

import React from ‘react’;
import Container from ‘react-bootstrap/Container’;
import Jumbotron from ‘react-bootstrap/Jumbotron’;
import Row from ‘react-bootstrap/Row’
import Col from “react-bootstrap/Col”;
import me from ‘./me.jpg’

function App () {

return (

<Container>
<Jumbotron>
<Row>
<Col>
<p>I am a Product Owner at Flatlogic.com. The company creates templates on top of Javascript technologies and help to integrate these dashboards into existing products. During 3 years we grow our customer base over the 70k users and have almost 100k monthly visitors on our website.</p>
<p>Previously I was a co-founder of Kuoll, an error analytics platform for e-commerce. Together with my partner, I went from MVP to the first paid users and increased the user base from 100 to more than 750, which included learning programming, product management, marketing and sales, user support.</p>
<p>Before founding Kuoll I was an Audit Staff at Ernst & Young where I helped analyze data and business, perform general substantive audit procedures for Fortune 5000 companies.</p>
<p>I was fortunate enough to be alumni of one of the largest startup accelerators in Nordic and Baltic states, Startup Sauna and Starta Accelerator in New York. Now, I am also receiving BA in Computer Science at University of London. I also love running, cycling, my wife Yuliya and daughter Sasha.</p>
</Col>
<Col>
<img src={me} alt=”Eugene Stepnov” id=”me” />
</Col>
</Row>
</Jumbotron>
</Container>
)
}

export default App;

The components like <Jumbotron>, <Container> and others are from react-bootstrap. This is a basic personal page.

Next, we will need to create a file where the text of our translation, the configuration will be stored, as well as the plug-in from i18next will be loaded, our file will be called translation.js and will look like this:

import i18n from ‘i18next’;
import {initReactI18next, Trans} from “react-i18next”;
import LanguageDetector from ‘i18next-browser-languagedetector’;
import React from “react”;

i18n
.use(initReactI18next)
.use(LanguageDetector)
.init({
// we init with resources
resources: {
en: {
translations: {
“I am a Product Owner at Flatlogic.com. The company creates templates on top of Javascript technologies and help to integrate these dashboards into existing products. During 3 years we grow our customer base over the 70k users and have almost 100k monthly visitors on our website.” : “I am a Product Owner at Flatlogic.com. The company creates templates on top of Javascript technologies and help to integrate these dashboards into existing products. During 3 years we grow our customer base over the 70k users and have almost 100k monthly visitors on our website.”,
“Previously I was a co-founder of Kuoll, an error analytics platform for e-commerce. Together with my partner, I went from MVP to the first paid users and increased the user base from 100 to more than 750, which included learning programming, product management, marketing and sales, user support.” : “Previously I was a co-founder of Kuoll, an error analytics platform for e-commerce. Together with my partner, I went from MVP to the first paid users and increased the user base from 100 to more than 750, which included learning programming, product management, marketing and sales, user support.”,
“Before founding Kuoll I was an Audit Staff at Ernst & Young where I helped analyze data and business, perform general substantive audit procedures for Fortune 5000 companies.” : “Before founding Kuoll I was an Audit Staff at Ernst & Young where I helped analyze data and business, perform general substantive audit procedures for Fortune 5000 companies.”,
“I was fortunate enough to be alumni of one of the largest startup accelerators in Nordic and Baltic states, Startup Sauna and Starta Accelerator in New York. Now, I am also receiving BA in Computer Science at University of London. I also love running, cycling, my wife Yuliya and daughter Sasha.” : “I was fortunate enough to be alumni of one of the largest startup accelerators in Nordic and Baltic states, Startup Sauna and Starta Accelerator in New York. Now, I am also receiving BA in Computer Science at University of London. I also love running, cycling, my wife Yuliya and daughter Sasha.”
}
},
de: {
translations: {
“I am a Product Owner at Flatlogic.com. The company creates templates on top of Javascript technologies and help to integrate these dashboards into existing products. During 3 years we grow our customer base over the 70k users and have almost 100k monthly visitors on our website.” : “Ich bin Product Owner bei Flatlogic.com. Das Unternehmen erstellt Vorlagen auf Javascript-Technologien und hilft bei der Integration dieser Dashboards in bestehende Produkte. Während 3 Jahren haben wir unseren Kundenstamm auf über 70.000 Benutzer erweitert und haben fast 100.000 monatliche Besucher auf unserer Website.”,
“Previously I was a co-founder of Kuoll, an error analytics platform for e-commerce. Together with my partner, I went from MVP to the first paid users and increased the user base from 100 to more than 750, which included learning programming, product management, marketing and sales, user support.” : “Zuvor war ich Mitgründer von Kuoll, einer Fehleranalyseplattform für E-Commerce. Zusammen mit meinem Partner bin ich vom MVP zu den ersten kostenpflichtigen Nutzern aufgestiegen und habe die Nutzerbasis von 100 auf über 750 erhöht, was Lernprogrammierung, Produktmanagement, Marketing und Vertrieb, Nutzersupport beinhaltete.”,
“Before founding Kuoll I was an Audit Staff at Ernst & Young where I helped analyze data and business, perform general substantive audit procedures for Fortune 5000 companies.” : “Vor der Gründung von Kuoll war ich als Audit Staff bei Ernst & Young tätig, wo ich bei der Analyse von Daten und Geschäften sowie bei der Durchführung allgemeiner substanzieller Auditverfahren für Fortune 5000-Unternehmen half.”,
“I was fortunate enough to be alumni of one of the largest startup accelerators in Nordic and Baltic states, Startup Sauna and Starta Accelerator in New York. Now, I am also receiving BA in Computer Science at University of London. I also love running, cycling, my wife Yuliya and daughter Sasha.” : “Ich hatte das Glück, Alumni eines der größten Startup-Accelerators in den nordischen und baltischen Staaten zu sein, Startup Sauna und Starta Accelerator in New York. Jetzt erhalte ich auch einen BA in Informatik an der University of London. Außerdem liebe ich Laufen, Radfahren, meine Frau Yuliya und meine Tochter Sasha.”
}
}
},
fallbackLng: ‘en’,
debug: true,
ns: [‘translations’],
defaultNS: ‘translations’,
keySeparator: false,
interpolation: {
escapeValue: false,
formatSeparator: ‘,’
},
react: {
wait: true
}
});
export default i18n;

Thus, in resources, you need to place your translation opposite each key.

Next, we need to update our root component to use this i18n config inside the index.js:

Just import ‘./translations’;

Let’s get back to our main App.js file to use our translation. The first step would be to import the i18next library.

​​import { useTranslation, Trans } from ‘react-i18next’;

Next, let’s add some variables regarding our translation and language switcher. Add this code to the App function:

const { i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};

And this code in return() to change language:

<button onClick={() => changeLanguage(‘en’)}>en</button>
<button onClick={() => changeLanguage(‘de’)}>de</button>

The final step would be to wrap our text into the <Trans> component which enables you to nest any react content to be translated as one string. Supports both plural and interpolation. 

<p><Trans>I am a Product Owner at Flatlogic.com. The company creates templates on top of Javascript technologies and help to integrate these dashboards into existing products. During 3 years we grow our customer base over the 70k users and have almost 100k monthly visitors on our website.</Trans></p>

And that’s all, the final code for App.js is looking now like this:

import React from ‘react’;
import Container from ‘react-bootstrap/Container’;
import Jumbotron from ‘react-bootstrap/Jumbotron’;
import Row from ‘react-bootstrap/Row’
import Col from “react-bootstrap/Col”;
import { useTranslation, Trans } from ‘react-i18next’;
import me from ‘./me.jpg’

function App () {

const { i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};

return (

<Container>
<button onClick={() => changeLanguage(‘en’)}>en</button>
<button onClick={() => changeLanguage(‘de’)}>de</button>
<Jumbotron>
<Row>
<Col>
<p><Trans>I am a Product Owner at Flatlogic.com. The company creates templates on top of Javascript technologies and help to integrate these dashboards into existing products. During 3 years we grow our customer base over the 70k users and have almost 100k monthly visitors on our website.</Trans></p>
<p><Trans>Previously I was a co-founder of Kuoll, an error analytics platform for e-commerce. Together with my partner, I went from MVP to the first paid users and increased the user base from 100 to more than 750, which included learning programming, product management, marketing and sales, user support.</Trans></p>
<p><Trans>Before founding Kuoll I was an Audit Staff at Ernst & Young where I helped analyze data and business, perform general substantive audit procedures for Fortune 5000 companies.</Trans></p>
<p><Trans>I was fortunate enough to be alumni of one of the largest startup accelerators in Nordic and Baltic states, Startup Sauna and Starta Accelerator in New York. Now, I am also receiving BA in Computer Science at University of London. I also love running, cycling, my wife Yuliya and daughter Sasha.</Trans></p>
</Col>
<Col>
<img src={me} alt=”Eugene Stepnov” id=”me” />
</Col>
</Row>
</Jumbotron>
</Container>
)
}

export default App;

The application will work like this if everything runs smoothly.

Best internazialiation libraries

Let’s take a look at the most well-known React i18n libraries. Before that, let’s see what options to use when looking for the right package for your app.

Documentation and maintenance of the package;

Feature / Library;
Pluralizations;
Nesting;
How big is the community;
Number Formats
Date formats;
Relative dates;
HTML support;
Performance/bundle size;
Interpolation.

NPM Trends

Also, one of the important factors before starting to use the library is its popularity among other developers. As for the internationalization topic, judging by npm trends, the most popular library is i18next – let’s get ahead of ourselves and say that this is justified since the library is the easiest and most understandable to use.

Now let’s go directly to the overview of popular libraries.

i18next

I18next is an internationalization library that has been written for JavaScript and its frameworks. It provides a complete method for localizing the product as well as the other standard i18n features.

I18next is already a whole platform for managing the localization of your applications. The library has many plugins and integrations at its disposal, as well as a SaaS application for management. Some of these are a plugin to detect user’s language, loading & caching translations that might be handy for large scale apps.

One of the most important features of i18next is scalability. This allows the library to separate translations into multiple files and load them on demand.

The other good advantage of i18next over other libraries is sustainability, it was created in 2011 and is still constantly developed.

Features

Highly effective and efficient API;
Ecosystem;
Maturity;
Language detection;
All tools to do complete localization.

Formatjs (React intl)

The react-intl library comes as a part of the FormatJS internationalization libraries. React-intl is one of the most popular libraries for the internationalization of React applications. It supports more than 150 languages globally. Library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations. It has a very larger community because it is the first i18n react library in the market.

React-intl provides react components and API to translate dates, numbers, currencies, and strings including pluralization.

However, the library has some disadvantages. You cannot use it for non-react components as it requires the top-level component to inject the context to the children.

React intl universal

React-intl-universal is developed by Alibaba Group and has all set of features to develop applications with internationalization. This library is one of the most popular solutions for i18n in React. It builds on top of React-intl and it enables even the non-React components to make use of the library by providing a singleton object to load the locale. For instance, this can be used in Vanilla JS as stated in the documentation itself.

Features

Can be used not only in React.Component but also in Vanilla JS;
Simple. Only three main API and one optional helper;
Display numbers, currency, dates and times for different locales;
Pluralize labels in strings;
Support variables in message;
Support HTML in message;
Support for 150+ languages;
Runs in the browser and Node.js;
Message format is strictly implemented by ICU standards;
Locale data in nested JSON format are supported;
react-intl-universal-extract helps you generate a locale file easily.

Lingui JS

LinguiJS for React is the smallest of all i18n libraries available today for react applications. It uses ICU messages syntax and rich-text messages. Powerful CLI is included too to manage all the translation workflows.

Notable features

Very small size;
CLI;
Good support from community;
Well documented;
Rich-text support.

React translated

React translated isn’t a very popular library, but very simple. The library is updating once a year. 

Features

Data interpolation;
Component interpolation;
Markdown inline-manipulations;
Custom manipulations, pluralizations, and grammar rules based on input data;
Component-level translation files (enables loading only required translations).

To translate the content of your app you just need to do two steps:

Create a translation file that will contain a mapping of keys to the string in each language you support;
Connect the Provider and wrap the top-level component with the <Provider> component according to props.

Conclusion

In this article, we got acquainted with the definition of internationalization, looked at how to make a simple application with translation using the i18next library, and also looked at the best libraries for internationalization.

If you liked the article, then we would be happy if you share it with the world and leave us feedback.

Thank you!

The post Best libraries for React I18n appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

A More Tab-Like Look

We’ve got lots of plans for the Pen Editor on CodePen. Of course we do! This is the heart and soul of CodePen. The thing where all the great stuff on CodePen is actually produced. Down the road, there will be more big-bangs where the editor evolves to do bigger and better things (but don’t worry, it’ll keep it’s signature simplicity). But the temper the biggness of those bangs, we’re releasing parts of it along the way that shift some of the look and functionality of the editor.

Some minor aesthetics changes to the @CodePen editor. Some of the colors in use are now more derived from your chosen theme.

Always be baby-steppin’ to the next big thing gnomesayin pic.twitter.com/YmK1W8Y2XB

— Chris Coyier (@chriscoyier) August 19, 2021

There has been other small stuff, like the Save Pen Dropdown, and you might have noticed some aesthetic changes to the Export and Share menus:

But this update to the look of the editors themselves is probably the most noticeable change yet. No functionality changes here, just aesthetic again.

The post A More Tab-Like Look appeared first on CodePen Blog.

Flatlogic Admin Templates banner

Top 12+ React Datepickers to Use in 2021

What is a React Date Picker
How to create a basic React Datepicker

Creating a new React App
Installing Datepicker in React App
Installing Bootstrap UI Framework

Top React Datepickers to consider for your next project
react-datepicker
Material-UI date and time pickers
React Material Admin Full Datepicker
Airbnb react-dates
Carbon design date picker
React Rainbow datepicker
Sing App React Datepicker
react-datetime-picker
react-big-calendar
Light Blue React Node.Js Datepicker

react date range picker

React Native Date Picker
React bootstrap datepicker
Material design date picker
Recap
Suggested articles
About Flatlogic

We’ve decided to get a deeper look into the theme of React Datepickers and present you with Flatlogic’s list of their top representatives. Let’s, first of all, take a little detour into what a React Datepicker is. 

What is a React Datepicker 

Generally speaking, a Datepicker is a GUI widget that allows the end user to see and select days, months, years, etc. from the calendar. It also sometimes includes the possibility of choosing both date and time, or only time. In that case, such widgets are, totally unsurprisingly, called date and time pickers, and timepicker respectively. Thus, React Datepicker is a Datepicker that is built on the React basis. 

Looked at in a more practical way, a React datepicker is a lot more than just a tool. It is a way to simplify the end user experience when using your site or app and to make it more convenient. Let’s clarify what we mean by presenting a couple of small benefits of using this widget:

 If used on a browser version of a site, a React Datepicker allows users to set or choose the date with only a mouse and removes the necessity to write down the date. And giving the end user an option is always a nice touch as it’s better they have something they don’t need, than need something they don’t have.

Having a React Datepicker will simplify the visual presentation of available date options. For example, if the date is unavailable for choosing, the widget will simply not provide the possibility of choosing said date;

Using a React Datepicker eliminates the chance that the end user will select any nonexistent dates, such as February 30th or, more realistically, September 31st;

Many React Datepickers allow a choice of date ranges, thus, conveniently narrowing down the choice for the end user;

React Datepickers solve the problem of date format confusion. This point might need a little elaboration. For example, an end user has put down the following date – 12/05/21. Does this date mean May 12th, 2021, or December 5th, 2021? A React Datepicker solves the problem and visually shows you and our hypothetical end-user what day of what month and in which year the hypothetical end user has chosen. So, as you can see, a datepicker might seem a small and inconsequential widget, but it provides convenience to both user and admin. And, as we’ve already mentioned while its presence might go unnoticed, if required, its absence would definitely cause a negative reaction. That being said, we suggest having a closer look into the inner workings of a React Datepicker with an example of the stages of one such widget development.

How to create a basic React Datepicker

The process of creating a simple React Datepicker consists of the following stages:

·  Creating a new React App;

· Installing Datepicker in React App;

·  Installing Bootstrap UI Framework;

And, that’s basically it. Of course, in this instance, we are talking about the simplest version of such a widget. And even in this case, you have quite a creative space for UI Framework tinkering. So, now it’s time to get an even closer look into each of the stages. 

Creating a new React App

This point is just what it says on the tin. You use the “create-react-app” command to set up a new program. At the end of this stage, you get the following lines of code:

npx create-react-app react-datepicker-app

cd react-datepicker-app

To check the app at this point, localhost:3000 is the location.

Installing Datepicker in React App

The next step is actually installing a Datepicker into your app. You can do this via both npm and yarn.

To install a datepicker via npm – use the following line of code: npm install react-datepicker –save

And to do it via yarn, use the code as follows: yarn add react-datepicker

Installing Bootstrap UI Framework

The third and final step in creating a basic React Datepicker is adding the Bootstrap intuitive ready-made styling that will also serve as a powerful tool of front-end development. You can also do it via both npm and yarn.

The line of code for npm is npm install bootstrap –save

And for yarn it goes like: yarn add bootstrap

Bear in mind the necessity of having a CSS format file with your stylings or any downloaded stylings of your choosing.

Of course, such a simply created date picker might not meet all of your requirements. That’s why we suggest using any of the entrees from our following list. After all, why not use an already made template for your app, if it suits your requirements perfectly or almost perfectly, with a possibility of making changes to it?

Top React Datepickers to consider for your next project

1.     react-datepicker

Let’s, first of all, get the classic out of the way. react-datepicker is one of the most popular date pickers on the market today. There is a downside to consider, which is that in its standard form, react-datepicker is in English. So, if your next app or project is not in English, it will require a bit of tinkering around with to change. But, nonetheless, it is simple, reliable and you can never go wrong with a classic.

2.     Material-UI date and time pickers

High-quality date and time pickers that are included into one of the world’s most popular component libraries – Material-UI. Better yet, Material-UI, being a nice component library, has already separated their selection of date and time pickers into a package.

But this is not the only reason it is on this list. Material-UI date and time pickers are also neat, beautifully designed widgets that use dialogue windows and/or inline popovers to provide a possibility of selecting separate dates. And, as a nice little touch, current dates are indicated by a different color and type weight.

3.     React Material Admin Full Datepicker

This date picker can be described as exceptionally stylish and smooth-looking. By coming along as a part of ready to use React Material-UI Admin & Dashboard Template, it can serve as an organizer for any kind of task management. Using it for your next project by itself or as a part of the ADT would be a smart thing to do.

4.     Airbnb react-dates

Airbnb hasn’t become one of the most used travel-related projects by cutting corners. Although we cannot claim that it is perfect in any way, what we can say with certainty is that Airbnb’s react datepicker is sleek and accessible, as well as being mobile-friendly, which is always good. And, it should be mentioned, Airbnb react-dates is trying to differentiate the formula by not fully relying on CSS, but rather on react-with-styles.

5.     Carbon design date picker

Due to being created by IBM, Carbon design React date picker is one of the most thought-through widgets on the market today. This component library is tried, tested, polished and constantly maintained to answer to the highest industry standards. And the whole system stands on three pillars: a simple date input, calendar pickers, and a time picker. But each pillar is strong enough to hold on its own, so there is a possibility to use each component independently. A must-see. Or, to be more precise, a must-try.

6.     React Rainbow datepicker

Another library entry is on our list. React Rainbow datepicker is packed to the brim with different colorful and high-quality, tested, accessible, and eye-catching components. In fact, there are over 80 of them in this library. Each one can be downloaded individually via the link below and each one of them can, no doubt, certainly become a beautiful addition to your project.

7.     Sing App React Datepicker

A date picker entry comes as a part of a React Admin Dashboard Template. It retains all the factual usefulness and overall stylishness while adding a bunch of useful features that come with being a part of ADT. And, as you can see from the picture, it also allows for task highlighting on the overall dialogue window. In summary, Sing App React Datepicker is beautiful and more useful than most other date pickers. What is awesome about this datepicker, is that it can contain event data.

9.     react-datetime-picker

React-datime-picker is a two-for-one offer. Created by Wojciech Maj, these date pickers also include the preinstalled time picker and neither of them rely on momentjs. Instead, it provides quite a flexibility that allows for creating anything from decade pickers to numbered weeks, which might come in handy in some specific situations.

10.     react-big-calendar

This date picker would be most useful if used as an organizing tool or event calendar, as it uses flexbox over the classic tables-ception approach. It is based on React and is compatible with the latest browser versions. Also, react-big-calendar includes the possibility of custom stylings and the inclusion of SASS files is a cherry on the cake.

11.  Light Blue React Node.Js Datepicker

This product also comes as part of the whole React Admin Dashboard Template (which comes with a full Node.JS Backend). But Light Blue React Node.Js Datepicker also doubles by being a time picker, as it allows users to choose a particular time for each of the highlighted tasks. And, by pulling those duties, this date picker is a must-try for your next project.

11.  react date range picker

React date range picker is a useful React component that can be a nice addition to any app! It allows the user to choose a date range inside an opening calendar. It is small in size, occupying only 18 kilobytes of space and relies on date-fns.

12.  Ant design datepicker

This date picker’s design is so smooth and elegant that we can only compare it to the sharply dressed aesthetic of the Roaring 20’s ladies and gentlemen. It also doesn’t do any harm that this datepicker is a part of a well-known and popular ant design library. If you’re not used to working with MomentJS, you can always replace it with a lib of your choice. But, not taking that into consideration, Ant design datepicker is an all around cool and beautiful date and time picker.

React Native Datepickers

React Native DatePickers are also commonly used web components available for iOs and Android, TimePickerAndroid and DatePickerIOS. Here is one of the most popular repositories with React Native date picker widely known among developers. And a full list of react native libraries may be checked here.

React Bootstrap Datepickers

Just from scratch, we can offer several popup calendars/datepickers for React (using Bootstrap): react-bootstrap-datetimepicker or react-bootstrap-daterangepicker, and the React-Bootstrap based date picker itself. They work well with React 0.14.x and 0.15.x and start running with:

npm install react-bootstrap-date-picker

We could also recommend using FullCalendar that integrates perfectly with React. Fullcalendar matches the functionality of FullCalendar’s standard API. Fullcalendar documentation is wholly described and clearly presented here.

Recap

In conclusion, we would like to say that even though a date and/or time picker might seem inconsequential, bear in mind the simple truth that the best and biggest things, be it a site, an app or a building are all made up of tiny, seemingly inconsequential things. And that makes them beautiful at the end of the day. So, choosing the right little things is the right passage to creating something great and meaningful. And, as always, feel free to read up our other articles!

About Flatlogic

We do our best to help our clients find the best web templates and provide custom web development services of high quality. We’ve carefully created more than 50 admin templates, web and mobile dashboard templates, and website themes for dozens of companies worldwide. The biggest value for us is our people and their positive experience. If you have some questions regarding our website templates or custom development, please drop us a line at our forum to get an instant reply from our support team.

 Suggested articles

Best React Open Source Projects
React Table Guide And Best React Table Examples
How To Choose The Best React Drag And Drop? Top 15 Free Libraries To Set Up
React Pagination Guide And Best React Pagination Libraries
Take The Quiz! Top 20 React.Js Interview Questions

The post Top 12+ React Datepickers to Use in 2021 appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

#330: New Admin Tools

Chris & Marie talk about a big long project that we’ve finished at CodePen: our new Admin Tools. Any web app is gonna need ’em. They do stuff that is unique to customer service on your app. Say you need to manually trigger a password reset email or hand-verify an account. You look them up in an Admin Tool, and perform those specialized actions. Our Admin Tools are heavily focused on users and content. We’ve totally re-built them to focus on the UX of actually doing customer support, as well as to make a clean UI that users the same componentry that the main CodePen app does. We do a lot of spam cleanup in our Admin Tools as well, so getting a chance to re-think those experiences was satisfying.

We dove into this project not just to make customer support better, but because of an alignment of concerns. We got to use a whole new development stack to do this, using technology we wanted to prove out for more of CodePen. We used Next.js on the front end and for server side rendering, and a Go-powered GraphQL API for the data. We made it all work in our monorepo. We build tools for deployment, so in a cool twist of fate, this app can deploy itself.

Jump Links

01:06 Working on internal tools

02:50 How do we pick things to work on?

08:16 Admin tools specific to CodePen support

12:33 Sponsor: Mailpoet

14:31 Benefits of mono repo development

20:27 Figuring the perfect UX with a team

25:25 Early detection of spam users

29:00 Multiple CMS built in

Sponsor: Mailpoet

If you build your website and business around WordPress, you’re in good hands for a lot of reasons. One of which is that you own your site, you own your own data, you own all aspects of what powers your business, and the rug can’t get pulled out from under you entirely. Check out this article and video on how to make a paid subscription newsletter with WordPress + WooCommerce + Mailpoet. That is a business model right there, from which you can grow forever entirely under your control.

The post #330: New Admin Tools appeared first on CodePen Blog.

Flatlogic Admin Templates banner

Full Stack Web Application Generator by Flatlogic

Hello there!

I am thrilled to announce to you our new tool called Flatlogic Web Application Generator.

It is a compilation of more than 7 years of our professional knowledge in web software development.

The idea is really simple and consists of a few steps only:

Choose the stack for your web application (React, Vue or Angular for front-end, Node.js for back-end and PostgreSQL or MySQL as a database),
Define a database schema,
Choose a design, and that’s it!

Then you get a working web application – you can even generate a live demo to preview the app and modify it if needed. The application is a sort of CMS for the entities defined in the database schema. It has a front-end, back-end, and database completely ready to use and download.

Now you work with React, Vue, and Angular as a front-end, Nodejs as a backend, and PostgreSQL or MySQL as a database. We have Java, Python (Flusk), and PHP versions under development.

As for the design, we offer several options to choose from: Google Material, a classic one, transparent, etc.

You can use a free version of the web app generator, or buy a subscription that starts from $19 per month.

Tap to watch our tutorial video:

Join to start using it, click on the “Generate app” button on the generator page.

For more than a year we have been using the generator internally to boost the development process and now we are happy to share it with you.

Send us your feedback: concerns, questions, requests, etc., — we want to continuously improve the product we have built for you.

Thank you!

The post Full Stack Web Application Generator by Flatlogic appeared first on Flatlogic Blog.

Flatlogic Admin Templates banner

#329: Gathering Data

Marie and Chris talk about all the sources of data we have, think about, and use to help us. We do have one main database on CodePen, and truth be told, it’s got a bunch of data in it. If we want to know how many Pens there are, we can just ask it. We can learn a lot from asking that database questions, and we even have fancy charts that express information like that to us on dashboards. But that database isn’t the only place we have data, because it doesn’t know everything. It can’t tell us, for example, how many times a feature is toggled on and off, because we don’t track that kind of data in our main database. But we can track that data, and do when we need to with Appcues. And then there is general analytic data like traffic which we can explore with Cloudflare. And support-driven data we can look at in Front. And that’s not all. When answering important business questions, the data can come from lots of sources.

Time Jumps

00:40 Collecting data

03:15 Levelling up your query ability

06:33 Using Table+ to acess on the Mac

09:03 Various types of recording user interactions

14:31 The data ends up in a database

17:22 Sponsor: Clubhouse

19:04 Tracking visitors with Cloudflare analytics

23:34 Checking support analytics

25:38 Advertiser analytics

33:02 It all comes back to Excel, Numbers, and AirTable

Sponsor: Clubhouse

Your project management tool should be a breeze to setup, at least mildly enjoyable to use, and help evolve your already existing development workflows so it’s easier to get things done. Does that describe your current tool? If it does, great! You can stop reading. If not, then Clubhouse could be the perfect fit. We’re project management built specifically for software teams and we’re fast, intuitive, flexible, powerful, and many other nice, positive adjectives. Delight the grumpiest scrum masters with Clubhouse.

The post #329: Gathering Data appeared first on CodePen Blog.

Flatlogic Admin Templates banner