We are pleased to announce that Pradera, our most ambitious project to date, now has its own page on Steam. Building on everything we learned from The Midnight Bus and Forest 6174, we have created a deep and haunting world with a richer story and carefully crafted graphics.

This is the game in which we finally bring to life the scenes, emotions, and ideas we have always dreamed of exploring.

We are just two people working part-time, but we put our hearts into every detail. Your support, your comments, and adding Pradera to your wish list mean everything to a small studio like ours.

More updates, environments, and characters are coming soon. This is just the beginning!

Thanks for reading, see you next time!

In this post, we’re going to talk about how to use the Lasso tool within Unreal Engine’s Foliage Mode. While it may seem intuitive at first and familiar if you’ve worked with design programs, it’s important to note some differences in its use within Unreal Engine. Here’s how it works.

What is the Lasso tool in Unreal Engine Foliage Mode?

The Lasso tool is a selection option used to mark specific areas within the level where you have distributed Foliage instances. It is ideal when you need to quickly select elements within large areas, but requires certain conditions to be present.

Considerations for Using the Lasso tool within Unreal Engine’s Foliage Mode

Before you start using the Lasso, please note the following:

• Distributed instances: The tool will only work if you have Foliage instances already placed in your layer.
• Activated element in the Foliage palette: Make sure that a Foliage element type is active in the palette before using Lasso. Otherwise, you will not be able to make effective selections.

Once you activate the tool, you will notice that the cursor in the Viewport changes to show a brush characteristic of the Foliage tool. This brush is fully customisable from the brush options, allowing you to adjust its size to suit your needs.

How to Use the Lasso Tool

Using the Lasso is very simple:

• Activate the Tool: With the Foliage brush active and the Lasso selected, just click and drag the cursor over the areas you want to select. The tool will mark the instances that match the Foliage type selected in the palette.

• Make modifications: Once you have selected the desired instances, you can delete them, move them or even modify them according to what you need to do.

It’s a quick and effective way to work with large numbers of elements in your scene.

And that’s it! Using the Lasso tool in the Foliage section is a fairly straightforward process, but as with any tool, there is a bit of a learning curve. We hope you found this guide useful, especially if this is your first time working with this tool.

Thanks for reading, see you next time!

The Midnight Bus, officially released in June 2024,  marked our debut in the world of psychological horror. The premise is simple, yet unsettling:

You board the midnight bus, exhausted after a long double shift. A few minutes later, you fall asleep. When you wake up, you find yourself stranded in the middle of nowhere, in the midst of a snowstorm, with no idea what happened to the driver or the other passengers. All you know is that something is out there, stalking you.

This project has been an enriching experience, full of challenges. We wanted to move away from the conventional and, instead of a house or typical enclosed environment, we decided to place the player in a common space: a bus. But this bus is stranded in the open, and the feeling of claustrophobia grows as you realize you’re not only isolated, but also being watched, with no way to escape.

Hello!

We’re thrilled to share with you the first details of our upcoming project, Forest 6174. As you might expect, it’s another horror game, but this time, we’re aiming for something far more ambitious than what we achieved with The Midnight Bus. Both Thamesis and I are incredibly excited, and we’re tentatively planning to launch in the first quarter of 2025.

In Forest 6174, we’ve designed a larger setting while preserving the oppressive atmosphere and the constant feeling of being watched (because maybe… you will be).

Hello, we’re happy to have you back.

In this post, we’re going to discuss a common problem you’ve probably encountered at some point while working with the Foliage tool in Unreal Engine. As you know, this tool is incredibly useful for placing large amounts of static meshes in the scene.

However, if the elements you’ve added to your level with the Foliage tool are static meshes that you’ve created yourself or from a package you’ve purchased from the Epic store, copying them to a new level may cause them to not appear in the scene.

Hello!

We’re excited to share the fire and smoke VFX we’ve implemented in our games. These effects are not only easy to implement but also highly customizable, allowing you to adapt them to your own projects with minimal effort.

In this opportunity, we want to share a process that can be useful when developing video games, it is about rigging and animating a door in Blender 4.1, and its subsequent import into Unreal Engine 5.4.

To do this, we took part of the workflow learned in this tutorial: How to rig folding windows/doors with Blender, and adjusted it to our needs for the door animation.

So, let’s get started!

Workspace and modelling

Adjusting the Blender workspace

The first thing to do is to adjust our Blender workspace so that there are no proportion problems when importing our model to UE5. To do this, we open Blender and remove the default elements (the cube, the camera and the light).

Then, entering the Scene Properties section of the right side panel, we set the scale to 0.01 and change the length to centimetres (which is the unit used in Unreal Engine).

After that, we will notice that the reticle of the viewport seems to have disappeared, this is due to the change of units. To correct this, simply press the letter N, and move to the View tab. There we change the Clip Start parameter from 0.01 cm to 1 cm, and the End parameter from 1000 to 10000000000 and we will notice how the grid appears again.

Door Modelling

To start modelling the door, we press the keyboard shortcut Shift + A, in order to create a cube in the scene.

Taking into consideration the size of the characters in Unreal, which are approximately 181 cm high, we can set the size of the door to 215 cm high.

To do this, we go to Edit Mode and by pressing the number key 1; we can from the Front Orthogonal View, raise the cube so that it is just above the X axis, as well as set the height of the cube to the desired size.

Once this is done, we set the thickness of the door at 6 cm and the width of the door at approximately 125 cm. These measurements are to taste and depend on the size that is required according to the type of game that is being made.

Note: Once the dimensions have been set, if this has been done in Object Mode, press CTRL + A and apply the scale.

Subsequently, the necessary modelling details are added.

Rigging and animation en Blender

Door rigging

To start with the creation of the skeleton, we place the door pivot in the bottom left corner and match it to the origin point.

In Object Mode, press the keyboard shortcut Shift + A and select the Armature option.

Once created, we assign the value Radius: 100 cm, because due to the change of Units in Blender, it will be created by default at 1 cm.

In Edit Mode we rotate the bone in the Y axis by 90º, position it and rename it Root.

Duplicate the Root bone with Shift + D and rename this duplicate as Controller, as it will be in charge of managing Root’s movements.

It’s advisable to set the Roll of the bones to 0, in order to avoid erroneous behaviour in the animation.

We relate the Root bone to the geometry. To do this, in Object Mode select the door, and then in Pose Mode select the Root bone. And pressing CTRL + P, we select the Bone option.

In doing so, we can notice that any transformation in the Root bone directly affects the door.

In Pose Mode, select the Root bone, and add the constraint called Copy Rotation, indicating the parameters Target: Armature and Bone: Controller. For this constraint, it is important to set the Target and Owner parameters to Local Space.

Selecting the Controller bone, and accessing Bone Properties, in the Transform section we change the Mode parameter to XYZ Euler. Next, we lock all the Location axes, and in the case of Rotation only the X and Y axes.

To this same bone we add a constraint called Limit Rotation, adding the values Min: 0 and Max: 90º for the Z axis, which is precisely the one we have left unlocked in the previous step. Additionally, we change the parameter Owner to Local Space. This will allow to control the opening of the door at the set angles.

That done, our door is ready to be animated.

Door animation

We go to the workspace Animation of Blender, there we will find the section Dope Sheet, which will allow us to add the keyframes for our animation.

Once there, and being positioned at frame 1, we activate the Auto Keying option.

In Pose Mode, and with the Controller bone selected, go to the Transform -> Rotation section, set the Z axis to 0 and mark the little dot on the side called Animate Property.

We move to frame 15 and change the Z rotation value to 25º. As we had previously selected the Auto Keying option, when we set the value, the keyframe will be marked automatically.

Then, we repeat the previous action in frame 20.

We move to frame 40 and change the Z rotation value to 85º. There we can see that even if we place a value higher than 100º, the door will not rotate beyond 90º, which was the limit we set as the maximum.

Next, we move to frame 60 and change the Z Rotation value to 0º.
This will result in an animation that initially shows a partial opening, then opens fully according to the angle we set, and finally closes.

To save the animation, click on the Action Editor option and from there give a name to your animation, marking the shield icon next to it.

Export from Blender

With the elements selected in the viewport, select File -> Export -> FBX.

Note: To export the door with collisions, you can consult our previous post: Blender room with collisions for UE5.

Once the export window is displayed, select the following options:

Note: Take into consideration that in the Transform section, the axes of the bones are set (this is the way we got the animation to work correctly in Unreal).

In the Armature section, we deactivate the Add Leaf Bones option and leave Bake Animation activated.

Import into Unreal Engine

With the engine open, and having created a third person project, we go to the Content folder and from there we press right click, and then select the Import to /Game option.

Select the fbx file and click on the Open button.

In the window that appears, check the Import Animations option, and then click on the Import All button. (Although some warnings may appear during the import, they do not affect the functioning of the animation).

If we drag the file called Animation Sequence onto the scene, we will see that our animation runs smoothly.

You can see the process of animating the door and importing it into Unreal Engine here:

And that’s it, we hope that in some way this information can be useful. There are always different ways of doing things and new techniques to discover, so it would be interesting to experiment and adapt this process to different situations.

Thanks for reading, see you next time!

This time, we bring a shorter post than usual, but we hope it will be of great help to all those who used to use the Mixamo Control Rig add-on in Blender to animate their characters in previous versions.

And is that from version 4 of Blender the plugin is no longer supported by Adobe. But, do not panic, thanks to the excellent community behind Blender, we can still continue to use it. Looking for information about it, we have stumbled upon this great video that explains the whole process; and thanks to that, we share the images of our experience testing how it works.

Testing the Mixamo Blender 4 add-on

Downloading the add-on

We download the plugin from the URL: Mixamo Blender 4, choosing the zip file.

Installation and activation

We install and activate the plugin in Blender 4.0, just as we did with the official plugin.

Character import

We download a character from Mixamo and import it into Blender 4.0.

Mixamo Control Rig add-on options in Blender 4

From the Viewport, press the N key to display the sidebar. There we will find available (as with the original add-on), the Mixamo tab with its drop-down options.

Creating Control Rig

Clicking on the Create Control Rig option will automatically add all the controls needed to customize our animations.

And that’s it! Many thanks to CGDive for sharing such valuable information, as well as to Xin for making it possible. As always, we hope this information will be useful, and that in this way we can contribute to reach more people.

Thanks for reading, see you next time!

In this post, we will show you how to export Lottie animations from Figma, and then integrate them into your website without sacrificing performance. As we mentioned in our previous article, Lottie animations from Blender, one of the main advantages of using Lottie animations is that they are exported in JSON files, which have a really small size.

As video game developers, having an attractive website is essential to make our products known. Including animations can make our site more dynamic and captivating, inviting users to stay longer. This not only improves the user experience, but also contributes to a better positioning in search engines.

Exporting Lottie Animations from Figma

Figma is a vector graphics editor and prototyping tool that is very useful for designing website and application interfaces. It is a versatile tool that can be used directly in the cloud, and by simply registering, you can start taking advantage of all its features.

In addition, Figma has an active community that develops a variety of plugins useful for any creation process. In fact, we will use one of these in the export of our animation.

However, before we start, there are certain aspects that must be taken into consideration.

Considerations

Each movement in a different Frame

A frame in Figma is a framework where we place all the elements that make up our interface, and also functions as a container for our prototype animations.

Figma offers predefined frames with sizes for different devices, from mobiles to desktops and smart watches, as well as for publications and social network headers.

In our case, we used a custom frame size and started from a very simple animation, in which we placed each position of our “Kirby” in a different frame.

Consistent Elements

It is crucial that all elements within each Frame are consistent. Although they may undergo transformations or position changes, they must be the same in number and name.

Export Steps

1. Naming the animation flow

Once all the Frames needed for the animation have been created, they must be connected through interactions. These interactions represent what the users would do to move to the next frame, such as a click, hover or tap, among other actions.

In order to define these actions, it will be necessary to select the Prototype tab in the right column of Figma.

Then, with the first frame previously selected, click on the “+” button next to the Flow Starting Point title. In this way, a field will appear to name the flow; you can leave the default name “Flow 1” or change it. In our case, we have named it “Start”.

2. Define the animation flow

Now returning to Frame 1 inside the Figma canvas, we will notice that it has a small round white button with a + sign in the center. We click on it and drag the arrow to the next frame of the animation, configuring the interaction below:

• Trigger: As we are interested in exporting the animation in JSON format, we will leave the default value: On click.
• Action: Leave the Navigate to option selected (it was placed automatically when dragging the arrow). Since; in short, we will go to the next Frame.
• Transition:This option refers to how the transition will be made between our first frame and the next one. We will choose Smart Animate with a duration of 200ms and the Ease in and out option, so that it looks smooth. This will depend on the type of animation being made.

3. Repeat the process

Simply repeat the previous step with each frame, including the connection of the last frame to the first (if a loop is desired).

A point to take into consideration is that if you do not want to make any changes in the subsequent connections, the values of the previous connection will be set by default, so it will be enough to connect one frame to another.

4. Export Animation Lottie

Once the interactions between all the Frames have been defined, we right click on the Figma canvas, select the Plugins option and then the Manage Plugins.

In the window that appears, type “LottieFiles” in the search box and select the option displayed with the Lottie icon

Once in the plugin window, select the Export to Lottie tab, and select our flow.

We check the preview of our animation, and adjust the background and speed of the animation, if necessary. Finally, click on the Save to Workspace button.

The option to create a LottieFiles account or log in will be displayed.

We log in or create an account on LottieFiles. Once registered, we grant access to Figma.

We return to Figma, and save the animation in our workspace in LottieFiles.

5. JSON File Export

Go to your LottieFiles profile, open the corresponding folder and the newly added animation should be there.

By clicking on the animation, we will navigate to a new window where we will have the option to download it as JSON (ready to be included in our website).

