Front-End Challenges | CSS-Tricks

Front-End Challenges | CSS-Tricks

My favorite way to level up as a front-end developer is to do the work. Literally just build websites. If you can do it for money, great, you should. If the websites you make can help yourself or anyone else you care about, then that’s also great. In lieu of that, you can also make things simply for the sake of making them, and you’ll still level up. It’s certainly better than just reading about things!

Here’s some resources that encourage you to level up by building things for the sake of leveling up, if you’re up to it.

Frontend Mentor

It looks like this recently launched, and it’s what inspired this post. This idea of giving people front-end work to do is enough to build a business around! Some of them are free, and some of them are not.


Other businesses have centered themselves around this too. HackerRank is all about getting jobs and hiring, so they’ve got a very strong agenda, but part of the way they do that is putting you through these skill tests (solving challenges) which are meant to asses you, but you can certainly learn from them too.

Others like this: Codewars, ChallengeRocket, Codesignal, Topcoder (Jeepers, VCs must love this idea.)


Coderbyte has paid plans too, and they’re designed to leveling up your job interviewing skills with challenges.

Classic situation: sometimes the site is the product and you’re the customer, and sometimes hiring companies are the customer and you’re the product.

Build Dribbble shots

Here’s the classic move: find something you like on Dribbble, rebuild it. The @keyframers often do it. Tim Evko’s Practice site used to pick a shot for you (along with random GitHub issues and random coding challenges), but the Dribbble part appears broken at the moment. The other stuff still works!

Matt Delac used to do a series along these lines. Indrek Lasn also does it in Medium posts.

Front-End Challenges Club

Andy Bell did a Front-End Challenges Club for a while, and while I think it’s on break, you can view the archives.

CodePen Challenges

CodePen Challenges run every week are are a prompt (along with ideas and resources) for building whatever you like. Low key.

100 Days of CSS Challenge

Daily UI

Daily UI challenges gives you a new challenge every day that starts when you sign up (and it’s free). Lots of people complete the challenge with code.


Frontloops charges $19 for 30 challenges, which includes information, advice, assets, and a solution.


If your idea of a fun challenge is mimicking a design in as few bytes of code as possible, CSSBattle will appeal to you.

Writing things as tersely as possible is often called “Code Golf” and there is a challenge site for that too.

Ace Front End

Ace Front End has challenges that focus specifically on vanilla HTML, CSS, and JavaScript.

I just happened to notice that the first challenge is a drop down navigation menu, and it doesn’t handle things like aria-expanded. I’m not entirely sure how big of a problem that is and I don’t mean to pick on Ace Front End — it’s just a reminder that there could be problems with any of these challenges. But that doesn’t mean you can’t learn something from them.


Codier has public challenges that include solutions posted by other users.

rendezvous with cassidoo

Rina Diane Caballar quoting Tim Carry in Extending the Limits of CSS:

Carry’s advice is to start with a real-world object—the interface of a gaming console or a calculator, for example—and to try to recreate it using only CSS. “A great way to push the boundaries with a language is to make something that the language wasn’t meant to be doing in the first place,” he says.

Source link

Pseudo-Randomly Adding Illustrations with CSS – Eric’s Archi...

Pseudo-Randomly Adding Illustrations with CSS – Eric’s Archi…

I’ve been incredibly gratified and a bit humbled by the responses to the new design.  So first of all, thank you to everyone who shared their reactions!  I truly appreciate your kindness, and I’d like to repay that kindness a bit by sharing some of the techniques I used to create this design.  Today, let’s talk about the ink-study illustrations placed between entries on the site, as well as one other place I’ll get to later.

Very early in the process, I knew I wanted to separate entries with decorations of some sort, as a way of breaking up the stream of text.  Fortunately, Hamonshū provided ample material.  A little work in Acorn and I had five candidate illustrations ready to go.

The five illustrations.

The thing was, I wanted to use all five of them, and I wanted them to be picked on a random-ish basis.  I could have written PHP or JS or some such to inject a random pick, but that felt a little too fiddly.  Fortunately, I found a way to use plain old CSS to get the result I wanted, even if it isn’t truly random.  In fact, its predictability became an asset to me as a designer, while still imparting the effect I wanted for readers.

