A More Tab-Like Look

Posted on August 26, 2021September 11, 2021 by Mark Feehily0

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.

Top 12+ React Datepickers to Use in 2021

Posted on August 26, 2021September 11, 2021 by Mark Feehily0

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.

#330: New Admin Tools

Posted on August 25, 2021September 11, 2021 by Mark Feehily0

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.

Full Stack Web Application Generator by Flatlogic

Posted on August 19, 2021September 11, 2021 by Mark Feehily0

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.

#329: Gathering Data

Posted on August 19, 2021September 11, 2021 by Mark Feehily0

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.

Take The Quiz! Top 20 React.js Interview Questions

Posted on August 12, 2021September 11, 2021 by Mark Feehily0

A Guide to Answering the Most Important React.JS Developer Interview Questions

<!–

–>

<!– –>

<!–

–>

Question #1. What are the major advantages of React.JS?

Answer #1
· SEO-friendliness,
· Virtual DOM,
· reusable components
· and one-way data flow

You are correct! All of these advantages are pivotal to ReactJS:
· Being SEO-friendly allows your project to show better organic search results in order to attract users and drive business goals;
· One-way data flow allows for a simpler and more stable code, as in React.JS’ structure parent data cannot be affected by any changes made to child elements;
· React.JS isolates each and every component, which, in turn, means that all the components of the code are perfectly reusable and will not affect all the copies of that component if any changes are made to it;
· And last but not least, React uses Virtual DOM. If any changes are made, it does not rewrite the entire DOM tree and updates the manipulated element. As a result, it renders React.JS’ Virtual DOM much more efficient and faster performing.

Answer #2
· Being maintained by Google,
· Two-way data binding
· Usage of TypeScript

Take a deep breath and let the stress go, as you seem somewhat confused. Easiness to learn and virtual DOM are React.JS’ advantages, whilst usage of TypeScript and two-way data binding are Angular’s. You are near the right track, but be more attentive to the next question!

Question #2. What are the main features of React.JS you would like to list?

Answer #1
MVC Architecture, Less Code Framework, Dependency Injection, Directives

While all of these features are worth writing home about, they are the main features of Angular. And, also, some type of Dependency Injection is possible in React.JS, it is far from being a feature and requires lots and lots of tinkering around.

Answer #2
JSX, Event Handling, Virtual DOM, Computed Properties, Template

Answer #2
You are close, but no cigar on this one, as this answer is, in fact, a mix of Vue.JS’ and React.JS’ main features. Let’s clear the smog a little: both Vue.JS and React.JS use virtual DOM and to great result, we might add, but where the first uses Templates, the second goes with JSX. React.JS also does not have computed properties out of the box (also, you can compute it pretty quickly). Event Handling also differs in React.JS and Vue.JS, also they both use virtual DOM, instead of traditional one.

Question #3. What are the major disadvantages and limitations of React.JS?

Answer #1
JSX, Poor Documentation, View Part

Answer #1
Bravo for not being afraid to list JSX as one of the main disadvantages of React.JS, as it can be described as both a blessing and a curse. JSX can be considered a barrier, especially for new developers, as it greatly complicates the learning curve.
As for the View Part, you should never forget and never shy away from mentioning the fact that React.JS only covers the UI Layers of the whole app in your interview, so the project would still need other technologies for the full toolset.
And the third major React.JS’ limitation is its poor documentation, which stand from constant development, which renders full proper documentation impossible.

Answer #2
Steep learning curve, Limited SEO options, Speed of development

Answer #2
Once again, the devil is in the details. While the steepness of React.JS’ learning curve is quite significant and the speed of development is bringing its fair share of problems too, React.JS is extremely SEO-friendly.

Question #4. What are the differences between React.JS and other Java scripts?

Answer #1
React.JS:
uses MVC framework, has eazy Real-time data steaming, has the largest ecosystem of open-source libraries

Answer #1
Unfortunately, you are wrong on this one. All of these features differentiate not React.JS, but Node.JS. It’s also worth mentioning here that Node.JS is used for creating backend, while React.JS covers only the UI side of the question.

Answer #2
React.JS:
uses TypeScript, uses MVC framework, has Built-in support for AJAX/HTTP/ Observables

