Tag Archives: Design

Learn CSS with games

Learn CSS with games

Whether you want to learn or practice CSS (Cascading Style Sheets), it can sometimes be a frustrating experience. This is not something present only for CSS, it also applies to everything else in the world of web development. That is why the term “Gamification” is appearing more and more often. Gamification is the application of game-design elements and game principles in a non-game context to simplify the learning or practice process. In this article, we will focus only on CSS.

Below we will present the best free games that will help you while learning or practicing CSS. Keep in mind that not all CSS concepts are processed through these games, but only some.

1. Flexbox Froggy

The best and most popular game that focuses on CSS flexbox layout. It consists of 24 levels and this game covers flex properties such as justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow, align-content. The game is short, interesting, and well designed.

Game: Flexbox Froggy

Difficulty: Easy

Registration: Not required

2. Flexbox Zombies

This is an amazing game, especially for those who like zombie survival games. Your task is to use the CSS flexbox to position the hero’s crossbow in such a way that the hero can kill zombies. Each section reveals a new part of the story and introduces you to a new part of the flexbox layout concept.

Flexbox Zombies covers flex properties such as flex-direction, justify-content, align-items, align-self, flex-grow, flex-shrink, flex-basis, order, flex-wrap, align-content and flex shorthand.

Game: Flexbox Zombies

Difficulty: Hard

Registration: Required

3. Flexbox Defense

Flexbox Defense is a classic tower defense game. What makes it useful is that it requires tower positioning using CSS. This game also focuses on the CSS flexbox layout and covers the following flex properties: justify-content, align-items, flex-direction, align-self, and order through 12 levels.

Game: Flexbox Defense

Difficulty: Medium

Registration: Not required

4. Grid Garden

Like Flexbox Froggy this game comes from the Codepip platform. These two games are completely free while others are paid. You can take a closer look at Codepip. Just as Flexbox Froggy is for the CSS flexbox layout concept, so is Grid Garden for the CSS grid layout concept. This game has 28 levels that start from easy to hard.

The point of the game is to continually water the carrots using the CSS grid layout concept to position the water where our carrots are in the garden. The game covers the following grid properties: grid-column-start, grid-column-end, grid-column, grid-row-start, grid-row-end, grid-row, grid-area, order, grid-template-columns, grid-template-rows and grid-template.

Game: Grid Garden

Difficulty: Easy

Registration: Not required

5. CSS Diner

This game is interesting and educational. There are 32 different levels, from easy to hard. It focuses on CSS selectors like element selector and class selector and is adapted for developers of all levels of knowledge.

Game: CSS Diner

Difficulty: Medium

Registration: Not required

6. CSS Battle

CSS Battle is not a game but is more like an online challenge. The goal is for users to visually replicate a given target image using as little HTML and CSS code as possible to collect points and fight for first place on the leaderboard. It is regularly updated with new challenges and each challenge can be replayed to improve the result.

Game: CSS Battle

Difficulty: Hard

Registration: Required

7. Unfold

If you aim to learn something about CSS 3D transforms. Unfold is an interactive educational presentation that contains amazing animations made only using CSS where different concepts are explained with each animation.

Interactive presentation: Unfold

Registration: Not required

Conclusion

The question that arises here is, how effective is gamification? Is it enough to play the game and learn the appropriate concepts?

Of course, it is not enough to just play the game to master the concept, however, gamification is very effective as learning is not frustrating but fun and interesting. This type of learning can be used for some introductory steps to get a picture of the concept and then through additional practice to determine the material on specific examples. It can also be useful for practicing or repeating material.

Since we did not arrange the games in any specific order, in what order would it be best to learn CSS through these games?

We recommend the following order:

1. CSS Dinner

Since CSS consists of selectors this game has the best background to start with.

2. Flexbox Froggy

Flexbox Froggy Since flexbox is a slightly more complicated layout concept than a grid, it is better to learn from a more complicated to a simpler one. Flexbox Froggy is best organized, to begin with, and later the material can be determined via Flexbox Zombies and Flexbox Defense.

3. Grid Garden

After flexbox, the grid layout concept will be more fun and easier to learn. These are layout concepts that are popular and used regularly so it is recommended to know both.

4. Unfold

3D CSS transforms and animations are a bit more complex things so we leave them for last.

5. CSS Battle