(Please note that in this article, I’ve simplified some aspects of my actual CSS for clarity’s sake; e.g., removing the directory path from url() values and just showing the filenames, or removing declarations not directly relevant to the discussion here.  I mention this so that you’re prepared for the differences in the CSS shown in this piece versus in your web inspector and/or the raw stylesheet.)

Here’s how it starts out:

#thoughts .entry + .entry::before {
   content: "";
   display: block;
   height: 10em;
      url(separator-big-05.png) 50% 100% / contain no-repeat;

That means, for every blog entry except the first, a block-level bit of generated content is inserted at the beginning of the entry, given a height, and the image separator-big-05.png is dropped into the generated box and sized to be contained within it, which means no part of the image will spill outside the background area and thus be clipped off.  (The file has the number 05 because it was the fifth I produced.  It ended up being my favorite, so I made it the default.)

With that in place, all that remains is to switch up the background image that’s used for various entries.  I do it like this:

#thoughts .entry:nth-of-type(2n+1)::before {
   background-image: url(separator-big-02.png);
#thoughts .entry:nth-of-type(3n+1)::before {
   background-image: url(separator-big-03.png);
#thoughts .entry:nth-of-type(4n+1)::before {
   background-image: url(separator-big-04.png);
#thoughts .entry:nth-of-type(5n+1)::before {
   background-image: url(separator-big-01.png);

So every second-plus-one entry (the third, fifth, seventh, etc.) that isn’t the first entry will use separator-big-02.png instead of -05.png.  Unless the entry is an every-third-plus-one (fourth, seventh, tenth, etc.), in which case separator-big-03.png is used instead.  And so on, up through every-fifth-plus-one.  And as you can see, the first image I produced (separator-big-01.png) is used the least often, so you can probably guess where it stands in my regard.

This technique does produce a predictable pattern, but one that’s unlikely to seem too repetitious, because it’s used to add decoration separated by a fair amount of text content, plus there are enough alternatives to keep the mix feeling fresh.  It also means, given how the technique works, that the first separator image on the home page (and on archive pages) is always my favorite.  That’s where the predictability of the approach helped me as a designer.

I use a similar approach for the separator between posts’ text and their comments, except in that case, I add a generated box to the end of the last child element in a given entry:

.single #thoughts article .text > *:last-child:after {
   content: "";
   display: block;
   height: 10em;
      url(separator-big-05.png) 50% 100% / contain no-repeat;

That is, on any page classed single (which is all individual post pages) after the last child element of a .text element (which holds the text of a post), the decoration box is generated.  The default, again, is separator-big-05.png—but here, I vary the image based on the number of elements in the post’s body:

.single #thoughts article .text > *:nth-child(2n+1)::after {
   background-image: url(separator-big-02.png);
.single #thoughts article .text > *:nth-child(3n+1)::after {
   background-image: url(separator-big-03.png);
.single #thoughts article .text > *:nth-child(4n+1)::after {
   background-image: url(separator-big-04.png);
.single #thoughts article .text > *:nth-child(5n+1)::after {
   background-image: url(separator-big-01.png);

In other words: if the last child element of the post text is a second-plus-one, separator-big-02.png is used.  If there are 3n+1 (one, four, seven, ten, thirteen, …) HTML elements in the post, separator-big-03.png is used.  And so on.  This is an effectively random choice from among the five images, since I don’t count the elements in my posts as I write them.  And it also means that if I edit a piece enough to change the number of elements, the illustration will change!  (To be clear, I regard this as a feature.  It lends a slight patina of impermanence that fits well with the overall theme.)

I should note that in the actual CSS, the two sets of rules above are merged into one, so the selectors are actually like so:

#thoughts .entry + .entry::before,
   .single #thoughts article .text > *:last-child:after {…}

#thoughts .entry:nth-of-type(2n+1)::before,
   .single #thoughts article .text > *:nth-child(2n+1)::after {…}

#thoughts .entry:nth-of-type(3n+1)::before,
   .single #thoughts article .text > *:nth-child(3n+1)::after {…}

