EQ Blog

Author: Shekhar

  • Awesome Free SVG Icons

    Awesome Free SVG Icons

    If you think there are no free SVG Icons, – I was in the same position as you a few weeks ago. I have had a few struggles in the past to find the best free SVG Icons. We have our most beloved and well-advertised ones like Icons8, FlatIcons, The Noun Project which claim to give you the icons for free but then when you want to use them – you are presented with walls of Login/Create an account, pay or add attribution on the website.

    I mean, are you f**king kidding me?

    To use one icon, I have to clutter my webpage or app design with a bunch of links? What happened to FOSS and freedom of so-called Open Source.

    Rather, here are some of the best and awesome Free SVG Icons from the FOSS community – all of these icons sources are available under MIT License and is hosted in Github.

    Evil Icons

    https://github.com/evil-icons/evil-icons

    Bytesize Icons

    https://github.com/danklammer/bytesize-icons

    Remix Icons

    https://github.com/Remix-Design/remixicon

    Simple Icons

    https://github.com/simple-icons/simple-icons/

    Flag Icons

    How about a few flags. Let SVG waive them. This repository has 5K stars and claims to have ALL countries flags. Yes – not a typo here, ALL countries. http://flag-icon-css.lip.is/
    Using their own words:

    A collection of all country flags in SVG — plus the CSS for easier integration.

    Github Octicons

    The name says it all, made by Github but not limited to Github Oct graphic. These are Github themed icons for any web projects. https://octicons.github.com/

    Feather Icons

    A dedicated website to allow you to download any icon with one single click – no questions asked. Search within many icons, or maybe use it as an npm package. Feather Icons team has your back.

    A massive 16K stars, last I checked, a commit was made on June 11 and it still has 80 pull requests to be merged. Definitely worth bookmarking.
    Checkout – https://github.com/feathericons/feather

    SuperTiny Icons

    These are super tiny in file size hence the name. Here you will find icons from major tech brands, websites logos and a lot more.
    Github – https://github.com/edent/SuperTinyIcons

  • Top ReactJS Tools of Feb 2019

    Top ReactJS Tools of Feb 2019

    In this post, I have listed the tools for ReactJS that I found to be very useful. My selection criteria was the frequency of development, newly added features etc.

    ReactN

    ReactN is an extension of React that includes global state management. It treats global state as if it were built into React itself — without the boilerplate of third party libraries.

    Reactotron

    An app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

    Spectacle

    A ReactJS based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

    React Toastify

    A toast for all of us and our web apps. React-Toastify allow you to add notification to your app with ease. No more nonsense!

    React Draft WYSIWYG

    Don’t get me wrong, I love Draft.js – it’s simple and most importantly customizable.

    But then wouldn’t you love a great work done by a fellow developer on top of Draft.js with 100s of options? I am talking emoji and hashtags :)

  • How to stop zoom in on input focus on mobile devices

    How to stop zoom in on input focus on mobile devices

    It has been almost a year since Safari (starting from iOS 10) disabled web developers ability to prevent user zoom.

    We normally the viewport meta for granted.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    This was a bulletproof solution to make our mobile responsive pages looks the same in all mobile browsers while we ignored that many users struggled to read our hand-picked crafted fonts and our 4K display supported font size.

    We had one more problem. When users tap in any form fields – the webpage zoom in automatically.

    Problem

    Now I know for the fact that – allowing this feature stay unchanged is recommended – sometimes we do need to honour the client request and sometimes this zoom creates unwanted bugs in the UI.

    For example – a date picker input – if zoomed in mobile – would most likely break the UI.

    Continue reading below for the fix.

    You might be interested in:

    https://www.expiredqueues.com/youtube/why-i-never-make-a-youtube-video/
    I walk you through my procastination of how I never end up getting to the point.

    How To Fix

    By default, all mobile browsers force the form element to work as it is. But when a developer sets the font size less than 16 pixels on any form element – mobile browsers intervene and forces the UI or Page to zoom so that the texts are readable enough.

    You guessed it, the solution.

    Apply below

    @media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px;
  }
}

    Please note, you can set any value for the max-width property as per your style guide or UI design.

    Same, the font-size: 16px might be overridden by other higher specificity rules, like other classes, selectors etc.

    It’s a good idea to use !important just in this case. You are restraining the selector only for mobile that means it won’t break your other UIs

  • On the verge of MNC life

    Enough has already been said about 9 to 5 MNC job life of a Software Engineer.

    You start by 8 am in the morning, commute for an hour or longer to reach the high tech office gate – go through security checks – both hands up with ID badge visibly worn around the neck.

    Get inside the campus building – drive around 2 km track here and there in the parking area to find a free slot and park your Activa.

    Finally make it to your cubicle, where you open your last ‘late night’ sleep mode laptop. As soon as you fire it up – there you have 10+ IMs window already opened and yellow marked to let you know people are desperate for your replies and then there your inbox running out of storage with emails from build server reports, bug tracker, your managers concern about roles in community initiatives, last nights meeting email thread and then HR emails on how you can have a great life and benefits of this MNC.

    You catch up with all that and realize oh its time for daily scrum meeting for 15 minutes. That means some gym time, which is good. You walk into a conference room and do a stand-up meeting. Yes, there are fancy chairs and sleek round tables with 120+ inch screens for remote working peoples but you do standup. I told you it was gym time except it doesn’t end in within 15 minutes. There you update everyone about what you did yesterday and will you do today.

    Everybody applauds – meetings/gym ends. Get back to your cubicle. Start coding. You pass another hour or so and then lunch time. After lunch – walk around the campus so that your food is better digested. Experience some beautiful scenery while walking in jogging tracks (yes, many MNCs has jogging track).

    Get back to the cubicle after a small walk. Resume the coding + IM answers. This blah blah continues till evening when you (almost all the time) get an email stating a P1 bug has been logged and you have to fix it anyhow today. Whenever there is a P1 bug – it automatically gets followed by insisting that “tomorrow we have a demo so you need to fix this anyhow”.

    What would you do – fire the bug tracker, copy the bug title and StackOverflow about it? Open the damn all first search result page link with CTRL + click and make all chrome tab size full of sh#@ like below:

    Bug search on stackoverflow

    Bug search on StackOverflow

    You work till late at night, at last, you make a patch and check-in. Mark the bug resolved – tomorrow does the loop.

    Are you still awake?

    If yes then let’s talk about why this MNC life of mine is at the verge of extinct.

    • Imagine – you never have to spend your morning in the traffic – instead – enjoy the good coffee and read the newspaper.
    • Then, when you start your work – you work with the most amazing products on the internet, solve the real problem along with the talented team from around the world.
    • Don’t just fix the bug of a legacy software built two decades ago.
    • Get paid handsomely while you enjoy the healthy food cooked at the home.
    • Have the freedom of a set of tools you use, contribute and use open source. Use the most advance modern technologies for development.
    • Keep learning because you gotta stay modern and things change pretty quickly so you have to.
    • Don’t ever have to race through the parking lot in 20km/ph for 2 feet of spare space

    Fancy thought, isn’t it?

  • How to: delete node_modules folders in windows.

    Let us agree, we all have been there once in a while, messing up our hair while removing these long path issue with node_modules.

    For a while, I used to copy paste nested npm folders outside and try deleting again and again until I delete them all. I googled around and found few other tricks that does the job fairly, but after being so used to of Node workflow, I happen to find the easiest way. So here we is what you have to do.

    Enter npm prune

    All you got to do is remove the node_module listings from your package json and the run `npm prune`

    Lets say your package.json looks like this:

    Screen Shot 2015-12-08 at 3.25.55 AM

    Remove everything or may be just any particular npm which you wish to remove. Take an example, we wanted to remove all of it – then I would simply empty the dependencies like:

    Screen Shot 2015-12-08 at 3.27.40 AM

    Then run “npm prune” and voila. NPM will unbuild all of the node_modules folder which it didn’t find in the package.json but did locate in drive.

    You might be interested in:

    https://www.expiredqueues.com/youtube/why-i-never-make-a-youtube-video/
    I walk you through my procastination of how I never end up getting to the point.

  • 5 Must Reads to understand AngularJS Service and Factory difference

    As a beginner or intermediate, a lot of JavaScript developers tends to get confused between two most vital components of AngularJS – Service and Factory.

    Reason, both tend to do kind of similar job, well it looks like initially when we can’t really distinguish the proper usage. I too had these confusions and few of my colleagues happen to ask me this particular question often and often. So here I am, compiled the list of very good writings – this will give you a perfect answer on what are AngularJS Service or Factory, how to use them, what are the differences etc.

    1. Answer by Doug T on StackExchange
    2. Usage example by Gil
    3. A StackExchange Community Wiki 
    4. AngularJS: Factory vs Service vs Provider by Tyler (He has got a cool website, check that out)
    5. AngularJS Service vs Factory – video by DevelopMentor

    I hope, after going through those Q/As and the video if you were still in doubt – you have a clear picture of what Service and Factory are made for in AngularJS.

  • Context Menu using AngularJS Directive

    Since the SPA have emerged a lot in Web application market, creating MVC applications using Angular JS have become a mainstream trend.

    Here is something reusable for your Angular JS Application to speed up your development – a context menu directive.

    Check it out: Custom Context Menu Angular JS Directive/

    How to use?

    This directive is as simple as it could be. Plug the directive javascripts to you module.  Next assign the attribute to any HTML element.

    <button context-menu>Show Options</button>

    There is one required attribute ‘menu-items’ to pass your menu items.  This menu item has to be an Array of objects in your current scope with three properties. Example:

        //Menu Items Array
    $scope.menus = [
      {label: 'View',   action: 'callView',   active: true},
      {label: 'Delete', action: 'deleteItem', active: true},
      {label: 'Send',   action: 'sendItem',   active: false},
      {label: 'Share',  action: '',           active: true},
      {label: 'Active', action: 'deactivate', active: false}
    ];

    Object structure:

    • label: Text to show on Menu item
    • action: This is the method, that would be executed when clicked on particular item.
    • active: A boolean to toggle the disable/enable of particular item from menu. It doesn’t hide though.

    This array has to be accessible where the current context menu is being applied.  Then use that ‘menu-items’ attribute to pass the array reference:

    <button context-menu menu-items="menus">Show Options</button>

    And now the time to define your function, these function has to be within your scope chain and be accessible to be executed within scope.

        $scope.deleteItem = function(arg){
      console.warn('deleted ...')
    };

    $scope.callView = function(arg){
      console.info('View Call, another method')
    };

    That’s all. You have a working context menu. Any time a user right clicks within that element range – context menu show up.

    Other Options

    There are other features, optional to use.

    • Fix pointer for opening context menu

    If you wish your context menu to open always from a certain point, not where user has right clicked (cursor position) then all you gotta do is specify a pointer. For that you need an child element with your directive. Pass that element reference using pointer-node attribute. Example:

         <button context-menu menu-items="menus" pointer-node=".showHere">Show Options <span class="showHere">&gt;</span></button>

    I recommend using a class selector to pass the reference to directive as I have done above.

    Context Menu Behaviour

    Once the element is clicked, a dropdown context menu pop down right below it. But this context menu is space sensitive. What I mean by that is, by default the menu tries to open on bottom right side of the element but for some reason of menu detects that it might go outside of window then menu will automatically reposition itself on eight top left, top right, left top, left bottom. Hence when the menu appears it would never be hidden in browser. How do you like that :P?

    Full Code

    Source Code is available in Github:  https://github.com/shekhardesigner/Context-Menu-Angular-Directive

  • CSS3 Filter – Invert support in Internet Explorer 10+

    CSS3 introduced one of the very fancy features to do some creative things – “Filters”. Now we can make our images grayscale, blur it, change hues etc – everyone happy about it.

    Here is a list of the browsers that support this feature:

    1. Chrome (prefixed)
    2. Firefox
    3. Safari
    4. Opera

    and then we have Internet Explorer which still hasn’t put it on shipping list yet. At the time I am typing this – Internet Explorer 11 also doesn’t support CSS3 Filters.

    Statements from IE:

    Update: Microsoft Edge has shipped this feature as of Build 10586+

    I had a requirement to invert white images into the black. This was when the user switches themes on the website. Hence created this small useful plugin that takes the current image and uses SVG filter solution to invert it into the black.

    InvertImages

    Usage is pretty simple.

    Let us say you have an white image:

    <img src="images/icon-home.png" alt="Home Page" class="icon-home">

    And you wish to change this image into black, all you have to is:

    $("img.icon-home").invertImages();

    For more options, please read this Wiki:  InvertImages jQuery Plugin Wiki