Archive

Q2 of 2019 in review

Hello there! It is already July, what means is time to review the second quarter of – this lightning fast and very busy – 2019. The second quarter has been one of change. After coming back from Japan Aneesha moved in and we had to adjust to our new life (easy adaptation tbh).

Even though normal people usually has enough with one wedding – even more if it’s an Indian 3-day wedding – we had another wedding to prepare, celebrate, etc. We did all that without dying, what is an accomplishment.

My parents booked a 65′ Mustang (my all-time favorite car) and the owner drove us back from the venue until home. It was awesome.

When it comes to the goals that I have set for myself for those 3 months there is a little bit of everything: success, failure and epic failure. On one side we have Chai&Churro. I’m doing quite well with our comic strip and people seem to be liking it. On the other side of the spectrum we can find my attempts at studying that didn’t go as I would’ve liked. Anyway, let’s have a look at the list:

  • Write but different: I wrote a short story (wiii) and I’ve been working on something else. Would’ve liked to write more though.
    Partial success
  • Chai & Churro: We’ve published on the Instagram account (and here at the blog) every two weeks without fault. It’s been good, people seem to be liking the comic strip and I’m relatively happy with my work.
    Success.
  • Improve my drawing skills: I have improved my drawing skills during this time but I have failed miserably at being consistent with my practice and work on repetitive tasks like drawing hands, feet, etc multiple times to understand shapes better.
    Failure
  • Study: I learned some ReactJS but haven’t done enough. A week or two of studying over a period of three months it’s nothing.
    Epic fail
  • Be there for my people: I think I’ve done pretty well in this regard. I’ve managed to do most of the things I wanted to without compromising in the time I spend with my family.
    Success

As I said before I have done quite well. But I can’t avoid to feel that I lose track of my goals easily and I tend to always forget something that ends up being an absolute failure. Maybe by setting shorter term goals I can make it work. But that’s a story for another post. Peace

Goals for Q2 2019 & review of Q1

Yo! So here we are again. I had a very intense and busy start of the year but still – kinda – managed to accomplish my goals for the first quarter of the year. Let’s review them:

  • Write: I wanted to write 2 posts a month and I – almost – did it. I’ve been working on other stuff but I’m happy with what I’ve done. I wrote about my thoughts on this blog, my goals, creative design, god or whatever and Inktober/Wordtober.
  • Get married: Yuuuuuuup!! And not once but twice (and one more coming xD). Aneesha and I got married on 3rd January at the Indian Consulate in Dubai and between February 14 and 16 we had our hindu wedding in Mumbai. It all went really well and it was an amazing experience for various reasons (like getting together people from all over the world).
  • Make and publish 3 Chai & Churro: done. Here, here and here. I’m really happy with how C&C is going. Still struggling with consistency in the art but I have a pretty streamlined process now with my iPad. I will talk more about this on the goals for the next 3 months.
  • Lose some weight: I somehow managed to lose 3 kg (91 to 88). And last week I even got down to 86.9, TEN KILOS less than when I started making changes in my diet (September 2018). Food happened over the weekend and I’m back to 88 but I’m happy with the progress.

Very happy with how things have gone. I’m also very happy that I got the chance to visit Japan, something that I thought I would never do and now I feel in the position to confirm it: yes, it’s paradise.

For the next quarter I don’t have much in my mind. It’s an extension of what I’ve done in the first quarter with some tweaks. Let’s check the list:

  • Write but different: I might write something for the blog (I have a couple of ideas) but I would like to work on creative writing. I have a little something prepared that I will post soon and I want to keep exploring this path. We’ll see.
  • Chai & Churro: Well, C&C is now a bi-weekly comic strip and it has a Facebook page and an Instagram account. I have found the workflow that makes it work for me. I could be more ambitious and do it weekly but it wouldn’t leave me with enough time for things like the next point.
  • Improve my drawing skills: This is a work in progress and it will never end but I want to take it seriously. I want to improve in key areas for creating expressive characters (hands, eyes, faces…) and improve the art as a whole. The consistency of my drawings it’s a problem (each Chai & Churro looks fricking different) but I hope to improve on that too.
  • Study: I hate studying. I’m lazy and I get easily distracted buy in my line of work is indispensable. I will focus on front-end web coding and UX as that is what appeals to me the most and where I think my – immediate professional – future lays.
  • Be there for my people: All these goals are very cool but they don’t matter if I’m not a good husband, brother, son and brother. I want to improve as a person as much as I want to improve on the things I like to do. This is always priority number one but is good to remind it to oneself from time to time.

