{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/51","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that…","fields":{"slug":"/engineering/css-responsive-grid/"},"html":"

I know what you're thinking. Why am I writing this blog? There's like a bunch of apps out there that do this thing automatically. See, that's the problem, \"automatically\". That means you have no control over it when it messes things up. Even if you do, you might mess things up for other stuff too.

\n

This is why controlling your own code is better than letting other apps do it. Just like what my mentor said, \"Don't let the apps write your own code, they screw it up\".

\n

Let's get started

\n

Let's make a responsive grid without using any crazy percentages or complicated margins. Sounds cool? Good.

\n

By now you know how complicated it is to calculate all the width and margins to make sure they correspond with each other. Not to mention that you need to use percentages on both of them which sometimes doesn't work, especially with our friend IE8.

\n

What if we create a grid that doesn't need margins for spacing? Or using percentages to separate objects? Sounds awesome right? No more calculating for the right percentages and getting crazy numbers.

\n

Let's start with 4 grids first. So 100 / 4 = 25 then add a percentage (%) sign and we get 25% for our 4 grid system. No crazy numbers there, but we need spacing. To add spaces between those elements just add padding on left and right. Pixels or percent, it's up to you. Yes, yes, padding adds width but, if you add \"box-sizing: border box\" on our lovely grid, the padding will start respecting your decision to add a width of 25% and start pushing everything inside.

\n

\n \n \n

\n

There you have it, Spacing. By now your CSS code will look like this.

\n
div {\n    width: 25%;/*4 grid system*/\n    padding: 0 5px;/*spacing*/\n    box-sizing: border-box;/*removes the added with from padding*/\n    float: left; /*put them side by side*/\n}
\n

Problem

\n

Of course, there's no perfect code. Since we're using padding on both left and right. you'll see some spacing too on the left and right side of your website. For example, I used 5px padding. That means I will have a 5px offset on the left and right side of my screen. It doesn't align with my site anymore.

\n

Solution

\n

To tackle this problem we need to add a margin on the parent of our grid. Since my padding is 5px, I need to add a -5px margin on left and right to stretch it back to it's intended size. So our code will look like this now.

\n
parent {\n    margin: 0 -5px;\n}\nparent div {\n    width: 25%;/*4 grid system*/\n    padding: 0 5px;/*spacing*/\n    box-sizing: border-box;/*removes the added with from padding*/\n    float: left; /*put them side by side*/\n}
\n

 I'd like to also point out that if your parent has a width (which it doesn't really need because our grid css will add a width to the parent), the negative margins won't work. So, be careful.

\n

Another thing to watch out for, because we're using floats, we will also need to use a clearfix hack on our parent.

\n

Using the simple code we learned today will create all the grids you want.

\n

1 = 100%
\n2 = 50%
\n3 = 33.33%
\n4 = 25%
\n5 = 20%
\n6 = 16.66%
\n7 = 14.28%
\n8 = 12.5%
\n9 = 11.11%
\n10 = 10%

\n

and so on.

\n

See it on codepen.

\n

And this is where it ends. I hope this will help you easily create a grid in the near future. If you have any other tips, leave it in the comments and I'll be happy to try it out. Cheers.

\n","frontmatter":{"date":"March 16, 2015","updated_date":null,"description":null,"title":"CSS Responsive Grid, Re-imagined","tags":["CSS","Grid","Responsive"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/61bc9402fec623803bf04d21e948e84a/2a4de/desdev.png","srcSet":"/static/61bc9402fec623803bf04d21e948e84a/69585/desdev.png 200w,\n/static/61bc9402fec623803bf04d21e948e84a/497c6/desdev.png 400w,\n/static/61bc9402fec623803bf04d21e948e84a/2a4de/desdev.png 600w","sizes":"(max-width: 600px) 100vw, 600px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"What are they? cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is…","fields":{"slug":"/engineering/intro-curl-fsockopen/"},"html":"

What are they?

\n

cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is included in PHP and cURL is a library that can be installed on a server or utilized on many different platforms.