And that’s it, following these simple steps, you can create more complex and creative animations using Figma, having as main advantage that you can easily export it as Lottie Animation through the add-on provided by the LottieFiles team.

We hope this article will be of great help to you.

Thanks for reading, see you next time!

Last April 17, we witnessed the exciting Nintendo Indie World Showcase, where we got an exclusive look at the upcoming indie games coming to the Nintendo Switch. And on April 29, it was Microsoft’s turn to surprise us with its ID@Xbox Showcase 2024, presenting an impressive selection of indie games in an exclusive broadcast with IGN.

As usual, here we bring you our selection of the most outstanding titles presented at the conference dedicated to Xbox One, Xbox Series X/S and Windows PC.

Commandos Origins

A pleasant surprise that takes us back to the beginnings of the commando unit, offering us a tactical experience based on stealth during the Second World War. From Africa to Scandinavia, with impressive tactical missions, you will use the unique skills of the 6 squad members to complete them.

Commandos is coming to Xbox Game Pass in a closed Beta during the summer of 2024, available for Xbox Cloud Gaming, console and PC

33 Immortals

Rebel against God’s final judgment and fight monsters and huge bosses, in this cooperative game for 33 people. A vibrantly colored game where you can expand your arsenal with weapons powered by sins and virtues, and adapt relics to your play style, gaining permanent upgrades for your soul.

The closed beta will be available from May 24 to June 2, 2024, with support for Xbox X|S Series, Windows PC and Xbox Game Pass from day one.

All You Need Is Help

From Q-games, an independent video game studio based in Kyoto, Japan, comes a fun multiplayer game in which fluffy and adorable figures push each other to achieve collaborative goals.

This fall, you can enjoy this experience on Xbox One, Xbox Series X|S and PC.

Astor: Blade of the Monolith

Action RPG game in which you play as Astor, a young warrior who seeks to unravel the secrets surrounding the disappearance of his creators. Attacks, skills, combos, legendary weapons and magical powers ready to be unlocked as you fight against hordes of enemies.

Available May 30 on Xbox One, Xbox Series X/S, PC, PS4, and PS5.

Tails of Iron 2: Whiskers of Winter

The second installment of Tails of Iron immerses you in an epic adventure as Arlo, heir to the Warden of the Wastelands, fighting Dark Wings in the frozen locations of the Northern Kingdom of the Rats. Hunt giant beasts, unite clans and upgrade your settlement as you uncover a terrible secret of blood and crown.

Available soon for Xbox One, Xbox Series X|S and PC.

Centum

Announced in world premiere, Centum is a horror adventure game with an intriguing narrative that defies reliability. With a fantastic pixelart style, it promises a dose of disturbing moments. Available for Xbox Series X|S and PC in summer 2024.

Lost Records: Bloom & Rage

This narrative game immerses us in the memories of four high school friends in the fictional town of Velvet Cove during the vacations of 1995, where an event changed their lives forever. Now, 27 years later they have reunited; even though they promised never to do so again. A haunting story coming in 2024 for Xbox Series X|S, PC and PS5.

The ID@Xbox Showcase 2024 has definitely given us an exciting glimpse into the future of indie gaming, with titles that promise to surprise and captivate Xbox One, Xbox X Series X/S and PC gamers. From tactical World War II experiences to colorful and exciting co-op adventures, the diversity of the games showcased leave us eagerly awaiting their release.

If you want to relive all the announcements and details revealed during this event, we invite you to access the full broadcast through this link.

We hope you enjoyed the reading, see you next time!

Last April 17, 2024 took place the Nintendo Indie World Showcase, an event whose purpose was to unveil the variety of indie games coming soon to the Nintendo Switch. One of the most anticipated announcements of the event was Hollow Knight: Silksong, and although the expected release was not announced, it is worth taking a look at the most outstanding titles:

Little Kitty, Big City

Adventure developed by Double Dagger Studio where the protagonist is a curious kitten that explores the city, interacting with other animals and completing missions while looking for the way back home. In addition, the game allows customization of the kitty with a variety of hats. This game will be available from May 9.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

Yars Rising

Presented by WayForward and Atari, it is an exciting 2D action game that immerses players in an intergalactic conspiracy. In this title, players assume the role of Emi Kimura, a skilled hacker tasked with unmasking the dark secrets of the QoTech corporation.

Inspired by the Atari classic, Yars’ Revenge, Yars Rising offers gameplay that evokes the essence of Mega Man. Players will be able to run, jump, stealth and hack as they take on robotic and alien enemies, unraveling a complicated secret full of intrigue. The game is expected to be released in 2024.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

Teenage Mutant Ninja Turtles: Splintered Fate

It’s a thrilling adventure that takes the plucky ninja turtles through reality-warping portals on a mission to rescue their master, Splinter. This game, available in July, marks the Ninja Turtles’ first foray into the roguelike genre, with each of the turtles possessing distinct abilities, adding strategic depth to the game and making it a perfect choice for online co-op play.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

Europa

Developed over more than six years, this game stands out for its impressive art style; inspired by watercolor paintings. Set in a fantastic world, it offers expansive and diverse landscapes inhabited by a variety of animals and creatures. Players will enjoy a meditative experience while exploring this vast world, using different mobility options to immerse themselves in its unique atmosphere. Its release date is not yet known, but it is presumed to be sometime this year.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

Refind Self: The Personality Test Game

It is, in our opinion, a fascinating introspective proposal presented at Nintendo’s Indie World Showcase. In this game, players assume the role of an android created by a teacher in her last moments of life. Each decision made during the game shapes the player’s personality (with a total of 23 different personalities). Players can compare their personality with that of other participants, further enriching the experience.

Refind Self: The Personality Test Game will be available in mid-2024.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

Lorelei and the Laser Eyes

One of the games that has attracted our attention the most, both for its visual aspect as well as for its more than 100 puzzles. An exciting narrative adventure with a noir touch, this is the new proposal from the creators of Sayonara Wild Hearts. In this game, the world is presented mostly in black and white, with flashes of red that stand out at key moments. In addition to its distinctive aesthetic, the game incorporates supernatural elements and a mysterious backdrop.

Developed by Simogo and Annapurna Interactive, Lorelei and the Laser Eyes promises to keep players on their toes as they try to decipher its riddles. This game will arrive on Nintendo Switch on May 16.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

SteamWorld Heist II 

Final announcement of the Nintendo event, closing with a flourish. This sequel promises to maintain the 2D tactical combat that characterizes the franchise, while introducing exciting new features.

Players will be able to recruit a wide variety of robots and customize them with a new class system and more than 150 different weapons. With unique physics systems and abilities for each character, it combines elements of shooting and turn-based strategy.

SteamWorld Heist II will be available on August 8.

Image reference: Indie World Showcase 4.17.2024 – Nintendo Switch

The games mentioned here represent our selection of the most outstanding ones. However, if you wish to enjoy the entire event, we leave you the link to Nintendo of America’s broadcast.

Thanks for reading, see you next time!

Since the release of Blender 4.1, we have been eager to test its new features and improvements. So, after exploring this version, we are happy to share the five features that we consider the most significant.

Autosmooth option disappears as a mesh property

It is now possible to make edges sharper or softer through mesh attributes, using the Shade Smooth by Angle option. Similarly, the Smooth by Angle modifier has been added as a non-destructive method to achieve the same result.

Open Image Denoise through the GPU for rendering with Cycles

As we know Denoise allows to remove noise during scene preview both in the 3D window and in the final rendering, preserving the visual detail as well as possible. The fact that you can now select the OpenImageDenoise option and enable the GPU accelerator for supported hardware, will allow denoising to be available in real time in the 3D window.

Files can now be dragged directly into the 3D viewport

One of the most awaited features; being able to drag files directly to import them is now a fact.

We have tested this new feature and for now it works with .obj, .usdc (format added in this version for export) and .blend files but surely it will be possible also with .fbx very soon.

Bone collections can now be managed hierarchically

In Blender 4.1 bone collections have a hierarchical structure. Instead of being displayed as a simple list, these groupings are arranged in a tree that allows them to be rearranged and nested by drag and drop. Thus, a grouping of bones will only be visible if its predecessor is visible. In other words, if a grouping of bones is hidden, its children will also be hidden.

One-click locking of camera view

When entering the camera view, it is possible to lock the view quickly by clicking on the padlock icon directly in the interface itself, without having to enter the view properties to do so. 

These features are just a few of the many improvements that Blender 4.1 offers. For more information, we invite you to explore all the new features directly at the following link. For our part, we are excited to witness how with each release, Blender continues to climb the ranks as one of the most important software in the industry.

Thanks for reading us, see you next time!

One year ago, we discussed the State of Unreal 2023. This time, we would like to highlight the main announcements made by Epic Games at the State of Unreal during GDC 2024, which took place on March 20th, as we eagerly await the official release of Unreal Engine 5.4 by the end of this month. Let’s get started!

Nanite Tessellation

One of the most notable features discussed during the Unreal Engine 5.4 updates at the conference was adaptive tessellation with Nanite.

As we already know, Nanite is Unreal Engine’s virtualized geometry system for rendering pixel-scale detail and large quantities of objects. This notable enhancement will allow Nanite meshes to be dynamically modified at runtime using a displacement map or procedural material.

In other words, Nanite will tessellate the mesh at runtime to match the detail of the displacement map, generating only the necessary triangles for the current pixel density and achieving exceptional detail.

Image reference: State of Unreal | GDC 2024 | Epic Games

Motion Machine

Another impressive feature is the new animation system integrated into this version. It provides an effective and straightforward way to animate characters through dynamic selection of animations based on the character’s pose and actions.

Additionally, Epic plans to release a learning project with over 500 free high-standard animations, allowing for full character animation using Control Rig and Sequencer without the need for any other software.

Image reference: State of Unreal | GDC 2024 | Epic Games

Modular Control Rig

Utilizing the comprehensive Control Rig framework to build robust animation rigs ready for animating any skeleton. In this case, it will be possible to rig through modules, with the new tool featuring a Modular Rig editor and a new visual scheme for immediate feedback in the graphics window. Additionally, it will include a native library of Modules.

Image reference: State of Unreal | GDC 2024 | Epic Games

Procedural Generation Framework

The PCG Biome Core has been announced, which is a systemic biome generator based on data and built entirely with the PCG Framework (Procedural Content Generation). Once the initial setup is done, artists and designers can easily define biomes within a world without the need to edit complex graphics or logic.

Image reference: State of Unreal | GDC 2024 | Epic Games

Audio Insight

In addition, sound designers will have access to a new profiling tool for creating, analyzing, and debugging next-generation audio.

Image reference: State of Unreal | GDC 2024 | Epic Games

UEFN

As we already know, UEFN (Unreal Editor for Fortnite) is a PC application released a year ago at GDC 2023, used for designing, developing, and publishing experiences directly to Fortnite. Significant improvements have been announced for 2024.

Now, creators have access to MetaHuman Creator and MetaHuman Animator, allowing them to bring NPCs to life on their islands.

Furthermore, MetaHumans’ wardrobe can be supplemented with Marvelous Designer integration, in addition to the Chaos Cloth function for animating clothing physics. As an additional bonus, UEFN creators will have access to a free 1-year license of Marvelous Designer.

Among other enhancements, UEFN will receive new Rocket Racing elements in May for creating racing tracks. Additionally, the collaboration between Epic Games and LEGO Group will allow the creation of islands with LEGO aesthetics.

Image reference: State of Unreal | GDC 2024 | Epic Games

Epic Games Store

Among other news, it has been announced the intention to bring the Epic Games Store (EGS) to mobile devices later this year, being available for Android, iOS, PC and macOS. This will allow mobile developers to benefit from the same terms as the EGS for PC: an 88/12 revenue split. However, more details regarding this topic will be expanded upon shortly.

Image reference: State of Unreal | GDC 2024 | Epic Games

In summary, the aforementioned announcements encompass what we consider to be the most notable from the conference, especially those that further facilitate development in Unreal Engine and highlight the engine’s power. However, there are many other interesting updates that can be found in their public roadmap as well as their official blog.

We hope you’ve enjoyed reading this. Until next time!

The term “indie“, an abbreviation for independent, had its roots in the music and film industry, and was commonly used to describe creators working outside of commercial and mainstream channels. In the field of video games, this term has varied considerably.

Originally, an indie development was one that had been worked on by one person or a very small group of developers with their own budget, and which presented a creative and unrestricted idea, providing a different gaming experience compared to conventional titles.

Indie term today

However, nowadays we can see titles being called indie; even when they are supported by big companies. This has given rise to a debate about whether resources and budget should be determining factors when classifying a game under this term. In our opinion, these cases suggest a deformation of the term that may have consequences beyond mere semantics.

Softening the term could affect gamers’ expectations of indie games. In the past, gamers looked for innovation and originality, no matter if they didn’t have a big budget, what mattered was the story, unusual art design and gameplay experiences that were not available in big studio productions.

But the influence of large corporations can lead to confusion and even disappointment among gamers, as games promoted as indie can end up offering a mainstream-influenced experience. In the long run, this can erode players’ trust in this label and consequently overshadow the visibility and impact of true indie games.

This does not mean that the deformation of the term is entirely negative. For it is precisely this deformation that has allowed many indie studios to have more resources at their disposal, resulting in original stories of higher quality and diversity. However, by having “indie” games that can offer gaming experiences equivalent to AA titles or even successor games or IPs to AAA titles, we feel it is necessary to have a new classification for them.

Perhaps: A or triple I games, whose development studios have a staff of more than 10 people, and which have raised substantial funding, or are simply distributed and published by industry-recognised companies. This way, gamers would know what to expect in each case.

In conclusion, while the intrusion of large corporations into the world of indie games may seem promising in terms of diversity and quality, it is important that these corporations remain mindful and respectful of the core values that define indie games, in order to preserve their integrity and meaning in the minds of gamers. Ultimately, the term “indie” is not simply a marketing term, it is a manifesto for those who value creativity over commercialisation.