Well, that’s it… not much more to say. I guess we’ll talk in July, until then peace, love & Periphery IV.

A month for creativity

Have you ever heard of Inktober? No? Well, Inktober is a challenge that has gained some traction over the years. It was started in 2009 by illustrator Jake Parker and it consists in making an ink drawing every day of the month of October. Participants share their work with the community – Twitter, Instagram, etc. – and interact with each other. Not only you can see amazing art, you can also see people encouraging their peers in what seems to be a pretty healthy environment.

The official Inktober account gives a daily prompt to keep the challenge interesting. It’s up to the artist to interpret the word and translate it into art.

The event has grown over time and it is now quite popular. And that has given birth to parallel challenges like Wordtober, in which I participated last year. In Wordtober the objective is to write a tweet-long story using the daily prompt as a starting point. It was a really fun and positive experience. The time, topic and length limitations boost your creativity. There’s no time for second guessing, you have to use your instincts. No place for unnecessary words either, you have to get to the point. Aneesha – who also participated – defined the process as word vomit. Writing without thinking it twice once. Maybe it is like that but I surely was doing a lot of thinking before everything “clicked”.

Based on my experience last year, I think anyone with some interest in any art form should find the Xtober that fits their interest. It’s not only a great training tool, it’s also a ton of fun.

The G Word

The G word

Hi! My name is Francisco and writing this post is probably a bad idea 🙂

In case you don’t know, I was born and raised in Spain. My country’s history is tightly entangled with the Catholic church. It’s a relationship that started many centuries ago but has been very important until recent times (and still is). When I was born my parents decided to not baptize me. At the time it was kind of a big deal in the family. I’ve been told that my grand parents on both sides weren’t happy about their decision. But my parents had a very clear idea. Let him grow up and decide by himself, don’t force anything on him.

I remember when I was like 10 or so, all my friends where going through the holy communion. I wasn’t and to be honest it made me feel weird. I still remember how I felt. I felt excluded. I wasn’t “part of the team”. I seriously thought of asking my parents of getting baptized and going through the process like everyone else. I don’t remember asking them so I’m just gonna say that somehow I was mature enough at that age to realize it was a silly reason to be baptized.

When I started high school at 12 my parents made me go to the optional (not for me) religion class. I went to that class for the following six years. We talked mainly about Christianity, Judaism, Islam. I think we scratched the surface on some others, but I don’t remember. The focus was on Catholicism,and we regularly read parts of the bible. But for me the stories of the bible were just that, stories. I think by the time I finished high school I was considering myself an atheist. The main reason is probably my aversion to organised religion.

Did I mention that even though my parents didn’t baptize me they took me to a million churches (approx.)? When I was a kid we traveled a lot and visiting churches was a big part of what we did. I came to hate it but now, with age – and wisdom, some at least – I truly appreciate it. Those churches and cathedrals are true art pieces. They are also a display of what the Catholic Church is and has been over the centuries. An organization that has done a lot of good – that is undeniable – but has done a lot of evil too. Wars and massacres in the name of good, the use of religion to attain power and riches, the hiding of horrible acts by members of the church – yes, I’m talking about pedophilia and others.

We find different cases outside of the Church. We have imams that have supported acts of terror, used their influence to radicalize young believer or even be active agents in terrorists organizations. In India there is a recent history of religious violences, mostly between Hindus and Muslims but it has also affected Christians and Sikh. There are many stories like these around the globe. None of them start with the faith of someone in God(s). They start with someone that is put in a position of power, a place where they can poison the minds of people that are looking for answers or the confort of faith.

Where was I? Oh, yes. So, after finishing high school I can’t say I thought much about God. But recently I’ve found myself thinking about It more. It’s gonna sound like a joke but I think what triggered it was flying. I’m clearly scared of flying and moving to a country that is 7,000 km away from my family has made me get on a few planes. I’ve seen myself asking God for a safe arrival a few times (damn turbulences). How do you ask for help to a being that technically you don’t believe in?