In all honesty, this technique really satisfies me.  It makes use of document structure while having a random feel, and is easily updated by simply replacing files or changing URLs.  It’s also simple to add more rules to bring even more images to the mix, if I want.

And since we’re talking about using structure to vary layout, I also have this @media block, quoted here verbatim and in full:

@media (min-width: 50em) {
   #thoughts .entry:nth-of-type(2n) {
      transform: translate(-1vw,0);
   #thoughts .entry:nth-of-type(3n) {
      transform: translate(3vw,0);

This means on the home page and blog archive pages, but only at desktop-browser widths, some entries are shifted a bit to the left or right by fractions of the viewport width, which subtly breaks up the strict linearity of the content column on long pages, keeping it from feeling too grid-like.

To be honest, I have no idea if that side-shifting effect actually affects visitors’ experience of using meyerweb, but I like it.  Sometimes the inter-entry wave art fits together with the side-shift so that it looks like the art flows into the content.  That kind of serendipity always delights me, whether it comes by my hand or someone else’s.  With luck, it will have delighted one or two of you as well.

Source link

flutter brands

Flutter Vs React Native: Everything You Ever Wanted to Know …

The space of technology is ever-evolving since the demands are many. And the increase in demand has led to multiple new technologies to come into existence. Today the world of app development is flourishing at a higher speed, and the credit goes to the unbelievably robust technology advancements. Every business prefers to provide the best experience to the users. And no doubt this purpose is well-served by the mobile application technology. However, on looking closer, you may find that there is a big group of technical advancements in the market.

For any business, it is hard to make a smart move with these new tech stacks. The innovative technological spectrum has brought two sensational technologies; React Native and Flutter.

These two technologies are scaling higher on the performance factors and both the platforms have their own benefits.

But hold on, as these both the technologies are super-efficient, it is making a daunting task for the business owners to select the best.

Is it troubling you???

You don’t need to be worried anymore since, with this post, we have tried to cover each and every aspect of the Flutter and React technology. We are sure by the end of the post you would be able to make the informed decision.

Let’s start learning more about these two trending technologies, and explore what they have kept hidden in their Pandora box.

Flutter VS React Native

To start with it can easily be stated that in the current market trend these two platforms are the giant players.

Every big brand and enterprise is embracing these two technologies in their business model. Indeed, both platforms have a lot more to offer to your app and can help you scale higher.

So let’s begin…

A Word About Flutter

In simple words, Flutter is a portable UI toolkit. It contains a complete set of widgets and tools. It lets the developers build cross-platform apps. It uses a single codebase to build apps for Android, iOS, and web. Also, it is a free and open-source, based on Dart – a fast, object-oriented programming language.

The incredible set of the widget in Flutter allows apps to have a great look and feel.

flutter brands

Now let’s take a quick look at the advantages and the disadvantages owned by the Flutter platform.

Flutter Pros

1) Hot Reload

No doubt Flutter has a different development approach. It brings dynamic and faster app development. Developers can make changes in the codebase and can see them immediately reflecting on the app. With this feature, the developer can fix bugs, or update instantly.

2) One Codebase for Multiple Platforms

The development of the Flutter app is easier, compared to any other. Flutter allows developers to write just one codebase for multiple platforms such as Android, iOS, and web. This code works efficiently on other platforms as well. It saves time and money in the development process.

3) Needs 50% Less Testing

Testing a Flutter app is a very easy process. Since the application testing works on both the platforms, it reduces app testing efforts by 50%. In this run, developers only need to invest their time in testing on one Platform and on the other, it works itself.

4) Builds Apps Faster

As the Flutter app development needs to be done on one specific platform, it helps a lot. Developers can build faster apps with scaling performance. It can deliver 60fps- frames per second seamlessly.

5) Custom Widgets

Flutter has many ready-made widgets. It doesn’t need to upgrade to support old devices. Also, widgets from Flutter can be combined to create layouts, and also developers can select any level of customization.

6) MVP Perfect

