What I learned today

You may have seen this question, center a div, or whatever, in interviews or other places. I am sure there are other approaches than I am sharing here, but I found these two cool ideas from multiple places (see refs at the end). These are not my original ideas so I will be sure to share where I learned these from:   Using display:flex  Make sure you know how flex works, but to do centering with flex, it's ridiculously simple: div .container { display : flex ; justify-content : center ; /* horizontal alignment */ align-items : center ; /* vertical alignment */ flex-direction : column ; /* since we are doing a vertical column */ padding : 1rem 3rem ; /* not related to centering */ }  Now everything inside <div class="container"> </div> will be centered in both directions! Using display:grid  You are so going to thank for me this one, you are welcome. This one is so simple it does not even need an explanation does it?   div .container {

 When do you use em and when do you use rem? If you have ever asked this, you are like me :) So welcome. Basically, to save you time here it is: - If you want your font-size relative to the container's font-size, use em - If you want your font-size relative to the 'root' (or html) element's font-size, use rem! If you just stop reading now that might be sufficient, but if you are more curious, go on. Example companion codepen: https://codepen.io/binodpanta/pen/RwLWRra Basically your page should ideally always have a default font-size specified for the root, such as  :root { font-size: 1em; } This typically becomes 16px default for the base font size. Now, if you use rems in your elements' styles you get a consistent scaling wrt this number! so if you do div.someclass { font-size: 0.5rem; } you are going to always get a nice scaled font size regardless of screen size. So all your fonts will scale relatively throughout the app!  If you had used 0.5em, your calculated

Sometimes you need a function that already 'captures' some information you don't want to repeat when calling it. For example, logging may require you to pass in a lot of contextual information for each call. Instead you can capture the common/unchanging contextual information in a function (using its clsoosure) then call the resulting function with less args (only those that are changing in each call site)   class AClass:   def __init__(self):     self.make_log_msg = lambda m: f"a={self.a}, b={self.b}, message={m}"  def do_something(self):     doStuff();     logger.info(self.make_log_msg('test message')) In the absence of the make_log_msg() function you would need to pass all of a,b,c into every logging function call as in self.make_log_msg(self.a, self.b, message) .  This is possible because make_log_msg returns a function (lambda function in this case) that already captures the values self.a and self.b in its closure at the time of creation. Note that th

Remote debugging with python and visual studio Code In terminal install debugpy into your environment with something like     python -m pip install debugpy Create a visual studio launch configuration and add following to it following (or just use vs code create configuraiton button to easily create it choose type Python and select from the list, 'Remote attach') { "name" : "Python: Remote Attach" , "type" : "python" , "request" : "attach" , "port" : 5678 , "host" : "localhost" , "pathMappings" : [{ "localRoot" : "${workspaceFolder}" , "remoteRoot" : "." }] }, Run this in the command line to start a debugging server with your script runner python3 -m debugpy --listen 1.2.3.4:5678 --wait-for-client Yourscript.py Now run the launch configuration from vs code to attach to this debugger

This is currently WIP, I will fill in more details but it's a good starting version that is still hopefully useful to the reader... Recently I worked on a project that involved scheduling a number of tasks in parallel in Node.js. Running mutiple tasks I used the await-the library to do this. https://github.com/olono/await-the/blob/master/lib/result.js There are multiple ways to solve this kind of problem. Mainly you have to understand the Node.js is a single threaded environment (See Event loop) and how callbacks operate with a library like async or await-the. Basically, here idea was that you write a function that has a callback as its last argument ```   const doTask = async (arg1, callback) {    const results = await doStuffWith(arg1) ;    callback(results); } ``` Then perform this action on multiple inputs in parallel such as by using the excellent async.mapLimit function if you want to limit how many tasks in parallel you want to to run   async.mapLi

This need is incredibly common and useful, and hopefully will save you a lot of time when doing server side calls from your UI application (or even non UI clients like NodeJS applications) Example here is to send a POST request to an endoint /api/item/new (which will create a new item in the database). We will just assume tbhe backend is already setup (it's not relevant to this article). All we need to know is that we can do a POST /api/item/new and send it form data with two pieces of info     name, filter So, if you have a node.js application (I was using Vue-cli generated project, but it does not matter), install 'axios' (a most popular tool to make server calls these days) npm i axios --save OR yarn add axios (my preferred method) Now, in your service JS file (which is generally when I keep all my api calls) do something like this createNew ( name , filter ) { let formData = new FormData (); formData . append ( "name" ,