That made me think of the concept of God itself. I asked God because that’s the language tool that I have. But it’s not the religious god – the supernatural being that I was asking help. It’s more of an ethereal concept, a force that might or might not exist. There are things, there are questions I have that I can’t answer. And I don’t think anyone can. How did it all start? The universe is expanding? Cool, but expanding through where? There are many things that science can explain; but there are as many that can’t, at least for now.

I don’t like (and/or believe) in the idea of God that has been popularized by religion. The omnipotent “man-or-woman” that has created everything. It is too much of a human idea to be the truth. At the same time I can’t discard the idea that there is a force that gave origin to the universe we live in and that is a concept beyond our comprehension. It could be a force with a will or something closer to the idea of Mother Nature – something that balances itself but it doesn’t have a will. In the end I don’t have proof of anything, so I can’t discard anything. I guess that makes me an agnostic more than an atheist. To be honest I don’t care much for the title.

Photo by JAVI ARJI on Unsplash

Creative design and industry maturity

Some time back I wrote about what makes Doom II special and why it feels as good and fresh now as it did 25 years ago. In 2016 id Software, creators of the Doom franchise amongst others, launched what came to be a reboot of the series. DOOM or Doom 2016 is again an exceptional example of design. It probably has the best combat system ever designed for a video game, an epic soundtrack and it shines in many aspects. But while Doom II is brilliant in level design and the levels are a constant display of creativity, the reboot feels way more conventional and unsurprising.

I’ve been thinking about why this is the case and the answer seems now obvious to me. On the original game the creators went wild in the design of every stage. From one level to another there was little to no cohesion. Most of the levels are strange and don’t make much sense from an architectural point of view. Back then there were great technical limitations that pushed the designers creativity to new levels. At the same time the medium was still young and there wasn’t an expectation to be realistic or coherent within the game’s world.

Evolution of car designs

This applies to much more than video games. It’s something that extends throughout all the possible spectrum of design. If we look at the cars that were designed, 30, 40 or 50 years ago we will find crazy, extremely creative designs. Cars like the BMW Isseta are unthinkable today.

The car industry has reached a higher level of maturity and there are proven concepts that are common across brands. Shapes, lights, sizes… There is less space for creativity because the industry knows what works, knows what is practical and knows what is logic to do. That doesn’t mean there’s no space for innovation but there is less experimentation – at least when it comes to commercial cars – than a few decades ago.

Data-driven design for the web

The same applies to my field: the Internet. Looking back at when I was at University, the Internet was full of crazy, wild designs. Flash was the trend and people were constantly experimenting with layouts and navigation. You could see all types of things that could make – or not – sense. But the web industry has also reached a new stage of maturity. There is less space for creativity because we have data that tells us what works and what doesn’t. When users see a hamburger menu, they know what it is and how it works. Users will look for the search icon/bar on the right side of the header, because that has become a de facto standard. These and other conventions bring cohesion to the web as a whole and make for a better user experience.

Design systems like Material Design by Google help us have a cohesive experience, defining key aspects like navigation and component interaction

This can’t be criticized. If I have to design a website today I’m going to follow most – if not all – of the proven conventions. It just makes sense. Not only that, it also gives me the freedom to work on other design elements like animation that could bring a higher meaning to the user actions. Design systems and component oriented design have pushed the industry in that direction and I think everyone will agree that it’s been a very positive turn.

But I wonder if maybe we are losing on variety and innovation by limiting the creativity of our designers. Guidelines are great, but sometimes I feel that we take this guidelines as hard, unbreakable rules. And that will keep us from having a better, more creative and meaningful web experience.

Goals for Q1 2019

Hi there! As I explained on my previous post I’ve decided to set quarterly goals for myself. If you’ve been following my you’ll know that I did it in 2017 and even though I failed to accomplish all I wanted I found it to be a good practice. I have a very active mind, always thinking about new project. And that can be quite distracting. Having public goals helps me focus and keep working on what I want to accomplish instead of jumping constantly between new things without finishing anything.

