Guidelines for building sustainable, robust & easily maintainable web apps

A few guidelines that I assembled during my career that keep me focused and help me move forward.

  • You must have a quick and comfortable dev env that allows you to stay focused
  • A solid foundation, that you control all of it’s aspects
  • a robust & simple as possible build process both for dev and prod
  • full control over your packages & manually update them when needed
  • utilize as less 3rd party packages as possible, as they might change with every update, and thus you are in less control.
  • don’t necessarily chase the cutting edge – it’s ok to not use the latest alpha release, as it quite often introduces unexpected behaviors.
  • build your own global components like dropdowns, buttons, popups, etc. it is usually a one time effort that pays well in the long run.
  • Strive for organized & standardized code, with self explaining clear structure that will allow easy onboarding for new and returning devs in your team
  • write small & self contained components
  • have a clear folder and file structure
  • use linters for forcing strict coding conventions
  • Customization of components has to be easy, with easy APIs
  • for css use SASS, it allows you to easily structure css, use variables for colors and sizes. mixins & extend for repeated css declarations
  • use importable config files & ENV variables to easily customize your app without digging in the code
  • Always think about performance – it’s too easy to fall into the trap of “I will do it later”. it will be hard to get back to it – plan your performance early
  • use image sprites, and always have the source files in hand. optimize your image assets, save for web & utilize various optimization tools
  • be aware of the browser limitations like maximum number of simultaneous http connections
  • master the browser loading times. what should be loaded in the head, at the bottom of the body, prefetch and lazy loading
  • CSS & Design matters. you should never neglect it. eventually it’s the face of the product, and if it’s broken – the user doesn’t care about the fancy complex stuff you craft in the backbone of your app.
  • Make sure to test it in variety of the browsers you support
  • Make clear style guidelines, and make sure to follow them
  • The designer is not always right. talk about quirks you find. usually after you have a solid css structure, your code dictates the small design cues, like consistent paddings & margins, color palettes and more…
  • Alway keep learning. technologies change every day, be ahead of it. but also know when to make a pause, not every buzzword is the future.

Careers Page Finder – Save some time while job hunting

I’ve been on a job hunt recently, and that involved going through numerous interesting company websites – specifically their carriers/jobs pages :)

Usually the links to those pages appear somewhere in the footer, but sometimes they hide within a menu, or simply within the about text, or any other location that requires more than 3 seconds of your time to find…

So to save those valuable seconds, I’ve came up with an idea for a simple Chrome extension that allows you to go directly to those sneaky urls, and even mark urls that it didn’t match – so it can easily find those in your future searches as well.

I’ve published it to the Chrome Store, and you can download it here.
And it’s completely open source on Github.

JavaScript events debugging with monitorEvents()

A fancy method to debug JS events, and log all or some of them.

simply call the monitorEvents() function in your JS console, and you will see the events flow.

monitorEvents(document.getElementById('monitor-me'), 'click');

monitorEvents

the first argument is the object to monitor, and the second argument is the optional filter. for example – show only click events.

to unbind the listener, you can use unmonitorEvents(document.getElementById(‘monitor-me’))

Geekcon Pets Hackathon 2016

On Feb. 19-20, 2016, once again – I was lucky enough to participate in Geekcon Pets Hackathon.

This hackathon did not revolve around prize(s), but rather pure fun experience to try and conceive a product that somehow will help pets and their owners.

The team & The product

We were a team of 5; Liat, Natanel, Elad, Rafi & I.

And the product we decided to work on, was a smart collar that will sound an alarming sound, or the dog’s owner’s voice, whenever the dog gets near “forbidden” areas – a sofa for example. or your slippers.

We decided to call it the NoGo Collar.

Most of us had very little experience with physical products development & Arduino, so in terms of learning new tech – it was a blast!

NoGo-collar-logo

Tech behind the NoGo Collar

We used Arduino as our main board, on top of it we used NFC shield, an SD card reader, an external scrap speaker and a bunch of Passive tags to trigger the alarm.

IMG_0532

And to wrap it all up, we used a 3d printed fancy packing.

We had a lot of fun during this experience, and you can judge it yourself by the pics & the video attached!

IMG_0523

Gee.kim 2015 Hackathon

Yesterday (Nov. 19, 2015) I’ve had an opportunity to participate in the Gee.kim 2015 Hackathon.
It was an amazing experience, and a chance to meet some awesome people!

Our app won the 1st prize – a PS4 for the group, and Xiaomi Yi Sport & a movie ticket for each one of us 😀
Thanks to Eli, Elad, Liat & Yoray – it was superb.

The subject

The hackathon subject was to come up with Apps that will help with the cost of living in Israel.
After dropping the ideas we originally came with, we ended up with a completely new one:
Feed.me – An app that allows restaurants, shops & individuals to give away, or sell in a very attractive price, food that is bound to be disposed in a day or two.

The app allows people to find relevant places in their nearest environment.
you can have a look at it here: feedme-app.herokuapp.com
and our git repo: github.com/dimafeldman/Feed.me

Tech behind it

BackEnd – nodeJS, mongo
FrontEnd – AngularJs & Angular Material

Feel free to fork & extend it…
And again, thanks for the best team ever!

Few pics from the event







Unfortunately i’m not in the pic with the prizes… had to leave early in order to catch a train home 😋