\n

Example:

\n

cURL-

\n
<!---->
\n

Fsock-

\n
<!--<?php\n$fp = fsockopen("www.example.com", 80, $errno, $errstr, 30);\nif (!$fp) {\n    echo "$errstr ($errno)\\n";\n} else {\n    $out = "GET / HTTP/1.1\\r\\n";\n    $out .= 'Host: www.example.com\\r\\n';\n    $out .= "Connection: Close\\r\\n\\r\\n";\n    fwrite($fp, $out);\n    while (!feof($fp)) {\n        echo fgets($fp, 128);\n    }\n    fclose($fp);\n}\n?>-->
\n

How to check if you have cURL enabled

\n

Run phpinfo() to see if cURL is enabled on your server then navigate to the cURL section. You will see the setting cURL support - enabled or disabled.

\n

Or use the php script below to create a curl_check.php file

\n
<!--<?php\n// Script to test if the cURL extension is installed on this server\n// Define function to test\nfunction _is_curl_installed() {\n    if (in_array('curl', get_loaded_extensions())) {\n        return true;\n    }\n    else {\n        return false;\n    }\n}\n// Output text to user based on test\nif (_is_curl_installed()) {\n    echo 'cURL is installed on this server';\n} else {\n    echo 'cURL is NOT installed on this server';\n}\n?>-->
\n

After saving this file as curl_check.php load it on a server installed with PHP and run the path yourpath/curl_check.php you will see a message shown that notifies you if cURL is enabled or disabled

\n

Check if fsockopen function exists

\n
<!---->
\n

Normally, by default your server will have cURL enabled and ready to use on your server. It is the most commonly used method to communicate to different types of servers. If you're ever having a problem communicating with a server run one of the above checks to verify your cURL and Fsock is working correctly.

\n","frontmatter":{"date":"March 09, 2015","updated_date":null,"description":null,"title":"An Intro to Curl & Fsockopen","tags":["curl","Fsock"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7fe25a24548797c9b1e2356441746e19/630fb/fsock-and-curl.png","srcSet":"/static/7fe25a24548797c9b1e2356441746e19/69585/fsock-and-curl.png 200w,\n/static/7fe25a24548797c9b1e2356441746e19/630fb/fsock-and-curl.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing…","fields":{"slug":"/engineering/enqueuing-scripts-wordpress/"},"html":"

In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing process for new WordPress developers.

\n

There are three different areas that a developer can enqueue scripts for; the first is the client side, the second is the admin side and the third is the login pages.

\n

Each of these areas uses a specific hook to enqueue scripts to use in that area. For example, if a script was enqueued using the login_enqueue_scripts hook that script would not be loaded in the admin area. This allows WordPress to load only the scripts needed for that specific section. Optimization!

\n

When you don’t enqueue scripts using these hooks and instead use the <script> tag, it can cause the script to be loaded every time you load the site, admin area or login page. This can cause conflicts with other scripts, plugins or themes. WordPress takes care of these problems when you use the hooks intended.

\n

An example of the three enqueuing hooks are below:

\n

wp_enqueue_scripts hook – Front End

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );\nadd_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
\n

admin_enqueue_scripts hook – Admin area

\n
function load_custom_wp_admin_style() {\n    wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );\n    wp_enqueue_style( 'custom_wp_admin_css' );\n}\nfunction my_enqueue($hook) {\n    if ( 'edit.php' != $hook ) {\n        return;\n    }\n    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );\n}\nadd_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );\nadd_action( 'admin_enqueue_scripts', 'my_enqueue' );
\n

login_enqueue_scripts hook – Login pages

\n
function themeslug_enqueue_style() {\n    wp_enqueue_style( 'core', 'style.css', false );\n}\nfunction themeslug_enqueue_script() {\n    wp_enqueue_script( 'my-js', 'filename.js', false );\n}\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_style', 10 );\nadd_action( 'login_enqueue_scripts', 'themeslug_enqueue_script', 1 );
\n