Thanks for reading, see you next time!

For all horror game enthusiasts, the official announcement of Little Nightmares III at Gamescom 2023’s Opening Night Live is akin to the start of a Christmas morning: brimming with anticipation, mysteries, and, above all, delicious suspense.

Following the success of its predecessors (Little Nightmares I and II), this third installment promises to bring a fresh wave of unsettling adventures. That’s why we’re here to share the most important details we’ve gathered so far and highlight its key differences from the previous entries.

What We Know About Little Nightmares III

After the acquisition of Tarsier Studios by Embracer Group, we thought that the Little Nightmares franchise had come to an end. However, the work being done by Supermassive Games shows that this third installment takes the unnerving essence of its predecessors to new heights, presenting a new story and a captivating duo.

Little Nightmares III – Bandai Namco

Protagonists: Meet Low and Alone, who must work together to solve challenging puzzles and escape the dangers that lurk around. In this installment, two players can complete the story through cooperative mode, and from what we’ve seen in the presented teaser, each character will bring unique challenging mechanics.

Environments: Enter The Spiral, a collection of disturbing settings that undoubtedly carry the series’ signature. With intricate challenges in sight, players must utilize environmental elements to keep moving forward.

Something that has certainly caught our attention is the warm tone presented in the desert area, which, although fascinating, deviates slightly from the bluish tone of the previous installments. This suggests that some scenes might be presented in the light of day.

Game Mechanics: Based on what we’ve seen, the constant succession of puzzles accompanied by environmental tools will allow players to combine the abilities of both characters to continue unraveling each scenario and avoid danger.

Bosses (Twisted Monstrosities): The series’ distinctive mark is its grotesque inhabitants, and the third installment doesn’t disappoint. In the teaser, we glimpsed a sort of giant baby capable of destroying everything in its path. Prepare to face new nightmare-inducing enemies, each with their unique style of horror.

A Glimpse into the Past: Comparison with predecessors

Character Perspective: Little Nightmares I featured a sole protagonist named Six, while the sequel introduced Mono as the playable character. The upcoming game, Little Nightmares III, shifts the focus to a cooperative experience with Low and Alone, adding a new layer to the series.

Narration: Each game in the series masterfully weaves its narrative through environmental storytelling. Little Nightmares I immersed players in the terrifying Maw, while Little Nightmares II explored a broader world beyond, revealing the dark influence of the Signal Tower. Little Nightmares III is poised to continue this tradition by unearthing new mysteries in the franchise’s history.

Visual Aesthetics: The art style of the series is hauntingly beautiful, with a distinct blend of innocence and horror. Little Nightmares II refined the visual design, showcasing a more diverse range of environments. Little Nightmares III is expected to build upon this foundation, offering a visual experience that captivates players once again.

In conclusion, Little Nightmares III has been one of the major surprises we’ve witnessed at Gamescom’s Opening Night Live. It’s set to be released in 2024 for major consoles: PlayStation 4, PlayStation 5, Xbox One, Xbox Series X/S, and PC. From its new protagonists to its twisted enemies, every aspect seems carefully crafted to offer an unforgettable horror experience.

Whether you’re a fan of the series or a newcomer to the realm of Little Nightmares, what we’ve seen so far looks very promising. It appears that this upcoming installment is undoubtedly one worth playing.

Thanks for reading, see you next time!

Alien Resurrection (2000) – Argonaut Games

The gaming landscape, a rich tapestry woven with constant innovation and cutting-edge technology, is currently witnessing a unique trend. A wave of nostalgia has swept over the indie game scene, breathing life back into the pixelated charm of PlayStation 1 (PS1) era graphics. While mainstream franchises are preoccupied with sleek photorealism, the indie game field finds itself enamored by the retro aesthetics, signaling a delightful shift in the graphic realm.

The PS1 graphic revival

Ahhh… PS1, is a name echoing with late-night gaming marathons and joys of victories past in the minds of countless gamers. As a fundamental pivot of the fifth-generation gaming consoles, PS1 shifted the perspective from 2D to 3D environments, birthing a generation of games marked by low-polygon models, muddied textures, and compelling game design.

The resurgence of this retro styling is more than a mere novelty. It is an artistic choice benefiting both creators and players, immersing them in a pool of nostalgia while embracing creative freedom. The grainy visuals and washed-out color palettes offer a distinctive design, harking back to the origins of 3D gaming.

Re-Imagining with retro

Indie game developers adopting this trend are not just re-living but re-imagining the PS1 graphic style. Armed with today’s technology and greater understanding of game mechanics, they’re adding depth to the simplicity, transforming limitations of the past into innovative design choices. The ‘limitations’ are now unique art directions striking a chord with both ’90s gamers and a newer audience looking for a refreshingly vintage gaming experience.

Szrot – Kontraktor Entertainment Bureau

The PS1 charm in today’s titles

This trend is not just a niche, but is causing a sensation in the world of video games. Several indie games in recent years, especially in the horror genre, have taken advantage of this graphic style (this style adds extra tension to any atmosphere). Thus, we can mention:

In conclusion, the trend of reverting back to PS1 style graphics in indie games exemplifies nostalgia’s powerful pull and creativity’s paradoxical nature, where looking back can pave the way forward. As we stand in the middle of this trend, it’s an exciting time for gamers and creators alike who are part of this unlikely yet fascinating journey back into the world pixelated graphics.

Thanks for reading, see you next time!

Today we want to talk about how we can create Lottie animations from Blender.

As we mentioned in our previous article: How to Add Lottie Animations to Your WordPress Website, Lottie is a library that offers JSON-based animations with remarkably small file sizes, making them easily usable across various platforms.

The most recommended way to create Lottie files, both for convenience and compatibility, is by using Bodymovin in After Effects. However, in this article, we’ll share an alternative method that we’ve found quite effective.

As you may know, Blender is a powerful software primarily used for creating 3D animations. However, it also provides the ability to create 2D animations using the Grease Pencil feature, , which for the practical purposes of this article, will be the one we will use below.

Bouncing ball animation

To start, open Blender and select the 2D Animation environment. You can also access it from the menu by going to File -> New -> 2D Animation.

Once there, you’ll notice that you’re in Draw Mode. Select the brush you want to use for your lines, ranging from Airbrush to Smooth Pencil. For this example, we’ll choose the Pen.

As the animation we are going to create is a bouncing ball, we will use the Circle tool to create the ball.

Since we want the ball to have a fill color, select the Solid Fill option and choose a color for it.

Essentially, what we’re doing is defining a material for our shape. If you move your cursor, you’ll notice that technically, we’re working with a 3D object in a 2D context.

Next, create a circle by holding the Shift key to maintain its proportional size.

Now, switch to Edit Mode, where we’ll make the necessary adjustments to our circle to create our animation.

To create the illusion of speed, we’ll assign increasingly distant positions to the ball in each frame. To do this, we’ll use well-known shortcuts. In this case, press G + Z to move the circle downwards.

Also, to create the bouncing effect, we will stretch and squash the ball, which will help generate a smoother animation. Press S + Z to scale the circle up and down and S + X to scale sideways.

Afterwards, we will return the ball to its initial position. The approximate total number of frames in the animation will be 24.

Now, switch back to Draw Mode to add a support structure resembling the floor. To do this, add a new layer called “floor.”

With the Line tool selected, move to frame 10, and choose the Solid Stroke material. Then, draw a line that covers the space where the ball is completely squashed.

Next, go to the newly created frame 10, and use the Shift + D keyboard shortcut to duplicate the frame. Place one duplicate at the beginning (frame 1) and the other at the end (frame 24).

Great! With this, we have created our animation.

Render Animation