MVP for a mobile app is a necessary aspect. It helps in building only the required features and functionalities within the app. Flutter is the best choice to build an MVP for the app. It works well when there is less time for development.

Flutter Cons

1) Simple Libraries and Support

Flutter makes it a convenient choice for app developers to utilize multiple libraries during the development process. But the inclusion of libraries in the Flutter doesn’t have the support of every existing library. However, some of the libraries are needed to be customized by the developers to be used further.

2) Regular Support

The regular support is much needed to handle the challenges in the development process. Flutter doesn’t support CI platforms like Travis. That’s why developers need to use a custom script to build, test, and deploy. This can disturb the flow of development.

3) Risky Platform

Google is the main working mechanism behind Flutter. However, Flutter is open source, but without Google’s support, there can’t be any future for Flutter. Therefore, it makes Flutter a risky platform that can’t survive without Google’s support.

4) Size of App

The size of a mobile app is the main concern, which disturbs the developers. As no one wants to download an app that consumes a bigger space on the phone. And this is where Flutter has a demerit. Flutter apps are bigger than their native counterparts.

Hmm, now let’s move towards the next popular technology React Native, and let’s discuss what it has got within its mechanism.

A Word About React Native

React Native is an open-source mobile app framework that utilizes JavaScript. It is an effective framework for building cross-platform apps. Apps can be built on both the platforms, using a single codebase.

Also, clear the doubt that React Native apps are not mobile web apps. With React Native developers can use the iOS and Android’s UI building blocks.

react native brands

How about gaining some information about the merits and demerits this very technology holds? Let’ find out together…

React Native Pros

1) Fast Refresh Feature

React Native brings live reloading and hot reloading features together into a single new feature; “Fast Refresh”. This very feature fully supports modern React and doesn’t work on the invasive code transformations. Hence it is very reliable through every possible corner.

2) One Codebase for Two Major Platforms

For an app to save time and money on the development process, is a much-needed aspect. React lets the one single codebase to be written and let the app to work on both the platforms. This helps in saving time and money and works efficiently on both platforms.

3) React Utilizes JavaScript

JavaScript is the best programming language among developers across the globe. You get to experience JavaScript with React Native. As a developer, you get to make statically-typed programming languages and let the app run seamlessly.

4) A Mature Platform

React Native is no more in a nascent stage. React Native was released 5 years ago and meanwhile it has gone through massive change. This has let the developers focus on fixing the issues in a better manner along with helping the efficient app to come into existence.

5) Vast React Native Community

The developer community from React Native is quite large. The team of experts keeps on sharing new technology updates. This has allowed developers to learn technology quickly. Also, it helps in sharing new information related to Flutter.

6) Very Easy to Learn

React Native is easy to learn. Developers can use the same libraries, tools, and patterns. The mechanism of the React platform is not at all tough. It does not require any sort of special training to be given to the developers and they can use it.

7) React Reduces Testing Efforts

Every app requires the testing process. This helps in making the app work without any glitch on the app platform. React apps work efficiently on both the platforms, and this makes the need for the testing to be done on one of the platforms only. It reduces the demand for testing efforts and helps in bringing efficient products.

React Native Cons

1) It Is Not Thoroughly Real Native

The performance and the quality excellence Native apps have, are commendable. But in the React Native, the UI experience and performance are not at all similar. They are not just alike in the React native, and there are certain differences.

2) Fewer Components

Despite being popular and mature, React Native still lacks in some components. Only basic components are supported by React Native. And others which are existing are underdeveloped. This will make developers use fewer components.

3) Many Abandoned Packages

React Native has a massive number of libraries. These libraries are of low quality or can be abandoned as well. Therefore, within the development process, developers find many abandoned packages, which are not used at all.

4) Fragile UI

React Native is built on native components, wherein the updates can cause certain changes in the Native Components API. And these changes if not handled well can affect the complete mechanism of the mobile app and disturb the flow.

5) React Apps Are Bigger Than Native

Every app written on React Native runs on the JavaScript code. But Android doesn’t hold this functionality. Android needs to include a library supporting JavaScript code. It leads to the apps to be bigger than the native Android apps.

This is the quick summary of the pros and cons and the information related to Flutter and React.

