Skip to content

Instantly share code, notes, and snippets.

View SalahHamza's full-sized avatar

Hamza SalahHamza

24 followers · 33 following
View GitHub Profile
@SalahHamza
SalahHamza / Useful Links.md
Last active July 13, 2018 18:47 — forked from kkas/Useful Links.md
Responsive Design Notes
@SalahHamza
SalahHamza / flexbox.md
Last active July 17, 2018 05:53
FlexBox layout

Flexbox

Let's say we have a set of items with a container around them, like this:

<div class="container">
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item red"></div>
  <div class="item yellow"></div>
@SalahHamza
SalahHamza / web_and_images.md
Last active August 13, 2018 03:31
Notes on how to approach serving images in your web application

The web and Images

Responsive Images

Use relative size images

The key to handling images is to use relative widths to prevent them from accidentally overflowing the container and eventually the viewport, so it is better to pre-set the width of all image tags to 100%. In fact it is recommended to do that on img, video, embed and object elements:

img, video,
embed, object {
@SalahHamza
SalahHamza / grunt.md
Last active July 31, 2018 23:30
Grunt notes

Grunt

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

via: Wikipedia

Installation

1- install grunt-cli globally:




  


  




    


          
    

      

        
        

          

              @SalahHamza
          

          

            
                SalahHamza
                / responsive_tables.md
            
            

              Last active
              July 26, 2018 18:03
            

              
                Responsive Tables
              
          

        

      

        

  

      

    
Responsive Tables


Hidden Columns


The concept here is to hide columns based on their importance as the viewport gets smaller. This can be done by applying a display: none on the columns you want to hide at a certain breakpoint.


The bad thing about hidden columns technique is that the hidden columns are not seen by search engines or screen readers.


No More Tables


With the no more tables technique, below a certain viewport width, the table is collapsed and resembles a long list, as opposed to a table data.



  


  




    


          
    

      

        
        

          

              @SalahHamza
          

          

            
                SalahHamza
                / web_accessibility.md
            
            

              Last active
              August 25, 2018 22:58
            

              
                Web Accessibility Notes
              
          

        

      

        

  

      

    
Web Accessibility


Overview


What is Accessibility




Broadly speaking, when we say a site is accessible, we mean that the site's content is available, and its functionality can be operated, by literally anyone.




and it also



  


  




    


          
    

      

        
        

          

              @SalahHamza
          

          

            
                SalahHamza
                / todos.md
            
            

              Last active
              January 21, 2019 15:43
            

              
                Things to finish up and/or things to start learning
              
          

        

      

        

  

      

    
Things To Do/learn


In project






Todo
Status






Add page title
Done ✔




Add Table of content
Done ✔




Switch to jekyll
Not Done




Inline CSS
Not Done







  


  




    


          
    

      

        
        

          

              @SalahHamza
          

          

            
                SalahHamza
                / service_workers.md
            
            

              Last active
              August 12, 2018 08:53
            

              
                Service Workers Notes
              
          

        

      

        

  

      

    
Intro To Service Workers


Service Worker is a programmable network proxy, allowing you to control how network requests from your page are handled. Service Workers require HTTPs on the page (The only exception is when working locally).


Note: If there is information that you need to persist and reuse across restarts, service workers do have access to the IndexDB API.


Registering a Service Worker


How to register a service worker



  


  




    


          
    

      

        
        

          

              @SalahHamza
          

          

            
                SalahHamza
                / install_ngrok.md
            
            

              Last active
              November 7, 2024 15:35
            

              
                How to install ngrok on linux subsystem for windows
              
          

        

      

        

  

      

    
  


  




    


          
    

      

        
        

          

              @SalahHamza
          

          

            
                SalahHamza
                / ajax.md
            
            

              Last active
              September 8, 2018 22:00
            

              
                AJAX course notes
              
          

        

      

        

  

      

    
AJAX


AJAX or Asynchronous Javascript and XML allows for content retrieval and display without reloading the web page. The concept is to send that the client sends the request and while waiting it can do other tasks but once the response returns we can do whatever we want with the it, well, according to the pre-set instructions that we set before dubbed callbacks.


Things to know before diving into AJAX


Web APIs


API is an acronym for Application Programming Interface. We'll be using APIs to interact with various data sources.