Developer Communities: All You Need to Know

robusta_Blog Posts-12

What are Developer Communities?

Developer communities are places where we can

  • Share and brag about our work
  • Ask questions and find help
  • Follow for news
  • Make new connections and meet new people in the development field

They’re all about “finding solutions” and building up new experience, closer aligned with a community of practice than a community of any other type.

Communities you have to be following

In our field, there are A LOT of online communities that focus solely on development like

We also have other channels that are superiorly active like

  • Facebook tech groups/pages
  • Reddit tech subreddits
  • Google developer groups
  • Twitter

Huge companies and enterprises building products for the developers to use started to realize the importance of actively participating in the community through seeking the developers themselves. A new role has emerged called “Developer Evangelism,” where a developer evangelist is someone participating in the community in a way that makes him advertise for a product while making it sound exciting to others and without being intrusive.

You can find developer evangelists all around you. They are the people you follow on Twitter for news, who write tutorials on their blogs telling you how to do something. Think of them as social and brand influencers of all things technical development. Examples are countless and include

In Egypt, most of the tech communities are driven by individuals and not by companies or organizations. The role of developer evangelism hasn’t really matured enough yet. Instead, big companies who build ready-to-use “solutions” (like Oracle and Microsoft) advocate these solutions to other companies; not to developers

We have a big chance of taking the lead in the tech communities through focusing on the “Individuals.”

Why you should actively participate in developer communities

Developers in general show interest in participating in tech communities because it’s a way to create new connections. Connections are important because they mean

  • New technical knowledge
  • New job opportunities

How you can start contributing to the community TODAY

 Before you start contributing, there’s a set of skills you need to know that you have to work on along the way

  •  Be extremely eager to learn
  •  Be an excellent communicator through verbal and written communication
  •  Enrich your technical competence in your areas of interest
  •  Be an excellent listener and have the capacity to discuss anything

There are mainly 2 channels you should be focusing on…

 1. Online communities

   These will massively help you grow your technical knowledge and will show you how others discuss things and communicate with each other. Most importantly, they will highlight your weaknesses and allow you to work on them at your leisure.

 2. Offline/Local communities

  These are where you start having impact on others, sharing as well as always learning along the way. You start to advocate and give advice.Take care that you should be open to all opinions even those that trigger you and those you think are worthless though.

Benefits of having a leading role in local communities

  •  Your technical knowledge will grow significantly.
  •  You become more confident in the work you do and start enjoying it more and more.
  •  People start to idolize you as an expert (careful about that).
  •  You build relationships with other developers, entrepreneurs, and companies. Your connections grow beyond what you ever thought they could.
  •  You dedicate sometime everyday to reject the job offers you are getting via LinkedIn and emails 🙂

Benefits that the organization you belong to gains

  • With the growth of your technical knowledge, your organization is directly affected by the quality of the work that you perform.
  • Customers will have more confidence in your organization’s work.
  • Your organization starts attracting more customers.
  • Your organization starts attracting candidates who are eager to learn because they want to work with “YOU”.

Where you should start first

 1. Online

  • Participate in online discussions like Stackoverflow, Reddit, Github
  • Build something that you know will benefit other developers.
  • Write down articles on your personal blog, organization blog, Medium, WordPress giving your personal insights and ideas on a particular problem
  • Check local communities like Facebook tech groups and help others whenever you can through comments and answering questions whenever possible.

 2. Offline

  • Check for student activities and offer your services as a mentor/speaker at universities.
  • Offer to help those who are trying to give back to the community either through organization or through metorship/speaking (RailsGirls Cairo)
  • Find and attend local meetups and show your will to participate in organization and speaking. If none is available, start building your own community with the help of your friends and colleagues.

Bro tips

  • A good advocate is someone who is technically superior. Keep reading and learning and trying. Question your work and methods. Seek excellence.
  • Be kind to others around you. Their age, color, gender, religion or technical capabilities should never matter. As long as they are not toxic, you should stand at the same distance from all.
  • Listen carefully and don’t underestimate anyone. You would be surprised by the ideas and the work of the people you frankly think they aren’t as good as you.
  • Always be humble.
  • Give without waiting for a return. Good deeds pay off in ways you cannot imagine.
  • It’s a long-term investment that takes time. Be PATIENT and always enjoy the ride.