If you are calling the same script in many different areas you can register the script or stylesheet first and then use it when needed in your plugin. In the above examples you’ll notice the function being called is enqueuing a script or a style only and not registering a script or a style. When you register first it allows that script or style to be called in the area it was registered in when you enqueue it. Here’s an example of registering scripts first.

\n
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_scripts' );\nfunction my_plugin_admin_scripts() {\n    /* Register our script. */\n    wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );\n    wp_enqueue_script( 'my-plugin-script');\n}
\n

In the example above you can see first I have registered the script then used wp_enqueue_script to enqueue it. You don’t need to enqueue the script directly after registering as a practice, however after registering the script you can enqueue it on pages you require it. If you have registered the script or style using wp_enqueue_scripts it will only be available on the front end of your site and not the admin pages or the login pages.

\n","frontmatter":{"date":"March 02, 2015","updated_date":null,"description":null,"title":"Enqueuing Scripts in WordPress","tags":["WordPress","PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/1337250d37d50d7e6e06d9a2e5f59cbd/d8815/wordpress.png","srcSet":"/static/1337250d37d50d7e6e06d9a2e5f59cbd/69585/wordpress.png 200w,\n/static/1337250d37d50d7e6e06d9a2e5f59cbd/497c6/wordpress.png 400w,\n/static/1337250d37d50d7e6e06d9a2e5f59cbd/d8815/wordpress.png 750w","sizes":"(max-width: 750px) 100vw, 750px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"In this post I will show you how easy it is to implement Facebook social login to a web page using Facebook’s JavaScript SDK. The nice thing…","fields":{"slug":"/engineering/implement-facebook-social-login/"},"html":"

In this post I will show you how easy it is to implement Facebook social login to a web page using Facebook’s JavaScript SDK. The nice thing about Facebook social login is the great documentation and instructions already provided at  Facebook Login for the Web. There is also a code snippet that is provided to you by Facebook to implement their login system. I have gone ahead and customized this code and have provided a codepen here which I will explain.

\n

The first thing you’ll need to do is create a Facebook app since an app Id is required to implement login using Facebook. You can create a facebook app by going to  http://developers.facebook.com. You'll notice in the codepen nothing is displayed since I have not added a app Id. You'll need to remember to replace this placeholder with your own Facebook app Id once you have created your Facebook app.

\n

Next, we’ll implement login using Facebook. All we need to do is copy and paste the code provided to us by Facebook to create the Facebook social login and replace the placeholder with your own Facebook app id. I will be explaining the same code with my customization provided in the codepen below.

\n

Let's add the Facebook login interface. You'll want to place this code in the body section of your html code.

\n
<!--\n\n\n-->
\n

Next, you'll notice this section of code at the end of the JavaScript section. This code snippet loads the Facebook SDK JavaScript asynchronously. It also provides the JavaScript library which is used to render your Facebook login interface.

\n
// Load the SDK asynchronously\n(function(d, s, id) {\n    var js, fjs = d.getElementsByTagName(s)[0];\n    if (d.getElementById(id)) return;\n    js = d.createElement(s); js.id = id;\n    js.src = "//connect.facebook.net/en_US/sdk.js";\n    fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));
\n

Now we just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId : '{your-app-id}'. This function is just above loading JavaScript asynchronously.