Here Is the Visual Comparison of Flutter vs React Native

flutter vs react

Still, one question that is hot enough comes, that

Which Technology Is the Best?

On an honest note, both the technologies are supreme in their own space. If you will analyze then you can see that React Native is very popular owing to the multiple aspects. One of the biggest advantages it gives to the businesses is to control the cost factor and reduced delivery time.

On the other hand, Flutter possesses an almost similar set of benefits and ensures that your app gets build in no time, with the amazing features. Therefore, it might be difficult to give a vote to one specific technology. It is not the diplomatic answer but suggests the fact.

Both of these technologies have incredible values intact within them. And if used as per the business requirements, either of them can do wonders.

To wrap up, it can be said that it should not be about Flutter VS React Native, but should always be Flutter and React. So it is highly recommended to use any of these technologies. It must depend upon the requirements of your business and further implement the best of technology in your business.

Source link

File system

How to Use Bootstrap Carousel in React


In this article, I will explain how to create a Bootstrap Carousel in React.js. A Carousel is a slideshow for cycling a series of images or videos. A carousel rotates the images horizontally or vertically with some effect.


  • Basic knowledge of React.js.
  • Visual Studio Code.
  • Node and NPM installed.
  • Bootstrap.

Create ReactJS Project

Let’s first create a React application using the following command.

Open the newly created project in Visual Studio Code and install Bootstrap in this project using the following command.  

Now, open the index.js file and import Bootstrap.

Now, right-click on the public folder. Add a new folder, assets, and under it, add a new folder and rename that to img. Then, add some demo images to this folder

File system

File system

Now, go to the src folder and create a new component, BootstrapCarousel.js and add the following reference in this component   :

Add the following code in this component:

Now, open app.js file and add the following code:

Now run the project by using npm start and check the result.

We can also pause slider on mouse hover and set time intervals. Let’s create a component BootstrapCarouselDemo.js and add the following reference in this component.  

Now, open the app.js file and add the following code:

Now, run the project using ‘npm start’ and check your results.



In this article, we learned how to implement Bootstrap Carousel in a React.js application.

Source link

Better Form Inputs for Better Mobile User Experiences

Better Form Inputs for Better Mobile User Experiences

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team. 

There’s no question that forms on mobile devices can be time-consuming and tedious to fill in, but by properly configuring inputs, we can ensure that the data entry process is as seamless as possible for our users. Let’s take a look at some examples and best practices we can use to create better user experiences on mobile devices.

Use this demo to experiment on your own, if you’d like.

Using the correct input type

This is the easiest thing to get right. Input types, like email, tel, and url, are well-supported across browsers. While the benefit of using a type, like tel over the more generic text, might be hard to see on desktop browsers, it’s immediately apparent on mobile.

Choosing the appropriate type changes the keyboard that pops up on Android and iOS devices when a user focuses the field. For very little effort, just by using the right type, we will show custom keyboards for email, telephone numbers, URLs, and even search inputs

Text input type on iOS (left) and Android (right)
Email input type on iOS (left) and Android (right)
URL input type on iOS (left) and Android (right)
Search input type on iOS (left) and Android (right)

One thing to note is that both input type="email" and input type="url" come with validation functionality, and modern browsers will show an error tooltip if their values do not match the expected formats when the user submits the form. If you’d rather turn this functionality off, you can simply add the novalidate attribute to the containing form.

A quick detour into date types

HTML inputs comprise far more than specialized text inputs — you also have radio buttons, checkboxes, and so on. For the purposes of this discussion, though, I’m mostly talking about the more text-based inputs

There is a type of input that sits in the liminal space between the more free-form text inputs and input widgets like radio buttons: date. The date input type comes in a variety of flavors that are well-supported on mobile, including date, time, datetime-local, and month. These pop up custom widgets in iOS and Android when they are focused. Instead of triggering a specialized keyboard, they show a select-like interface in iOS, and various different types of widgets on Android (where the date and time selectors are particularly slick). 