To export it as a lottie animation, there is an addon created by Mattia Basaglia (https://gitlab.com/mattbas/python-lottie) that works really well.

However, there is an issue with exporting animations that have filled elements. Unfortunately, in Blender versions 3.4 and 3.5, which we have tested, filled elements are exported with a flickering effect that is not present in the created animation.

Despite this drawback, the addon remains an excellent resource, and it is possible that this issue will be resolved in the future.

So, to render the animation, we’ll save it as a video. Go to the Output Properties option and change the output format from PNG to FFmpeg Video.

Once you do that, you’ll notice that the Encoding option appears. Expand it and choose MPEG-4 as the container format.

Before rendering the animation, if you want to modify its size, you can do so under the Format panel. Similarly, you can change the output location in the Output section.

To render the animation, click on the Render Animation option in the Render menu.

Converting to Lottie Animation

Once you have the MP4 file, you can use a service called Video to Lottie Converter, an online tool developed by Isotropic, LLC. It’s quite intuitive to use and can be accessed through the following URL:  isotropic.co/tool/video-to-lottie.

On the tool’s page, you’ll see a form that allows you to upload your MP4 file exported from Blender. After entering the necessary values, click on the blue Encode! button. Once the process is complete, the JSON file will appear below. Simply click on the file name to download it.

Testing Lottie Animation

To test the animation and verify that it is a JSON file compatible with the Lottie library, you can upload the JSON file to : app.lottiefiles.com/preview and see it in action. Afterwards, you can implement it on your website.

And that’s it! We hope this information is useful and helps you create fantastic animations that enhance the user experience on your website.

Here is the video with the complete process:

Thanks for reading, see you next time.

Today we are going to show you how to create a room structure in Blender with collisions, which we will then import into Unreal Engine. The size of the room is 2×2, but this will of course depend on the individual needs of your project.

In our case we have chosen this size for demonstration purposes, to explain different aspects such as performance and collision creation.

Wall creation

Let’s start by creating a simple wall. Taking into consideration that the standard size of a door is 90 cm wide by 200cm high approximately, we will create the wall of 3 meters high (this is a personal taste, and will depend on the size you require for your project).

But before creating any geometry we will make sure that we have the Grid option activated in the Viewport Overlays section (so that the Blender grid is visible in orthographic views), and the Snap tool (which will help us to create meshes with more accurate sizes).

Once both options have been verified, we will proceed with the creation of a plane. To do this, we use the keyboard shortcut Shift + A and select the option Mesh -> Plane.

In Edit Mode, we press 1 on the numeric keypad to place ourselves in an orthographic front view, and rotate the plane on the X-axis 90°.

Then, by pressing the G key we move the plane on the Z-axis so that it is just above the X-axis.

Subsequently, we move its top edge to bring its height to 3 meters.

In Blender, each visibly larger square represents 1 meter, while each square that composes it represents 10 cm. As we have the Snap option activated we will notice that the movements of the geometry are adjusted to the grid being more precise.

Wall duplicates

Again in Object Mode, we duplicate our wall with the keyboard shortcut Shift + D. And going back to Edit Mode, we move the duplicates to one side.

Creating space for the door

Once we have our walls created, it is time to define the wall corresponding to the door of the room.

To do this, we take one of the previously created walls and apply some Loops with the key combination Ctrl + R, preferably in orthographic view to control the size of the hole where our door will be.

Once this is done, select the newly created face and by pressing the X key, select the Faces option and delete it.

Creation of the window space

To do this, we take another of the initially created walls and repeat the above procedure.

Nowadays, window sizes are variable, and the most modern house models include really large windows. However, for this case we will use the measurements of 120cm wide by 120 cm high.

As in the previous step, we eliminate the faces corresponding to the window hole.

Room creation

Once our 4 walls are created, we move and rotate them accordingly to form our little room.

At this point we can do it with the Snap tool still active, since the walls are the same size. But in some cases where the walls are of different sizes and compositions, it is preferable to disable this option and be guided by the Grid.

Floor creation

After that, we create the floor, for which we will use a plan again, making sure that it covers all the space between the walls. By pressing 7 on the numeric keypad, we will get a top orthographic view where we can check that the floor fits correctly.

Ceiling creation

In this case, we duplicate the floor and with the orthographic front view we raise the copy until it covers the top of the walls.

Verification of normals

At this point with the room created, it is important to verify that the visible faces of the walls, ceiling and floor are all facing inward. This is important because it not only ensures that the player inside the room will be able to see inside the room, but also because it enhances the performance of the project.

Let’s imagine that we are creating a house with several rooms, living room, dining room and kitchen. Doing it this way, there will be no unnecessary geometry in scene, since the back faces will not be shown between one room and another, so the number of vertices of the whole house will be reduced considerably.

To check the normals, in the Viewport Overlays menu we check the Face Orientation option. Blue faces will be visible and red faces will not be displayed.

If we have an external blue face, we only need to select the face(s) and access the option Mesh -> Normals -> Flip. 

Renaming and location

It is important to rename each piece of our room, so we will know to which part corresponds each geometry. In our case, we will join the pieces that correspond to the walls and leave separately the floor and the ceiling.

So, in Object Mode we select the walls and press the keyboard shortcut Ctrl + J. And we rename it “walls“.

Then, we rename the planes corresponding to the ceiling and floor.

Additionally, it will be important to place the model right in the center of the pivot. This way we ensure that when we export it to Unreal Engine all the geometry will keep its position.

Collision creation

To create the collisions, we will create a new collection called Collisions. And in Object Mode we will select all the elements of the house structure and duplicate them. That duplicate will be moved in its entirety to the new Collection created.

Now, for Unreal Engine to recognize the collisions each element that forms a part must be separated, and also each of them must be renamed with the prefix UCX followed by underscore ( _ ), the name of the part as it is called in the structure that we have just duplicated, another underscore ( _ ) and finally a consecutive number starting at 1.

To separate each part, in Edit Mode we will select each face and then press the P key.

If this is not done this way, and we use the collision that Unreal Engine creates by default when importing the object, the whole house will be taken as a big cube, where all the walls will form a solid collision without considering the door space.

Applying Solidify modifier

Once each piece is renamed, as the purpose of these is that each one serves as an invisible wall, we will add some thickness to each one.

To do this, we select the first piece of the Collisions collection and assign the Solidify modifier, whose thickness parameter we will leave as it comes by default.

Then, with the Shift key pressed, we select all the remaining pieces of the collection, making sure that the one to which we add the modifier is the last one to be selected. It should be shown with a yellow border, while the rest will have an orange border.

Next, we use the keyboard shortcut Ctrl + L and select the Copy Modifiers option. In this way, each of the parts will have adopted the Solidify modifier.

FBX file export

To export the room, while in Object Mode, and holding down the Shift key we select all the elements that compose our room, including the duplicates for collisions.

Then, we access the option File -> Export -> FBX (.fbx)

In the window that appears, select the destination path, give it a name and in the Include section check the Limit to Select Object option, and in the Object Types area check the Mesh option.

Finally we press the Export FBX button

Import into Unreal Engine 5

With the engine open, and having selected a development environment (in our case we selected third person to demonstrate how collisions work), we create a folder to import our object.

Select this folder and click on the Import button.

In the window that appears, select the file to import.

When clicking on the Open button, the import options will be shown, with the objective of keeping the collisions previously created in Blender, the most important thing will be to uncheck the Generate Missing Collision option that will be checked by default. After that, click on Import.

Once we have imported our object, we can double click on the static mesh “room_walls” to inspect it.

In the window that appears, we select the option Show -> Simple Collision and we will be able to notice how the door space has been respected in our collisions.

Next, close the previous window and drag the imported objects into the scene, and finally click the Play button.

Once this is done and we move around the escene, we will notice that the collisions work, and we can only access the room through the hole in the door. In addition, the interior of the room is the only visible part.

And that’s all, we hope that this small tutorial will serve as an introduction to the creation of more complex structures and that the steps explained here will make the process easier.

Here is the video with the complete process:

Thanks for reading, see you next time.

There are many ways to create circular holes in Blender, and one of the most commonly used methods is through the Boolean modifier. However, applying this modifier often requires additional adjustments to the mesh to avoid deformations. That’s why today, we want to show you a quick and effective way to create holes while maintaining a clean mesh.

To achieve this, we need to activate the LoopTools addon.

Loop Tools

is a highly useful addon for Blender as it provides several tools that streamline tasks such as deformation, vertex redistribution, surface smoothing, and topology correction in the mesh. 

If you haven’t activated this addon yet, simply go to the Edit menu -> Preferences or use the keyboard shortcut F4 -> Preferences.

Next, in the Add-ons tab, search for Mesh: LoopTools and enable it. Don’t forget to save the preferences if you don’t have automatic saving enabled.

Once the addon is activated, the next step is to create the circle that will form our hole, so in Edit Mode, we select the faces where we want to place the hole.

Next, right-click and from the list of LoopTools options, select Circle.

Upon doing so, we will notice that the selected faces form a circle, keeping quads in the geometry.

The next step is to extrude the circle inward into the surface.

And voilà! That’s how easy it is to create a circular hole.

The following steps involve smoothing the mesh to achieve a better appearance. To do this, switch back to Object Mode and right-click to apply Shade Smooth.

Subsequently, apply the Subdivision Surface modifier. Then we add support loops with the key combination Ctrl + R to get a better definition of the edge of the hole.

In the following image we can see the final result.

Here, the video with the complete process.

This method can be applied to any model you want to make circular holes in Blender. Sometimes it will be necessary to apply support loops before extruding, but in general these are the steps. We hope you find this information useful.

Thank you for reading, until next time.

Animations are a great way to add interactivity to your website and improve the user experience. Nowadays, they are essential to attract traffic and generate conversions. That is why, in this article, we will explain you how to add Lottie animations to your WordPress website.

Lottie is an animation library created by Airbnb that stands out for its small size. The animation data is exported as JSON files, which makes it easy to use on different platforms. Although the main tool for creating and exporting animations is After Effects, there are other options such as Fable, Aninix, Inkscape, Synfig Studio, Flow and Cavalry.

Here are two different ways to add Lottie animations to your WordPress site:

Using the Otter Blocks plugin

Although there is a Lottie Files plugin for WordPress, it has not been updated in nine months and has compatibility issues with some block editors, including Gutenberg. Therefore, the Otter Blocks plugin provides a simple way to accomplish the same task.

The steps to follow are as follows:

• Login to the WordPress administration panel and click “Add New” under the Plugins option.

• Search for the Otter Blocks plugin, install and activate it.

• You will notice that new blocks have been added to the Gutenberg editor.

• Go to the Lottie Files page, select an animation and copy its address. If you have created your own Lottie animation or downloaded it, upload the JSON file to your WordPress Media library.

• In the page editor of your WordPress site, click “+” to add a block and select “Lottie Animation”.

• Paste the animation address previously copied from the Lottie Files page or select your file from the media library.

• In both cases, the animation will be displayed immediately.

Using HTML and JS code

This method requires editing of your theme’s function.php file, so we recommend working with a child theme to avoid losing changes after an update of the parent theme.

The steps to follow are those:

• Edit the function.php file and add the lines of code below to add the Lottie player:

[php]
wp_enqueue_script( ‘lottie-player’, ‘https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js’ );
[/php]

If you want to learn more about how to use this function, visit the link to the official website here.

• Add the Lottie animation, via an HTML block. To do this enter the following code:

[sourcecode language=”plain”]<lottie-player src=&quot;your-animation-lottie-url-here&quot; background=&quot;transparent&quot; speed=&quot;1&quot; style=&quot;width: 300px; height: 300px;&quot; loop autoplay></lottie-player>
[/sourcecode]

When you publish the page, or simply preview it, you will be able to see the animation in action.

And that would be all, as you can see, adding a Lottie animation to WordPress is really easy, so we hope this information is useful and that you can add attractive and effective animations to your website.

Thank you for reading, see you next time.

Today we want to talk about the differences between Web Design and Web Development, because although it has been rooted under the same term “Web Design”, in reality they are two very different concepts.

Web Design

Web design refers to both the aesthetics of a website and the user experience that its visitors will have. This involves the layout, colour selection, type of fonts to be used, design of animations; in other words, everything related to the visual aspect. But it also includes that the layout of the aforementioned elements work together, in order to allow better navigability.

In Web Design different tools are used, ranging from graphic design software to prototyping applications. It is also necessary to have knowledge of HTML and style sheets (CSS) in order to give shape to the ideas proposed.

Web design is generally divided in two:

UX Design

Based mainly on the user experience, it considers all the necessary aspects for visitors to feel at ease on the website, which implies a friendly design whose navigation is appropriate and intuitive.

UI Design

It focuses on the aesthetics of the website, including all those visual aspects that, in addition to making it eye-catching, should be related to the brand design.

In itself, both UI design and UX design complement each other and both pursue the same purpose: an attractive website that generates visits and conversions. Therefore, when considering a web design, prototyping tools such as Figma, Adobe XD, InVision, Marvel, among others, are often used to evaluate and test these aspects.

Web Development

Web development refers to the functionality in a web environment, that is, creating a product or service intended for use on the Internet. For this type of development, it is common to use programming languages such as PHP, Java, Python, Go, C#, Dart, Javascript among many others, and it is common for these to interact directly or indirectly with a database management system.

Of the most widely used products in the world of web development, we can mention CMS such as WordPress or Drupal, these are developments that abstract many of the processes necessary for the simple administration of websites or web services, without writing code or programming knowledge. 

Of course, these environments allow you to extend their functionality and scalability by writing additional code, which in itself will depend on the specific functionality desired. To this end, they provide an API (application programming interface) that makes it possible to speed up the development of new features, in addition to interacting with the CMS core. In fact, in the specific case of WordPress, it also provides an API Rest to interact with it as a Backend, a term that we will explain a little later. 

But continuing with the definition of web development, since the last decade it is mainly divided into two aspects:

Frontend development

Mostly known as client-side development (what is rendered or displayed only in our browsers), this refers to the implementation of web design. It has to do, therefore, with all the interaction elements that will be displayed on screen, usually using HTML, CSS and Javascript.

Some Javascript-based frameworks or libraries such as Angular, React, Vue and Svelte can be used for this purpose, as they save time and improve the quality of the code.

There are other technologies that can deploy solutions for the web environment, such as the Flutter framework, which does not use HTML, CSS or Javascript for client-side rendering, but its own 2D rendering called Skia. 

Backend development

This aspect focuses on the server-side functionality, i.e. here all the necessary processes are carried out to serve the information that the Frontend will display to the end user. These include database queries, calculations, logic actions, data modification or update, security and resource optimisation, among many other tasks.

Programming languages such as PHP, C++, C#, Go, Java, Python, Javascript and frameworks such as Symfony, Django, Spring Boot, Next and Express to name a few are commonly used.

As an additional point, different communication methods can be used between the frontend and the backend, such as a REST API or GraphQL, to transfer data between the two systems.

Understanding the complexity and versatility of the web environment, we must agree that web development goes hand in hand with web design, since starting from the latter; a fully functional web product or service can be built. Although it is true that the implementation of one or the other will depend on the type of product to be built.

A fully informative website will require more emphasis on web design, although it will also make use of web development for server configuration or CMS implementation. 

However, a website that must fulfil the functions of an administrative system or an online shop, for example, will require more attention to web development, due to all the processes involved for it to function correctly. But, it will also require a friendly and intuitive user interface.

Web design and web development are two different concepts that are often used interchangeably. Both aspects are important for the creation of a successful website, and their implementation will depend on the type of product you want to build. Within web design, there are two important branches: UX design and UI design, while web development can be divided into frontend and backend.

In conclusion, these marked differences between web design and web development make it necessary to have specific skills for each discipline. Whether you want to dedicate yourself to offering web services or you are looking to implement your business in the cloud, we believe it is important to know both concepts, and understand the role of each of the professionals in these areas.

Thank you for reading, until next time.

When modeling in Blender, geometry errors can arise, which are unintentional and affect the way our 3D model is displayed. This can also hinder our workflow as we may spend hours trying to fix them. Therefore, we have listed below the 3 most common errors along with their solutions.

1. Double Vertices:

A common error that occurs when modeling in 3D is having double vertices or overlapping vertices. These are vertices that are very close together and affect the visualization of our geometry. Let’s see it clearly with an example:

In the image below, we have a cube with 12 vertices when it should have 8.

This error usually occurs when we have started modifying the geometry, such as an extrusion, but for some reason, we cancel the action. When we see that the geometry does not show a visible change, we think that it has not been applied. However, the extruded face is still there, just overlapped.

To fix this issue, in Edit Mode with all vertices selected, press the M key to show the Merge menu. Once there, select the By Distance option, which will merge the vertices by proximity, solving the previous situation.

After applying this, you will see a message at the bottom indicating the number of removed vertices, and your model will again show the correct number of vertices.

2. Inverted Normals:

Another common error is when the orientation of the faces in Blender is inverted, causing a color variation that does not allow us to see the model properly. This error can also cause serious problems in the future that can affect sculpting or texturing.

To check if the error is due to the direction of the normals, activate the Face Orientation option from the Viewport Overlays menu. If the external faces of the model are shown in blue, the direction of the normals is correct. However, if they are shown in red tones, it is necessary to correct it.

To fix this error, select all geometry with A key and press the Shift + N keyboard shortcut or access it from the Mesh -> Normals -> Recalculate Outside menu. 

Once applied, and with the Face Orientation option still active, the external faces of our geometry will be shown in blue.

3. Object Scale:

This last error is related to the transformations that can be applied to the geometry in Object Mode, which alters the properties related to its dimensions. This is a problem since when we switch to Edit Mode and apply different modeling tools, we will get unwanted behavior. Likewise, physical simulations and UV mapping will be affected.

In the following example, a cube has been scaled in Object Mode, so its scale is not normalized:

When applying a bevel to this object in Edit Mode, the corners are not uniform.

To fix this error, go back to Object Mode and press the Ctrl + A keyboard shortcut to bring up a menu to apply different properties. For this case, select Scale. This will tell Blender that the object on the scene is at its real size, and now when applying the bevel, it will maintain the proportions.

We hope these tips are helpful and allow you to solve any geometry problems that arise in your Blender modeling process.

Thank you for reading, until next time.

In this post we will briefly detail the main novelties exhibited at the State of Unreal 2023, which took place on March 22nd.

The Power of Unreal Engine 5.2

Let’s start with the creation of photorealistic worlds.

With a technical demonstration (Electric Dreams), the impressive ability of Unreal Engine 5.2 to create amazing natural environments with a lighting and reflection tracing system was showcased. In addition, the engine’s new procedural features allow the scene to adapt organically and in real-time when any modifications are made to the vegetation.

Video reference: IGN YouTube Channel

Let’s continue this tour of tools for developers, with

MetaHuman animations

Hand in hand with Ninja Theory, we were able to see a real-time facial animation made only with an iPhone camera. The new update, which will be launched this summer under the name Animator, will further improve the ability to create realistic and convincing characters.

Video reference: IGN YouTube Channel

Unreal Editor for Fortnite

Similarly, Unreal Editor for Fortnite (UEFN) was revealed in more detail, which will allow designing, developing, and publishing content for Fortnite, creating truly unique experiences, even departing from the game’s original aesthetic. UEFN will run in parallel and joins the set of Fortnite Creative tools.

Additionally, Epic has made available to creators a monetization system through which they can earn money from visits to their creative inventions.

Video reference: IGN YouTube Channel

Verse

In relation to UEFN, Verse was unveiled, a programming language that in principle will work to give customization and game logic capabilities to Fornite. It is currently available together with the public Beta of UEFN, but it is a simple approach to its API, since it is expected to be compatible with Unreal Engine in the future, which would allow anyone to use it to meet their needs or interact easily with its ecosystem.

Image reference: unrealengine.com

Fab

We will close this set of novelties with FAB, a unified Marketplace that brings together Unreal Engine Marketplace, Sketchfab, Quixel Bridge, and ArtStation. This new platform will allow creators to find, publish, and share digital resources to use in their creations. This market will house all types of digital content, from 3D models, materials, sound, visual effects, to digital humans. All this, with support for a variety of existing graphics engines.

Image reference: unrealengine.com

This has been a brief summary of the most outstanding novelties presented at GDC 2023: State of Unreal. Undoubtedly, with the presentation of each one of them, it’s clear Epic Games’ intention to significantly transform the video game industry.  

We’ll be on the lookout for more news! Thank you for reading, until next time.

The importance of a college degree in the field of technology has been a topic of debate in recent years, as major companies such as Alphabet, Apple, IBM, and even recently Elon Musk have stated that it is not necessary to have one to apply for a job in the technology area of their companies.

Likewise, many bootcamps services and platforms that provide courses in various areas; after all, it is their main business. And by this we do not mean that this is bad, not at all. There are specialized courses that can last months or even a few hours, and the knowledge acquired is very complete, in addition to being up to date.

However, technical knowledge is not everything.

From our perspective, the fact of studying in a university institution does add value to professional performance. Beyond the fact that perhaps the contents of some study programs are not up-to-date, that exams do not vary over the years, and that some key subjects are taught by unqualified staff; the university allows you to:

• Demonstrate responsibility by completing all assigned tasks in different subjects.
• Relate to people and understand what teamwork is.
• Learn to analyze and synthesize content for better understanding. And sometimes, share it with others.
• Set a goal and achieve it through different study plans; providing a general learning structure that will help you adapt to any future situation.

Another important point is that a college degree does not expire over time, it will always be part of your professional resume.

This does not mean that a university degree is enough on its own. To be really good in the field of technology, it is necessary to practice, keep updated and establish a self-taught learning plan that also includes taking courses, bootcamps and reading many books.

Now, evaluating all scenarios; it could also be the case that by studying a college career, you realize that outside of the university, you acquire more technical knowledge related to your area; updated programming languages, or management of engines for video game development, to mention some examples.

At this point, you could consider changing your career to one that allows you to complement all that knowledge. If you are going to be dedicated to software development, a career in administration or accounting could be useful. In the case of video games, majoring in mathematics or physics would be great.

Thus, answering the main question:

Is it important to have a college degree in the IT area?

Certainly not. It is not essential. From our point of view, it is recommended given the reasons previously stated. But this will depend on whether you can afford it or not, whether for financial reasons, time, or any other variable that affects this decision.

In case you decide not to obtain a college degree, make sure your self-taught education is of quality, available to you; practice, create simple but functional solutions, and add greater difficulty after each project. Review the work of other people to analyze it and see what you can learn from them. Interact with people from different areas, work on your vocabulary, and learn to express yourself.

In summary, a considerable percentage of technology companies seem to not give importance to a college degree when hiring. However, if you have the opportunity and time for it; by attending a university, you will lay the foundations for a structured learning that you can expand over time, and as you put it into practice, it will open the doors to greater opportunities.

Thank you for reading, until next time.

When creating materials in Unreal Engine 5, it’s common for the material graph to grow considerably, which can make it difficult to read and understand. Fortunately, there’s a tool that can help solve this problem: the “Add Named Reroute Declaration Node” node.

This node allows you to create named reroute nodes in the material graph, which lets you add more connections to a single output node and make the data flow easier to understand. Simply drag and drop the node onto the graph, and then assign a descriptive name through a right-click.

Named reroute nodes are especially useful when you have multiple connections going into a single input, as you can create several reroute nodes and name them according to the inputs they connect to. This makes the data flow in the material graph clearer and easier to follow.

Before

After

In summary, the “Add Named Reroute Declaration Node” is a useful tool for improving the readability of material graphs in Unreal Engine 5. By using named reroute nodes, you can add more connections to a single output node, which makes the graph easier to understand and work with.

Thank you for reading, until next time.

We want to talk a little bit about Unreal Engine and specifically about a concern that is recurrent for those who are starting with this engine: what should I use for developing a game in Unreal Engine? Blueprints or C++?

What is Unreal Engine?

Unreal Engine is the main engine for video game development used by AAA companies, but it also has a significant share in indie and AA development. Apart from the spectacular results that can be achieved using this fabulous engine, it has a peculiarity, and that is the use of Blueprints, which are technically nodes for visual programming.

Other popular engines like Unity are also working to integrate this functionality natively, although for some time now, there have been plugins for Unity like Playmaker that the creator of the fantastic Hollow Knight game used to program their game.

We must note that the use of visual programming does not exempt you from knowing how to program. On the contrary, you should focus mostly on programming logic since the syntax is served through the nodes, but at all times, you must know what you are doing.

But, what is visual programming?

Visual programming is code mainly in C++ (regardless of the engine) abstracted into blocks or nodes that often have routines already prepared to streamline processes. Like any abstraction, it has a degree of encapsulation, and therefore, all encapsulation has a price in performance.

So, what is the purpose of Blueprints?

In Unreal Engine, Blueprints are created to speed up communication between programmers and artists. That is, artists can use these nodes to connect routines created with code without the need to read a single line. An artist should not create complex logic with Blueprints; from our point of view, that is not the objective. They should only worry about adding art elements and using nodes with a very simplified abstraction.

This means that a game cannot be entirely made with Blueprints? No, a game can be made simply using Blueprints, and a programmer can program only using Blueprints, and even a solo artist can learn to program using Blueprints and complete their game.

But, like everything, there are nuances. A game created solely with Blueprints has a greater impact on performance than a game developed with code, but we must make several observations. Game performance depends on many factors, from the quality of polygons in 3D designs, the use of lights, the size of textures, level optimization, among many other factors, and it would take several publications to discuss them in-depth.

An important point is the quality of the code. The nodes in the Blueprints are optimized routines that can have better performance than a poorly written custom routine in C++. For this reason, C++ programmers should follow good practices for development in Unreal Engine.

But in comparison, if we take the source code of a game written entirely with Blueprints and migrate the logic to code, this game, in theory, would have better performance. Additionally, a criterion that we should not omit is the versatility when creating the project, the synergy between the team, and this is achieved very well by UE with Blueprints since it is the bridge.

What is our recommendation?

We must understand that it would not be recommended for a large-scale project to create it only with Blueprints for the reasons already stated, nor to try to do everything with code since productivity in a team is crucial to meeting goals. Therefore, from our experience, We believe that if we should put a usage percentage between Blueprints and C++, approximately 40% (Blueprints) and 60% (C++).

When to use Blueprints?

It is highly recommended to use them in project prototypes or for some functionality, and after approval, part of it can be migrated to code.

When to use C++?

It is highly recommended to write all processes that are expensive for performance, require loops, or some extensive logic.

To conclude, this would allow having the best of both worlds and consider that Blueprints should only be used for already encapsulated processes, so as not to turn the project into a spaghetti of nodes.

Just one final note, the C++ used in Unreal Engine is usually a bit different from the standard, of course; this is not a problem, but for those of us who have been using C++ for a while, we must learn a little of this Unreal Engine’s C++, which we can exaggeratingly call UC++, as it has peculiarities and we must learn its logic of Macros, and we will surely dedicate a publication to it.

Thank you for reading, until next time.

Sometimes when working with WordPress, it is necessary to create Custom Post Types that have certain fields or features different from those offered by conventional WordPress publications such as pages or blog posts.

For this reason, from version 3.0 of WordPress it is allowed to create this type of posts, becoming instantly popular, given the multiple possibilities they offer. In addition, many plugins have been created to facilitate this task to developers, among the most used are: Advanced Custom Fields (ACF), Custom Post Types UI and Toolset.

However, when adding these types of custom posts it is common to encounter the error 404 (page not found) when trying to access the URL of these. That is why, here we will tell you the most common way to solve this problem:

Check your permalinks settings when using Custom Post Types

Permalinks are as the name suggests; unique URL links to posts, and archive pages such as categories, tags, search pages and so on. When you access one of these URLs, it will take you directly to that specific page or archive within the website.

WordPress allows you to access the configuration of permalinks through its administration panel. To do this, simply go to  Settings -> Permalinks.

Once there, set the custom structure to %postname%, then click Save.

Afterwards, check if the solution worked. To do this, try accessing the custom post again and check that it does not show the 404 error.

If it still does, go back to the configuration, change the permalinks back to default and click Save. Then, try setting the custom permalinks, and again click Save.

This should fix the problem, the times we’ve had this issue; this has been the easiest and quickest way to fix it.

We hope this Tip will be helpful.

Thank you for reading, until next time.

Today we want to talk about an element that often goes unnoticed when browsing different websites, we refer to the Breadcrumbs whose term comes from the classic tale of the Brothers Grimm, in which Hansel and Gretel were leaving little pieces of bread to find their way home.

As in the story, breadcrumbs on websites serve basically the same function, to allow the user to know their exact location, and to provide quick access to higher levels where they can get more precisely what they are looking for. They are usually placed below the header at the top left, so that they are easy to locate at all times.

There are different types of breadcrumbs:

• Location or hierarchy-based: as their name suggests, they inform the user of their location within the hierarchical structure of the website.
• Attribute-based: these are loaded dynamically, and are generally used in online stores as the breadcrumbs must adapt to the website’s functions: product attributes, searches, among others.
• Route: those that follow the user’s browsing history, these are rarely used, as it would be similar to using the back and forward buttons on the web browser.

Having defined what breadcrumbs are and having specified their variations, let’s get down to business:

What is their importance?

Considering that breadcrumbs facilitate the user’s navigation within our website, they can significantly improve the user experience, in turn increasing the likelihood of conversion.

Similarly, breadcrumbs are SEO-friendly as they help search engines understand the architecture of the website, as well as the type of content it offers. And since Google is really friendly to breadcrumbs, they can be included as part of the rich snippets of the meta description that is displayed in search results, increasing the chances of CTR and therefore a better ranking.

In summary, if you have a website with more than fifteen pages, organized in several hierarchical levels, it is essential that you make use of breadcrumbs, as this could improve the user experience, as well as the positioning of your website in search engines.

Thank you for reading, until next time.

What is Fiverr?

It is a digital platform where people from anywhere in the world can sell or buy products and services, in other words, it is a Freelance employment platform.

Founded in 2010 by two Israeli entrepreneurs, Fiverr has become one of the most popular portals worldwide thanks to the large number of professionals and services it offers.

But, how profitable can Fiverr be?

Well, from our point of view, as freelancers, Fiverr can be an excellent option to advertise your services and earn additional income for a variety of reasons:

• To create your profile as a seller you do not need to pay any membership or subscription fee.
• Once you have completed your profile as a seller, you can create your first publication or ‘gig’ to offer your services (A new profile has up to 5 gigs).
• One of the features that differentiates Fiverr from other similar portals, is that once you have created your profile as a seller, it is the clients who come to you with a specific requirement, according to your skills.
• Another important point is that if one of your gigs has potential, Fiverr can assign you the “emerging talent” badge, which will give you greater exposure for a certain period of time.
• It has a myriad of product and service categories available, so if you’re good at something, you’re bound to find one where your type of work fits perfectly.
• Getting positive ratings at the end of each job can help you level up, which in theory will ensure greater exposure.

However, it is also important to keep in mind a few factors when working with Fiverr:

• Being such a popular platform, you may notice that the cost for simple or complex jobs can be quite low.
• The commission percentage that is applied (including the tips you may receive from your clients), is 20%. 
• Initially, payment for the service cannot be withdrawn until 14 days after delivery, as this is the guarantee time given to the buyer.
• It is common that clients can hire your services without having established a previous contact, this can represent a problem, since if the requirement does not fit, the cancellation of the project can negatively affect your rating.

In summary, Fiverr can be a good option for publicizing your services and earning additional income, but it’s important to consider both its advantages and disadvantages in order to make an informed decision. If you are looking for a way to freelance and you have specific skills that may be valuable to others, Fiverr is definitely worth a try. We ourselves have our profile available which you can access from this link. 

Thank you for reading, until next time.

Today we are going to talk about a topic that has been controversial for some years now. The issue is whether it is appropriate or not for a designer or developer to leave a credit link to their own website on the client’s website. To address this, it is important to review several aspects.

Let’s start with the SEO of a website. SEO, or Search Engine Optimization, refers to a set of techniques implemented to improve the ranking of a website in search engines.

Among the most widely used search engines is Google, which uses the PageRank scoring system to evaluate websites. This system assigns a score from 1 to 10 based on various factors, including incoming and outgoing links.

With this in mind, there is a widespread belief that the credit link placed on the client’s website (usually in the footer) will negatively affect their SEO, while greatly benefiting the SEO of the developer’s website. In addition, it has been said that developers are dishonest when they do this and that it is part of a previously elaborated plan.

To this we must say that this is not true. Not all development agencies are the same, and the practice of placing a link in the footer of the client’s website should not affect their SEO if done correctly.

However, based on our own experience, we have found that some companies are not comfortable with the practice of a credit link, even if their main activity is not related to technology. Based on this, we can give the following recommendations:

• It is important to speak with the client at the beginning of the project and ask them if they would agree to place a credit link as the developer of their site.
• Add value to this practice, in our case we offer our clients periodic reviews and security updates free of charge.
• If the client agrees, add the nofollow attribute to the link, which according to theory would make this link invisible. That is, Google’s PageRank would not take it into account when evaluating the score of the client’s website. This is why their SEO would not be affected.
• Use a small (non-invasive) icon for the link, so that only those interested in learning more about the development agency behind the design can find it.
  

Although the client pays for the development of their website, this does not give them copyright ownership of the development itself. There are an infinite number of developers who, like us, perform a craftwork, providing a creative and completely personalized design, so receiving credit for our work would be fair.

An example that can help understand the matter is the following: imagine you buy an art painting. Although you are the buyer of the painting, you cannot remove the artist’s signature. This would not be ethical and, in addition, it is precisely the signature that adds value to the painting. The same happens with the credit link on the client’s website. Giving credit to the developer for their creative work is a way to promote their work, which will allow them to reach more potential clients.

In conclusion, leaving a credit link on the client’s website should not negatively affect their SEO if done correctly. It is important to have an open and honest conversation with the client at the beginning of the project and offer added value in return. Using the nofollow attribute on the link and a small icon can also help to alleviate any concerns from the client. By being transparent, we can maintain a healthy working relationship where both parties benefit.

Thank you for reading, until next time.

Why should you consider WordPress in creating your website?

Today we want to talk to you about the main advantages of this great content management system (CMS). But before going into detail, it’s important to clarify that there are two versions of WordPress: WordPress.com and WordPress.org. The first is a hosting service owned by Automattic, which offers a website builder based on WordPress.org. However, unlike WordPress.org, WordPress.com has fewer customization and scalability options. That’s why in this text we will only talk about WordPress.org.

Launched in 2003 as a tool mainly for bloggers, WordPress has become the most popular CMS for creating and managing websites worldwide, with over 70 million blogs and websites created to date. But what makes it so special? In our opinion, its flexibility and ease of use for both developers and end users are its main attributes. With this CMS, you can create stunning web designs and manage content easily.

Below, we mention some of the main advantages of using WordPress:

WordPress is free and open source

This makes it a low-cost alternative for creating any type of website. In addition, being open source means it has a large community constantly providing improvements and solving problems.

Easy setup

In just 5 minutes you can install it, with no need for advanced technical knowledge. Its documentation is very complete and accessible for both beginners and experienced developers.

Wide variety of plugins and themes

Another strength of WordPress is the number of available plugins and themes. Installing them is very easy and allows you to expand the functionality and visual appearance of your website in minutes. In addition, you can customize a theme without needing programming knowledge, something that is not so easy to do on other platforms like Drupal.

It’s SEO friendly

Search engines, especially Google, tend to show preference for websites created with WordPress. This is because, as mentioned before, is a content management tool, which ensures that the content of your website is always updated and relevant. In addition, there are many plugins that will help you improve the SEO of your site, such as Yoast SEO or All in One SEO Pack.

Security

Being the most used content management system, it is constantly subject to cyber attacks, which is why it is vital to keep the software up to date at all times, and be very careful in selecting third-party plugins. However, it remains a platform whose security constantly improves after each update.

WordPress makes social media integration easy

Thanks to the available plugins, it is very easy to integrate your social media accounts on your website. This will allow you to share your content on social media and increase the visibility of your website.

In summary, WordPress is an excellent option to create and manage your website, whether it is a blog or a corporate page. We are facing a free and open source content management system, which is not limited in terms of its advantages of use, proving to be a great alternative in the creation of any type of website.

We hope you find this information useful and we encourage you to try this amazing CMS!

Some time ago we made an entry commenting on web design trends for 2020. Since then, and up to this point, some of the ones we commented on back then have been maintained, as is the case of large fonts, 3D elements, dynamism and custom cursors. But of course, there are others that we will mention below, and that will continue to set the tone for the coming year.

Neumorphism

Which is nothing more than applying a game of lights and shadows to borderless elements on sober backgrounds, in order to get that touch of real object in a digital environment. The idea is to convey the feeling that these elements are really inside the background and that they are shown because they stand out from the inside.

This trend has been coming to life for about three years, especially in the development of mobile and desktop applications, but it has been gradually invading web design and will surely be very present in 2023.

Design by: Nicolas Jey

Image by: Samson Vowles

Augmented reality

According to our approach, augmented reality will continue to grow and it is precisely this evolution that will allow it to be included in any web environment, providing sites with an interactive experience that will help the end user to make decisions when purchasing a product or service.

The website perfectcorp.com, offers the service of artificial intelligence and augmented reality SaaS solutions for beauty and fashion companies.

Animated backgrounds

Although it is not a new concept, and in fact in previous posts we have talked about dynamism, it is no secret that its usability has been increasing, now the sections of many websites highlight their content through background videos or css animations with movement, which allows to focus the user’s attention on a specific area and stay longer on a website.

We have applied them to our own website.

White spaces

All these elements that we have been mentioning go hand in hand with minimalism, their use should not affect the simplicity of a web design. One of the purposes of a web page is to transmit information in a warm and pleasant way, without the content becoming overwhelming. That is why the use of white spaces helps to obtain a friendlier experience, in which legibility and comprehension are the protagonists.

Website: candyblack

Website: finnova

In conclusion, web design continues to evolve every year, and keeping abreast of new trends allows you to create dynamic and durable websites. Of course, some trends will adapt better than others depending on the type of project to be implemented.

But even so, taking them into consideration is of great value in today’s changing environment. That’s why at itandfeel we are here to help you take your customers’ experience to another level.

We write this post because we want to recommend some useful sites to add box-shadow quickly to your elements, using CSS.

As you may already know the CSS box-shadow property adds shadow effects around the frame of an element, and this can be very useful if we want to give the elements of our website depth, creating the idea that they are at different levels from the background. This can also give an idea of proximity as if the elements were closer, more within our reach, this allows to draw the attention of users to specific elements.

Thus, for example with the following css code:

We can achieve the following effect:

But let’s say we have this situation, we’re a freelancer and we’ve been asked for a 1 day turnaround time for a landing page, so we’re in a bit of a rush to add this effect to a specific element. This is where the sites we mentioned at the beginning come in.

On the getcssscan.com website they have a section called “Beautiful CSS box-shadow examples” with 93 examples ready to copy and paste into your own css with just 1 click. All those box-shadows were copied using the website’s own CSSScan tool, a very clever and subtle way to promote their service while providing a very useful tool.

The same happens with the website csshint.com where they also dedicate one of their pages to the same purpose of the previous one, 76 css box shadow examples ready to copy and paste in our css code. Great, don’t you think?

The truth is that on the internet we can find several websites to generate custom box-shadows, to give concrete examples websites like box-shadow.dev or cssmatic.com achieve in theory the same function, but they are parameterizable. You generate your own box-shadow depending on the opacity, color, radius and other aspects you require.

They are tools to take a little more time and create them to your liking. Of course, just as useful as the previous ones.

In conclusion, if you are looking to add a box-shadow effect quickly you will have a little more than 93 styles to choose from and just a click away from being copied. If you want to add a more customized style, you can resort to online generators. Box-shadow, a css property that can make the element to which it is applied the protagonist of the section in which it is located.

Thanks for reading, see you in a future post.

Although there was already talk of Tabler Icons two years ago, it is only recently that we have discovered this wonderful graphic resource. It is a compendium of 2050 free high quality SVG icons, under MIT license that can be used without restrictions in personal and commercial projects. 

To access them you just have to enter https://tabler-icons.io. Once there, you can download the complete package, or simply filter and configure the icons (stroke and size) from the search engine, so you can copy the SVG code of each one or download it, either in this format or in PNG.

Additionally, in its GitHub (https://github.com/tabler/tabler-icons) you can find much more information about its installation and use, including official documentation about its implementation with technologies such as Angular, React and Vue. 

Its creator Pawel Kuna (https://twitter.com/codecalm) is constantly updating the pack with new icons, so at the time of writing this article, Tabler Icons is in its 1.72 version.  Undoubtedly, a really useful resource and ready to be easily implemented.

As you may have noticed, we have recently made a refresh to our brand, we have given a more modern touch to our logo and redesigned our website. So, taking advantage of this new image, we believe it is necessary to let you know the difference between Restyling and Rebranding, two terms that are usually confused.

What is Restyling?

As its name indicates, it is about making a change of image, a refreshing of the communicative elements that give life to the brand as such. This can be done to the logo, typefaces, colors, website, in itself any element facing the client.

When should a Restyling be implemented?

• When you want to move with new trends.
• An image update is required to reconnect with the target audience.
• Changes in company management. Perhaps it is a merger, a new acquisition or an absorption and it is necessary to communicate the change, but maintaining the essence of the original company.

Which brings us to: What is Rebranding?

Just as Restyling is a marketing strategy, however, rebranding involves modifying the foundations of a brand, from its mission to its target audience. In other words, it is an in-depth change of the elements that identify it, in order to reformulate it.

In which cases is it necessary?

• When the initial target audience has lost all interest in the brand.
• If the brand is very similar to another brand.
• If the company’s profits are not what they used to be.
• You need to reach new geographic sectors.
• When your products have changed.
• Incorrect management has been carried out, and it becomes necessary to correct that bad image.

As you can see, both concepts, although similar, are very different in definition and implementation. So if at some point, you are considering a change to your brand, first evaluate the causes that may be influencing your decision, so that you can choose the right strategy for a successful relaunch.

Just as the composition and choice of colors, typography is an important part of the overall branding process.

It is for this reason that you should choose a font that reflects simplicity, and even better if it can last over time. We do not mean that you cannot renew yourself, we know that styles tend to change with the passing of time and it becomes necessary to take a step with them so as not to be outdated. However, it would be amazing if the brand that represents you or your business becomes an icon that defines you even with the passing of the years.

Therefore, it is recommended to choose a typeface that is understandable, clear and easy to read regardless of the medium on which it is printed. For this reason, below is a brief review of some of the existing typefaces and what each of them can reflect, so that you know which one to choose according to your style.

Serif fonts:

The best known are Times, Georgia and Garamond, they are characterized by having curved lines (serifs) known as finial or grace. They provide the effect of tranquility, elegance, tradition and respect, so they are usually used for institutional or corporate purposes.

Sans Serif fonts:

That is, without serif, its vertices are straight and do not have contrast, since its strokes are uniform. Among the oldest and best known are: Arial, Helvetica and Tahoma.

Some of the most recent ones are Quicksand, Roboto and Montserrat. They convey professionalism, cleanliness and timeliness, and are considered modern fonts, although, like serif fonts, they are usually considered serious and elegant.

Display fonts:

Personality, that is the word to define them, since they have great visual impact. It is for this reason that their use is generally focused on large size signs, magazine covers, posters. Among them we can name: Lobster, Oleo Script, Playball.

One of the main characteristics of this type of font is that in very small sizes they are not very legible, which is why they must be chosen very carefully and for a specific purpose, usually advertising.

Script fonts:

They are usually written with a calligraphic touch, that is, as if they were handwritten or cursive. When used, their main interpretation is of glamour and sophistication, although in recent years they have also been widely used to convey warmth, therefore they can also be synonymous with tradition. Among the best known are: Great Vibes, Parisienne and Tangerine.

In conclusion: The text described here is simply an approach, so that you have a clearer perspective on the use of typefaces. The number of existing typefaces is really wide, but the most important thing is that the ones you choose to represent your brand express the message you want to convey in the best possible way.

When creating a website, it’s necessary keep in mind several aspects to achieve its success, among them we can highlight: its look, navigability and responsiveness on different devices. However, within its layout there is a section of great importance, which despite being present in all interfaces, sometimes goes unnoticed, or simply occupies a space at the end of the website because it is dictated by the standard, we are talking about the footer.

This element can be a very valuable way to achieve a definite connection between your brand and potential users. The footer represents the summary of your web page, it can include: contact information, social networks, product or service promotion links, links to legal texts and subscription or contact forms. In other words, it contains the elements that will allow you to strengthen a link of greater trust towards your corporate identity. Therefore, it is necessary to consider a footer that is in line with the site’s design and that allows you to make the most of its communication potential.

Here we list some websites that reflect the use of their footer according to their content.

This first case refers to our own footer, as our company is mainly dedicated to software development we consider it essential to incorporate in our footer the contact information, so that all those interested in hiring our services can communicate with our team through several media.

In contrast, the DigitalOcean company has a design that initially includes a call to action, followed by a series of links that include company and contact information, links to their products and solutions.

On the Corkcicle website, being an online store, its footer offers links to its latest Instagram posts as well as information about its brand, wholesale information, and support for questions regarding purchase orders.

Dropbox’s footer, on the other hand, is focused on strengthening its products, providing confidence through its corporate identity, and providing all the information that serves as support, from the help center to links to its community.

In conclusion, the footer will vary according to the kind of website you are designing, so it’s relevant to study very well the elements to include in it, as well as its look and feel, in order to ensure a real connection with your visitors. And remember, the design of a good footer will always point to a higher conversion.

Using a password manager for all the services that we access today has become a truly essential action, since in recent years the number of cases for illicit activities on the Internet has gained strength, and this is mainly due to the low security of our passwords.

Generally, in the process of creating a password, people choose one that is relatively short and easy to remember, which is why in many cases it is directly related to personal data such as identification number, name, date of birth, among others. These data are easily accessible, as they are used on a daily basis, and in some cases are even displayed spontaneously through the use of social networks.

As if this were not enough, once the password has been created, as it is easy to memorize, it is decided to reuse it in multiple services, changing only a couple of characters (being essentially the same password), so a gap of security very difficult to remedy if it is discovered by those who want to get hold of our information.

Many mistakenly think that their information is not valuable enough for someone to want to get hold of it; but the truth is that, with control of a person’s information, cyber-criminals can steal our money, even use us as a proxy (bridge) to execute illegal tasks, leaving our IP, equipment and data exposed in these acts.

From there comes the importance of using a good password manager, since through this application you will be able to generate and store different passwords for each service in a secure way, according to the following features:

• They usually have a password generator, which will allow the combination of letters, numbers and special characters according to the indicated length (the latter greater than 10 digits), thus ensuring random passwords that are difficult for third parties to guess.
• They comply with maximum security encryption standards to ensure the encryption of all stored data.
• They facilitate the registration of multiple access accounts, so you can save as many passwords as you want.
• All passwords are stored under a single master key, the creation of which must meet the standards of a strong password, but still; much easier to memorize, compared to a whole list.

In conclusion, a password manager will remember all the credentials of your services for you, keeping them protected in one place, and preventing access to them by a third party.

Web Services, its tacit definition, is expressed as a set of technologies and protocols that act as intermediaries between two or more machines. It is common to find terms such as XML, SOAP, API/Rest when referring to web services.

Similarly, in a more prosaic and superficial way, we can relate web services as the typical activity of domain registrations and web hosting. But the truth is that the term web services is evolving and expanding; covering a myriad of technologies and devices but at the same time its philosophical definition remains almost intact.

With the arrival of the Internet of Things, it is necessary that web services provide more intelligent tools and solutions according to the current times. One of the fundamental features of web services is the Big Data, every day the sensors and information capturers of our devices or smart gadgets is increasing, every time we notice that their costs are getting cheaper and therefore, they are more affordable, for example Amazon’s Alexa or Google Assistant.

Ensuring the capture, processing and correct analysis of information is fundamental, and this is only possible through web services. Redundancy is key to this task, i.e., the media where the information flows must be varied and the insertion of the data in the cluster or server farms for analysis must also be varied, so different technologies and protocols must come together to perform this task.

We do not need to spend thousands or millions of dollars, or have a master’s degree in server management, to expand the reach of our businesses or products; fortunately we currently have several technologies and huge platforms such as Amazon AWS, Google Cloud and Microsoft’s Azure. With them we can create apps for the analysis and processing of images, interest profiles, demographic information, weather, automotive traffic, spatial information, among many others. In addition, we can use or create our AI (artificial intelligence) and provide it with all that information. In this way, we can offer much more intelligent solutions.

In conclusion, web services is a much richer and broader term than what is usually inferred, in it coexist different technologies that make possible the internet of things, as well as the fact that you can read our article.

Thank you for reading.

Web design trends tend to vary continuously, however, some of these are maintained and continue to evolve, and it seems that this is the case of many of the trends we have seen during this 2019, which are here to stay; even in 2020. Here we leave you a list with those that we consider will continue to be present.

LARGE SIZE TYPEFACE

These will be used not only for headlines, but also for the body of the content in general, achieving a design of great visual impact. However, it is important to adjust them for mobile versions, especially in 2020, when the mobile-first-design concept will be stronger than ever.

ASYMMETRICAL LAYOUT

This trend allows us to see fresher web designs, as if each page were a single canvas, whose exploration becomes more interesting after each step of the scroll. At this point, visual balance plays a fundamental role.

DYNAMIC ELEMENTS

By this we mean interactivity with the viewer through the use of animations. Although it is true, the implementation of these will depend on the type of web page and its content, but in general, even if it is a simple animation (if it is carried out well), it will always generate positive results.

GEOMETRIC SHAPES

Geometric shapes have been present in many of the designs that we have seen during 2019, in 2020 we will continue to see them but in a more organic way, providing fluidity to the website, and as a way to capture the viewer’s attention towards the most important areas.

3D DESIGN

A lot of web pages are adopting this kind of design in their layout. However, its use must be justified, since it does not apply in all cases. But what is certain is that they provide an immersive and entertaining experience to their visitors.

CUSTOMIZED CURSORS

This is one of the most recent trends and it is certainly on the rise, so this 2020 we may see changes in the size, shape and color of the cursors, thus providing extra personality.

In conclusion, those mentioned here are some of the trends for web design that have gained strength in recent months and that we believe will be present next year, either as we have seen so far, or in its evolved way.  It is for this reason that we must be aware of them, and consider a smart integration into our designs, in order to maintain a fine balance between look and performance.

Although the term dropshipping has been known for some time, it is not until now that this technique has gained traction, as the sale of third-party products through an online store has become quite popular due to the reduction in storage costs and shipping.

You might think, then, that just by creating an online store and posting a variety of products for sale in it; customers will rain and everything will be profits. But the reality is that it isn’t so simple, which is why today we want to share some considerations to bear in mind when doing dropshipping:

STUDY THE PRODUCT OR THE VARIETY OF PRODUCTS YOU WANT TO SELL.

Before starting with the online store, carry out a market study, we do not mean that you should do a master’s degree in Online Marketing, but you should do a previous research, and ask yourself several questions, such as for example:

Is it a simple product to manufacture? Are there different sources for acquiring the product? If it is an uncommon product, who is in charge of supplying it? How much competition will I have in offering it? With this product will I have access to an exclusive price?

Answering these questions, you will be able to choose a profitable product that will become the cornerstone of your business.

CHOOSE A QUALITY SUPPLIER.

This will definitely make the difference between your online store and the competition.

To do this, you must carry out an exhaustive search for suppliers, remember that the product will be purchased through your online store and that the shipments will be made on your behalf. Consequently, your supplier must have the product when you order it, and also provide a shipping method that guarantees the integrity of the product and delivery in the shortest time.

One aspect to consider is that manufacturers as well as wholesalers and retailers can perform the role of dropshipper, hence the importance of knowing how to discern in the search and choose the most appropriate one. A really useful dropshipper is one that distributes its own stock with a variety of products and is located in a convenient location for shipping products. In this way, you will have only one supplier that completely covers your needs, because having multiple suppliers can become a problem, because it will cost you more; to have control of what you sell and how it is delivered.

SELECT A SUSTAINABLE PLATFORM TO CREATE YOUR ONLINE STORE.

In our opinion, dropshipping business will be profitable in the long term, so, as in any business; at the beginning you should not generate more expenses than you produce, so, when selecting a platform for the creation of your store you should consider hosting costs, development costs (this in case you are not familiar with web development) and the cost of additional add-ons in case you need them.

In the current market the most popular platforms for this type of business are Shopify, Prestashop and Woocommerce, each with its advantages and disadvantages, their websites provide extensive documentation, so you should consult it to evaluate them.

Additionally, you will find online services where online stores are practically created by themselves, but these platforms are not highly recommended because they do not favor organic SEO, a fundamental aspect for your store to be visible in searches for the product you provide.

OFFERS THE CUSTOMER ADDED VALUE OVER PRICE.

In the dropshipping business you will find that the prices turn out to be quite competitive in order to stand out in sales. However, you can provide enough information about your product, add tips and suggestions about it, create different usage or configuration guides (if the product warrants it), create promotions depending on the season and allow your client to have a personalized online support for any concern. This will make your customer feel more comfortable shopping in your store.

As a final note, keep in mind that there is no way to know for sure if you will be successful in a market without first trying it, but what we can assure you is that the search for it depends mainly on you and the perseverance you have to achieve it. We are not experts in dropshipping, but we base ourselves on the experience of our clients, and if you choose this business model; We hope that these tips will help you make the right decisions.

Today we would like to introduce you to Trello an excellent tool that will allow you to streamline your projects and organize your work team in a very simple and efficient way. Trello is based on the methodology of the Scrum.

The only negative point to note is that to date it does not have a desktop application, but due to this lack has arisen Paws a client for Trello that works on Mac and soon on Windows.

Paws integrates native notifications, in addition to having a large number of shortcodes to improve your productivity.

In this opportunity we want to make known the concept of freelance work and what remote work implies, because in the technological area this kind of hiring is very common. However, it seems that many companies tend to confuse both terms; offering a job with a set schedule (for example, Monday to Friday from 8:00 am to 4:00 pm) under the figure of Freelance.

A freelancer is an independent person, with the ability to provide services remotely to third parties. In this respect, the contracting party should be aware that the monetary compensation should not be based on a fixed schedule, but rather for the fulfillment of the tasks corresponding to a specific requirement. However, payments could be made according to the number of hours dedicated to the project, but always taking into account that the employee is an organized and self-taught person able to comply with the time schedule that suits him/her best.

In other hand, a remote work is one that can be done from anywhere, outside of a traditional office environment. However, in this case, there is talk of a permanent job, with a set schedule, as well as policies and specific daily tasks that must be fulfilled according to a professional profile. This is why, under this type of employment, it is possible to talk about a remuneration based on the fulfillment of the schedule and projected goals in the short, medium or long term.

In conclusion, in a Freelance work relationship, generally the project to be developed and its scope must always be taken into account, while in the remote work modality, it is simply the place where the activities will be developed.

Undoubtedly the mobile application development market has been increasing in recent years and statistics indicate that the trend will continue.

Since the milestone of 2007 with the presentation of the iPhone by Apple and Android by Google, the mobile industry has changed forever, it went from being a casual device to an everyday one in which we can manage all our communications, organize our tasks and for entertainment, since by incorporating more powerful hardware and software; The video game industry has seen a very important market niche for casual and not so casual gamers. Like the development world in general, many companies have been forced to reinvent themselves and others have seen a golden opportunity. Examples of this are Nintendo and Niantic, the remembered Flappy Birds, the addictive Candy Crush and in terms of applications, who doesn’t know WhatsApp.

But with such a variety of mobile models, including tablets, development has gotten a bit out of control, despite the fact that in the case of Apple, it has tried to maintain a standard line with its models and its operating system (iOS). Instead, Android has been much more segmented, its strength is its great weakness, because each hardware house handles a modified version of Android, as is the case with Samsung and HTC. And Google has realized this, that’s why it bought Motorola a few years ago and although it failed to completely standardize the Android market, this year it launched Pixel, we’ll see how it goes.

When developing a mobile app, it is discussed for whom it is directed and what would be the most suitable platform, an example, if you want to launch for North America, without a doubt the option would be iOS, on the other hand if you want the Latin market, without a doubt should be released for Android. Of course, if you have the resources and the time, it could be done for both platforms, but that is the main inconvenience that developers face, because it implies significantly raising costs and additionally in the case of iOS you must have a Mac.

For this reason, in recent years, approximately since 2012, a multitude of alternatives and tools have begun to emerge to speed up mobile development, which have their advantages and disadvantages.

Application with web framework

Already practically extinct, it consists of a simple frame or view that renders the browser, we say that it is extinct, because with the guidelines and demands of the current search engine market, sites at this point must be responsive or adaptable to mobiles. Currently, the market for lunchers (to websites) has also decreased, since the Stores have been prohibiting their use, since they are not considered an application, only a redirection to some site.

Advantages

• Low cost
• Time
• Visualization on all platforms
• Learning curve

Disadvantages

• Appearance
• Performance
• Functionality
• No offline support
• No user experience
• No publishing to Stores allowed

Hybrid Application

This kind of application is the one that has had the highest growth rate in recent years, as it merges the best of both worlds between web and native. It is built using HTML, CSS and JavaScript but unlike the web app, it compiles and uses the native controls of each platform, using for example Phonegap or Cordova, which in turn are used by other frameworks, as is the case with Ionic or React Native. Similarly for the world of video games, in the case of Unreal Engine, Godot or Unity, they use Apache Cordova for their compilation to mobiles.

Advantages

• Its cost
• Time of development
• Can be deployed on all platforms
• Learning curve
• Source code reusability

Disadvantages

• Visual aspect
• Performance (It has good performance but never compared to a native app)

Native app

As its name indicates, they are the applications developed specifically for each operating system and therefore, they are fully optimized for said environment, providing the maximum user experience.

In the case of Android, Java is used and for iOS Objective-C or Swift, each one provides a fairly efficient work environment, such as Android Studio and Xcode respectively.

Advantages

• Guaranteed compatibility and optimization
• Performance
• Native look and feel
• Full use of device resources and functionalities

Disadvantages

• Its cost
• Time of development
• Learning curve
• Source code reusability

Aplicación nativas multi plataforma

In this section, we refer to those applications that are completely native but can be deployed on different platforms, for example Xamarin or Genexus, the specific advantage is that we can reuse resources, such as the programming language and UIs. All using a single IDE.

Code generated for example in Xamarin with C# will be transcompiled to Objective-C or Java depending on the platform.

Advantages

• Its cost (Lower than the native ones but higher than the hybrid ones)
• Can be deployed on different platforms
• Compatibility and optimization
• Performance
• Native look and feel
• Full use of device resources and functionalities
• Reusability of the source code (From 30 to 70%)
• Time of development
• Learning curve (Less than native but higher than hybrid)

Disadvantages

• Packing size is usually a bit larger than native
• You have to wait to get the latest versions of each platform

To sum it up, from our point of view, it is necessary to know the structures of each of the platforms, it is the only way to appreciate the differences between each one and what strategies can be taken at the moment of facing a project.

Of course, the current market demands productivity and efficiency, which is why each project has its own identity and measures should be taken to apply for a better response, for example, a client arrives with the usual behavior of high expectations and low budget, obviously his project applies to hybrid applications, there is no doubt that this is the choice.

But, if he require an application with much more optimization and with a suitable budget and time you can opt for the native multi-platform.

Perhaps there are some very specific cases in which the customer requires a particular platform and also the source code or simply make adjustments to an already started app, in this case we have no choice but to use the native ecosystem.

Finally, if we had to choose we would definitely choose optimization and productivity, and the one that applies best is the native multi-platform.

Today we want to talk about WordPress page customization. Let’s say you have implemented on your website a third party theme and you want a new structure with a different look for your content interfaces, well here we show you an easy, fast and very effective way to achieve your purpose.

First of all, we recommend that for any structure or appearance modification within your website through the use of a theme, you consider creating a child theme. This is nothing more than creating your own directory inside the path: wp-content/themes with your own custom files. For more information on creating child themes you can consult: https://codex.wordpress.org/es:Temas_hijos.

However, customizing the look and feel of a content page can be achieved by creating a template.

Let’s start with its structure, inside the chosen directory you will create a new file for example: my-page.php, it should start with the following code:

[php classname=”txt-size”]
<?php
/*
Template Name: My page
*/
[/php]

These lines constitute the definition of your template, after the colon you can place the name you want, in this case we have placed that, only as part of the example.

But this will only have created your blank page, and depending on what you want to achieve; You can include the base elements of your theme such as the header, the footer or a sidebar section if required. To do this, simply add get_header(), get_sidebar() and/or get_footer() as shown below:

[php classname=”txt-size”]
<?php
/**
* Template Name: My page
*/
get_header();
?>
<!– Elements to be added will be displayed as part of the body of your interface. –>
<div id=&quot;main-content&quot; class=&quot;main-content&quot;></div>
<?php
get_sidebar();
get_footer();
[/php]

Of course, the arrangement of these elements will depend on your specific requirements, and whether or not you want to include them. However, with this you will already have a base template to work on to add the elements you want.

Later, when you enter the WordPress administrator to create your content page you will be able to choose the template with that name in the Page Attributes section.

We hope that this small contribution will be of great use to you.

AMP is an initiative of Google in conjunction with other technology companies, including Twitter, WordPress and LinkedIn, which aims to achieve the optimization of web pages in order to significantly improve their mobile performance. The fact that a website is fully responsive does not guarantee a higher number of visits through mobile devices, it is an important point, yes, but it does not ensure a satisfactory user experience.

Under this premise this project has been created, so that the response to users on mobile devices is immediate, all using cache through the implementation of CDN, asynchronous javascript codes and own tags or rules that will allow the loading of multimedia content in the best possible way.

Among the rules that are handled in AMP is to avoid calling external resources either JavaScript or CSS, which is why any style to be implemented must go in the header, within the <style amp-custom></style> tags. Similarly, the inclusion of media elements such as images and video, is also accompanied by specific tags, for example the inclusion of images must be done with the <amp-img></amp-img> tag, in which the corresponding width and height must also be explicitly defined.

Anyway, we only wanted to give an approximation to what AMP refers to, you will find much more information about it through its official website: https://www.ampproject.org/ and on Github via the link https://github.com/ampproject.

For us, the greatest advantage of using AMP would be the fact of having a web page optimized for mobile devices, which, by allowing a better user experience, will grant a greater number of visits, and also, a high probability of reducing the percentage of bounces from devices. mobile, which in turn will significantly improve SEO.

AMP is a relatively new technology and it has certain limitations, however, components will continue to be developed that will expand or include new functionalities. Certainly a very interesting project, which will give much to talk about.

Today we want to tell you about mjml, a great framework for designing fully responsive emails.

This fabulous tool allows us to generate HTML templates very easily, the downside would be that it has its own language, but it is very easy to learn, anyway you can see the documentation and see the different examples.

To use it, you have two options you can either download the binary which is currently only available for Mac and Linux or through Nodejs using RPM which you can use on Mac, Linux and Windows.

The installation is simple and you can see it here.

But if you want to familiarize yourself with it before installing it, you can try out the live version here.

It also has plugins available for the Sublime Text editors and our favorite editor Atom, plus the mjml team has developed a desktop app.

We hope you enjoy it and use it wisely, not abusing email marketing.

Since in one of our posts, we explained the use of Sprites to improve the performance of our websites. Here, we want to recommend Sprite cow, a service that will be useful if you have difficulties knowing the exact positions of your icons, due to the size of the sprite or the number of images.

This tool is Sprite Cow, and its use is really simple. Its intuitive interface shows two buttons, one to give an example of its use (Show Example) and another to upload the sprite sheet (Open Image).

Once the image is uploaded, we select the icon that we want to display and the css code that we must place in our style sheet will automatically be generated.

Really useful, easy and fast.

This time we are going to talk about a technique that, although it is not very new, is quite useful when it comes to reducing the number of requests and the loading time of our web page; CSS SPRITES.

A sprite is defined as a set of different images grouped together in one image. An example of this would be:

As it is possible to observe, in the image shown we have 3 icons, taking as a premise that to load an image on the web page the time used is 0.2 seconds, if the 3 icons were loaded separately the loading time of the web would increase 3 times that value. That is why css sprites are so useful.

To create a sprite you can use a design program like as Gimp or Photoshop, or simply use an online tool, there are several that provide this service. Once the Sprite has been generated, the way to use it on our website would be as follows:

1.Create the CSS class, which refers to the image that constitutes our sprite. In the same one, using the position attributes, we will indicate which element to show. In addition we can also define the width and height of the same one.

[css classname=”txt-size”]
.icn-web{
width:50px;
height:40px;
background: url(../img/services-icons.png) 0 0 no-repeat;
}
[/css]

2. Make use of our class just in the place where we want to show the icon.

[html classname=”txt-size”]
<div class=&quot;services-group&quot;>
<i class=&quot;icn-web&quot;></i>
<h4>Servicios Web</h4>
</div>
[/html]

An efficient way to define all the icons, without the need to repeat CSS code for each one would be like this:

1. We define a global class using the selector *, where we indicate that all the elements that begin with our selected prefix have our sprite as background. In this way, we can define other styles that we want to add such as margins or paddings, and assuming that all icons have the same size, we can also define width and height for example:

[css classname=”txt-size”]
[class*=&quot;icn-&quot;]{
width:50px;
height:40px;
margin-top: 10px;
background: url(../img/services-icons.png) no-repeat;
}
[/css]

2. Then, classes that have the previous prefix are defined, where in each one the position of the icon to be displayed is indicated.

[css classname=”txt-size”]
.icn-web{
background-position: 0 0;
}
.icn-app{
background-position: -50px 0;
}
.icn-design{
background-position: -100px 0;
}
[/css]

And that’s it, from now on when using several custom icons on a website, it is possible to include them in a single image, using sprites.

TypeScript (TS)  is a modern open source language, which extends the Javascript syntax, providing it with a strict markup of data types, classes and modules.

Nowadays, Javascript has become a very popular language, it is not the same as it was ten years ago.  In today’s market it is no longer only mandatory to know Javascript, but to know it well.

JavaScript allows us to develop all kinds of solutions and large companies are betting on it, and through the amazing Nodejs platform,  Ionic and Electron technologies are integrated for the development of mobile and desktop applications.

But we must recognize that Javascript still has some limitations

• Lack of strong and static typing (strict variable types).
• Access modifiers (public, private, static).
• Lack of interfaces and inheritance.
• Modules (partially solved with require.js, although it is far from perfect).

Typescript overcomes these limitations, allowing us to develop in Javascript in a more comfortable, orderly, clean and completely object-oriented way.

TypeScript will compile to Javascript code, therefore, it will be compatible with all your projects and with almost all the libraries you use, such as Angular, jQuery, among many others.

This language does not require any type of plugin, since what it does is to generate standardized Javascript code, which runs on any browser, platform or operating system.

Using TS will allow us to use Javascript with:

• Strong typing
• Interfaces and inheritance
• Array Types
• Classes and modules

There are several on the market such as CoffeeScript and Babel, but TS is supported by Microsoft and personally we find its documentation and syntax much more rich and friendly. An example of its use is Angular2 which has been written entirely in TypeScript.

If you want to have a closer look at TypeScript you can use the online compiler Playground.

To install and learn TypeScript we obviously recommend their web site and read all their documentación, but there are currently free basic courses available:

https://www.udemy.com/typescript

https://www.edx.org/course/introduction-typescript-microsoft-dev201x-1 (without certificate)

After using TypeScript you won’t want to go back to conventional JavaScript.

This time we want to show you how to modify the fields of the contact form provided by Magento. As it is known, it has basic contact fields: Name, email, phone, country and comment, which are essential and very useful. But if we are in the situation of requiring additional information, it is necessary to make some modifications.

Let’s imagine that we have a housewares store and we want to know what are the user’s preferences regarding the products we provide. To do this, go to the file form.phtml of the folder Contacts of our theme by following the path: dev/app/design/frontend/default/su-tema/template/contacts/form.phtml.

Once there, we add the corresponding field. For this example we are going to add the following to the form “Preferencias”, and we will do it as follows:

Note: In this example, the syntax: Mage::helper(‘contacts’)->__(‘Please select…’) is used if the store supports multiple languages, and is the way to refer to the word for its subsequent translation in the corresponding .csv file.

After having added the element to the contact form, you need to define the email template with the new field, for this we go to the Magento administration panel following the path: System -> Transactional Emails and click on the button: Add New Template.

After that, in the area called Load Default Template, in the Template field, the Contact Form option is selected.  Going to the Template information area, in the Template Name field, we place the name we want to give to the new template, and in the area called Template Content we add the new field, following the syntax: {{var data.preferences}}.

After having defined the new template we must assign it, to do this within the Magento administration panel, we go to: System -> General -> Contacts, and in the Email Options area, specifically in the Email Template field, we select the new template created. Finally we click on the Save Config button.

And that’s it, in this way we have already defined a personalized contact form, together with its email template for sending additional information.

This wonderful solution to spam provided by Google, has a fairly efficient size when viewed on most mobile devices.  However, for resolutions from 240px to 360px the Google reCaptcha overflows, obtaining an undesired result.

So, taking this event as a reference; we want to share a solution that we have compiled from two sites: geekgoddess.com and eltallerdelbit.com, where a simple way to solve it is explained, and it is through the use of the transform property of css3.

As explained in both blogs, it is not possible to make modifications directly in the script, because it comes from an external source, but in the div with the g-recaptcha class to which the transform: scale property will be applied to adapt it to our design.

Certainly, a very effective solution to adapt the Google reCaptcha in this resolution.

Today we want to show you a service called Authy, with which you can have control of the two-step security of multiple services, such as Facebook, Dropbox, Gmail, Outlook Mail, among many others.

Using Authy you have the possibility to unify all these codes in a single service, in addition Authy has protection against Phishing as it hosts a large blacklist with these fake sites.

It is available for mobile applications and an extension for Google Chrome, has a fairly intuitive interface and is very easy to use.

Today we would like to introduce you to an excellent tool for sharing information among team members: Slack.

Slack offers the possibility to create chat rooms organized by topics, as well as private groups and direct messages. It has a convenient search system. Slack integrates a large number of third-party services. Such as Google Drive, Dropbox, Crashlytics, GitHub and Trello.

You can download this useful tool through the following link.

Nowadays productivity is vital and it is extremely useful to know tools and / or services that can serve as a task runner.

Today we want to talk about Grunt, a fantastic tool that uses Nodejs and that allows us through plugins to test, unify, move, optimize js and css files. In addition to being able to reduce the size of images, among many other features, such as transforming Sass to css.

From the official site gruntjs.com, you can review the great documentation, a quick example can be seen in the always very well explained videos of the master Jesús Conde:

Installation

https://www.youtube.com/watch?v=h38tPqXH9sY

Use

https://www.youtube.com/watch?v=HgcgS1Tnn2k

Our favorite plugins are:

• grunt-contrib-concat
• grunt-contrib-uglify
• grunt-concat-css
• grunt-postcss
• grunt-contrib-imagemin

In a next post we will talk about Yeoman an excellent tool that works in conjunction with Grunt, to scaffold a wide variety of platforms such as: Electron, Ionic, Angular, Symfony and many others.

Currently these technologies have been unified in webpacks, hopefully we will be able to tell you more about this soon.

Being already halfway through the year we have noticed that web design continues to maintain many of the elements of last year, among them: flat design (Flat Design) that in 2016 has been increasingly renewed with the use of Material Design, the responsive design (if a web page is not seen on mobile devices, it simply does not exist), and animations that are greater day after day, in order to interactively narrate the content of a web.

In addition to these elements, this year the illustrations and the use of much larger and more attractive typographic fonts have also stood out, providing personality to the websites.

That is why today we want to mention some web design tools that you probably already know, but that according to our opinion are quite useful in the development of these trends, and will surely continue to be talked about in 2017.

Google Fonts

Popular directory that provides hundreds of open-source fonts. If you have not used it yet, we recommend it, since among its many advantages are: the possibility of testing each of the fonts live without leaving your web page, finding exactly the font you need through your search engine , and in addition to this the possibility of changing the background color so that we can get that font that fits perfectly to our designs.

FontSquirrel

In the same way, we recommend FontSquirrel, since it compiles a good list of free and very attractive fonts. All of them free for commercial use.

Adobe Kuler

It is a completely free online application from Adobe that allows you to create and search for color combinations, thus generating palettes that take base colors as a reference.

Animate.css

Library that, as its name indicates, allows us to animate the elements of our web page with very attractive CSS effects. On its website there is a combo of options with different types of animations and a button to execute them, and in this way each of its effects can be visualized.

Wow.js

It consists of a Javascript library that allows to execute animations depending on the scroll movement. It is true that there are many other libraries that perform the same function, but this one stands out for its simplicity, and above all for the speed of its implementation. It works perfectly with the already mentioned Animate.css.

FullPage.js

Another Javascript library that is worth mentioning, since by applying it very striking effects are achieved, this library allows full screen section scrolling. Without a doubt, a very attractive way to present sections of content.

MUI CSS Framework

It is a framework based on Material Design, it is much lighter and faster than its competitors, and it is really useful in the development of small projects.

Bootstrap

Although it is not based on Material Design, it is a fairly intuitive framework, easy to apply, and its 12-column system ensures that websites that include it are 100% adaptable to all devices. However, version 4 is approaching, which will come loaded with many improvements.

If this is the first time you have seen any of them and/or you have found them interesting, you can review them in detail and get an idea of your own. Likewise, in the future we will be talking about many others web design tools.

To horizontally center a block content, image or other element inside our container what we must do is the following:

We define the width of the element, because if it occupies 100% or this was not defined, it would have no effect to apply margin: auto. This last style is the one that really does the job, because it tells the browser that the remaining space occupied by the defined element is divided into equal parts and is applied to both sides of the element.

In the case of responsive images, although its width is 100%, the height will be auto, so the image will be proportional to the size of the container in which it is located. In this aspect we can indicate a fixed width to the container and apply in the same way to the image a margin: auto.

Resulting in a horizontally centered image.

And that’s all, we hope you find this information useful.