Latest Tutorials

ngx-translate-extension is an extensive library of ngx-translate. can be installed using npm. Most of the angular developers must have faced a need to integrated a translation library to internationalize the angular application with lot of translation features But have you analyzed the maintainability , simplicity and readability of the code. How much consistency does the library provide while resolving the translation data. Confused about how to compare ??? Since there are a lot of translation libraries available for translation, RxWeb has compared more often used translation libraries When we talk about clean code it includes verifying it at many steps right from the configuration to rendering it into the user interface As RxWeb follows best design practices and approach to use clean code. Here are some glimpse of some of the basic features provided by its translation library. This is the one of the most beautiful feature 🙃 of the library relies on the Angular interpolation for displaying a localized text in the respective view template with double curly braces syntax. Have a look at the code 👇 Component: Html: Json: We use Angular interpolation for Component Scoped Property Binding with translation text, This gives fantabulous 😲 solution of the problem of writing the little lines of business logic in the template and with this way the template is much clear. Component: Html: Json: One of the richest feature of the library 😍, which gives complete flexibility to run the translation property string code same as same as existing component scoped method. Component: Html: Json:

ngx-translate-extension is an extensive library of ngx-translate. can be installed using npm. Most of the angular developers must have faced a need to integrated a translation library to internationalize the angular application with lot of translation features But have you analyzed the maintainability , simplicity and readability of the code. How much consistency does the library provide while resolving the translation data. Confused about how to compare ??? Since there are a lot of translation libraries available for translation, RxWeb has compared more often used translation libraries When we talk about clean code it includes verifying it at many steps right from the configuration to rendering it into the user interface As RxWeb follows best design practices and approach to use clean code. Here are some glimpse of some of the basic features provided by its translation library. This is the one of the most beautiful feature 🙃 of the library relies on the Angular interpolation for displaying a localized text in the respective view template with double curly braces syntax. Have a look at the code 👇 Component: Html: Json: We use Angular interpolation for Component Scoped Property Binding with translation text, This gives fantabulous 😲 solution of the problem of writing the little lines of business logic in the template and with this way the template is much clear. Component: Html: Json: One of the richest feature of the library 😍, which gives complete flexibility to run the translation property string code same as same as existing component scoped method. Component: Html: Json:

In this post, we will discuss how to build a dropdown component in React. We will also add an animation to our dropdown.There are many approaches you can take when adding a component to your application, there is an abundance of component libraries you can use such as material-ui but sometimes it is better to just get your hands dirty and build your own one! In this post, we are going to do exactly that and build our own dropdown component. A dropdown is a staple in any web application and is most commonly used in menus to display a list of options to the user. A dropdown can also be used to display some information to the user that can be shown on a button click. They are used all across the web and you could also be asked to build one in your next interview! I know that building a component such as a dropdown may seem intimidating, but in this post, we will take it step by step so you can follow along. The knowledge gained from this post will also help you build any custom components! Ready? Let's go! By the end of this post, you will be able to: Armed with the above knowledge, you will have a newfound confidence when approaching building components in React. To get the most out of this article, we assume you're familiar with component basics in React, React Hooks, and also core JavaScript. If you do not know any of the above but would like to learn, here are some great resources: Now it's time to get started on our journey of building our very own dropdown component. Before building our dropdown component, it is important to discuss the different parts of a dropdown. There are four key components to a menu dropdown: Visually, we can imagine it like this: The component structure could look like this: The core functionality would be: The above is just theory, you can be as creative as you want when building your own component. When building custom components, it is really important to build the component to suit your use case as it may be quite different from the standard. It's good to use the best practice guidelines but also don't be afraid to be creative! Let's first start with a very basic dropdown, we will click on a button that will show a pop up that tells the user something. When building a basic dropdown component, there is one important piece of state. The important piece of state is whether the dropdown is open or not. We will also need to add a function to handle toggling this piece of state. This will all live in our wrapper component, which in our case is App . We can use useState to manage the showing and hiding of the dropdown for us (check out the docs here for React hooks ). We will pass both showDropdown and setShowdropdown as props to our component. Now we need to build our BasicDropdown component. The main thing we need is something to trigger our dropdown and also the content of our dropdown. We are using a button to trigger the dropdown and then we only show our content when showDropdown is true. There is a little CSS with this too, the key part of the CSS is setting position:relative on the dropdown-wrapper and position:absolute on the dropdown . We do this so that the dropdown will always be positioned to the the dropdown-wrapper . Visually, we now have: That is it, not too bad, eh? This is a very basic dropdown but still is very commonly used when displaying some information to a user. You could reuse this in various places and even expand it by opening it up to additional props such as a custom color or custom text. Why not try to add those additional props to the Codesandbox below, this will help further your knowledge of building custom components and making them reusable. So we can use a lot of the knowledge we gained above to help build our dynamic dropdown. The big difference with this dropdown is that it will accept a prop named items and it will also have a transition when it is being open/closed. The items prop will determine when it is rendered within our dropdown list. This could literally be anything. A very common scenario is sub-items for a navigation menu. In our case we are going to make up some items: We can then pass this into our dropdown component: Our dropdown component will behave quite similar to the one before, except we will map over each item in our array and create an li item. We will initially set our ul to have height 0 so that it is hidden. When showDropdown is true, we will set the height to 100px which will make it visible. To achieve this, we will use the following CSS (nothing too fancy going on, mostly overriding default browser styles): As you can see from above, we have set a transition on our height so that when the height changes it will do it with an ease transition which will last 300ms . You don't need to always use the animation property. In simple cases where only one attribute is changing in a predictable manner, we can use transition . Visually, we now have this: One important part to note is the overflow:auto . As we get a lot of items being passed to our list, we can then scroll our dropdown to suit this. Complete sandbox. Today we learned: If you're interested in learning further, try to build your own components. There are some great long-form articles you can read on building your own components such as this one . Personally, I would say that if you have read all the above then you should just open your own Codesandbox and start building components such as an Alert or a Modal. This is truly the best way to learn! Have a great day and happy coding.

Today we deployed a new feature that we’ll be rolling out to all courses/books: inline commenting. Because it’s early, we’ll be rolling it out on an a per-course/book basis - the first one is for the beta readers of “Clojure for React Developers”. What’s awesome about inline commenting is that it will let students ask questions about specific passages within their learning experience. Right now, there are a few limitations, and we’re going to add/fix as we go. They are: We'll be rolling out inline commenting into the rest of the books and courses over the next few weeks and we're so excited for you to try them out! -Nate

Fullstack Flask is coming soon (Sept 2020)