DEV Community: Alberto Pérez de Rada Fiol

Range-based `for` loops

Alberto Pérez de Rada Fiol — Mon, 22 Mar 2021 08:51:38 +0000

Today we are going to learn about another very useful feature of Modern C++: Range-based for loops. As their name indicates, these kind of loops are useful when we want to iterate over the elements of a container, from beginning to end.

Here are some of the advantages of using range-based for loops:

Improve the readability of the code
Will be as optimized as possible
The awesome auto keyword can be used in the range declaration
There's no need to know the size of the container we want to iterate over

And, of course, all statements that work within a regular for loop (continue, break, etc.) also work within range-based for loops.

But enough talking, let's see some examples! Imagine we have a vector of ints, and we want to print all of its elements to stdout, how can we do it?

// Older standards
  // Option 1
for (int i = 0; i < (int)vector.size(); i++) {
  std::cout << vector[i] << std::endl;
}
  // Option 2
for (std::vector<int>::iterator it = vector.begin(); it != vector.end(); it++) {
  std::cout << *it << std::endl;
}

// Modern C++
for (auto element : vector) {
  std::cout << element << std::endl;
}

That's very clean and concise! 🧐 And it gets even better when we use features from standards older than C++11. For instance, let's now imagine we have a map, with ints for both its keys and values. How can we loop through it, displaying its contents?:

// Older standards
for (int i = 0; i < (int)map.size(); i++) {
  std::pair<int, int> pair = map[i];
  std::cout << pair.first << ": " << pair.second << std::endl;
}

// Modern C++
for (auto [key, value] : map) {
  std::cout << key << ": " << value << std::endl;
}

What was that? 😮 From C++17, we can use Structured Bindings to unpack the contents of a pair (or a tuple, in general) in such a compact way! But what if, for instance, we only cared about the values of the map? From C++20 we can use the Ranges Library to do:

for (auto value : map | std::views::values) {
  std::cout << value << std::endl;
}

Simple and clean -- and there's more! Also from C++20, we can use the Init Statement if we need to. Let's add a very simple init statment to the last example so we can track the index of the current value, as I know you are already wondering what to do when the index is needed:

for (auto i = 0; auto value : map | std::views::values) {
  std::cout << "Value " << i++ << ": " << value << std::endl;
}

Do you need more examples, or are you already convinced that range-based for loops are such a great addition to C++? Tell me in the comments! 👇

The awesome `auto` keyword

Alberto Pérez de Rada Fiol — Mon, 25 Jan 2021 17:17:48 +0000

In modern C++, you write auto auto(auto auto) { auto; } and the compiler infers the rest

Ok, it's not that easy, but I promise that using auto does indeed feel like magic. Let's go with the first article with actual content of the Learning modern C++ series!

The auto keyword is used to let the compiler infer the type of a variable automatically from its initial value instead of having to explicitly declare it. (Bonus: forget about uninitialized variables!) For instance:

// Older standards
int i = 0;

// Modern C++
auto i = 0;

At first, this may not seem like a huge deal, but let's see another example. If we have a getMatrix function that returns a std::vector<std::vector<int>> type, we can easily print all its elements with a range-based for loop (if you don't know what a range-based for loop is, you'll love the next article of this series!). In this example, you'll see how auto starts to shine a bit more:

// Older standards
std::vector<std::vector<int>> matrix = getMatrix();
for (std::vector<int> row : matrix) {
  for (int element : row) {
    std::cout << element << std::endl;
  }
}

// Modern C++
auto matrix = getMatrix();
for (auto row : matrix) {
  for (auto element : row) {
    std::cout << element << std::endl;
  }
}

Hey, isn't that cool? 😎 And it gets even better! What would happen if the getMatrix function was changed to return a std::vector<std::vector<double>> type instead? With older C++ standards, we would have to adapt our code in order for it to work again, but using the modern C++ auto keyword we wouldn't need to touch anything!

Of course, this gets even more meaningful in real-world examples, but I think the ones presented should be enough to at least spark some interest.

auto can also be used in function declarations, although I must admit that I haven't committed to it (yet?). The syntax is:

// Older standards
int getIntParameter(int parameter) { return parameter; }

// Modern C++
auto getIntParameter(int parameter) -> int { return parameter; }

However, it can be very useful when used in conjunction with the decltype specifier (which inspects the declared type of a varibale):

template <typename T, typename U>
auto sum(T t, U u) -> decltype(t + u) { return t + u; }

Note that in the example above we don't know the types t and u, but we don't even need it! We could call the function like:

auto x = sum(1, 1); // (int) 2
auto y = sum(1, 0.14); // (double) 1.14
auto pi = sum(x, y); // (double) 3.14
auto tau = sum(pi, pi); // (double) 6.28

And everything will work wonderfully 🎉

That's probably enough for the post, let me know what you think of it on the comments section below! Reacting to and sharing the post is also appreciated 😊 And, as always, thanks for reading!

I turned What's Going On (Whagon) into a Rails app!

Alberto Pérez de Rada Fiol — Thu, 21 Jan 2021 11:50:50 +0000

A few days ago, I presented a very simple React app that shows what's going on in any GitHub repository. You can read about it here:

Get to know what's going on in any GitHub repository!

Alberto Pérez de Rada Fiol ・ Jan 18 ・ 1 min read

#javascript #react #showdev #webdev

After thinking a bit more about it, I decided to go ahead and turn the app into a Rails app with a React frontend powered by the react-rails gem, you can check it out here!

I decided to go the Rails way for a few reasons:

A backend was needed to be able to implement a GitHub login (already done! 😎), which will allow for many other features to come, stay tunned for them!
I wanted to build something with Rails again for too long 😜
Do you really need more? 😁

I'll keep you posted on the progress, thanks for reading!

Get to know what's going on in any GitHub repository!

Alberto Pérez de Rada Fiol — Mon, 18 Jan 2021 18:01:18 +0000

Ever since I started using GitHub, I felt like its repositories could use a "What's going on" section, so checking what a huge project is up to is easier. So, I just built that!

Today I present What's Going On

What the website does now is not even near to what it could end up doing, but I thought it was better to put a hopefully useful preliminary version out in the open as soon as possible than to keep procrastinating on building anything at all. By the way, I seized the opportunity to try out GitHub's Primer Style, which is quite nice to work with!

The source code is can be found at

AlbertoPdRF / whats-going-on