\n
window.fbAsyncInit = function() {\n    FB.init({\n        appId : '{your-app-id}',\n        cookie : true, // enable cookies to allow the server to access the session\n        xfbml : true, // parse social plugins on this page\n        version : 'v2.1' // use version 2.1\n    });\n\n    // Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus().\n    // This function gets the state of the person visiting this page.\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n};
\n

Next we'll add the function that handles the response and alters the page contents based on the type of response. I have this function located at the very top of the scripts section.

\n
// This is called with the results from from FB.getLoginStatus().\nfunction statusChangeCallback(response) {\n    // The response object is returned with a status field that Let's the app know the current login status of the person.\n    if (response.status === 'connected') {\n        console.log('Welcome! Fetching your information.... ');\n        FB.api('/me', function(response) {\n            console.log('Successful login for: ' + response.name);\n            document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';\n        });\n    } else if (response.status === 'not_authorized') {\n        // The person is logged into Facebook, but not your app.\n        document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';\n    } else {\n       // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.\n       document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';\n    }\n}
\n

As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. You'll also notice the not_authorized status. When the login is not authorized, this function changed the html on your page to ask you to log in. But how does this function get used? In this next function this is handled when someone clicked on the Facebook button on the page. Notice the onlogin=\"checkLoginState(); in your body html code for the Facebook button.

\n
// This function is called when someone finishes with the Login Button.\nfunction checkLoginState() {\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n}
\n

Now if you save this page as index.html and open it in a browser you should see the Facebook Login button. You can use the code provided by facebook at the link listed above or you can used the codepen code that I have altered to make it a bit shorter for explanation.

\n

Facebook Page example

\n

\n If you have stored a GUID through the C# driver to mongoDB and now you want to run a query by GUID, you can't query directly because mongoDB doesn't recognize GUID so when we query through mongo shell no result will be returned. To use the power of mongo shell for querying data on mongo by GUID, you should follow these steps.

\n

1. Convert GUID data to Base64

\n

Convert you GUID data to base64 , you can use any online tool for this.

\n

So suppose your GUID is: 00112233-4455-6677-8899-aabbccddeeff

\n

Then the base 64 version will be: MyIRAFVEd2aImaq7zN3u/w==

\n

2. Query by BinData object in mongo shell

\n
db.Users.find({"useUniqueId": new BinData(3,"MyIRAFVEd2aImaq7zN3u/w==")}).limit(1)
\n

Actually BinData constructor takes 2 parameters:

\n

New BinData(subtype,data)

\n\n

mongoDB's C# driver stores data to mongo by converting it into binary data rather than string.

\n","frontmatter":{"date":"February 23, 2015","updated_date":null,"description":null,"title":"GUID Query Through Mongo Shell","tags":["Engineering","GUID","Mongo"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/ea7595df20b2f7c29ed276dc27b05c9b/630fb/mongo-db-guid.png","srcSet":"/static/ea7595df20b2f7c29ed276dc27b05c9b/69585/mongo-db-guid.png 200w,\n/static/ea7595df20b2f7c29ed276dc27b05c9b/630fb/mongo-db-guid.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience…","fields":{"slug":"/engineering/integrate-linkedin-social-login-website/"},"html":"

It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience for your user and also lets you obtain more information about your user. The most welcomed social platforms are Facebook, Twitter, LinkedIn and Google. In this article, we will cover how to integrate LinkedIn social login authentication into your website.

\n

Create a LinkedIn App

\n

Creating an app for the social platform is always the first step, no matter which platform you are working with. In this case, the created app will service the LinkedIn social login. Basically, you are creating a gate to let your user go through this gate and access the service, and in this gate, you can specify the permissions and the preferences you want to grant to your user. You can refer to the instructions here for clear instructions on how to create a LinkedIn social login app.

\n

Set your App

\n

After creating the app, you need to set the \"JavaScript API domain\" field for your app.  In that field, fill in your website URL. Here we have used http://localhost for this article.

\n

\n \n \n

\n

Implement the script in your html file

\n

Now you are ready to code! First, put this JavaScript code snippet inside your head tag:

\n
<!--<script type="text/javascript" src="http://platform.linkedin.com/in.js">\napi_key: your_api_key_goes_here\n-->
\n

You can find your API key inside your application, the first entry under OAuth Keys \"Consumer Key / API Key.\"  This script is used to load the LinkedIn script into your website, and it will not display anything on your page, at least not the frontend.

\n

\n \n

We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.

\n

Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.

\n

In Conclusion

\n

The proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.

\n

Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.

\n

From LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.

\n

Glossary

\n

Top-level site: It is the primary site a user has visited.

\n

First-party cookie: A cookie set by the top-level site.

\n

Third-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.

\n

References

\n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":300,"currentPage":51,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}