For further training, when we have already gathered a little experience and we can do something concrete, CSS Battle can come as a good option for training.

In addition to these games, there are many others, these are just some that we have singled out as the best and most popular. It all depends on the personal goal. You can check other games like Grid Critters, Service Workies, CodePip, CodeMonkey, CodeinGame, CodeCombat

We invite you to follow us on social networks so you can keep up with all our latest projects and news.

JavaScript Front-end Frameworks in 2021 – Angular VS React VS Vue

JavaScript Front-end Frameworks in 2021 – Angular VS React VS Vue

Whether you are a junior, middle, senior developer, freelancer or project lead it is helpful to know all the pros and cons of each framework in detail. A couple of years ago, there were debates over whether to use Angular or React. What is important to mention immediately is that these are large projects that are very quickly and constantly being improved and changed. Very soon after Angular and React, the Vue framework appeared, whose community is growing day by day.

This article is intended to remove some doubts if they exist about these frameworks and to help you choose which of these frameworks is the right solution for you.

1. Overview and History of Angular, React, and Vue

Angular

Angular is the oldest, developed in 2010 by Google. It is a JavaScript framework that is based on TypeScript. Angular was primarily called AngularJS, which was the first version (1.0). It quickly became the most popular JavaScript MVC (Model View Controller) framework.

However, big changes occurred in 2016 when Angular 2 or the second version (2.0) was released. Since there have been big changes and Angular 2 is different from AngularJS, Google dropped JS from the name to separate these two versions. These changes created certain problems because developers had to migrate applications from the AngularJS version to the Angular 2 version which was not so easy. All versions after Angular 2 retain the name Angular, although AngularJS is still getting new updates, in this article, we will focus only on Angular.

Angular has a tradition of releasing a new version every 6 months. It is a complete framework, many things are already built-in. It comes with pre-packaged items that are needed within the application development process. There is an already designed structure on the file setup and when you create components what the file structure should look like. There is also an Angular CLI that allows components to be generated. The latest version that came out was Angular 11 and was released in November 2020.

React

React was developed in 2013 by Facebook. Facebook primarily developed React for its products however since it is open-source, React has gained immense popularity and developed a large community thus becoming a competitor to Angular. Facebook uses React for its products such as Facebook, Instagram, and WhatsApp.

React is the complete opposite of Angular in terms of pre-packaged items. It is minimal and therefore it is necessary to get packages for almost everything. For this reason, React is considered to be a library and not a framework which makes it lightweight in terms of code.

The latest version that came out was 17.0.2 and was released in March 2021.

Vue

Vue is the youngest member of the group. It was developed by former Google employee Evan You in 2014. Although the youngest, Vue has had a great deal of popularity in the past few years. Bearing in mind that Vue does not come with the background of a large company, this is a great success. The latest version that came out is 3.0.11 which came out in April 2021.

2. Learning curve

Angular has many things that React does not have. Angular has a steep learning curve, considering it is a complete solution, and mastering Angular requires you to learn associated concepts like TypeScript and MVC. But investing in Angular is worth it in terms of understanding how Front-end works. With React we can choose whether we want to use TypeScript or not. There is so much in Angular that is specific only to Angular such as e.g. syntax, while React uses regular JavaScript for almost everything, things that are normally used in JavaScript, especially if it’s ES6. There aren’t some extra things in React that are specific to React only. However, learning to use React does not necessarily mean that you are using the best practices.

The Vue provides the highest adaptability and flexibility, which is why it can be easier to learn than Angular or React. The Vue also uses similar functionalities such as components the same as Angular and React which allows a simple transition to Vue. However, this simplicity and flexibility is a double-edged sword because it allows writing bad code and makes it difficult to remove errors as well as testing.

The difference in the learning curve is that Angular is more powerful with built-in stuff but also harder to get started and learn, where on the other side React a little easier to start but then we have extra work to bring in the necessary packages. Vue is a code-focused framework and we can position it between Angular and React. It has some built-in features that Angular offers but not all, however, certain features are managed by the community. We can say that Vue is more than React but less than Angular. However, compared to Angular and React, Vue has the simplest learning curve.

3. Ecosystem

There are quite a few different frameworks built on top of React. There are Next.js and Gatsby.js that add different things to React which gives us a lot of options. This way React has more flexibility compared to Angular, as Angular doesn’t have as many additional things that provide great flexibility. Using Angular it is possible to do anything but the ecosystem itself is not as developed as with React.

