If you're not familiar with Angular I'd highly recommend heading over to the Angular JS resource site and checking out what all the fuss is about. Once you've got a basic understanding of Angular and how to get it up and running this tutorial will show you some of the basic, but awesome features supported by Angular.
\nToday I'm going to be building out a roster for my fantasy football team. If that's not your cup of tea then by all means feel free to substitute the content for whatever floats your boat.
\nThere might not be an I in team, but there are certainly players, so before we do anything in the HTML we'll have to make all the necessary components in the controller. First up let's make an array of all the players we want to include (initially at least) on our team.
\nEvery player is a special little snowflake, and our player objects should reflect that! With this in mind we will make each player an object with his or her own properties like: name, position and team. Here's an example of what our array might look like.
\n$scope.players = [\n {name: "Tom Brady", position: "QB", team: "Patriots"},\n {name: "Tony Romo", position: "QB", team: "Cowboys"},\n {name: "Peyton Manning", position: "QB", team: "Broncos"},\n {name: "Rob Gronkowsi", position: "TE", team: "Patriots"},\n {name: "JJ Watt", position: "DE", team: "Texans"},\n {name: "Lavonte David", position: "LB", team: "Buccaneers"}\n];Now that we have our roster we can go back to the HTML and make use of Angular's ng-repeat directive. We put the ng-repeat on the element we want to be repeated, keeping in mind that all of its children will also get repeated.
\n<!--\n {{player.name}} - {{player.position}}\n-->Okay so if you're new to Angular there's a couple of things going on here. First like I said we've got the ng-repeat placed on the li (the thing we want repeated) which will create a new li for each player in the players array we defined earlier in the controller. Next up the data binding is being implemented here with each player name as well as position being used as the values for the list item.
\nWhile we're on the topic of data binding, let's throw this in just for fun. Pretty simple, it will calculate the length of your roster and keep it updated as any changes are made.
\n<!--You have {{players.length}} on your roster.-->Next let's add some search functionality to our list. Sounds like a lot of work, probably have to iterate over the array elements, match them to the argument being passed in and... just kidding. With Angular it's a breeze.
\n<!--\n...\n{{player.name}} - {{player.position}}\n-->Donezo.
\nLet's imagine one of our fantasy players isn't performing too well (ahem Peyton...) and we want to give him the boot (get it now?).
\nWe'll add a little delete button beside each of our players' names, and since we're doing it for each of them guess how we're going to implement it? That's right with ng-repeat we already have on the list items!
\n<!--{{player.name}} - {{player.position}}\n ×\n-->I'll also tack on a little button with an \"x\" as the content (as a side note, when you want to do this use × instead of \"x\" it looks much nicer). Then we'll attach an ng-click with a delete function where we pass in $index.
\n$index is a neat little feature available with certain Angular directives, and ng-repeat is one of them. It will be assigned the index value (starting at 0) of the position it holds within the array being used with the ng-repeat.
\nThat's all we need in the HTML, so now back in the controller we create a $scope function by the same name used in the HTML and give it a parameter of index. The body of the function is a single line which makes use of the array.splice method where we pass in the index of the item we want to delete, and then 1 to denote that it's only 1 item we want removed.
\n$scope.delete = function (index) {\n $scope.players.splice(index, 1);\n};Now since we just cut someone from the team, we've gotta find their replacement. Let's chuck a few text inputs in there, give them all a respective ng-model to bind with their value and finally another button with an ng-click but this time calling an addPlayer function.
\n<!--\n Name:\n \n Position:\n \n Team:\n \n Add Player\n-->This one's a lil' different from delete, but still super simple. Working from the inside out, we will create a new player object which gets the name, position and team properties from the ng-models on the HTML and then push that object to the players array. After that we clear those values just for some good housekeeping practice.
\n$scope.add = function () {\n $scope.players.push({\n name: $scope.new_name,\n position: $scope.new_position,\n team: $scope.new_team\n });\n $scope.new_name = "";\n $scope.new_position = "";\n $scope.new_team = "";\n};Now since this was all done purely on the front end, and didn't make use of cookies, localstorage, or sessionstorage none of this will persist (aka be saved). For that kind of support you'd need some sort of back end, which is beyond the scope of this article.
\nThis was a very rudimentary example of what's possible with Angular JS, so if this interested you at all please dig a little deeper and play around with Angular some more!
\nThat brings us to the end of this tutorial. Feel free to check out the finished (yet unstyled) product here on Codepen
\n","frontmatter":{"date":"January 12, 2016","updated_date":null,"description":null,"title":"Angular Roster Tutorial","tags":["Engineering","AngularJS","PlayersArray","Array","Search"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/2773860898be140904449814ad319431/ee604/roster-angularjs-1.png","srcSet":"/static/2773860898be140904449814ad319431/69585/roster-angularjs-1.png 200w,\n/static/2773860898be140904449814ad319431/497c6/roster-angularjs-1.png 400w,\n/static/2773860898be140904449814ad319431/ee604/roster-angularjs-1.png 800w,\n/static/2773860898be140904449814ad319431/40ffe/roster-angularjs-1.png 960w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"As a front-end developer, if you haven't heard about Promise in Javascript, well ... At least you have heard about it now! And it is truly…","fields":{"slug":"/engineering/how-to-promise/"},"html":"As a front-end developer, if you haven't heard about Promise in Javascript, well ...
\nAt least you have heard about it now! And it is truly amazing.
Promise is a the standard way of handling asynchronous operations, such as calling APIs. It is comprehensive but elegant, espeically with a series of Async operations and handling the errors from them.
\nIt has been widely supported by mordern browsers. But of course IE is not one of the modern ones, so do not forget to find a promise-polyfill for your IE users.
Can I use Promise
\nPolyfill for IE
In this blog I will cover the basic usages for Promise, let's get started.
\nA promise function would look like this
new Promise(function (resolve, reject) {\n var data = asyncCall(); // could be API calls\n if( data ) {\n resolve(data); // success\n } else {\n reject(data); // fail\n }\n});First we need to declare it is a `new` Promise, inside you can put your async calls and let promise know how to deal with the response with `resolve` and `reject`. You can treat `resolve` and `reject` as two callback functions, `resolve` when you are confirmed that you have got what you expect, and reject if anything bad happened.
\nHere is a brief example, Fiddle it here
\nvar aync1 = function() {\n return new Promise(function(resolve, reject){\n // Wait 1s and alert\n setTimeout(function(){\n resolve("Hello Promise");\n }, 1000);\n });\n}\n\naync1().then(function (resp) {\n alert(resp);\n});If something is going wrong, you want to catch and handle it, Fiddle it here.
\nvar aync2 = function() {\n return new Promise(function(resolve, reject){\n // Wait 2s and alert\n setTimeout(function(){\n // pretend we got something wrong.\n reject("error");\n }, 1000);\n });\n}\n \naync2().then(function (resp) {\n alert("This will not be called");\n}).catch(function(err){\n alert(err);\n});Here I have quickly demonstrated the basic usage of Promise, you may think \"Oh callbacks can do the same thing as well\". You are not wrong, but in next blog I will show the real power of Promise, thanks for reading.
\n","frontmatter":{"date":"January 05, 2016","updated_date":null,"description":null,"title":"How to Promise","tags":["JavaScript","Promise"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/05707517353767f5f43e5a285bd216f7/630fb/promise-300x300.png","srcSet":"/static/05707517353767f5f43e5a285bd216f7/69585/promise-300x300.png 200w,\n/static/05707517353767f5f43e5a285bd216f7/630fb/promise-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Solomon Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"When you work for a tech company in an office capacity, it feels like everyone around you is speaking another language. Which they are, most…","fields":{"slug":"/engineering/learning-how-to-code/"},"html":"When you work for a tech company in an office capacity, it feels like everyone around you is speaking another language. Which they are, most of their work exists in coding language. To feel more relevant, I signed up on codecademy.com and started working on their beginner courses (for free! you should try it!).
\nHere are some things I have learned about coding:
\nThere are some areas of knowledge that you don’t need to memorize, but having an understanding of what they do will be helpful in coding:
\nI hope that this list has contributed to your knowledge, and would encourage you to check online for available resources to expand (or begin) your abilities in coding.
\n","frontmatter":{"date":"December 29, 2015","updated_date":null,"description":null,"title":"Learning How to Code","tags":["Learning","Coding","Learning resources"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/26a66e05ab78493dc6d84d3afe0d8a82/630fb/begin-code-300x300.png","srcSet":"/static/26a66e05ab78493dc6d84d3afe0d8a82/69585/begin-code-300x300.png 200w,\n/static/26a66e05ab78493dc6d84d3afe0d8a82/630fb/begin-code-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Carling","github":null,"avatar":null}}}},{"node":{"excerpt":"Delete A Node Click to View the Orginal Question To remove the given node，which means whoever is asking the value for this node should get…","fields":{"slug":"/engineering/delete-a-node-is-same-tree-move-zeroes/"},"html":"Click to View the Orginal Question
\nTo remove the given node，which means whoever is asking the value for this node should get the value of the next node. Plus, the next node of this removing one should be the next next node.
\nIn diagram, with the following node list, we want to remove node 2.
\n1 -> 2 -> 3 -> 4
\nWe update original Node 2 to Node 3 and skip the original Node 3, which gives out the list after removing node 2.
\n1 -> 3 ------> 4
\n/**\n* Definition for singly-linked list.\n* function ListNode(val) {\n* this.val = val;\n* this.next = null;\n* }\n*/\n/**\n* @param {ListNode} node\n* @return {void} Do not return anything, modify node in-place instead.\n*/\nvar deleteNode = function(node) {\n node.val = node.next.val;\n node.next = node.next.next;\n};Click to View the Original Question
\nNote: My solution is not efficient enough based on the performance, but I think it's fairly clean.
\nI use recursion to solve the problem, first to define the basic cases, and recursively loop through both trees from left to right. If it hits one false, the whole result will be false.
/**\n* Definition for a binary tree node.\n* function TreeNode(val) {\n* this.val = val;\n* this.left = this.right = null;\n* }\n*/\n/**\n* @param {TreeNode} p\n* @param {TreeNode} q\n* @return {boolean}\n*/\n \nvar isSameTree = function(p, q) {\n if( p === q ) return true;\n if(!p || !q || p.val !== q.val) return false;\n return isSameTree(p.left, q.left) ? isSameTree(p.right, q.right) : false;\n};Click to View the Original Question
\nHere I have create two indices one called z to index the position for zeroes, another is i to loop through the nums array. They both increment by one when they see a non-zero value, but when it is zero, z stays at position and get ready to swap the position with next non-zero value i meets. By keep doing it, it will fill a consecutive row of zeroes, till the end.
<!--/**\n* @param {number[]} nums\n* @return {void} Do not return anything, modify nums in-place instead.\n*/\nvar moveZeroes = function(nums) {\n var z = 0;\n for(var i = 0; i What's one thing virtually every website has? If you said navigation (you did) you're absolutely right! Go ahead and enjoy that wonderful feeling of being right for a moment... and now that we're feeling like a champ, let's get to it.
\nNavigation buttons, depending on your site of course, are likely going to be some of the most commonly used items on your web site. Typically they're found near the top so people can quickly and easily... well navigate of course! With this in mind it's worth it to make sure your navigation is both visually appealing and provides an enjoyable user experience.
\nA common featured for navigation menus is the drop down functionality for displaying sub options. This can be achieved through Javascript if you really feel like it (you don't), but why bother with that when CSS3 offers a much more elegant solution!
\nFirst we start out building a simple un-ordered list, and give it some list items each of which contain a link that point nowhere in particular.
\n
By the way, if you're on Sublime Text there's a great shortcut for making lists: ul>li+li+li+li and then \"Tab\" creates an un-ordered list with 4 list item tags inside of it. For more excellent Sublime tips check out my amigo Lucius' blog post on the topic.
\nNow that we've got the bare bones, let's give this skeleton a spine. We're now going to put another ul inside of those list items, and once again more list items inside of those lists which contain, you guessed it, links to nowhere.
\n
That's all the HTML we have to write for this example, so now we move on to the CSS.
\nThe first few things on the ul's and links are just to remove some default styles that I don't care for.
\nThe first actually relevant style is the inline-block display property on the list items to make them spread out horizontally. If you're unfamiliar with using inline-block for positioning I highly recommend reading up on it because it's an awesome alternative to floats or sometimes even flex-box. Next up we give these list items a relative position, so that the later absolutely positioned sub menu will use this as a reference point.
\nTo quote every MTV cribs star ever, here's where the magic happens. We put a max-height (that is at least as tall as all of the list items on the sub menu) and a height of auto on the sub menu. Note the ul li:hover, meaning these styles only apply when the first level of list items are hovered over. This might seem weird now, but it'll hopefully make sense with the styles we make use of in a bit.
\n
Next up we just give the links some padding, which is highly preferable to giving the list item padding because then you can end up with a small hitbox for the actual link and a bunch of dead space around it. Only other thing to note here is the display block on the link which is required for the absolute positioning used later.
\nThe .sub-menu styles are pretty basic, just give it a position of absolute and then top: 100%, left: 0 and width: 100% to make it sit flush below the first level of list items. Finally throw on a transition to really allow the animation to shine, and fine tune the timing if you'd like.
\nStill on the .sub-menu we give it a max-height of 0 and overflow: hidden. What this does is it hides the element from our view, similar to display:none or visibility:hidden... but for our animation we have to do it this way!
\nLastly we give the sub menu list items and links a display of block and some colors because pretty.
\nThat's it, you've now got a simple dropdown navigation with a neat little animation! You can add a height of 0 to the ul .sub-menu as well for a slightly different effect, or play around with the transition time and effect. Much to the same effect, increasing the value of the max-height on the sub menu hover will have an effect on the time it takes the dropdowns to make it to the end.
\n\n","frontmatter":{"date":"December 15, 2015","updated_date":null,"description":null,"title":"CSS/HTML Animated Dropdown Navigation","tags":["HTML","CSS","UI","CSS Animation"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/501f7fa9187224569eb6e51827f87931/630fb/drop-anim-300x300.png","srcSet":"/static/501f7fa9187224569eb6e51827f87931/69585/drop-anim-300x300.png 200w,\n/static/501f7fa9187224569eb6e51827f87931/630fb/drop-anim-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress…","fields":{"slug":"/engineering/part-2-creating-a-custom-login-form/"},"html":"In this tutorial I will demonstrate how to build a custom login form scratch. This time instead of using the default function call Wordpress provides us, we will create this login form and the styling from scratch, making it a very customized form. I will be providing the CSS I am using, however you may style this however you wish.
\nThis is what WordPress gives us out of the box.. Boring, right?
\nI am going to show this part once again because it is probably the easiest to implement for beginners. I covered this in Part 1, but we'll go through it again just in case you're skipping ahead
\nTo start our page theme you will need to do the following
\n1. Install WordPress\n2. Navigate to your wp-content/themes folder and choose a theme to edit or install a new one\n3. create a file called page-login-custom.php in the theme directory (Notice we are now making a new Page Theme)\n4. Next open that file with a text editor of your choosing and add the following at the top of the php file
\n-->
\nTo initialize this page template make sure to activate the theme you've selected and then navigate to a page or post. On the right hand side of your page/post editor you should now see a dropdown available for template. Change your template to Login Custom and that will attach that page theme to this page/post.
\nNow for the custom code. Below I have provided an example of some code that I have customized to make my custom login form.
\n<form method="post" action="" class="wp-user-form">\n\n:\n<input type="text" name="log" value="" size="20" id="user_login" tabindex="11" />\n\n:\n\nRemember me\n\n<input type="submit" name="user-submit" value="" tabindex="14" class="user-submit" />\n<input type="hidden" name="redirect_to" value="" />Let's take a look at that custom form
\nTo handle the Login Form response use the exact same method we used in part 1. Remember to place that function within your functions.php file within your theme unless you're building a plugin.
\nIn this example we have built a custom WordPress login form that you could customize and style to your desire. In the next section I will be demonstrating how to build a lost password form that is fully customized. Our custom lost password form will send an email to the user as well as handle creating a new password for the user.
\n","frontmatter":{"date":"December 08, 2015","updated_date":null,"description":null,"title":"Part 2 - Creating a Custom Login Form","tags":["Engineering","Login"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/3e9f0e12bae5ff4eea3aa1dae7083c47/6d161/cust-login-2-150x150.png","srcSet":"/static/3e9f0e12bae5ff4eea3aa1dae7083c47/6d161/cust-login-2-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe 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.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom 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.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-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.