I have a couple of things I want to accomplish this year. This first quarter I’m going to be quite busy so my goals are not too ambitious:

  • Write: I’m not going to be ambitious here. Publish 2 posts a month for the next three months. I prefer to post less and things that matter to me the most than just randomly write about anything. Let’s see how it goes next month because…
  • Get married: Aneesha and I are legally married already but we still have two more weddings to go. The first one will be in India in around 20 days. I have to survive to 3 days of events. Wish me luck 😂
  • Make and publish 3 Chai&Churro: recently I bought and iPad pro and I’m starting to get used to it. It’s an amazing tool and I hope it will help me be more productive. My goal is for Chai&Churro to become a bi-weekly thing but that is not going to happen now. I aim for 1 comic strip a month.
  • Lose some weight: I’ve changed my eating habits quite a bit over the last 4 or 5 months. It has worked out well and I’ve lost 6-7 kilos but my weight has been going up and down around the same number for the last couple of months. I want to make some progress, even if it is only a couple of kilos (down).

I’m going to be between India and Japan for a full month. I’m not sure of how much free time I will have. I’ll do my best to be on track and fulfil my goals. I’ll be doing the quarterly review at the beginning of April. Until then, peace, love & death metal ✌

Reflecting on the past and future of this space

I’m back. Last year was a complicated one. I had a crazy busy second half of the year, with lots of grown up things happening (remember? I’m a child with a grey-ish beard), and this had kept me from writing as I would liked to.

And yes, I also went through some kind of crisis regarding my blog. I had to “look myself in the mirror” and ask why am I doing this. What’s the purpose of my blog? Does it make sense? I was writing about a bunch of stuff, things that I like: games, movies, music… But in the end I realized I wasn’t getting anything back from it on any level and my time was better spent somewhere else.

As a result of this I’ve decided 2 things:

  • I won’t write anything for weeks (or months) if I don’t have anything to say. It doesn’t mean I don’t have a goal for this blog. It just means I won’t write about whatever just because I made myself a promise to write.
  • I don’t want to write anything review-like. There are professionals that do that and they do it way better than I do. If I write I want it to be related to what I do in my life, things that matter to me the most, like Chai&Churro, my drawings, coding or writing.

To start this new stage I’ll be looking at something I did in the past: set quarterly goals for myself. I did it throughout 2017 and I found it useful to keep an agenda and remind myself of what are my short term priorities.

I’ll be writing a post for my Q1 goals soon. Stay tuned 🙂

Infamous for Playstation 3

Gaming Sessions: Infamous

Imagine a game in which you have super powers and you fight crime alla Spiderman, Flash, etc. while freely exploring a big open-world. That’s exactly what Infamous does. The game let’s you fight for the fate of Empire City, combining elements that we’ve seen in the superhero comics for decades. But Infamous doesn’t adapt any known superhero, instead  creates its own universe that, at the same time, works as an homage to the 9th art.

Feeling powerful

If there is  a single thing  I would highlight about Infamous is how it makes you feel. Cole MacGrath, our protagonist, wakes up  at the epicenter of an explosion in the middle of Empire City. He doesn’t remember much, but he can now manipulate electricity. This give Cole a series of powers that expand as you progress in the game. Since the first minutes of the game you will feel a sense of superiority over the rest of in-game characters.

Cole making use of the storm
Some attacks are really powerful and spectacular

When you fight your enemies you can unleashed lots of chaos and destruction. Combining different powers during your fights feels completely natural and organic and it is really fun. It’s important to clarify that the combat is shooting based, and most of the complementary powers are also long distance attacks. There is some physical combat involved but it doesn’t have much weight on the gameplay. I have no doubt that this is the biggest strength of the game. It translates perfectly the sensation of being a force of nature that is superior to his enemies.

Something that I would like to highlight is that your actions will give you points of light or darkness, like we’ve seen in many Star  Wars games. This adds weight to your actions and can affect the way you fight. Will you fight your enemies without caring for the civilians in the area or will you move the fight away? What will you do with fallen (but alive) enemies and civilians? Cure them? Extract any remaining energy from them (causing death)? Or simply capture them? This morality system affects the way civilians perceive and react to you, as well as the powers and secondary missions that you have available.

Infamous' Cole MacGrath shooting an enemy
When your ‘karma’ is on the evil side, your attacks area colored red

Infamous is fun but is not perfect

Though I like the game, it is  true that there are some flaws in Infamous design and presentation that area worth noting.