So with Angular, you have everything you need but it is more Angular specific, while with React you have everything you need but it’s more flexible, you can use any javascript package that you want.

Vue tries to pick the middle ground. Vue.js provides a lightweight framework surrounded by an ecosystem that is officially maintained by the Vue team. Just as React has Next.js and Gatsby.js so Vue has Nuxt.js which is equivalent to Next.js and Gridsome which is equivalent to Gatsby.js. React as the ecosystem has a few more options, a few different competing frameworks on top of it than Vue does. Vue has a decent ecosystem and enjoys all the right characteristics of React library and Angular framework.

4. Community

The community is incredibly huge for all three. You can’t go wrong in that sense. People are willing to share, they like to make content about these frameworks. Community is simply a plus for all three.

The interesting thing here is that Vue has the most stars on GitHub compared to Angular and React.

Source: Star History

If we check Google Trends, we can see that React leads convincingly. It should be borne in mind that this is shown on a global level and that this metric is not 100% accurate since these words may have different symbolism.

Source: Google Trends

By the number of downloads, React dominates again.

Source: NPM Trends

If we look at Front-end framework usage, we can see the same.

Source: Front-end Frameworks

5. Job opportunities

Since this is a specific situation for everyone, the best advice would be to research the area where you live and check all the companies, and based on that, to conclude which of these frameworks is most used. Even if you make the wrong decision, you will gain a lot of experience and it will be easier for you to learn another framework. No matter which framework you learn first, that doesn’t mean you won’t learn the other.

Angular is more used in enterprise companies because of the structure itself and the strong typing that comes with TypeScript. Since such companies use .NET, Java and C ++ a lot, the structure used by Angular suits them better.

React was not as popular at first as it is now. However, React has also started to be used in large projects and you will hear more often that a company has switched from Angular to React than vice versa.

Vue consists of a large number of unique factors, which can be a disadvantage instead of an advantage. Vue is very versatile and therefore can often be overly flexible for organizations that have a lot of developers. Currently, Vue is highly sought after in the Asian market and is best suited for providing modern and high performance apps. Vue could be the best option if you need to make a prototype quickly.

Source: Zero To Mastery

Vue is less popular with employers than the other two frameworks, simply because Angular and React have existed longer and because they have been backed by big companies like Facebook and Google. Primarily looking for a job, Vue is not a good choice because it has fewer jobs.

6. Conclusion

Taking into account the statistics we have shown, React is definitely coming out as the winner. That doesn’t necessarily mean that React is the best, but it is certainly the most popular.

Any of these frameworks is a good choice, especially based on your area. Given the excitement and momentum that React has, the content around React, the tutorials and workouts around React and that it’s easier to start with the flexibility it offers, React is definitely the best recommendation.

Angular is also a good choice since you can easily switch to React later, but React is easier to get into. On the other hand, if finding a job is not a priority or if you are programming from a hobby, Vue is certainly the best choice in that situation.

So, it is not possible to say exactly who is the winner here, since all frameworks offer great possibilities and everything depends on your personal needs. But to help you we can make one small list by putting React as number one in the current situation by all parameters and because of popularity. We will put Angular as number two since it is less popular in the current situation compared to React. And as number three we will put Vue only because there are currently fewer jobs in the job market.

If you plan to do Front end, after html, css and javascript you must learn one of these frameworks.

We invite you to follow us on social networks so you can keep up with all our latest projects and news.

Meet Our Leadership

Our leadership team is the driving force of the organization, putting our clients at the center of all we do. They have only one mission: to ensure that every project, from start to finish, functions flawlessly. They pay attention to the goals of management and employees, as well as the entire community, thus meeting the expectations of all stakeholders.

Local decisions that focus on people, not just numbers – is their strategy.

They are proud of the fact that their company is a socially responsible business organization that exports high-quality software solutions to foreign markets.

View the members of the Elephant Solutions leadership team

Read their biographies

Miloš Novaković, CEO

Born in Bijeljina on September 14, 1980.

He finished primary and secondary school in Bijeljina. Holder of Vuk’s diploma in both schools. After that, he finished the Faculty of Electrical Engineering in Belgrade. Started his professional career in 2007.

He emphasizes his inclination towards mathematics from the beginning of primary school, towards computers from the beginning of secondary school.