I was excited to start using native defaults on mobile, until I looked around and realized that most major apps and mobile websites use custom date pickers rather than native date input types. There could be a couple reasons for this. First, I find the native iOS date selector to be less intuitive than a calendar-type widget. Second, even the beautifully-designed Android implementation is fairly limited compared to custom components — there’s no easy way to input a date range rather than a single date, for instance. 

Still, the date input types are worth checking out if the custom datepicker you’re using doesn’t perform well on mobile. If you’d like to try out the native input widgets on iOS and Android while making sure that desktop users see a custom widget instead of the default dropdown, this snippet of CSS will hide the calendar dropdown for desktop browsers that implement it:

::-webkit-calendar-picker-indicator {
  display: none;
Date input type on iOS (left) and Android (right)
Time input type on iOS (left) and Android (right)

One final thing to note is that date types cannot be overridden by the inputmode attribute, which we’ll discuss next.

Why should I care about inputmode?

The inputmode attribute allows you to override the mobile keyboard specified by the input’s type and directly declare the type of keyboard shown to the user. When I first learned about this attribute, I wasn’t impressed — why not just use the correct type in the first place? But while inputmode is often unnecessary, there are a few places where the attribute can be extremely helpful. The most notable use case that I’ve found for inputmode is building a better number input.

While some HTML5 input types, like url and email, are straightforward, input type="number" is a different matter. It has some accessibility concerns as well as a somewhat awkward UI. For example, desktop browsers, like Chrome, show tiny increment arrows that are easy to trigger accidentally by scrolling.

So here’s a pattern to memorize and use going forwards. For most numeric inputs, instead of using this: 

<input type="number" />

…you actually want to use this:

<input type="text" inputmode="decimal" />

Why not inputmode="numeric" instead of inputmode="decimal"

The numeric and decimal attribute values produce identical keyboards on Android. On iOS, however, numeric displays a keyboard that shows both numbers and punctuation, while decimal shows a focused grid of numbers that almost looks exactly like the tel input type, only without extraneous telephone-number focused options. That’s why it’s my preference for most types of number inputs.

iOS numeric input (left) and decimal input (right)
Android numeric input (left) and decimal input (right)

Christian Oliff has written an excellent article dedicated solely to the inputmode attribute.

Don’t forget autocomplete

Even more important than showing the correct mobile keyboard is showing helpful autocomplete suggestions. That can go a long way towards creating a faster and less frustrating user experience on mobile.

While browsers have heuristics for showing autocomplete fields, you cannot rely on them, and should still be sure to add the correct autocomplete attribute. For instance, in iOS Safari, I found that an input type="tel" would only show autocomplete options if I explicitly added a autocomplete="tel" attribute.

You may think that you are familiar with the basic autocomplete options, such as those that help the user fill in credit card numbers or address form fields, but I’d urge you to review them to make sure that you are aware of all of the options. The spec lists over 50 values! Did you know that autocomplete="one-time-code" can make a phone verification user flow super smooth?

Speaking of autocomplete…

I’d like to mention one final element that allows you to create your own custom autocomplete functionality: datalist. While it creates a serviceable — if somewhat basic — autocomplete experience on desktop Chrome and Safari, it shines on iOS by surfacing suggestions in a convenient row right above the keyboard, where the system autocomplete functionality usually lives. Further, it allows the user to toggle between text and select-style inputs.

On Android, on the other hand, datalist creates a more typical autocomplete dropdown, with the area above the keyboard reserved for the system’s own typeahead functionality. One possible advantage to this style is that the dropdown list is easily scrollable, creating immediate access to all possible options as soon as the field is focused. (In iOS, in order to view more than the top three matches, the user would have to trigger the select picker by pressing the down arrow icon.)

You can use this demo to play around with datalist:

And you can explore all the autocomplete options, as well as input type and inputmode values, using this tool I made to help you quickly preview various input configurations on mobile.

When I’m building a form, I’m often tempted to focus on perfecting the desktop experience while treating the mobile web as an afterthought. But while it does take a little extra work to ensure forms work well on mobile, it doesn’t have to be too difficult. Hopefully, this article has shown that with a few easy steps, you can make forms much more convenient for your users on mobile devices.

Source link