First of all, both story and narrative are far from great. The story is full of cliches and Cole is not the most charismatic guy around. The story is narrated mostly through conversations over the phone, with noise on the line  and the noise of the city around. On top of that, most of this conversations happen while you do something else, so t is fairly easy to miss some parts. They top this with some cutscenes made with really cool comic artwork. Is a nice touch, but it  felt somehow disconnected from the rest of the game. The story presents a final twist that creates an interesting starting point for the sequel.

Empire City
Empire City is a pretty big environment with not much to do besides fighting

In terms of gameplay, I have a  couple of issues with Infamous. The biggest problem is that there is no real reason for Infamous to be open-world beyond the fact that is really cool to move around. There is nothing interesting to do besides the missions, so it becomes a huge hub to select levels while you collect some random, irrelevant stuff. My second biggest problem is that this open-world is overpopulated by enemies, making moving around very frustrating at times. Sure, I like the combat, but  after 10 hours of game I don’t  want to stop and fight random guys while I try to reach the next mission (on the other side of the frickinig city).

A minor issue that I’ve found a bit annoying is the climbing system. Instead of working like an Assassin’s Creed game where you just press a button, Infamous forces you to jump and jump and jump and jump… Gets tiring after a while.

Looking good, sounding weird

Being from 2009 and having in mind the size of the city, Infamous looks pretty good. Textures and models are a bit  simple but they do the job. It’s worth noting that the overall design of the game and the palette used is a bit too dull. I think a more colorful approach would have worked much better. On the other hand,  FX – specially the electricity ones – and animations are very good and they give place to some spectacular images.

Cole using his powers
The lightning effects are really good, creating powerful images like the one above

When it comes to the sound Infamous is a weird game. Music is fine, though it doesn’t have much presence. Sounds effects are ok, but there area some weird ones, specially the one made by Cole while running. Is  some kind of nya nya that doesn’t make sense and can be pretty annoying.

Infamous

I think if you like superheros and open world games is almost impossible to get disappointed with Infamous. I think there are some design decisions that prevent the game from reaching its full potential but, at the same time, Infamous has some strengths that are difficult to ignore. Recommended if you like superheros and enjoy open-world games.

Jurassic World Fallen Kingdom

Fallen Kingdom and the future of Jurassic World

Have you watch Jurassic World Fallen Kingdom already? Well, I wish I had to tell you to run to your closest cinema but that’s not the case. It is, no doubt, an enjoyable film with some really good moments. I think J.A. Bayona has done a great job and his visual style and narrative works great with a production of this caliber. But in the end, we are watching a pseudo-remake of The Lost World, as it happened with Jurassic World and the first entry of the saga. There is absolutely nothing in the script that makes up for seeing a repetition of situations and overall plot. It’s on the script where we can find all the big issues of the movie, and this is becoming a (bad) habit for the series.

My problem with the  current state of the franchise

You see, I’m a huge Jurassic Park fan. The first and second movies are amongst my all time favorite. This new movies are very entertaining but they don’t bring anything new to the franchise. We are seeing a repetition of themes and situations.

It’s very clear to the public that playing “to be God” with genetics is very dangerous. And yes, we know that velociraptors are very smart and lethal. Now, by the fifth movie I would expect to have seen some consequences to playing this game, but the truth is we haven’t seen anything. The main problem is that the premise of the series can’t go much further. You can destroy a park by an accident or by the characters arrogance once (ok, twice…). And same applies about going back to the island to save dinosaurs from an external menace.

The future of Jurassic World

[Minor spoilers of Fallen Kingdom]

The original book sets a much more interesting option, as we discover that some small dinosaurs have been getting out of the island hidden in the boats that go to the mainland. In Fallen Kingdom we get to the same point by the end of the movie, but in a disappointing way. Yes, dinosaurs are now on the mainland but the most dangerous and interesting species (Raptor, T-rex) are alone with no possibility of reproduction. In my opinion that leaves a very limited setting to work with, and I’m not sure of what we will see in the next sequel. It looks like we will be following some of the characters trying to collect the lost dinosaurs and bringing them to a new sanctuary. So basically we would go back to the end of The Lost World.

