"I love Time to Hack - Frontend Programming in JavaScript, HTML & CSS ⚡️"

2022-09-26 13:41:17

HomeContactSearchSupportSubscribeLearn about HTML, CSS, and JavaScript Programming tricks to be more hacking FrontEnd or BackEnd or FullStack Developer / HackerDevOps⌛︎ 9 min readContinuous Deployment on DigitalOcean Droplets with Gitlab CI PipelinesContinuous Deployment for a custom project is hard. Let's see how to do Continuous Deployment on DigitalOcean Droplets with Gitlab CI PipelinesPankajJun 22, 2022 • 9 min readLast updated: 24 Aug 2022•9 min readdocker⌛︎ 2 min readDynamically configure Docker Image buildsDocker builds can not receive environment variables in the same way Container execution can. Let's see how you can pass values to adjust builds.PankajJun 2, 2022 • 2 min readLast updated: 24 Aug 2022•2 min readTypeScript⌛︎ 5 min readBenefits of using TS Generics in your Design SystemDesign Systems & TypeScript are a few of the common denominators in organizations for Product & Tech. Use Generics to have a better dev experiencePankajMay 23, 2022 • 5 min readLast updated: 24 Aug 2022•5 min readCSS3⌛︎ 4 min readCan I use hover on Touch Devices?Web dev supports multiple form factors with responsiveness. Let's see how NOT to handle touch devices & have better UX with pointer media queriesPankajMar 9, 2022 • 4 min read Last updated: 24 Aug 2022•4 min readdevelopment⌛︎ 2 min readIt's never too late to change strategyOne should always be thinking about the final outcome and the value it is going to bring, if it is not happening; some changes need to happen.PankajJan 10, 2022 • 2 min readLast updated: 11 Jan 2022•2 min readdocker⌛︎ 8 min readContainerization & Docker FundamentalsWhat if we ACTUALLY deliver our computer? Let's see how Containerization and Docker solve the "works on my computer" problem.PankajDec 29, 2021 • 8 min readLast updated: 24 Aug 2022•8 min readlinux⌛︎ 3 min readtree, get me directory size! Getting an understanding of how your drive is filled up is very important; especially on systems with no GUI. Let's see how the tree is helpful.PankajNov 15, 2021 • 3 min readLast updated: 15 Nov 2021•3 min readReactJS⌛︎ 3 min readWhy it is Better to spread the Reducer in FilesAmong multiple ways to arrange redux actions, action creators & reducers, one way is Single File Reducer. Here's why you should break it down?PankajAug 1, 2021 • 3 min readLast updated: 27 Oct 2021•3 min readJavaScript⌛︎ 3 min readWays to convert String to Number in JSConverting from one type to another is needed very often. Let's take a look at some of the ways to Typecast Strings to Number in JavaScriptPankajJun 13, 2021 • 3 min readLast updated: 13 Jun 2021•3 min readprogramming⌛︎ 2 min read3 Basic Tips for faster Code ReviewsMerge Requests are huge part of Code Collaboration. Let's se how you can make the Code Review of Merge Request painless for the reviewer.PankajApr 9, 2021 • 2 min readLast updated: 14 May 2021•2 min readJAMStack⌛︎ 4 min readWhen NOT to choose Next.js Next.js is powerful tool & has many use cases. Before deciding to use it for your next project; checkout cases when Next.js might not be best suited tool.PankajMar 22, 2021 • 4 min readLast updated: 22 Mar 2021•4 min readJAMStack⌛︎ 7 min readJAMStack: Showing Top GitHub Repos with Netlify FunctionsAPIs are important element of JAMStack. Let's build an API to show GitHub repos with Netlify Functions & integrate it in React+Tailwind UI with React QueryPankajFeb 24, 2021 • 7 min readLast updated: 10 Jan 2022•7 min readtools⌛︎ 4 min readWhy I chose Splitbee as replacement of Google AnalyticsGoogle Analytics has its pros & cons. With its concerns, I found Splitbee as GA replacement. It even replaces Google Optimize. Checkout all the reasons.PankajFeb 10, 2021 • 4 min readLast updated: 10 Feb 2021•4 min readwebpack⌛︎ 3 min readFixing WebpackChunkName for Dynamic ImportsAre the Webpack Magic Comments webpackChunkName not effective and working with Babel? See how to Fix it and Tips to avoid related problems.PankajJan 26, 2021 • 3 min readLast updated: 24 Aug 2022•3 min readHTML5⌛︎ 4 min readSubmitting Single Form to different Actions in HTML5Forms in HTML5 will allow you to submit data to different URLs without extra code. We can utilize Browser’s APIs to get more things done with less code.PankajJan 13, 2021 • 4 min readLast updated: 13 Jan 2021•4 min readReactJS⌛︎ 12 min readBuilding Fast Forms in React with HTML5 & ValidationsWhile making WebApps, Forms are required all the time and always need some fine tuning. Let's see how to Build Fast Forms in React with HTML5 & ValidationsPankajDec 15, 2020 • 12 min readLast updated: 8 Feb 2021•12 min readReactJS⌛︎ 2 min readWhere do you initialize state in React Component?A small thing to ask where to initialize the state. But in a large codebase, these decisions will improve your daily code efficiency. What do you prefer?PankajNov 4, 2020 • 2 min readLast updated: 11 Nov 2020•2 min readReactJS⌛︎ 4 min read5 Tips for Component Driven DevelopmentComponent-driven Development has taken the FrontEnd Development by storm. Here are some tips to help you with any Component Driven Development.PankajSep 19, 2020 • 4 min readLast updated: 23 Sep 2020•4 min readStatic Site⌛︎ 9 min readGetting started with Eleventy (11ty)JAMStack is Fast for Development & Delivery of Fast websites & Static Site Generation is one of the way. Eleventy (11ty) is easiest Static Site GeneratorPankajSep 11, 2020 • 9 min readLast updated: 3 Jan 2021•9 min readJavaScript⌛︎ 3 min readAre you using Trailing Commas in your JavaScript?In multi-line objects & arrays in JavaScript, Trailing Comma is can be very useful, being part of ES5 standard, see how it can help you in your JS AppsPankajSep 1, 2020 • 3 min readLast updated: 2 Sep 2020•3 min readfrontend⌛︎ 3 min readNow you can manage Aliases for FrontEnd Workflow in one placeAliases are very handy; be it in CLI or in FrontEnd development. But have you thought about troubles managing them? Here's how to do it in Frontend WorkflowPankajAug 26, 2020 • 3 min readLast updated: 4 Jul 2022•3 min readgithub⌛︎ 5 min readAdd Test Coverage Label with Github ActionsA good Testing setup will help you release with confidence & sleep with peace. Here's How to Add Test Coverage Label with GitHub ActionsPankajAug 20, 2020 • 5 min readLast updated: 19 Sep 2020•5 min readgithub⌛︎ 5 min readAutoPublish on GitHub Pages with Github actionsGitHub pages are a great to host Demos & Personal Sites. Github Actions is new CI/CD solution from Github. Let's publish on GH Pages with Github ActionsPankajAug 10, 2020 • 5 min readLast updated: 11 Aug 2020•5 min readReactJS⌛︎ 3 min readAnimating the Progress Percent Change in ReactVisual Feedback is very important in UI design in keeping user informed & engaged with their action. Animated Changing values of percentage is of those waysPankajJul 29, 2020 • 3 min readLast updated: 29 Jul 2020•3 min readReactJS⌛︎ 5 min readReactJS: A Simple Custom HookReact Hooks have changed the way we write components & has mentally pushed to write more Functional Components. Lets see how to make a Custom Hook in React.PankajJul 21, 2020 • 5 min readLast updated: 13 Sep 2020•5 min readTime to Hack © 2022Powered by GhostHey There! You have made it this far.Would you like to subscribe via email?Yes Please!I'm Good..notification { color: var(--darkgrey); position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); max-width: 320px; min-width: 300px; border: 5px solid rgb(108 189 233); background-color: #fff; padding: 0.75rem 1rem; z-index: 10000; border-radius: 0.75rem; transition: all ease 500ms; box-shadow: 0 0 25px 5px rgba(100, 100, 100, 0.45);}.notification-content p { margin-bottom: 0;}.notification.active {bottom: 10px;}.notification-content { margin-bottom: 0.5em;}.notification-footer button { margin: 0 0.25em; flex: 1 auto; border-radius: 5px; padding: 0.3rem 1rem; background: var(--blue); color: #fff; transition: all ease 200ms;}.notification-footer button#no { background: var(--whitegrey); color: var(--midgrey);}.notification-footer button#no:hover { transform: scale(0.95);}.notification-footer button#yes:hover { transform: scale(1.05); background: var(--pink);}.notification-footer { display: flex; flex-direction: row-reverse; margin: 0 -0.25em;}