On Finding The Perfect “Add to Cart” Button

0

Recently I participated in a code camp at Al-Makinah where we introduce participants to the fundamentals of the front-end component of the web. I was asked to review the model answer to one of the exercises given to the students. It was simple; they take a web page written in HTML, CSS and JavaScript and improve it in a way that shows what they’ve learnt that reflects what they were taught. The exercise addressed several aspects like user experience improvement, semantics, validation of the markup … etc. It was a simple shopping cart with several products cards laid out in a grid.

I spend a lot of time writing HTML. It’s been a part of what I am doing every day for more than a decade. For me, HTML is more than just a few elements that you throw here and there; I invest a lot in picking the elements that I use. While I was reviewing the exercise, I stopped in front of the “Add to Cart” button. It was an <a> tag with a link. I started questioning myself; part of me hates the fact that this is a link not a button inside a form. It makes perfect sense to be a button. Of course it can be made anything. Simply attaching a listener that fires an ajax request updating the cart will work. But it doesn’t feel right. This isn’t semantically correct. Before I decide what the “Add to Cart” element should be, I decided I should write down the criteria addressing how this element should behave given all the possible circumstances.

Criteria:

  1. It must have the same behavior in presence or absence of JavaScript.
  2. If there are other fields like “amount,” pressing enter (submitting the form) should behave like clicking the button.

At this point I was convinced that this should be a submit button not a link. I quickly realized that this will require each product card to have a form tag with more elements like hidden input with product id for example. In big shops, the home page sometimes hosts a lot of product cards. It even uses sliders to save the space for “Newly arrived,” “Hot offers,” “Hot in category X” and the list can go on. A single page can contain more than a hundred of product cards. All this increase the amount of the HTML tags we serve to the user and increase the page size (comparing to serving a single <a> tag per card).

There is also another problem the submit button doesn’t address and it is very common. It’s the products that need you to select attributes before adding it to your cart (like shirt size or color). It’s common that these product cards redirect the user to the full details page of the product asking him to pick the required attributes in order to add the proper item to the cart. Now I changed my mind; I don’t think it’s a problem using a link for this functionality. I decided to change the first rule I mentioned earlier; it shouldn’t have the same behavior. It just should work in a way.

Before discussing the possible scenarios, I want to clarify something before getting into the argument of whether we should support users with no JavaScript or not. I believe both sides of the argument have valid points; however, there are reasons that you don’t want to lose even the smallest fraction of the users without JavaScript. We’re talking about e-commerce where conversion is translated directly into money. The solution is also pretty simple whether you decided to go with progressive enhancement or graceful degradation as you will see later on.

The available scenarios

Using button

If the product can be added directly to the cart, use button inside a form tag. It can use ajax when JavaScript is available or submit to the server directly when it isn’t (embracing progressive enhancement).

Pros:

  • Semantically, it is more accurate.
  • The behavior is similar in presence or absence of JavaScript.

Cons:

 

  • Require more code for form tag and other elements that identify the product.

 

If the product cannot be added without selecting attributes, use an anchor tag linking to the full product details page.

Using link

Use links in all cases. When JavaScript is available, hijack the click event and add the product to the cart using ajax (embracing graceful degradation). If it isn’t, direct the user to the full details page.

Pros:

 

  • Requires less HTML, just a link with data attribute for product id.

 

Cons:

 

  • The experience is different based on the presence or absence of JavaScript.
  • In absence of JavaScript, the link that says “Add to Cart” will do something completely different. It should then say “Show product details.” This might cause confusion for people using assistive technologies like screen readers.

 

How other e-commerce platforms address this issue?

I decided to review how the other popular e-commerce platforms address this issue. At robusta, we have success stories building successful big e-commerce platforms in Egypt using popular platforms like WooCommerce and Magento Enterprise Edition. I picked the popular open source e-commerce platforms available which provided a demo and a default theme. Now, bear in mind that the result of this analysis is highly based on the used theme. If you are using a different theme it is very likely that your theme uses a different markup than what I am about to show you. The default theme is important because developers use it as a boilerplate for their themes. Some platforms like Magento allow defining a parent theme and extend it to override some of its parts instead of writing everything from scratch.

Magento 2