To be honest, after this long and the clear exhaustion of the original premise, I would take everything one (or 10) steps further. I would make everything go out of control, with dinosaurs spreading over the mainland and humans fighting for survival in a changed, dangerous world. Of course a setting like this can easily give birth to an absolute pile of crap, but at least it would be different.

 

Dropdown and scrolls

Creating dropdown menus inside an scrollable element

I don’t usually write about work. I guess I try to get away of it every time I leave the office. But I would be lying if I said I didn’t like to code. I actually do, and I find problem solving the most appealing and enjoyable part of my job. So I decided that from time to time it wouldn’t be so bad to write about what I do for most of my weekdays. I feel it can help me review and reassure (or not) decisions I made when a problem presented itself.

The problem

I’m making responsive little portions of our in-house CRM. Making our CRM’s main features available on-the-go for our sales team would be a great improvement for the company. A CRM is not a normal website, is closer to a desktop application, and the type of data and content is not the same you usually display on a website.

One of the first issues I found was that our toolbar(s) were way to wide for a mobile device. We have a bunch of buttons, search boxes, dropdowns etc. The first impulse would be to move all the content inside a panel of sorts as we commonly do with menus. But due to the contents of the toolbar that would be difficult to implement and maintain some kind of ease of use (and it would look awful).

The solution

I opted to just add a scroll to our toolbars whenever was needed. This way we keep the same user experience that we have in desktop, we avoid pop ups and panels and we keep the whole system consistent. It is pretty intuitive to just scroll sideways on a toolbar, and I think it is the best solution.

But this solution forced me to do some workarounds. Adding a scroll was ease and useful (overflow-x:auto), but also created a new issue. It turns out that the values of overflow-x and overflow-y are dependent of each other. That means that when x or y is set to hidden, scroll or auto, the other one can’t be visible. It is automatically changed to hidden, no matter what you specify on your CSS.

The way CSS works is sometimes confusing, and this is one of this cases. Thankfully, there’s a little trick to make it work. It requires some javascript to define the position of the menus, but nothing to complex.

To start, we need to create a toolbar with an inner div and a dropdown menu inside of it.

<div class="toolbar">
    <div class="toolbar__inner">
      <div class="dropdown">
        Dropdown menu 1
        <div class="dropdown__menu">
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
          </ul>
        </div>
      </div>
    </div>
</div>

The toolbar div (position:relative) will be the one that we use to position our dropdowns (position:absolute). The toolbar__inner is the one that will serve as the scrollable menu (overflow-x:auto). Because the dropdown__menu has absolute position and the offset parent is toolbar that has overflow: visible, the scrolling of toolbar__inner can work and not interfere with the visibility of the menus.

You can see the full CSS here:

*{
  box-sizing:border-box;
}
.wrapper{
  width:800px;
}
.wrapper--small{
  width:300px;
}
.toolbar{
  position:relative;
  width:100%;
}
.toolbar__inner{
  background:#ddd;
  border:1px solid #aaa;
  width:100%;
  padding:10px;
  overflow-x:auto;
  white-space: nowrap;
}
.dropdown, button{
  display:inline-block;
  font-size:15px;
  line-height:15px;
  font-family:arial;
  padding:10px;
  border:1px solid #aaa;
  background:#eee;
  cursor:pointer;
}
.dropdown__menu{
  position:absolute;
  display:none;
  overflow:hidden;
}
.dropdown--active .dropdown__menu{
  display:block;  
}
.dropdown__menu ul{
  padding:0px;
  margin:0px;
  list-style:none;
  background:#fff;
  border:1px solid #aaa;
}
.dropdown__menu ul li{
  padding:10px;
  width:100%;
  box-sizing:border-box;
}
.dropdown__menu ul li:hover{
  background:#eee;
}

Because the offset parent is not the dropdown button but the toolbar, we need to use JS to position the dropdown menus in the right place. Also, we need to have in mind that being inside an scrollable div, the position of the dropdown menus can be different every time we open them and every time we scroll. The code to do all this is a bit longer that I expected in the beginning. Let’s see the code and then briefly comment on what every bit of code does:

(function(){
  let dropdown = document.querySelectorAll('.dropdown');
  
  dropdown.forEach(function(node, index){
    let _this = node;
    let menu = _this.querySelector('.dropdown__menu');
    let container = getScrollable(_this);
    /*
    * Dropdown on click
    */
    _this.addEventListener('click', function(e){
      let activeDropdown = document.querySelector('.dropdown.dropdown--active');
      //close other dropdowns if opened
      if(activeDropdown && activeDropdown != _this){
        activeDropdown.classList.remove('dropdown--active');
      }
      //toggle dropdown visibility
      _this.classList.toggle('dropdown--active');
      //Update the position of the dropdown menu
      setDropdownPosition(_this, container);
    });
    /*
    * Stop propagation of click inside the dropdown to avoid the dropdown closing when clicking on one of the options
    */
    menu.addEventListener('click', function(e){
      e.stopPropagation();                       
    });
    /*
    * If the dropdown is inside an scrollabe element
    * we want to change the position of the dropdown menus on scroll
    */
    if(container){
      container.addEventListener('scroll', function(){
        setDropdownPosition(_this, container);
      });
    }
  });
  /*
  * Close dropdown when clicking outside
  */
  document.addEventListener('click', function(e){
    let activeDropdown = document.querySelector('.dropdown.dropdown--active');
    
    if(activeDropdown){
      if(!(e.target.classList.contains('dropdown') || hasParentWithClass(e.target, 'dropdown'))){
        activeDropdown.classList.remove('dropdown--active');
      }
    }
  });
})();
/*
* Control dropdown menu positioning
*/
function setDropdownPosition(dropdown, container){
  let menu = dropdown.querySelector('.dropdown__menu');

  let topPosition = dropdown.offsetTop + dropdown.offsetHeight;
  let leftPosition = dropdown.offsetLeft;
  let rightPosition = dropdown.offsetLeft + dropdown.offsetWidth;
  let scrollPosition = container.scrollLeft;
  let position = 0;
  
  menu.style.top = topPosition + 'px';
  // Define position
  if(menu.classList.contains('right')){
    position = rightPosition - scrollPosition - menu.offsetWidth;
  }else{
    position = leftPosition - scrollPosition;
  }
  //Visibility depends on the scroll
  if(position < 0 || position > dropdown.offsetParent.offsetWidth){
    menu.style.height = '0px';
  }else{
    menu.style.height = 'auto';
  }
  
  menu.style.left = position + 'px';
}
/*
* Check if a node has a parent element with x classname
*/
function hasParentWithClass(node, className){
  let parent = node.parentNode;
  
  while(parent != document){
    if(parent.classList.contains(className)){
      return true;
    }
                                             
    parent = parent.parentNode;
  }
       
  return false;
}
/*
* Find a parent element (inside the offsetparent) that has a scroll
*/
function getScrollable(node){
  let container = node.offsetParent;
  let parent = node.parentNode;
  let overflowStates = ['auto', 'scroll'];
  
  while(parent != container){
    if(overflowStates.indexOf(parent.style.overflow)){
      return parent;
    }
                                             
    parent = parent.parentNode;
  }
       
  return false;
}

dropdown click event: closes other opened dropdowns and toggles the one that has been clicked. Calls the setDropdownPosition() function.

container scroll event: we add an scroll event to the scrollable parent of each dropdown. On scroll, we call the setDropdownPosition(). To get the right scrollable container we use the method getScrollable().

setDropdownPosition(node, container): it sets the position of the node (dropdown menu) inside it’s offset parent. We get the dropdown item offsetLeft and the we substract the scrollLeft position of the scrollable parent of the dropdown item. There’s a little variation in case we want the dropdown menu to be aligned to the right side of the dropdown item.

getScrollable(node): it returns the parent element of the node (dropdown item) that has overflow auto/scroll and is at the same time inside the node’s offset parent.

There are a couple of extra features in the code above (dropdown item click behaviour, out of dropdown click…), but is to improve the behaviour of the dropdown and not strictly necessary.

The final result

Change between “mobile” and “desktop” by clicking on the toggle button. This code can easily be translated into a JS class or jQuery plugin.

See the Pen Scrollable responsive toolbar with dropdown items by Francisco Canete (@Francisco_caal) on CodePen.

If you have any ideas to improve the code or solutions that you think are better for this same issue, please leave a comment below or contact me on SM 🙂

Photo by Kobu Agency on Unsplash