Answer #2
We urge you to pay closer attention. React.JS does not use TypeScript, it uses JavaScript, hence the JS in the name.

Question #5. What are the major two types of components that can be declared in React, and when should you use one over the other?

Answer #1
Smart Components and Dumb Components.

You choose Smart Components when you need a component that is able to manage its own state and Dumb component when there is no need for state managing and/or the component is stateless.

Answer #1
The descriptions of and reasoning behind choosing these components are correct, but we do not use Smart and Dumb components in React.JS. Instead, the two major types of components in React.JS are Functional and Class components.

Answer #2
Functional Component and Class Component.

You should choose Class Components when you need the data to be transferable from one component to the other and Functional Component for JavaScript functions.

Answer #2
You are right! Components in React basically return a piece of JSX code that tells you what should be rendered on the screen. Thus, these two component types are the ones we use.

22/23

The post Take The Quiz! Top 20 React.js Interview Questions appeared first on Flatlogic Blog.

#328: Large Scale Planning

Posted on August 11, 2021September 11, 2021 by Mark Feehily0

Chris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term. We know we’re pretty OK at planning smaller-scale projects. We plan, we kanban, we get the job done. But a single basic kanban isn’t going to cut it for a truly gigantic project. We get into talking about chopping the project into phases, chopping those phases into sections (sometimes with their own phases), and a databasing/kanbaning strategy to tie it all together. This also touches GitHub workflows and meeting structures, so there is a lot to think through here and it requires constant effort.

Time Jumps

01:19 How do you plan well?

05:17 The vision has happened – now what?

08:18 Sponsor: WordPress Growth Summit

09:29 The known unknowns

18:58 Breaking Phases down into Sections

24:27 Deadlines vs speed

29:08 Using GitHub to manage projects

Sponsor: WordPress.com Growth Summit

The WordPress.com Growth Summit is coming up August 17th (Americas & EMEA) and August 18th (Asia Pacific) and is focused on running a business with a WordPress website as a core.

Get expert advice on how to design your site, write effective copy, attract traffic, build a community, and earn money.

The post #328: Large Scale Planning appeared first on CodePen Blog.

The New Change View Menu

Posted on August 4, 2021September 11, 2021 by Mark Feehily0

We’ve been plucking away at some UI changes that will help slowly morph our existing Pen Editor into the editor we’re imagining for the future. That will be a big change, someday, but in order to make it feel less abrupt, we’re doing smaller changes where we can so that the final change won’t feel so big.

So anyway, a little update to the Change View menu. Featuring fun animated rotations!

The post The New Change View Menu appeared first on CodePen Blog.

#327: 99.999% Uptime

Posted on August 4, 2021September 11, 2021 by Mark Feehily0

Chris & Alex talk about DevOps, servers, and keeping CodePen online at all times. We were are 100% for the year until a few weeks ago when we had a 10 minute drop. That still keeps us in the realm of 99.99% uptime, where we get 52 minutes and 35 seconds of downtime per year, but next year we’re shooting for 5-nines, that is, 99.999% uptime, where we only get 5 minutes and 16 seconds of downtime. Of course, our goals (and eventually, promises) can only be as strong as the service providers we use. Thankfully with providers like AWS and Cloudflare, we’re in good hands.

There are a number of things that have traditionally got in the way of this high of uptime, like database manipulation work. These days, we have the tech and the strategies for that, like seeding a newly manipulated database alongside the existing one and cutting over. We also have code in place for doing intelligent things like cutting off services if they become unreliable, rather than letting them bog down or kill the site entirely.

Time Stamps

00:55 Status boards

03:52 Shooting for 5 9’s of uptime

11:31 Sponsor: Netlify

13:57 Other possible points of failure

20:48 We’re not on call but we can be called

25:42 Using Cloudflare

Sponsor: Netlify

Netlify is the Jamstack hostess with the mostest. Netlify Dev allows you to run their entire platform on your own machine. That means being able to test things like cloud functions, redirects, form submissions, etc without even having to do a preview build. Another aspect of Netlify, that is fundamental, is that you don’t really have to worry about scaling on Netlify. Your static-based site is ready to scale to any level, and that includes all the cloud functions too, as they are lambdas and designed to scale.

The post #327: 99.999% Uptime appeared first on CodePen Blog.