DEV Community: Kashif Raza

Could not connect to development server on android emulator and on real device

Kashif Raza — Sat, 19 Nov 2022 01:26:15 +0000

Have the same problem only on real android device.
Solution:

Add file android/app/src/main/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>

localhost

Add line to android/app/src/main/AndroidManifest.xml
<application
...
android:networkSecurityConfig="@xml/network_security_config"
...

Mixin Approaches for Media Queries with Sass

Kashif Raza — Tue, 06 Oct 2020 12:57:03 +0000

Sass mixins give us the ability to create reusable chunks of code they reduce repetition, promote dry code & allow for ease of maintenance. Writing media queries as mixins to inject into your stylesheets, wherever they’re required — makes a whole lot of sense! Lets take a look at an example..

Setup mixins

@mixin for-size($size) {
@if $size == phone-only {
@media (max-width: 375px) { @content; }
}@else if $size == mobile-small {
@media (max-width: 480px) { @content; }
}@else if $size == max-mobile {
@media (max-width: 767px) { @content; }
}@else if $size == tablet-landscape-up {
@media (max-width: 991px) { @content; }
}@else if $size == tablet-landscape-up {
@media (max-width: 1024px) { @content; }
}@else if $size == desktop-up {
@media (max-width: 1200px) { @content; }
} @else if $size == big-desktop-up {
@media (min-width: 1600px) { @content; }
}
}

Using Mixin

.header-title {

font-size: 2rem;

@include for-size(phone-only) {

font-size: 1rem;
}
}

Using aria-labelledby

Kashif Raza — Wed, 12 Feb 2020 09:28:52 +0000

Using aria-labelledby to provide a text alternative for non-text content
The purpose of this technique is to provide a short description for an element that can be read by assistive technologies (AT) by using the aria-labelledby attribute. The aria-labelledby attribute associates an element with text that is visible elsewhere on the page by using an ID reference value that matches the ID attribute of the labeling element. Assistive technology such as screen readers use the text of the element identified by the value of the aria-labelledby attribute as the text alternative for the element with the attribute.

Note: When using aria-labelledby attribute on an img element, the absence of an alt attribute will cause validation failures for HTML 4 and earlier and XHTML. If alt is provided, it must contain the same text as the aria-labelledby target. Do not use alt="", which would cause some assistive techology to ignore the image completely.

< img src="sunflowers.jpg" aria-labelledby="flower_id" >

...

< span id="flower_id">Van Gogh's oil painting of sunflowers< / span >
hangs in Amsterdam's Van Gogh museum.

Leverage browser caching, how on apache or .htaccess?

Kashif Raza — Mon, 02 Dec 2019 06:12:29 +0000

    
# Enable Compression

  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain


  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


# Leverage Browser Caching

  ExpiresActive On
  ExpiresByType image/jpg "access 1 year"
  ExpiresByType image/jpeg "access 1 year"
  ExpiresByType image/gif "access 1 year"
  ExpiresByType image/png "access 1 year"
  ExpiresByType text/css "access 1 month"
  ExpiresByType text/html "access 1 month"
  ExpiresByType application/pdf "access 1 month"
  ExpiresByType text/x-javascript "access 1 month"
  ExpiresByType application/x-shockwave-flash "access 1 month"
  ExpiresByType image/x-icon "access 1 year"
  ExpiresDefault "access 1 month"


  
  Header set Cache-Control "max-age=2678400, public"
  
  
  Header set Cache-Control "max-age=7200, private, must-revalidate"
  
  
  Header set Cache-Control "max-age=86400, public"
  
  
  Header set Cache-Control "max-age=2678400, private"

Do you know why in JavaScript is "11" + 1 = 111, but "11" - 1 = 10?

Kashif Raza — Thu, 03 Oct 2019 04:32:27 +0000

WordPress: Change Sender Name and Email Address from wp

Kashif Raza — Thu, 19 Sep 2019 19:41:57 +0000

This code simply replaces the default WordPress sender name and email address with your custom sender name and email address.

You can test this by adding a new user, changing password, or any other action that sends WordPress notification email.

// Function to change email address

function wpb_sender_email( $original_email_address ) {
return 'tim.smith@example.com';
}

// Function to change sender name
function wpb_sender_name( $original_email_from ) {
return 'Tim Smith';
}

// Hooking up our functions to WordPress filters
add_filter( 'wp_mail_from', 'wpb_sender_email' );
add_filter( 'wp_mail_from_name', 'wpb_sender_name' );

Find missing integer(s) in given an array.You know that every integer 1-N appears once in the array

Kashif Raza — Mon, 05 Aug 2019 06:45:50 +0000

Here is solutions

var numbers = [0,1,3,4,5,7,8]; // Missing 2,6
var missing = [];

// Find the missing array items
for ( var i = 0; i < numbers.length; i++ ) {

    if ( (numbers[i+1] - numbers[i]) > 1 ) {
        missing.push( numbers[i+1] - numbers[1] );   
    }
}

console.log( missing );

Working with awesome tool oi.flyimg.io Fetch an image from anywhere; resize compress cache and serve...

Kashif Raza — Sun, 07 Jul 2019 16:49:20 +0000

Flyimg: Working with awesome tool oi.flyimg.io, Fetch an image from anywhere; resize, compress, cache and serve... and serve, and serve...

Features:
Get images from anywhere in the internet and store them locally for further operations.
Resize an image and serve it compressed (Jpeg for JPEGs)
Crop images to given coordinates
Convert between some formats (Webp, JPEG, PNG, GIF)
It can restrict the domains or IPs from where it pulls images to transform.
It's a bunch of well know open source projects packed together for convenience.
It includes face detection, cropping, face blurring, image rotation and many other options.
Simple and easy to extend (our main goal).

Face detection cropping:
https://oi.flyimg.io/upload/fc_1/https://oi.flyimg.io/faces.jpg

Face detection blurring + resize:
https://oi.flyimg.io/upload/fb_1,w_600/https://oi.flyimg.io/faces.jpg