"I love Dev Community - DevDojo"

2022-05-04 21:53:47

Search⌘KLoginSignup?Home?Questions?Videos?Snippets?FunMore?Courses?Topics?Guides?eBooks?‍?‍?Users⭐Points?Badges?ScriptsPro Tools TailsWaveSaaS Adv.MarkdownXWordsmithGo Pro?SponsorsSell your side project.TinyAcquisitions.comJoin 56,158 other Developers as we Learn, Build, and Grow Together.Connect with fellow developers and gain access to tools that will help you build a profitable SaaS ?Sign Upbenlongo9807gabriellvs60chenbaoqian57c98022414schechterechurks821jeremy10andrewctrlaltdelberkekaratasfoxxcastorplewesjalenseals01social20Home-Developer Posts and TutorialsAnish De · 1 day agoAmazing preview images with Next.js and LQIP ModernImages take a long time to load and can have a disruptive impact on UX. Today we are going to be looking at creating preview images with a library called lqip-modern.What is LQIP?LQIP simp...1 Jothin kumar · 1 day agoTic Tac Toe ? with Python tkinter - part 2This tutorial is part of a series. Make sure to check out the previous tutorial, if you haven't already.In this tutorial, we will add a functionality to the Tic-Tac-Toe game: Player vs Comp... Dev Dojo · 2 days agoDevDojo Weekly - May 2022Happy May! Wow, can you believe that we are already in the 5th month of the year. Time is flying by in 2022, but good things are also on the horizon ? In this edition I will to share some ne... 6 Johnny · 2 days agoVue Lifecycle HooksLike other frameworks, Vue has a number of lifecycle hooks which allow us to attach code to specific events that occur while a Vue application is being created or used - for example, when th...4 Karthikeyan · 3 days agoHow to build a movie application using Next.js and Appwrite ? In this tutorial we are going to build a movie application using Next.js , Appwrite, tailwind css, Digital Ocean and deploy it to Vercel.Before going into coding. Let’s see a few details on...5 Abdul Maajid · 3 days agoERC20 vs ERC721 vs ERC 1155Ethereum is a technology that's home to digital money, global payments, and applications. Ethereum is an open-source, decentralized blockchain with EVM compatibility and smart contract funct... 1 Anish De · 3 days agoMaking a blog with Directus, MDX, and Next.js On-Demand ISRThere are many Headless CMSs out there and many other tools that let us make a blog easily and quickly. Today we look at building a blog with Directus and Next.js. We will use MDX to store o...3 Johnny · 5 days agoCheck if an Object Contains all Keys in Array in JavascriptSometimes in Javascript we have an object which we need to conform to a specific set of keys. This is possible through type enforcement in TypeScript, but if we want to do certain things if...5 Johnny · 6 days agoHow the TypeScript NonNullable Type WorksThe NonNullable type is a utility type in TypeScript which creates a new type, whilst removing all null or undefined elements. It lets us take existing types, and modify them so they are mor...3 Arnab Roy Chowdhury · 6 days ago13 JavaScript Testing Best Practices You Should KnowJavaScript allows complete freedom when it comes to developing web applications.Period! Using JavaScript provides enhanced functionality to your site and helps you adopt the latest web desig...1 Denislav Gavrilov · 6 days agoHow to make screenshots in Laravel with BrowsershotIntroductionBrowsershot is a software by Spatie that converts a webpage into an image or PDF by utilising a headless instance of Chrome. In this post, you will learn how to install it in yo... 6 Deeksha Agarwal · 6 days agoFinding Cross Browser Compatibility Issues in HTML and CSSCross browser compatibility bugs are inevitable for any web project irrespective of whatever platform they are using for development. And most importantly, they keep creeping in at every ite...1 TechvBlogs · 1 week agoCustom helper functions in Laravel Laravel provides us with many built-in helper functions that you can call anywhere within your application. They make your workflow convenient for working with arrays & objects, paths, s...3 Johnny · 1 week agoHow the TypeScript Parameters Type WorksThe TypeScript Parameters Type is used take the parameters or arguments of a function and create a new type based off them. It is quite useful when we know that the input of a Function confo...3 Bobby Iliev · 1 week agoBuilding an Order Tracking Demo App using AdonisJS Materialize and RedpandaIntroductionThis is a self-contained demo using Materialize to process orders and display the delivery status and coordinates in real-time.PrerequisitesBefore you get started, you need to...4 Himanshu Sheth · 1 week agoMost Complete MSTest Framework Tutorial Using .Net CoreWith the advent of programming languages like Python, Ruby on Rails, etc., there is thinking amongst the developer community that the C language is losing relevance. Strikingly, C is still c...2 Arnab Roy Chowdhury · 1 week ago21 Best React Component Libraries To Try In 2021If you are in IT, you must constantly upgrade your skills no matter what’s your role. If you are a web developer, you must know how web technologies are evolving and constantly changing. Rea...1 Dev Dojo · 1 week agoDevDojo Weekly - April 2022It's almost the end of April and it's time for another edition of DevDojo Weekly. In this edition I want to share some news about the state of DevDojo as well as announce last weeks post win...11 Shalini Baskaran · 1 week agoHow To Capture Screenshots In SeleniumCapturing screenshots is pivotal to realize whether your web-application is rendering seamlessly or not. If not, where is it failing? Traditionally, testers were accustomed to capturing scre... 4 Harita Ravindranath · 1 week agoHow To Perform Automation Testing With Cucumber And Nightwatch JS?One of the key features of the agile way of software development is the combination of DevOps and automation testing. Test automation speeds up the testing cycle, aids in detecting bugs at a...3 Posandu Mapa · 1 week agoCreate a SPA with PHPToday, we will create an SPA with PHP. Our output will look like this. (The GIF, a bit slow ?)Getting startedOur directory structure will be like this.?spa┣ ?about.php // A page┣ ?fo...4 Basharath · 1 week agoConvert text selection to image instantlyThere are various types of browser extensions that help to accomplish certain tasks very easily. We have already seen one such interesting chrome extension to copy text easily as never befo... 3 Madza · 1 week ago6 Useful Checklists Every Developer Should Know ??The product lifecycle often holds us accountable for so many things. Even if you think you are aware of everything, it is always a great practice to double-check, just to be sure.In this ar...4 Richa Kiran · 1 week agoTypedef in CIn C, we have an option to set any other name for a specific data type. For doing that we use a keyword called "typedef". In this article, I'll be explaining how typedef works and...3 HowToUbuntu · 1 week agoHow to make a loading screen animation using HTMLS, CSS, and JSIntroductionToday, I will teach you how to create a loading screen animation using HTMLS, CSS, and JS. This tutorial will contain all the code required for you to create the loading screen....4 Denislav Gavrilov · 1 week agoAWS or Azure: The 5-Criteria ChoiceAWS or Azure: Тhe 5-Criteria ChoiceDISCLAIMER: This document is a promotion of my work. I discuss the differences between AWS and Azure in my own experience, and what I like and dislike ab...6 Aayush Biswas · 1 week agoHow to add top loading bar to a NextJS ProjectNextJs Doesn't include a top loading bar by DefaultNextJs doesn't have a top loading bar but instead it has a loading icon with the vercel logo but that doesn't seems nice. Top loading bar...5 Johnny · 2 weeks agoFuture Javascript: New Array Methods Coming soonIn previous articles, I've covered that Javascript stores objects and arrays in heap storage. That means that an array is created once, and then any updates to it in the future will update t...4 Tina Hammar · 2 weeks agoAdding translations to Laravel Spark 3 "Plans"After buying an unlimited license of Laravel Spark v3, I discovered that it loads the subscription plans from a config file, which means that you don't have access to Laravels translation ma... 8 Johnny · 2 weeks agoFuture CSS: A first look at when and else statementsIn CSS, we make selections of different devices by using media queries. Media queries give us an easy way to select a devices based on numerous conditions, such as screen size, pixel density...5 Loading More Content Sort Home Feed By DefaultDefaultFeaturedLatestSignup TodaySignup SignupAlready have an account? You can login here.Weekly Top UsersGustavo Eufrazio122 points / weekAswini Kalyan106 points / weekKasim Ridwan105 points / weekAbishek R Srikaanth105 points / weekJothin kumar38 points / week Johnny38 points / weekAnish De32 points / weekKarthikeyan31 points / weekDev Dojo30 points / weekeBizneeds - Top Rated IT Firm30 points / weekLatest Questions How can i add Tiny MCE to a viewHow can I create Invoice functionality using Voyager bread? need help about Paddle - set up Paid Trial PlanHow to add a npm package in my blade view ? ! el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 }, }" x-on:close.stop="app.fullscreenModal = false" x-on:keydown.escape.window="app.fullscreenModal = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="app.fullscreenModal" class="fixed inset-x-0 top-0 z-50 flex items-center justify-center w-screen h-screen p-4 sm:p-8" style="display: none;"> ! el.hasAttribute('disabled')) }, firstFocusable() { return this.focusables()[0] }, lastFocusable() { return this.focusables().slice(-1)[0] }, nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() }, prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() }, nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) }, prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 }, }" x-on:close.stop="app.modal = false" x-on:keydown.escape.window="app.modal = false" x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()" x-on:keydown.shift.tab.prevent="prevFocusable().focus()" x-show="app.modal" class="fixed inset-x-0 top-0 z-50 flex items-center justify-center w-screen h-screen p-4 sm:p-8" style="display: none;"> Type Postand press enter to search for a specific postType Userand press enter to search for a specific userType Questionand press enter to search for a specific questionor, type a section to quickly jump to that pageNext, 0" style="display: none;"> ​ { if (value === true) { document.body.classList.add('overflow-hidden'); let loadFunctionality = setInterval(function(){ if(typeof tocFunctionality == 'function'){ loadPostFunctionality(); clearInterval(loadFunctionality); } }, 500); } else { document.body.classList.remove('overflow-hidden'); if(window.location.pathname != '/'){ returnBack(); } window.livewire.emit('removeContent'); removePostListeners(); document.getElementById('title').innerText = document.getElementById('title').dataset.title; } contentModalOpen = value; });" x-show="open" x-on:load-content="() => { let { link, itemId, type, title } = event.detail; if(type == 'tutorial' || type == 'article'){ if(itemId != id){ window.livewire.emit('showContentModal', { id: itemId }); } history.pushState(null, null, link); open=true; } else { window.location = link; } }" x-on:close-modal="open=false" id="content-modal" class="fixed inset-0 z-30 overflow-y-auto mt-15" x-cloak>