Check what's going on any GitHub repository!

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`yarn start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`yarn test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`yarn build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

`yarn eject`

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration…

View on GitHub

although the repository is not quite ready for visits 😜

Let me know what you think of the website in the comments section!

And thanks for dropping by 😊

Let's learn some modern C++!

Alberto Pérez de Rada Fiol — Thu, 17 Dec 2020 18:49:23 +0000

As I'm sure it's many other people's case, I started learning C++ as part of one of my university courses (8 years ago already 🤯), and to be honest, it did get quite overwhelming at times! However, it was also astonishing and encouraging to see how many things one could do with it, so I ended up enjoying the class.

I used the language throughout my degree to solve various tasks, but it wasn't until my graduate life that I started making a heavy usage of it, mostly to write data analysis programs (which most of the time make use of ROOT) and Geant4 applications for the simulation of experimental setups.

However, I started noticing how I relied too much on stuff I had learnt long ago - and maybe not as rigorously as I should have - as a result of which my code always ended up full of patches, workarounds, bad style, ... in short, I was producing unmaintenable and very difficult to reuse or extend code.

So, I made up my mind and since a few months ago I'm focusing on reinforcing the concepts I already knew, learning new ones, applying new syntax and good practices, etc. and I figured out it would be a good idea to document part of that process here! I'll be posting some short articles as part of this series explaining what I learn along the way, and hopefully inspire some people and/or spark some nice discussions!

How does that sound? If you don't want to miss any of the articles, make sure to follow me!

Gathering interest for an interests package

Alberto Pérez de Rada Fiol — Fri, 11 Sep 2020 11:36:05 +0000

One of the biggest concerns I had when I first started developing Tisn was how to craft a good enough list of interests, as it's a critical part of the application. Questions like: "What to include?", "How to organize it?", or "Where to get icons for it from?" were revolving around my head for way too much time, until I finally settled on a list of interests and a set of icons.

However, since then I've had in mind that creating and maintaining such a list in a more distributable way has the potential to be a very useful project. So here I am, writing this post to see if people would be interested (pun intended 😛) in such a project and even in working on it with me!

Now, a short list of the requirements I thought for the project follows:

Contain a (somewhat) complete list of interests
Be organized in categories
Provide custom icons
Have an open source license
Be distributed as an npm package

As can be seen from the list of requirements above, this project touches many different kinds of work, so it could be a great opportunity to work with people from many different backgrounds!

Without any more hesitation, here go the questions: are you interested in such a project? Would you like to get involved in it? Drop a comment below and let's get the discussion started!

And one last thing: if you react to and share this post for further reach I'll appreaciate it very much!

Thanks for reading, I'm looking forward to hearing from you!

Share content natively with the Web Share API

Alberto Pérez de Rada Fiol — Sat, 25 Jul 2020 09:42:25 +0000

Today I'm going to explain how to share content natively using the Web Share API.

Introduction

I first found out about this API when trying to figure out how to allow users of an application I was developing to share content with other applications. I didn't want to use external libraries or have to manually implement methods for every application I wanted to support (among other things because I wanted to support them all 😛) and was so glad when I finally found this API and saw that it was exactly what I was looking for! As I think not so many people know about the API yet, I'll try to explain how it works hoping that it will help anyone in the same situation I found myself in.

Before starting, it's worth noting that the API isn't supported by many of the major browsers yet. However, it will work for pretty much any user browsing your web application from their phones, which is where it is more necessary in my opinion. As such, a fallback mechanism will have to be implemented for when the user is using a browser that doesn't support the API.

Context

In this tutorial I'll walk you through my own implementation of the API, which was on a React application that uses Material-UI. If you are curious, you can take a look at the whole repository.

Usage

Let's start with the actual tutorial! As I wanted to be able to share different kinds of resources, what made the most sense was to build a reusable component which implemented all the logic and user interface. The JSX of that component looks like this:

<Fragment>
  <IconButton color="primary" onClick={(event) => handleClick(event)}>
    <ShareIcon />
  </IconButton>
  <Menu
    anchorEl={anchorEl}
    keepMounted
    open={!!anchorEl}
    onClose={() => handleClose()}
  >
    <MenuItem onClick={() => handleChatsClick()}>
      {t('shareMenu.chats')}
    </MenuItem>
    <MenuItem onClick={() => handleMoreClick()}>
      {t('shareMenu.more')}
    </MenuItem>
  </Menu>
</Fragment>

But let's see how all of this works, as just sharing the JSX is not that useful! 😄 First, we have the share button that we'll be presenting to the user (the IconButton component) that calls the handleClick function on click. This handleClick function is the function where we'll check if the Web Share API is supported in the current browser in order to decide what to show to the user:

const handleClick = (event) => {
  if (navigator.share) {
    setAnchorEl(event.currentTarget);
  } else {
    handleChatsClick();
  }
};

To do that, we simply check for the navigator.share method of the API. If it exists, we present the user with a two option menu by setting the anchor element of it. If not, we just call the handleChatsClick function. This function is responsible for direct in app sharing through the chat system of the application, and won't be covered in this article to try and stay on topic. Here's where you would implement any fallback mechanism for browsers that don't support the API, but for me direct in app sharing was enough of a fallback.

Let's now see what the handleMoreClick function does, which is where the actual Web Share API logic is implemented:

const handleMoreClick = () => {
  handleClose();
  navigator.share(params);
};

Wow! Easy, right? 😎 We just close the menu with the handleClose function (setting the anchor element of it to null) and call the navigator.share method of the Web Share API with the params object. At this point, the user will be presented with the native share menu:

The params object passed to the navigator.share method comes directly from the properties passed to the component, and it looks like this:

params = {
  title: "Title",
  text: "Text",
  url: "URL",
}

Given how the data that we pass through the Web Share API is handled by Android (I haven't been able to test this on iOS), I've found out that the best strategy is to have the title and text be the same string. Also, it's worth noting that the url will be appended to the end of text -- but this is something that we only have to care about if we want to handle receiving data. Wait, is there an API that allows our application to receive data from other apps? Oh yes, there is! If you want me to write an article about it, let me know it in the comments section and I'll gladly do it! 😊

Besides, the Web Share API allows sharing files with other apps too, although I haven't played with that as it didn't apply to my use case.

Conclusion

In this article we've gone through a simple implementation of the Web Share API, which allows us to share content of our application with other apps through the native share menu. This API solves the problem of having to rely on external libraries or having to implement custom methods in order to share content of our application with other apps, and although it's not supported by many major browsers, it should work on almost any phone.

I hope this tutorial has been useful for you, let me know it by reacting to it and/or posting a comment. And, of course, thanks for reading!

See you around 👋

New GitHub UI ✨

Alberto Pérez de Rada Fiol — Thu, 18 Jun 2020 10:24:18 +0000

What do you think about GitHub's new UI?

If you haven't seen it yet, you can enable it by clicking on your avatar on the top right of the screen, then on Feature preview, and lastly enabling one or both of the features listed there.

Tisn is now an open source project!

Alberto Pérez de Rada Fiol — Tue, 16 Jun 2020 15:40:40 +0000

Last week I posted about why I created a social network, and the article received quite a bit of feedback that I appreciated very much. Make sure to take a look at it if you haven't seen it yet!

Why I created a social network

Alberto Pérez de Rada Fiol ・ Jun 13 ・ 2 min read

#javascript #webdev #showdev

On the article I presented tisn.app, a new social network that I've been working on for the past few months. This article is a quick follow up to let everyone now that Tisn is now an open source project!

There's still a lot of stuff, in every sense, to figure out and work on, but I decided to take this step now as probably a lot of people would like to experience contributing and setting the direction of a newborn project. Make sure to drop by the repository!

Tisn / tisn.app

Tisn - The introverts' social network ➡️ Meet people while doing what you enjoy!

Tisn - The introverts' social network

Meet people while doing what you enjoy!

What is tisn.app?

Welcome to the tisn.app (or just Tisn) repository! We are very glad to have you here. If you want to help us make Tisn better, this is definitely the place to be!

The primary objective of Tisn is to try and address the problem of the apparent difficulty that exists to meet people and make new friends on this modern world. To do that, our social network:

Connects people according to their interests
Encourages people to go outside and meet others while doing something that they all enjoy
Is as simple as possible

We try to do all of that while being completely transparent and respecting our users' privacy.

Contributing

We…

View on GitHub

I'm very excited about the project in general and this step in particular, and hopefully some of you are too! If that's the case, make sure to let me know by reacting and/or commenting to the post!

Why I created a social network

Alberto Pérez de Rada Fiol — Sat, 13 Jun 2020 18:28:36 +0000

A few years ago, I started getting interested in web development because of the great opportunity it provides to make an impact both on an individual and a community level. My first contributions were to the speedcubing community (see for instance the WCA website and repository). I enjoyed the experience so much that I just couldn't resist getting more into it.

Fast forward to a few months ago, I wanted to try and solve a problem that has bothered me for years, which is the apparent difficulty that exists to meet people and make new friends on this modern world. I could go way deeper into this, but it falls out of the scope of this post. So, to address the problem, I designed a social network that basically:

Connects people according to their interests.
Encourages people to go outside and meet others while doing something that they all enjoy.
It's as simple as possible.

In order to accomplish those 3 points, the experience goes like this:

Create a profile, which requires only the absolutely necessary personal information.
- For example, the gender is not needed at all, so why request that information in the first place?
Select your interests.
Be presented with event recommendations in your area.
- An event can really be anything: go to the cinema, play a basketball game, visit a museum, attend a hackaton, etc.
- You are also able to create your own events.

That's the very basic functionality, but there's a bit more of stuff in order to provide a more complete experience:

Each event has its own comments' wall so attendants to it have an easy way to communicate with each other.
A person can send a friendship request to any other person, which has to be accepted to become friends.
Private chats between friends.

And that's it! To build all of that, I used React and Material UI for the front end (hosted on Netlify), Node.js and Express.js for the back end (hosted on Heroku), and MongoDB for the database (hosted on MongoDB Atlas). The code is on GitHub, although it isn't open sourced yet for various reasons, but the plan is for it to be -- I can only imagine how amazing it would be to receive contributions from people as interested on the project as I am!

Please visit Tisn - The introverts' social network and let me know what you think about it on the comments' section below! If there's intereste on the topic, I would be very glad to post more about both the technical and the personal side of it.

Thanks for reading!

DEV Community: Alberto Pérez de Rada Fiol

Range-based `for` loops

The awesome `auto` keyword

I turned What's Going On (Whagon) into a Rails app!

Get to know what's going on in any GitHub repository!

Alberto Pérez de Rada Fiol ・ Jan 18 ・ 1 min read

Get to know what's going on in any GitHub repository!

AlbertoPdRF / whats-going-on

Check what's going on any GitHub repository!

Available Scripts

yarn start

yarn test

yarn build

yarn eject

Let's learn some modern C++!

Gathering interest for an interests package

Share content natively with the Web Share API

Introduction

Context

Usage

Conclusion

New GitHub UI ✨

Tisn is now an open source project!

Why I created a social network

Alberto Pérez de Rada Fiol ・ Jun 13 ・ 2 min read

Tisn / tisn.app

Tisn - The introverts' social network ➡️ Meet people while doing what you enjoy!

Tisn - The introverts' social network

Table of contents

What is tisn.app?

Contributing

Why I created a social network

`yarn start`

`yarn test`

`yarn build`

`yarn eject`