Magento comes with a theme called Luma. It uses a button tag without a form. The button itself has some additional data attributes related to the product. As you might guess, this implementation doesn’t work except when JavaScript is available. It’s worth mentioning that Magento 2 utilizes RequireJS to split JavaScript into modules. Luma theme by default loads 119 JavaScript file in the homepage alone. With Magento, JavaScript bundler merely seems to function properly; there is a big chance for failure at any point (by network timeout, server failure, slow internet connection,…etc.). It’s disappointing to see the e-commerce giant uses an inaccessible solution that only works with JavaScript.

WooCommerce

The number 1 WordPress plugin for e-commerce really shines with its implementation. It uses a link that directs to the current page with the query string “?add-to-cart=id”. When JavaScript is available, the product is added to the cart using ajax. When it’s absent, WooCommerce handles it in a way different than the scenarios I mentioned before. The product is added to the cart and the user is redirected to the same page again with a success message on top. WooCommerce says “Add to cart” and it delivers what it says exactly with no confusion. When the product requires picking attributes, it redirects the user to the product details page.

OpenCart

OpenCart uses a button without a form that has an onclick attribute. It requires JavaScript to work. When JavaScript is available the product is added to the cart. If the product requires selection of attribute the same button redirects the user to the full details page.

VirtueMart

Perhaps this is one of the least known e-commerce platforms but it is well known across Joomla community. VirtueMart uses a classic form with a button. If JavaScript is available, the experience is enhanced with ajax. If not, the form is submitted and the user is redirected to the cart page. If the product requires selection of additional attributes the button is disabled and the options are displayed to pick from inside the cart. VirtueMart embraces progressive enhancement and provides a solution that works smoothly.

osCommerce

This is an obligatory mention to the e-commerce dinosaur. From the minute you check the demo you get the feeling that you stepped back in time into PhpNuke. osCommerce doesn’t include an add to cart button in the listing. Adding the product to the cart is only available inside the full product details.

Conclusion

There are several methods to mark down the “Add to Cart” button. We should always embrace a method that guarantees the button will work then improve the experience using JavaScript.

Introduction to RequireJS (Part 1)

RequireJS defines itself as a file and module loader. The first part is easy to understand; it can be used to load files but what about loading a module? What are modules anyway? Modules are containers encapsulating a piece of code that performs a particular function. A module should also have an interface that lets you access its functionality in a uniform manner.

Why should you care about modules?

Splitting an application into a group of modules is similar to dividing a book into chapters and sections. It makes it easier to read and find the parts you need. Writing modules at the beginning might seem like a lot of work and sometimes developers get confused and ask themselves “Do I really need to do this?” When your application grows, you start to appreciate the time you invested in decoupling your code and writing reusable modules that interact with each other.

What are the benefits of using modules?

Perhaps the greatest benefit of using modules is code reusability. Modules can be imported anywhere in an application to perform its task whenever it is needed without having to worry about duplicating the code. It also becomes easier to export a module to be able to use it in a different project because it is encapsulated. Generally speaking, it facilitates maintenance and readability of the code as well as making it more manageable and easier to test.

How I entered the world of modules loading

From my experience, I used to include all my scripts each in a separate script tag. It doesn’t matter how many scripts I am loading; they will be executed in the same order they are written. There isn’t any abstraction or anything that will add complexity, so why would I need a library to do what I can already do? My build process was taken care of concatenating and uglifying my files so what’s the problem with loading a single nice file?

I wasn’t convinced until I read a couple of discussions and a few questions began to arise in my mind especially when projects I work grew larger as follows:

  • Most of the plugins and the codes I write aren’t required to run on every page. Why would I load something huge like a WYSIWYG editor on a dashboard while the user won’t really need it at the moment?
  • Most of the time, it was difficult to debug something without checking many files to find where exactly is that function defined.

I decided to give RequireJS a try. To be honest, I fell in love with the sense of power it gave me with the conditional loading of the scripts I define. Errors became much easier to debug. I no longer have to care about the loading order of my scripts–things just work out themselves magically. I got rid of the serving-one-fat-file anti-pattern with the rise of HTTP/2. What I do now is ship small files that can be transferred in parallel. Focusing on splitting my code into modules helped me improve the work.

I started to see things from another perspective and, after using it for a while, I really had a hard time imagining developing anything without it. We will explore how to start using RequireJS in the upcoming article. See you soon!