![\"snippet-demo\"](\"/3e21aab686b29a54a248ccd545aca465/snippet-demo.gif\")
Click to View Original Question
\nThis question is very easy once you figure out the trick behind the game.\nSince each time you can only pick 3 stones at most, if there are 4 stones originally on the table, no matter how many you take ... your hopefully non-stupid friend can easily beat you. The same logic also applies when the number of stones is more than 4.
\n/**\n* @param {number} n\n* @return {boolean}\n*/\nvar canWinNim = function(n) {\n return n % 4 === 0 ? false : true;\n};2. Add Digits
\nClick to View Original Question
\nThis is a tricky question, the key is trying to find the repetitive pattern of the Digits Sum. If you can't get the pattern by observation then we can do some math to find the pattern.
\nSo assume we have a 4 digit number \"abcd\" or 1234, and we want to find out the sum of the digits which in expression is:
\nvar digitSum = a + b + c + d
\nWe still can't figure out the answer from this alone, so we need to find something else to help us to get the value. Then we can consider the actual value of \"abcd\" = 1000a + 100b + 10c + d.
\n- If you're familiar with Ring Theory (pretty sure it's Ring Theory.. I could be wrong..) then perfect! Under Ring 9, the actual value of abcd === a + b + c + d.\n- And if you don't know about Ring Theory, think of this as getting the remainder of \"abcd\" divided by 9
\n> (1000a + 100b + 10c + d) % 9 => (999a + a + 99b + b + 9c + c + d) % 9 => a + b + c + d
\nSo whatever the reminder is equals to the sum of the digits and that is more than enough information to solve the question.
\nBe careful with the number 0 !!
\n/**\n* @param {number} num\n* @return {number}\n*/\nvar addDigits = function(num) {\n if (num === 0) return num;\n return num % 9 === 0 ? 9 : num % 9;\n};3. Maximum Depth of Binary Tree
\nClick to View Original Question
\nThis is very typical of recursion problems, and recursion is always hard to explain in words
\n(╯‵□′)╯︵┻━┻
\nRegardless I will try my very best to describe it.
\n1. You have a tree node, and check if it is an empty tree, if so return 0\n2. If it is not empty, use recursion to find the value\n3. The recursion will start with the left node of root, and iterate through the tree, and keep checking the depth of each node till reaching out to the leaves. Each node (small root) records its maximum depth value by a record count called \"\"currentLength\"\".\n4. Until the whole tree is traversed, the root will compare its leftLength and rightLength and return the answer!
\n rightLength ? leftLength : rightLength;\n return rootLength;\n}-->As a preface to this article: preprocessors can be used for a variety of file types, but this article is going to focus solely on CSS preprocessors. Additonally I'm going to try and avoid my personal bias and give a very generic description of CSS preprocessors rather than my preferred preprocessor.
\nFirst off what is a preprocessor? To give you a simple analogy think of speaking with someone, in a language you understand, who has a strong accent or is speaking in a different dialect. They're technically speaking the same language as you, but actually understanding what they're saying can be next to impossible.
\nIn the context of CSS, the \"normal\" or unaccented language would be CSS and the accented version would be the preprocessor! What this means in practice is that you're writing out expressions that resemble standard CSS, but with some very distinct differences with regards to its syntax.
\nAs with regular spoken language, there's not a whole lot we can do with something we can't understand. Luckily there are translators, and the same is true of preprocessors. The preprocessor code can be processed (there are a number of different ways to accomplish this), and then out pops an understandable standard-syntax CSS file ready to be used.
\nNow why would we want to write CSS in some weird way you might ask? An excellent question! Because our nonsense can be translated into regular CSS, this allows us to write some very robust and even dynamic CSS expressions.
\nWith preprocessors we've got a bundle of features now available to be used along with all the standard CSS rules we're accustomed to writing.
\nTo name a few features supported by preprocessors we've got: functions, mixins, math, variables, operators, conditionals, iteration and more to help you be more organized and write less overall.
\nVariables increase your maintainability drastically by making it so you only have to change a value in one place to affect it everywhere it was used. Imagine for example you want to add a Halloween theme to your site's colors.
\n.elementOne {\n background-color: orange;\n}\n.elementOne p {\n color: black;\n}\n.elementTwo {\n background-color: orange;\n}\nh3 {\n color: black;\n}\na:hover {\n color:orange;\n}Changing them back would require you to go and change each instance of black or orange. However; with variables you can do something like this.
\n$theme-color-1: orange;\n$theme-color-2: black;\n \n.elementOne {\n background-color: $theme-color-1;\n}\n.elementOne p {\n color: $theme-color-2;\n}\n.elementTwo {\n background-color: $theme-color-1;\n}\nh3 {\n color: $theme-color-2;\n}\na:hover {\n color: $theme-color-1;\n}Define the value of the variable in one place, and everywhere it gets used will be a reference to that value. Want to change all instances of black back to grey? Just change the variable definition and you're done.
\nAnother one of the biggest features would be functions. With these you can set up one well written function definition and then sit back and let it do all the heavy lifting for you!
\nFunctions combined with math, variables, iteration, and conditionals allows you to write some very dynamic style rules. Think of sprite sheets where the value of the background position is being incremented with each statement. Instead of writing out each one by hand, make a function that uses math and iteration to change the background position.
\nThat's a very simple example, but I've seen some truly impressive and complicated designs created with the use of functions!
\nOne of my favorite features of preprocessors are the new selectors. The parent reference (&) allows you to group your rules so that everything pertaining to a specific element can be grouped together nicely.
\n.someElement {\n some-rule: some-value;\n &:hover {\n color: some-color;\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement:hover {\n color: some-color;\n}The parent selector takes whatever follows it immediately and tacks it on to the parent that it is nested under. In this case hover will be appended to .someElement. Another great one to check out is the root reference!
\nCSS's default format is ugly as sin. An endless tide of barely indented rules, hopefully organized in some meaningful way. With CSS preprocessors nesting is an awesome feature that helps your rules become more intuitive/logically grouped and increases readability. Nesting can give your CSS a much more distinct visual hierarchy not unlike HTML.
\n.someElement {\n some-rule: some-value;\n .someOtherElement {\n some-rule: another-value\n }\n}Compiles to...
\n.someElement {\n some-rule: some-value;\n}\n.someElement .someOtherElement {\n some-rule: another-value;\n}Full disclosure, your resulting CSS file will still likely look like someone dropped their bowl of Alphaghetti in their bowl of Alphabits and then threw that bowl at a wall. However; the file you actually work in will be considerably prettier, and that's all we care about.
\nSome people have beef with preprocessors because of over done selectors which are a result of going a little too hard with nesting. An easy way to avoid this is by limiting your nesting to 3 levels deep. Any further than that gets pretty ugly, but hey I'm not your supervisor... if you feel it's necessary then you do what you gotta do.
\nNow depending on how you choose to have your preprocessor code processed these features may or may not be more/less accessible. That being said I still feel they are worth mentioning.
\nAuto updating the page you're working on is a small perk but I remember being quite happy to find out I could just save my project and not have to spam F5 like my little sister trying to buy front row Justin Bieber tickets online. Just save and it will update your project automatically.
\nAnother one is vendor prefixes. There are a handful of ways to stop writing these things out by hand each time. Whether it's via mixins, functions or a built in feature of the processor itself you can avoid writing out these dreadfully monotonous prefixes for good.
\nAt first it might seem like a bunch of new stuff you have to learn and implement... but really if you already know CSS you're over halfway there. All you need to do is learn the specific syntax and familiarize yourself with the new features available to you with the preprocessor of your choice. It's a gentle learning curve with a surplus of benefits to integrate preprocessors into your workflow.
\nThis article is by no means all encompassing, but rather a sampler to create enough interest to try it out and learn more about preprocessors.
\nOn that note there are resources for comparing the preprocessors as well as trying them online. Each one has its own perks so try 'em out and find the one that fits your style!
\n","frontmatter":{"date":"November 17, 2015","updated_date":null,"description":null,"title":"The truth about CSS preprocessors and how they can help you","tags":["CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/06a5f244323a7617c371dd411e68c861/6d161/desdev-150x150.png","srcSet":"/static/06a5f244323a7617c371dd411e68c861/6d161/desdev-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Zakary Hughes","github":null,"avatar":null}}}},{"node":{"excerpt":"In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks…","fields":{"slug":"/engineering/beginners-guide-for-sublime-text-3-part-2/"},"html":"In this blog, I will cover some of my favorite Sublime features. Use of these plugins will dramatically reduce the amount of tedious tasks you have to perform, and make your worktime really fun. I will start with some of the most basic features that come with fresh installation of Sublime. There are lots of good tutorials on Sublime shortcuts and plugins on the internet, but I feel there should be more about these fundamental features. I have seen many people who are familiar with the plugins but not with these cool built-in features. In this article we will be introducing \"Snippets\", \"Project\" and \"Macros\".
\nHere we go:
\n
Back when i introduced Sublime editor to my friends,\"Snippets\" was among the first few features which really intrigued them. To give a quick peek what a snippet looks like:
\nThis is definitely the feature you will use the most! To start using snippets, you can either create your own snippets according to your needs or download some ready-made snippets created by others to fulfill some generic coding needs. Like the one I demonstrated, it is pre-made from a plugin called Html Page Snippets, and command docjq will create a boiler template for a Html page that contains bootstrap and jQuery.
To create your own snippet, go to \"Tools\" => \"New Snippet\", an interface to create your own snippet will pop up, it would look something like this:
\nHello, ${1:this} is a ${2:snippet}.Note: The dollar sign \"$\" allows you to use tab key to jump between, so set it wisely!
\nNow save it, but keep in mind putting it in the correct location is important!
\nIf you can not find it, go to \"Sublime\" - > \"Preferences\" -> \"Browse Packages\", and create a folder called \"User\" if there isn't one already, and save it there.
\nUsing \"Project\" feature to organize your projects is super easy and handy. It saves a lot of time that you'd normally waste finding different folders and then dragging and dropping to your Sublime each time. Additionally, it saves your previous location so you can just pick up where you left off. Let's see a quick demo:
\nSaving and using your projects is very straightforward.
\nThen go to the menu, click \"Project\" -> \"Save Project As\"
\nThat's it! You're done! Super easy right?
\n![\"without-macro\"](\"/e8a218bdc92e2c8c118faeb6fec384e0/without-macro.gif\")
Do you always feel frustrated by repeating the same tedious task again & again? Hmm... at least that's how I feel when I need to covert a vertical line of data into an array. Tasks like these are pretty common when you need to copy a line of data from spreadsheets. Using shortcuts, the best way I can come up with to accomplish this would be like so:
\nIt takes about 8 shortcuts to finish each process, that's including the first paste action and then adding a space character after each comma. Imagine having to do this for each line of a table, and for every single spreadsheet you have to work on. It would be hundreds of shortcuts you need to press and each time you are just repeating the exact same sequence of keys.
\nStop your macro Similar to other Sublime tools, it will be saved with an extension called \".sublime-macro\", after it gets saved you will be able to find it in your Macro User List. I hope you had fun and learned something new about Sublime. Next time we will cover some really good packages/plugins that you should consider using to make your life and work even simpler.\nHappy coding!!! In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK. 1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page: 2. Include the LoginRadius Interface Javascript and HTML5 SDK reference: 3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating. 4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup: 5. Include the JavaScript callback script to handle a successful authentication and display the profile data. Full Example: Almost every active website worldwide uses jQuery, you can check stats here , but using it without optimization might make the DOM very slow. The same goes for other javascript libraries, such as SizzleJS. To ensure the performance of your DOM, you have to follow some best practices for it. In this article I am going to list down some of the most critical factors that you need to watch out. Even though this not a complete list; taking care of these will help you optimize those jQuery Selector. Whenever you apply any selector in jQuery or SizzleJS, the selector engine goes through the whole DOM to find the specified element. For example, if you use the code below, it will go through the whole DOM twice in order to find \".myClass\" selector. But instead of that, if you make all the methods in a chained format like this. It will only try to find that class once. Or if you want to use this element in other places; you can do so by doing it in this way. In both of these cases, the selector will be executed only once. Some selectors are very slow to traverse and passing them again and again will make your DOM very slow. Read on the next point to understand, how the type of selector affects performance. Selector's type affects the performance of your site. SizzleJS is a smart selector engine that also uses native js APIs for finding specific element. This is the main reason why ID selector and tag selector perform faster than others. But, if you prefer using jQuery, it’s pretty much the same. Modern browsers also have an API to find an element by class name but, let’s just focus on jQuery and SizzleJS. You can verify performance. In some exceptional cases, the selection of those tags does not matter; It’s all in the combination of the selectors. Because, it affects the performance of your site, let's discuss this on next point. If you have the combination of selectors, then the sequence of selectors matter for optimization. For example: The same code can be written as: Both of these variant represent the same thing but in the term of performance, second one is better. The reason for that is because in the first code, Sizzle will go through the DOM 3 times to find #someId, div, and .someClass. In the second one, the selector engine will go through the DOM again but, this time, it’ll only look for #someId and then find the rest inside that element without going through the DOM again. See how this will affect performance. Sizzle executes selector from right to left so it will definitely improve performance if applied in right except left. Unoptimized code: Optimized code: If you don’t see the difference, find the div and td. When you have a context, or any level of parent, then you can select an element inside that parent. It will perform better this way than selecting it directly. Because, in this case, the selector engine goes through the DOM once to find the parent. For example, assuming you are trying to find “.child” class: Is slower than You can also specify context by following syntax The selector engine always checks every selector you have specified and it might traverse slowly. That being said, always make sure to specify minimum selectors in order to maintain the performance. For example, you are trying to find “.myClass” using both of these code variants, Is slower than The .children() tag is quicker than .find() In case, you are trying to find a children element, it is recommended to use .children() instead of .find(). Using .find() will tell jQuery to look on every level of children, while .children() will find only the first level children. Therefore .children() is faster than .find(). For example, you are trying to find “.child” inside $parent and it is the first level children of the $parent. Is slower than Use minimum DOM append DOM manipulation is very heavy so always try to ignore or minimize using it. For example, by using the code below, it will make the process sluggish because you didn’t apply any selector caching. Resulting in going through the DOM ten times and appending an element. But instead of using the above code, using the code below will solve the whole issue of appending and traversal. Not only that, it will merge the 10 times manipulation of DOM into a single call. All the tips I have mentioned above is highly dependant on your requirement but one thing is for sure; Optimization will definitely improve your process. ‘SizzleJS’ is most the powerful and quick element selector. But, without writing optimized code you can’t prevent the DOM from freezing. With that being said, jQuery is awesome but without optimized code it can get more DOM freezes and frustrate your users. I hope this help you optimize your element selecting. Thank you and have a great coding. Hi guys! When you write test cases, do you face the problem of sharing your test cases with your team members or having to use multiple colors for test cases? Definition Advantages of using test cases in excel sheets Standard format of Test Cases Test Case Id: This field is defined by what type of system we are testing. Below are the standard rules: In this way we can maintain all the test case IDs and if in the future we can get any requirement or change logs then easily add or change the test case using the following standard rules without changing the test case IDs of previously written test cases. Note: Test Case Id always uses capital letters. Here I have explained a very general format, this will cover almost all the scenarios but we can not assure that all the requirements have been covered, you can proceed the following way to cover all requirements. Knowing that all the Requirements have been covered Traceability Matrix is a document which provides linking between the requirements and the product which we have developed. Summary :-\nThis section contains a summary of requirements like 1.1 Item: This field contains short descriptions of the items which will be tested. A certain action to be performed before execution steps are performed. Prerequisites should be satisfied before the test case execution starts. 1.5 Change Prerequisites: Changes that were not necessary before but now are necessary for the system. Traceability Matrix : Traceability Matrix covers all the product requirements.We can say that it is a document which maps and traces requirements with test cases. Prime fields of this traceability matrix are 2.1 Requirement Id: This field identifies all the testable requirements. As per the image below: \n
\n
\nTo Be Continued ..
\n
\n<!--\n\n-->
\n<!--\nvar options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n $ui = LoginRadius_SocialLogin.lr_login_settings;\n $ui.interfacesize = "";\n $ui.apikey = "";\n $ui.callback="";\n $ui.lrinterfacecontainer ="interfacecontainerdiv";\n LoginRadius_SocialLogin.init(options);\n});\n-->
\n<!--Login\n\n \n\n -->
\nfunction Login(){\n $( "#dialog" ).dialog();\n LoginRadius_SocialLogin.init(options);\n}
\nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n LoginRadiusSDK.getUserprofile( function( data) {\n $( "#dialog" ).dialog("close");\n document.getElementById("profile").innerHTML = JSON.stringify(data);\n });\n}
\n","frontmatter":{"date":"November 09, 2015","updated_date":null,"description":null,"title":"Displaying the LoginRadius interface in a pop-up","tags":["HTML","Login","UI","LoginRadius Interface"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/af7b348bc73adfcd737b8df292359566/6d161/simplepop-150x150.png","srcSet":"/static/af7b348bc73adfcd737b8df292359566/6d161/simplepop-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Almost every active website worldwide uses jQuery, you can check stats here , but using it without optimization might make the DOM very slow…","fields":{"slug":"/engineering/optimize-jquery-sizzle-element-selector/"},"html":"<!--\n\n\n\n\n var options={};\noptions.login=true;\nLoginRadius_SocialLogin.util.ready(function () {\n$ui = LoginRadius_SocialLogin.lr_login_settings;\n$ui.interfacesize = "";\n$ui.apikey = "";\n$ui.callback="";\n$ui.lrinterfacecontainer ="interfacecontainerdiv";\nLoginRadius_SocialLogin.init(options); }); \n\n\n \nfunction Login(){\n $( "#dialog" ).dialog();\n LoginRadius_SocialLogin.init(options);\n}\n \nLoginRadiusSDK.setLoginCallback(Successfullylogin);\nfunction Successfullylogin(){\n LoginRadiusSDK.getUserprofile( function( data) {\n $( "#dialog" ).dialog("close");\n document.getElementById("profile").innerHTML = JSON.stringify(data);\n });\n}\n \nLogin\n \n\n \n-->Let's start!
\nAlways cache your selector
\n
\n$(".myClass").show();\n\n$(".myClass").addClass("anotherClass");
\n$(".myClass").show().addClass("anotherClass");
\nvar myElem = $(".myClass");\n\nmyElem.show();\n\nmyElem.addClass("anotherCLass");Prioritizing selectors based on their performance
\n\n
\nSelecting ID selector first and then other ones
\n
\n$("#someId div .someClass");
\n$("#someId").find("div .someClass");Being more specific in right hand side instead of left hand side
\n
\n$( "div.myclass .myChildClass" );
\n$( ".myclass td.myChildClass" );Selection inside a parent always improves performance
\n
\n$(".child");
\nvar parent = $("#parent");\n\nparent.find(".child").show();
\n$(".child", parent).show();Excessive selector slows down your query
\n
\n$("#div div span.myClass");
\n$("#div").find(".myClass");\n
\nparent.find(".child");
\nparent.children(".child").show();\n
\nfor( var i = 0; i < 10; i++) {\n $(".myClass").append("");\n}
\nvar myClassInnerHtml = "";\nfor( var i = 0; i < 10; i++ ){\n myClassInnerHtml += "";\n}\n$(".myClass").append(myClassInnerHtml);
\nI have a solution for these problems that is to maintain your test cases in an excel sheet.
\nTest cases are the part of testing by which a product can be tested properly according to a set of requirements.\n
\n
\nSome common fields that are used in test case writing are: \n
\n\n
\n\n
\n\n
\n
\nTo know that all the requirements have been covered, you need to maintain a Traceability Matrix documentation. Let's take a look on how to create this document.
\nTraceability Matrix can be divided into 2 parts:-\n
\n
\n1.2 Product Name: It contains the product name which you want to test.
\n1.3 Product Version: It contains the product version which you want to test.
\n1.4 Prerequisites: Prerequisites are the requirement of a system which are
\nneeded before we start testing. Prerequisites could be:
\n1.6 Exit Criteria: This field contains the requirements that must be fulfilled
\nin order to announce the completion of testing.
\n1.7 Test Summary: This field contains the status of the product: how many test
\ncases are passed, how many are failed, how many are on hold or how many are Invalid etc. \n
\n
\n2.2 Requirement Description: This field contains the short
\ndescription of requirements.
\n2.3 Test Case Id: According to requirements description which test case id is
\ncovered.
\n2.4 Status: Mention here the status of test cases such as passed, failed, on hold or
\ninvalid.