Married, father of two children.

Hobbies: basketball, aquarists, horticulture.


Velibor Maksimović, COO

Born on January 25, 1974.

He finished primary and secondary school in Bijeljina, graduated from the Faculty of Technical Sciences in 1999 at the Department of Electrical Engineering, Computer Engineering, and Systems Management. He earned a degree in electrical engineering and computer science.

He emphasizes his inclination towards mathematics, physics, and computers since elementary school. He bought his first computer in 1986.

Started working professionally as a programmer (developer) and later as an IT manager.

Married, father of three children.

Hobbies: folklore, travel, wines, and wineries.


How it all began

The story goes like this:

At the end of 2012, Miloš was left without a permanent job but with experience in freelancing. After several attempts to find a permanent job, he decides to start his own business. The official start was on February 1, 2013. From the beginning, he had the support of certain colleagues from the USA to start a private business by providing him with regular projects. In addition, there was a project to maintain and improve the server and network infrastructure at Sport Vision in Bijeljina.

Already at the end of 2014, he realized that he had reached the maximum in the scope of work that he could achieve on his own, and he began to think about finding a partner. Due to the good cooperation, he had during the period when they were working together on the previous job in the bank, he offered a partnership to his colleague Velibor. Miloš aimed to try joint investment between the two of them and the company Spirit21 to affirm a startup that will become a company. That officially happened in February 2016.

The rest is history. 😄

When it comes to division of labor, there are no strict demarcations but there are areas that Miloš is more interested in, such as technical aspects of projects, financial management and customer interviews, while Velibor is a little more focused on business organization management, strategic planning and project management.


Fan facts

Miloš states that Velibor was not chosen as a partner by chance. “I think that Velibor is among the best people in the organization of work that I have ever met. Our interests and responsibilities are so distributed that we fit in like yin and yang. ”

“It is interesting that in my first job, Velibor was the director of the team in which I was a member. From then until today, we have practically worked together in various constellations. ” – Miloš proudly points out.


Business in the future

The vision of the company’s growth and progress is to expand its business to foreign markets and invest in the improvement of human resources, to become recognized on the market as a company that constantly sets higher standards in business and social responsibility.

To be synonymous with a company that operates in collusion with the times to come introduces new ideas and trends.


We invite you to follow us on social networks so you can keep up with all our latest projects and news.

Looking forward to growing with you as we embark on this new journey.

You’ll hear from us very soon!

React – Functional Components VS Class Components

1. Syntax

A functional component is a plain JavaScript function that returns JSX, where the class component is a JavaScript class that extends React.Component which has a render method.

2. Extend component

Whenever a class component is created, it is necessary to extend the component, however, if a functional component is created, it is not necessary to extend the component. With functional components, we can use props directly.

Functional component example

// Using ES6 arrow functionimport React from "react"; const FunctionalComponent = () => { return <h1>Elephant Solutions</h1>;};

Class component example

// Using destructuringimport React, { Component } from "react";​class ClassComponent extends Component { render() {   return <h1>Elephant Solutions</h1>; }}

3. Access state

Previously, access to the state was possible only through class components, which was the main difference between class and functional components. But with the advent of useState, it is possible to manage the state through functional components as well. However in that case we always have to use useState React Hook. From React version 16.8 useState React Hook was introduced to allow developers to write stateful functional components.

Functional component example

// Using functional component with the useState React Hook to handle the state// Without ES6 arrow functionimport React, { useState } from 'react';​function FunctionalComponent() {  const [count, setCount] = useState(0);​  return (    <div>      <p>You clicked {count} times</p>      <button onClick={() => setCount(count + 1)}>        Click me      </button>    </div>  );}

Class component example

// Handling state using the class componentclass ClassComponent extends React.Component {  constructor(props) {    super(props);    this.state = {      count: 0    };  }​  render() {    return (      <div>        <p>You clicked {this.state.count} times</p>        <button onClick={() => this.setState({ count: this.state.count + 1 })}>          Click me        </button>      </div>    );  }}

4. Use of “this” keyword

Whenever we try to access props or state using class components we need to use the “this” keyword. However, it is not necessary to use the “this” keyword for functional components.

Functional component example

function FunctionalComponent(props) {  return <h1>Hello, {props.name}</h1>;}

Class component example

class ClassComponent extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}

5. Lifecycle methods

Lifecycle plays a big role when it comes to the timing of rendering. For class components, we had a method like componentDidMount() that was called immediately after the first render was completed, componentWillMount() that was called before the first rendering, however, this method is considered legacy, so it is not recommended to use this method in newer versions of React and we also had componentDidUpdate() which was invoked immediately after updating occurs. It’s a lifecycle method that runs every time a component gets new props, or a state change happens. This method is not called during the initial rendering.

When we talk about functional components, there is a hook that is great for this purpose. React useEffect Hook serves the same purpose as componentDidMount(), componentDidUpdate() and componentWillUnmount().

Functional component example

import React, { useState, useEffect } from "react";​export default function FunctionalComponent() {  const [data, setData] = useState([]);​  useEffect(() => {    fetch("http://localhost:3001/movies/")      .then(response => response.json())      .then(data => setData(data));  }, []);​  return (    <div>      <ul>        {data.map(el => (          <li key={el.id}>{el.title}</li>        ))}      </ul>    </div>  );}

Class component example

import React, { Component } from "react";​export default class ClassComponent extends Component {  state = { data: [] };​  componentDidMount() {    fetch("http://localhost:3001/movies/")      .then(response => response.json())      .then(data =>        this.setState(() => {          return { data };        })      );  }​  render() {    return (      <div>        <ul>          {this.state.data.map(el => (            <li key={el.id}>{el.title}</li>          ))}        </ul>      </div>    );  }}

Conclusion

How do we decide which component to use? There is no need to decide which components to use, functional components are the way to go. Then why is it important to know these differences if we do not intend to write class components?

The thing is that not so long ago we had class components everywhere. There are still React applications that use class components. This way we will have a generally better understanding of the React library. Also, we will get into a situation to change the code that uses the class components. Certain problems while writing React code via functional components may have already been solved via class components. If we know the class components, we will be able to solve the same problem quickly using functional components.

Knowing the class components is crucial if you are planning to be an amazing React developer.

We invite you to follow us on social networks so you can keep up with all our latest projects and news.

Welcome to Elephant Solutions blog!

Welcome to Elephant Solutions blog!

This is a welcome blog post with the purpose to introduce Elephant Solutions blog section to the world. The welcoming blog gives us a chance to express our creativity and to announce the content type for the future period.

Through the blog, we want to share with you the answers we came across during the work on certain projects to help others overcome similar problems.

First of all, let us introduce ourselves.

Elephant Solutions is a Software Development company with an innovative team of experienced IT professionals and graphic designers providing high-quality solutions in the field of Information Technology. We have a team of talented engineers with decades of experience in various multinational projects that assist our clients in improving their business processes.

We offer our clients comprehensive IT solutions that span all aspects of our customers’ IT/IS enterprise.

If you are interested in why “Elephant Solutions”?

  • Elephant – because an elephant is a symbol of strength, power and safeness.
  • Solutions – because we don’t offer services, but solutions.

Find out more in ABOUT US section

From now on we will have the practice of writing blogs on topics from the technology industry. This will be a place for anyone who has any interest in technology, anyone who is passionate about work in the IT field. The target group of the blog consists of software developers, designers, engineers, tech funs, entrepreneurs, consultants, project leaders, marketers. If you are one of them, follow us and get ready for the latest news from the IT industry.

We hope that our blog will be a place where people will come to read interesting, relevant, and thought-provoking content. Also, we’ll report, analyze, and provide perspective and recommendations from some of the industry’s leading minds. We will strive to provide blogs that impart important information, while also motivating, educating, and encouraging lively discussion. These are the types of blogs that Elephant Solutions team members prefer to read, and that’s exactly what we plan to provide.

As we continue to build the blog section, we’ll also create content related to breaking news and current events so our readers will always have access to timely information.

The idea is for the blog to be a place that will be the subject of your daily interest. Our blog will expand your knowledge, give you answers to your questions, solve some of the problems we all face, and acquaint you with the latest trends in software development.

Useful tips will also be one of the topics we will deal with. We will write about formal topics in the field of the IT industry related to application updates, as well as less formal topics related to communication with employees, business partners.

We invite you to follow us on social networks so you can keep up with all our latest projects and news.

Looking forward to growing with you as we embark on this new journey.

You’ll hear from us very soon!