DEV Community: Dev Write Ups

320+ free resources for learning fullstack, frontend and backend

Dev Write Ups — Wed, 19 Jan 2022 16:20:37 +0000

You only need this post to become a Developer because this post has nearly unlimited amount of every type of resources covering everything you will need.

Blog your Journey

Hashnode - Hashnode is the easiest way to start a developer blog on your personal domain 🌏 for free and connect with the readers through our global dev community! 👩‍💻👨‍💻
Dev.to - DEV is a community of software developers getting together to help one another out.
Hackernoon - An Independent Tech Media Site

Must have Chrome extensions

DailyDev - Get the latest new about the Dev community in your chrome default tab.
WhatFont - Get to know which font is the website using.
ColorPick Eyedropper - Get to know which color is the website using by just dropping the pen.
Wappalyzer - Get to know the tech stack of any website
Web Developer - Amazing amount of tools this extensions has.
React developer tools - React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools.

VS Code Must have extensions

NPM - This extension helps you to manage your Package.json and will provide warnings if dependencies are not installed also will help with the version control.
Prettier - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Rainbow Brackets - Find that missing tag with ease by color-coding every bracket set in your environment.
VS Code Great Icons - Organize your environment by applying an appropriate icon set to visually identify files by type.
Placeholder Images - Services like unsplash.it and placehold.it are extremely useful. Now you can save time by adding placeholder images right from within VS Code
Vetur - The official VueJS extension
ESLint - The extension uses the ESLint library installed in the opened workspace folder.
Live Server - Launch a development local Server with live reload feature for static & dynamic pages.
Visual Studio IntelliCode - This extension will move the most relevant completion suggestions to the top.
Debugger For Chrome - This extension allows you to debug your JavaScript code running in the Chrome browser, from inside of VS Code.
Debugger for Microsoft Edge - Debug your JavaScript code in the Microsoft Edge browser
Debugger for Firefox - Debug your web application or browser extension in Firefox
Bracket Pair Colorizer 2 - A customizable extension for colorizing matching brackets

VS Code themes

One Dark Pro - Atom's iconic One Dark theme for Visual Studio Code
Material Theme - The most epic theme now for Visual Studio Code
Horizon Theme - A beautifully warm dual theme for Visual Studio Code

General Resources

First of all you will need a check list for marking what all you have learned. You can see the below image for how the checklist will look like.

Link -> The Front-End Checklist
Frontend Development Roadmap

Learning Resources 📘

DOCS and Cheat sheets 😁

MDN Web Docs - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
DevDocs - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
DEVHINTS - A modest collection of cheatsheets.
FLEX - Malven - A visual cheatsheet for CSS flex layout.
GRID - Malven - A visual cheatsheet for CSS grid layout.

🌐 HOW DOES IT WORKS?

How the Internet Works Video - How does the Internet Works?
How the Internet Works Brief Videos - A brief explanations on, how does the Internet works?
DNS - How DNS works?
HTTPS - How HTTPS works?

For HTML and CSS

freeCodeCamp - Free course to learn Web Development.
Flexbox Froggy - A game that helps you to learn CSS Flex.
CSS TRICKS - Flexbox - A Complete Guide to Flexbox.
Grid Garden - A game for learning CSS Grid.
CSS TRICKS - A Complete Guide to Grid - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
Learn CSS Grid - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
HTML Dog - Simple and to the point explanations.
Marksheet - Unlimited amount of tutorials
The ODIN Project - Amazing way of learning.
CSS Effects - CSS Animations.
Keyframes - Create basic or complex CSS @keyframe animations with a visual timeline editor.
Animista - Play with a collection of ready to use CSS animations.
Interneting Is Hard - Friendly web development tutorials for complete beginners.
BEM - BEM naming cheat sheet.
Autoprefixer - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
CSS Formatter - Online CSS Formatter, CSS Beautifier.
Placeholder - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.

📝 ONLINE IDE, EDITOR

📷 IMAGE RESOURCES

Slazzer - Image Background Remover Automatically and Free
Unsplash - Free images and photos.
Pexels - Free stock photos.
Remove Photo Data - Remove personal data from photos before sharing them on the internet.
LottieFiles - LottieFiles is a collection of animations designed for - Lottie - gone are the days of bugging your developer.
Pixabay - Free image or video.

👓 ACCESSIBILITY

Accessibility Blog - Medium - Seven easy-to-implement - guidelines to design a more accessible web.
Accessibility Cheatsheet - Practical approaches to Universal Design for making your website/webapp accessible to everyone.

📄 TERMINALS FOR WINDOWS

📺 YOUTUBE CHANNELS

🖋 FONTS AND TYPOGRAPHY

Google Fonts - The #1 resource for free and easy-to-use webfonts.
FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
Fontjoy - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
Fonts Arena - Free fonts, free alternatives to premium fonts, done-for-you-research articles.

🎨 ILLUSTRATIONS

unDraw - Browse to find the illustrations that fit your needs and click to download.
freepik - Free graphic resources.
DrawKit - Hand-drawn vector illustration and icon resources, perfect for your next project.

💧 ICONS

Font Awesome - Vector icons and social logos.
Ionicons - Open-Sourced and MIT licensed icon pack.
icons8 - Download free icons in PNG and SVG.
flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
Simple Icons - 1463 Free SVG icons for popular brands.

Front-end Framework Learning Resources

⚡ JAVASCRIPT

freeCodeCamp - Best free resource to learn JavaScript interactively.
JavaScript.info - Modern JavaScript Tutorial.
JavaScript Design Patterns
JavaScript Reference By MDN
Eloquent JavaScript - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
JavaScript30 - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
DOM Manipulation Reference
How JavaScript works
JavaScript Event Reference
Mostly Adequate Guide to Functional Programming - Excellent primer to functional programming using JavaScript.
Functional-Light JavaScript - This book explores the core principles of functional programming (FP) as they are applied to JavaScript.
Code School - From Basics to Best Practices. Different courses related to JavaScript.
Functional programming - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip.
Learn JavaScript Online - Interactive JavaScript course with spaced repetiton flashcards app.
Exercism JavaScript Track - Exercism provides individual practice and mentor-based learning for free.

⚡ REACT

Why React?

JS Apps at Facebook
React: Rethinking best practices
React
React Docs - Quick Start section basic
The Road to learn React basic

ES2015+

Routing

React Router Docs basic

State Management

Redux

Getting Started with Redux basic
Building React Applications with Idiomatic Redux advanced

Bundlers

Build Stuff

Several project ideas
React - TodoMVC
Bootstrapping a React project
Build a Weather app
The SoundCloud Client in React + Redux
A Primer on the React Ecosystem: 1, 2 and 3.
Building a React/Redux App with JSON Web Token (JWT) Authentication

Want to goo deep in React? Visit React-Learning

🎮 APIs

Quotes REST API - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives easy way to access the data.
OpenWeather - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
Public APIs - A collective list of more than 1000 Free Public and Open REST APIs for developers.
SWAPI - The Star Wars API.
JSONPlaceholder - Free to use fake Online REST API for testing and prototyping.

⚡ NODEJS

Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
You Don't Know Node.js
The Art of Node - Introductory tutorial covering the basics.
NodeSchool - Interactive self guided workshops you can also do on your own.
Node Patterns - Short books about code and networking patterns related to Node.js.
Learn Node - A premium training course to learn to build apps with Node.js, Express, MongoDB.
The Node Way - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
Express.js Security Tips - How You Can Save and Secure Your App.
Awesome Nodejs - Delightful Node.js packages and resources.
nodebestpractices - Huge list of best practices for building node apps. Important for big projects.

😐 Learn GIT

Git Handbook Git, GitHub, DVCS, oh my! Learn all the lingo and the basics of Git.
Cheat Sheets
Keep these handy! Reference sheets covering Git commands, features, SVN migrations, and bash. Available in a multiple languages.
Learn Git branching
Try Git commands right from your web browser. Featuring some of your soon-to-be favorites: branch, add, commit, merge, revert, cherry-pick, rebase!
Visualizing Git
Look under the hood! Explore how Git commands affect the structure of a repository within your web browser with a free explore mode, and some constructed scenarios.
Git-It
You’ve downloaded Git, now what? Download Git-It to your machine and you’ll get a hands-on tutorial that teaches you to use Git right from your local environment, using commands on real repositories.

Prepare for Interview (Questions)

Front-end Developer Interview Questions - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.
Front End Interview Handbook - Go from zero to front end interview hero with this handbook. No prior interview experience needed.
Front-end Developer Interview Questions - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

I have gathered all the resources that you will require to become a MERN or MEAN stack developer. All these resources will include Articles, Videos, Course, Websites, Tutorials, Books etc. And everything is FREE

MERN - MongoDB, Express, React, NodeJS
MEAN - MongoDB, Express, Angular, NodeJS

☢ You should know the basics of HTML, CSS AND JS

Learn MongoDB

Courses

MongoDB University -> This website has many course for free that will definitely take you from Zero to Hero
Understanding the basics of MongoDB -> Udemy free course for learning the basics
Server-side Development with NodeJS express and MongoDB - Coursera course starting from 7th Feb😉

Blogs / Tutorials / Docs / eBooks

Videos

MongoDB tutorial Intellipat 2Hrs
MongoDB - noSql database [Playlist]
MongoDB Crash Course by Traversy Media [40mins Apprx]
MongoDB Tutorial for beginners Playlist. Contains small videos and informative
MongoDB Tutorial for beginners Playlist.

Learn Express

▶ Videos

Tutorials / eBooks / Blogs

Learn React

Blogs / eBooks / Tutorials / Docs

Course

React cheatsheets

Ultimate React cheatsheet

React Interview Questions

React Styling

styled-components - Visual primitives for the component age
emotion - Library designed for writing CSS styles with JavaScript
radium - Tool for React component styling

React and TypeScript

Learn Angular

Course / Videos

Tutorials / Docs / Blogs / eBooks

Cheatsheets

Angular CheatSheets

Learn NODEJS

Node.js FUNdamentals: A Concise Overview of The Main Concepts
Why Node.js
Why The Hell Would I Use Node.js? A Case-by-Case Introduction
Why I use Node.js?
PHP vs. Node.js
Dismantling the Monoliths
Node.js at PayPal
Official Documentation
Node.js Modules Official Documentation
Managing module dependencies
Using Node's Event Module
Understanding exports vs. module.exports
Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
You Don't Know Node.js
The Art of Node - Introductory tutorial covering the basics.
NodeSchool - Interactive self guided workshops you can also do on your own.
Node Patterns - Short books about code and networking patterns related to Node.js.
Learn Node - A premium training course to learn to build apps with Node.js, Express, MongoDB.
The Node Way - An entire philosophy of Node.js best practices and guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
Express.js Security Tips - How You Can Save and Secure Your App.
Awesome Nodejs - Delightful Node.js packages and resources.
nodebestpractices - Huge list of best practices for building node apps. Important for big projects.

📖MISC RESOURCES😉

(THIS HAS ALL THE RESOURCES OTHER THEN THE ABOVE ONES, Some fundamentals and important)

JavaScript (A bit advanced)

30 Days VanillaJS project challenge
Advanced JavaScript Tutorials
Become a JavaScript Console Power-User - Introduction to the browsers JavaScript console.
Debugging The Web - Learn state of the art in debugging using Chrome dev tools.
Udacity JavaScript Basics - They also offer more advanced courses.
Code School - From Basics to Best Practices. Different courses related to JavaScript.
Functional programming - Learn basic principles of functional programming in an interactive way by using map, filter, concatAll, reduce and zip.

Monetize Your Work

You can join the amazing website Buy Me A Coffee and get support and also start a membership if you're a content writer.

Link -> BUYMEACOFFEE

Thanks For Seeing this post.

If you didn't liked this post let me know in the comments

10 Crucial Tips For Better Social Media Management [Plus Tools]

Dev Write Ups — Sat, 09 Oct 2021 06:36:52 +0000

According to the latest social media statistics, there are about 3.78 billion users worldwide across different social media platforms. That is almost 48 percent of the total world population and this number will continue to grow for the next few years. This makes social media one of the most ideal ways to reach customers wherever in the world they may be.

In the modern business scenario, social media management lets one discover opportunities to improve visibility and maximize the advantages of social media marketing. Social Media Examiner figured out from their studies that up to 97% of small businesses have shifted to social media for attracting new customers.

Why Have a Reliable Social Media Strategy?

Many studies have shown that social media marketing is effective at increasing brand awareness. The problem, however, is that many business owners still fail to implement effective social media marketing campaigns that actually drive sales. What they mostly lack is a solid social media strategy that is integral in creating a captivating marketing campaign.

A solid social media strategy is essential because of the following reasons:

It Helps Build A Strong and Organic Presence.

A strong, organic presence online is what counts when it comes to social media marketing. With a solid plan of action, you can be able to maintain a consistent posting schedule that helps with this goal.

It Allows You to Save Time

Time is an important resource in using social media for marketing. A solid strategy lets you get everything in order from sorting out different posts down to posting schedules. A content bank and calendar would minimize the time that is usually wasted on figuring out what to post when. You can spend more time finishing other tasks with the time you saved this way.

It Makes You Target Audience More Effectively

With better planning, you can add audience engagement elements to your marketing strategy. Polls or open-ended questions, for example, will allow you to study the audiences’ pain points. You can then find better solutions that are valuable to your specific audience.

It Allows You To Analyze The Game Plan

Not all methods work the same way. With a better strategy, you can study which elements are working in your favor and which ones do not. This would give you plenty of opportunities to refine your approach. It would allow you to look for more resources and social media management tools that can help you get creative with your posts.

It Helps You Stay Focused on Your Goals

Social media management encompasses many elements and it can be pretty easy to get lost in the sea of tasks that has to be done. A solid strategy ensures that you can outline your business goals. This would make you validate whether you are on the right track and if there is a need to supplement additional strategies to meet your goals.

It Makes You Stand Out

The main benefit of having a solid social media strategy is that it makes you stay ahead of the competition. You get to be more organized and be able to concentrate on developing your brand story. It prevents leaving your account dormant for days even if you take breaks in between campaigns. This makes your social media account consistent and valuable, establishing a distinct character compared to your competition.

10 Crucial Tips For Better Social Media Management

It is counterproductive to work on a social media campaign without a defined strategy. What would most likely happen is seeing your efforts go to the drain without results. Lacking the understanding of how to reach the goals of your social media marketing is mainly due to faulty management.

Here are ten tips to improve your social media management skills and finally be able to build an effective strategy to lead your business stats at their peak:

Establish SMART Goals

The SMART framework in setting goals has become a standard among many industries. It simply tells you to make goals that are Specific, Measurable, Attainable, Relevant, and Time-bound.

An example of a Smart Goal when using social media is something like: “We shall increase our views by 50% within two months.”

This example goes to say that you must identify goals that will deliver a real impact on your business. What’s good in posting content when you have only a few views? You need to work on this aspect if you want to make the audience aware of your presence.

You should be able to audit your progress in achieving such goals using statistical tools. There are a variety of metrics that will show your reach per campaign. At the end of the day, these goals should create an overall impact on your social media presence in a specific time frame.

Identify Which Platform Your Audience Uses

You simply cannot afford to work on multiple platforms in one go. To properly manage your time, effort, and resources, you have to know where your audience is, then focus on that platform.

There are plenty of ways how you can target your audience on the right platform. You can do surveys, monitor online interactions, and use pre-existing analytics to make data-driven decisions. You will notice how you will be able to do more for a specific campaign when you get to identify where your highly targeted audience is.

Focus on Quality

You are not the only one who is on social now. One sure thing to stand out from the competition is to produce top-quality content. It should not only be relevant but also relatable, inspiring, and entertaining. Your posts will never go unnoticed if your audience can gain something from them.

Build Relationships Not Merely Followers

“Social” should always be connected to your “presence”. Although it would be great to have thousands of followers, having a few hundred is enough if they regularly engage with you and the community. Your aim should always be to form meaningful relationships by constantly interacting with the audience.

You may do this by adding a chat feature on your socials. You can reply or react to their comments. Initiate conversations by asking their thoughts about your posts. Do not forget to @mention people if you are specifically addressing their concerns.

Create An Editorial Calendar

The beauty of having an editorial calendar is that you never have to scramble about what to post and what to work on. By having a list of tasks that are to be done on specific days, you get to have plenty of time to fine-tune posts before they go live. This would also allow you to study future content and check whether you are repeating the same content or not.

An editorial calendar keeps everything organized while at the same time lets you maximize your resources for better reach.

Get Visual

Photo and video content are what most people on social media prefer. One of the reasons is that visual posts seem to deliver content faster than having to read lengthy narratives. Text-based posts can be informative but graphics and videos are way more entertaining. Just look at the success of Instagram and its image-based feed.

What is great is that there are plenty of resources for producing stunning imagery. You just need to find a photo editor for social media marketing and you are good to go. Tools, like Removal.AI, can help you improve your photos to improve your posts and make them eye-catching and share-worthy.

Automate Tasks

Knowing about what is social media management involves learning when to automate tasks. There are plenty of repetitive tasks in using social media for marketing. Say for example you are using different platforms for posting content. Aside from a content posting schedule, you can use tools to post the same content across different platforms.

Some tools will allow you to set up simple commands to automatically perform specific tasks if triggered. The minimum effort will produce maximum output when you automate tasks.

Be Real

Customers tend to follow accounts that look authentic. This does not only pertain to people but also businesses. When talking about being real in social media, it is all about interacting like a real, live person. As opposed to robotic responses, giving personalized replies, even just by adding emojis, will make you look more human and relatable.

You may also show the human side of your brand by sharing office photos or team snapshots. This will encourage connection in the sense that the audience values more transparency than a faceless corporation.

Answer Questions

Conversations are critical within social media networks. Customers who directly ask for information have to be addressed as these instances are a good opportunity for engagement. Better social media management considers every question coming from a customer extra visibility for the brand.

Again, do not give out generic responses that sound too robotic. Mention the customer who is asking the question and sincerely answer the question as if you are talking on a personal level.

Evaluate Your Stats

It is important to know your numbers using social media metrics. This is how you can be able to analyze whether or not you are on your way to reaching your goals. Social media strategies do not work the same way and there may be a need to change or tweak your approach for it to work to your advantage.

Knowing your stats will allow you to readjust your strategies early so that you do not waste time, effort, and resources.

Top 5 Recommended Tools Automation Tools for Social Media Management

Now that you are aware of how you can be effective at social media management, the next step is to learn how you can easily apply these tips to your social media marketing. No one expects you to manage your socials 24/7. Aside from the fact that is virtually impossible to do, there are certain ways to avoid stressing yourself out. One of these is by using automation tools.

Among those who have shifted to social media marketing, 85% are not entirely sure about which social media tools to use to improve their reach and presence. Here are some of the most useful tools that you can use to help manage your social media marketing better:

Buffer Publish

For Social Media Scheduling

Scheduling your posts does not only make your campaign more organized but also gives you plenty of advantages. One of the biggest advantages is affording more time for other tasks rather than pondering on what to post next. It also guarantees to have new posts regularly even during your lazy days. Finally, you can relax knowing that your audience can find your brand easily with a strong online presence.

Buffer Publish has the tools to let you plan and publish the perfect content for your social media feeds. After planning your posts, it sends out notifications when it is time for you to share them. You can use it to collaborate with your team and everyone can stay in sync with the tasks assigned to each one. You only need one dashboard to manage multiple socials.

Buffer Publish offers a basic plan for free. Although it would work well if you are using up to 3 social media channels, the features are very limited and it does not include very important analytics. The paid plan, however, is quite a steal at only $5 per month per social channel. There are plenty of features to enjoy with the paid plan, including analytics, insights, and reporting so you can have a performance overview of key metrics.

Sendible

For Sending Lead Generation

Raising awareness is one of the foremost goals of social media marketing and this would not happen without generating more leads. Lead generation is one of the surest ways to grow your business. It helps you identify people who might be interested in your business. Once you got your leads, you can proceed to send out offers so they will be enticed to your business and then convert them to become loyal customers.

Sendible provides the right tools to help businesses create more impact on social media by helping them collaborate with the right clients. It has a unified dashboard so you can work on all of your social media channels in one place. This makes it easier to identify important conversations and take action immediately.

All of Sendible’s paid plans have free trial periods. It has four plans that range from $29- $399 per month. The Creator plan is perfect for an upcoming brand that has only one social media manager and is working on up to 6 social media profiles. The most popular plan is the Scale at $199 per month. It is perfect for emerging brands that need to automate admin tasks and manages up to 49 social media profiles.

Pixelied.com

For Easy Graphics Generation

Graphics are what make social media posts more alive. You need to provide stunningly creative graphics, not only to impress but also to make sure that you can properly communicate your content to the audience.

Pixelied is great with graphics generation because it has a range of image editing tools and standalone solutions that are specifically designed for businesses. Its features are so easy to use that you do not need to pay for a designer to use them.

Although you can use Pixelied for free, you can only fully appreciate its use with the paid version wherein you will only pay a one-time fee. This means that you can use all of its features forever without paying monthly subscriptions. This is such a good deal, especially that you need to post visuals on all of your social media accounts.

Removal.ai

For Instant BG Removal

When it comes to social media marketing, staging your products is crucial to the success of your campaigns. You need to have flawless product images to entice customers into buying. The only way to do this is by removing background from photos to make them more effective.

Removal.AI uses artificial intelligence technology in removing backgrounds from pictures. Because of this “smart” feature, you no longer have to worry about editing photos yourself. It can handle multiple pictures at one go so you never have to wait for ages to have your product photos ready for upload on your social media pages. Aside from its superb background removal feature, Removal.AI also has a powerful photo editor that you can use to fine-tune photos. This makes it an all-around tool that you can use for any photos that you want to include in your campaigns.

Removal.AI is free to use but you will only get to download high-quality results when you subscribe to a plan. Download full-resolution images for as low as $0.03 per image for monthly subscriptions and as low as $0.19 per image for the lifetime subscription.

Pixelixe.com

For Image Automation From Spreadsheet

Working with thousands of images can be both boring and tiring. The only way to get around this mundane task is by having an image automation tool that will auto-generate graphics in just one click. This would let you save time and money, especially when you are working with multiple graphics across different social media platforms

Pixelixe is a nifty tool that is perfect for image automation from spreadsheets. It can instantly generate a variety of images using CSV files. It is the easiest tool to use for creating perfect graphics for each of your social media profiles as you can personalize the automation according to your current marketing project.

You can start using Pixelixe right away without paying anything but only up to 50 documents. Subscription plans start at $9 to $249 per month. Depending on your plan, you will be able to generate photos for a specific number of documents and have unlimited storage for all of your images.

Takeaway

Social media management can be very beneficial when done correctly. It would result in better social media marketing campaigns that would yield more customers, traffic, and engagement towards your brand.

Since an established social media presence is vital to the success of your business, you are more likely to succeed if you are armed with the best tools to manage your socials. Do not discount the importance of automation tools as they do not only make managing your social media accounts easier. They are key to finishing all the tasks that are to be done for you to improve your business using social media marketing.

12 HTML things you should know about

Dev Write Ups — Thu, 02 Sep 2021 04:24:06 +0000

HTML, CSS3 and JavaScript has the power to make your site or blog look alluring, easy to use and modern. HTML5 has made a tremendous commitment to the stunning sites being planned regular. HTML can do a ton of slick things, as well as just making a site.

You can utilize HTML to make flawless text effects, tables, joins, marquees, thus significantly more. These are incredible for adding a tweaked look to your blog, site, eBay sale, discussion, and that's just the beginning.

Hide

<main hidden>Hello World</main>

You can hide element without the use of CSS😲. Using the hidden attribute.

`<mark>` tag

Any text between the <mark> will have highlighted effect. You can customize the color of your highlighter by just using the mark CSS property in the CSS.

See the Pen mark by DevIntro
(@devintro) on CodePen.

`noscript`

The markup inside is delivered by the program just when the scripts are off. This tag is helpful for telling clients when the content is incapacitated in their program and to give any other fallback system to segments on the website pages that will quit working without JavaScript.

<head>
 <noscript>
/*adds custom css when the scripts are off*/
  <link rel="stylesheet" href="noscript.css">
 </noscript>
</head>
<body>
  <noscript>Enable JavaScript to See the content</noscript>
</body

Voice search

You can add voice search in the input field. It searches on by voice recognition. ** only works on mobile devices**

<input type="text" x-webkit-speech>

preload attribute

This attribute is used increase User Experience. Using the attribute in your videos states that how the video should be loaded when the page loads.
*If autoplay is present this attribute is ignore. *

<video controls preload>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Refreshing browser

<meta http-equiv=”refresh” content=”6"/>

Pretty sure developers there will love this tip. You can use it to make your browser refresh every seconds so no problem for refreshing manually when you do your CSS.

Amazing `<a>`

There are multiple things you can do with the anchor tag. You may have heard of the mailto using this it redirect to mail app on your device. There are bunch of anchor tag relation with skype too.

<a href="mailto:someone@gmail.com">Send email</a>
<a href="tel:9999999999”>Make a call</a>
<a href="skype:username?chat”>Chat</a>
<a href="skype:username?add”>Add </a>
<a href="skype:username?call”>Call</a>

`<video>` tag

Using <video>tag you can embed video directly on your webpage.

<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://www.pexels.com/video/the-rocky-coastline-of-in-northern-california-3578881/">
</video>

`<meter>` tag

You can utilize the <meter> tag to quantify information inside a given reach.

See the Pen meter tag by DevIntro
(@devintro) on CodePen.

`autofocus` attribute

It indicates that a <input> component ought to consequently get focus when the page loads.

<input type="text"  placeholder="Devwriteups" required autofocus>

Progress tag

This is same like the <meter> tag (but a bit ore enhanced).

See the Pen progress tag by DevIntro
(@devintro) on CodePen.

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

12 websites to learn to code by Playing Games

Dev Write Ups — Wed, 09 Jun 2021 11:38:46 +0000

Remember the era where you were learning to code by Reading books and attending some offline courses. Gone those times where you learning the ancient way😟. We've curated some websites that will help you learn to code by playing games or by doing simple tasks.

Lean VIM

Learn VIM by playing a game. Everyone knows how tough is it to learn VIM. But this simple games makes easy for you to learn VIM.
Visit -> Lean VIM

### Flexbox froggy

Flexbox is hard and confusing for beginners starting to code. This website makes simple to learn CSS Flexbox. You just have to write simple CSS code to move the frog, everything is guided there😁.

Visit -> Flexbox froggy

CodeCombat

The most engaging way to learn computer science. Here you can learn WebDev, APP Development, Game Development, by just playing games😲. The games are pretty easy but gets hard when you increase with the levels.

Visit ->CodeCombat

Flexbox defense

Another similar website for learning Flexbox like Flexbox froggy. Bu this game is literally another leverl. Here your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

Visit -> Flexbox defense

Untrusted

Learn JavaScript by solving problems.
Visit -> Untrusted

Coding Game

The new way to improve your programming skills while having fun and getting noticed. In a matter of hours, discover new languages, algorithms or tricks in courses crafted by top developers. They have support for nearly all the languages (Ruby, C++, C, Java, PHP, Bash, Lua, Obj-C and more).

Visit -> Coding Game

CSS Diner

Practice and learn CSS selectors.
Visit -> CSS Diner

Check

Coding games for beginners and advanced programmers where you can improve your coding skills by solving engaging challenges and fun task using Python and TypeScript.

Visit -> Check

Screeps

It's an open-source game for programmers, wherein the core mechanic is programming
your units' AI. You control your colony by writing JavaScript. Available on Steam😲.

Visit -> Screeps

Code Monkey

CodeMonkey is a fun and educational game-based environment where kids learn to code without any prior experience. After completing CodeMonkey's award-winning coding courses, kids will be able to navigate through the programming world with a sense of confidence and accomplishment.

Visit -> Code Monkey

CodeMoji

Codemoji's computer science curriculum for schools allows 1st-8th grade students to learn the basics of web development and coding, including HTML, CSS, and Javascript, in a fun and easy way, allowing them to create their own websites, animations and much more with our unique and adaptable learning platform.

Visit ->CodeMoji

Elevator Saga

Your task is to program the movement of elevators, by writing a program in JavaScript.
Visit -> Elevator Saga

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

The ultimate JavaScript cheatsheet you'll ever need

Dev Write Ups — Sat, 29 May 2021 07:05:14 +0000

Cheat Sheets our something developers need always for reference. So here I have compiled many JavaScript reference codes. See the classification and find it. This post is helpful for learners and developers.

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

JavaScript Number Method Cheat Sheet

toExponential() : Returns a string representing the Number object in exponential notation

  function expo(x, f) {
      return 
      Number.parseFloat(x).toExponential(f);
  }

  console.log(expo(123456, 2)); 
  // -> 1.23e+5

toFixed() : formats a number using fixed-point notation

  function financial(x) {
      return Number.parseFloat(x).toFixed(2); 
  }

  console.log(financial(123.456)); 
  // -> 123.46

toPrecision() : returns a string representing the Number object to the specified precision

  function precise(x) {
      return
      Number.parseFloat(x).toPrecision(4); 
  }

  console.log(precise(123.456)); 
  // -> 123.5

toString() : returns a string representing the specifies Number object

  function hexColour(c) {
      if (c < 256) {
          return Math.abs(c).toString(16); 
      }
      return 0; 
  }

  console.log(hexColour(233)); 
  // -> e9

valueOf() : returns the wrapped primitive value of a number object

  const numObj = new Number(42); 
  console.log(typeof numObj); 
  // -> object

  const num = numObj.valueOf(); 
  console.log(num); 
  // -> 42

  console.log(typeof num); 
  // -> number

JavaScript Loops Cheat Sheets

For Loop

  for (var i = 0; < 10; i++) {
      console.log(i + ": " + i * 3 + "<br />"); 
  }
  // -> 0: 0<br />
  // -> 1: 3<br />
  // -> ...

  let a = [1, 2, 3]; 
  var sum = 0; 
  for (var i - 0; i <a.length; i++) {
      sum += a[i]; 
  } // pasing an array
  console.log(sum); 
  // -> 6

While Loop

  var i = 1;                  // initialize
  while (i < 100) {          // enters the cycle if statement is true
      i *= 2;                 // increment to avoid infinte loop 
      console.log(i + ", "); // output
  } 
  // 2, 
  // 4, 
  // ...
  // 128,

Do While Loop

  var i = 1;                  // initialize
  while (i < 100) {          // enters the cycle asleast once
      i *= 2;                 // increment to avoid infinte loop 
      console.log(i + ", "); // output
  } while (1 < 100); // repeats cycle if statement is true at the end
  // 2, 
  // 4, 
  // ...
  // 128,

Break

  for (var i = 0; i < 10; i++) {
      if (i == 5 ) { break; } // stops and exits the cycle
      console.log(i + ", ");  // Lat output number is 4
  }
  // -> 0, 
  // -> 1, 
  // ...
  // -> 4,

Continue

  for (var i = 0; i < 10; i++) {
      if (i == 5 ) { continue; } // skips the rest of the cycle
      console.log(i + ", ");  // skips 5
  }
  // -> 0, 
  // -> 1, 
  // ...
  // -> 9,

JavaScript String Methods Cheat Sheet

charAt() : Returns the character at the specified index

  const sentence = "Jeff bezos is now the second richest."; 

  const index = 4; 

  console.log(`The character at index ${index} is ${sentence.charAt(index)}`); 
  // The character at index 4 is f

concat() : Joins two or more strings, and returns a copy of the joined strings

  const str1 = "Hello"; 
  cosnt str2 = "World"; 

  console.log(str1.concat(" ", str2)); 
  // -> Hello World

  console.log(str2.concat(", ", str1)); 
  // -> World, Hello

replace() : Searches for a match between a substring (or regex) and a string and replaces the matched substring with a new substring

  const p = "Talk is cheap. Show me the work. - Someone"; 

  console.log(p.replace("work", "code")); 
  // -> Talk is cheap. Show me the code. - Someone

search() : Searches for a match between a regex and a string, and returns the position of the match

  const paragraph = "The quick brown fox jumps over the lazy dog."; 

  // any character that is not a word character or whitespace
  const regex = /[^\w\s]/g;

  console.log(paragraph.search(regex)); 
  // -> 43

slice() : Extracts a part of a string and returns a new string

  const str = "The quick brown fox jumps over the lazy dog."; 

  consolelog(str.slice(31)); 
  // -> the lazy dog

  console.log(str.slice(4, 19)); 
  // -> quick brown fox

trim() : Removes whitespace from both ends of a string

  const greeting = "  Hello world!   "; 

  console.log(greeting); 
  // -> Hello world!

  console.log(greeting.trim()); 
  // -> Hello world!

substr() : Extracts the character from a string, beginning at a specified start position, and through the specified number of character

  const str = "Mozilla"; 

  console.log(str.substr(1, 2)); 
  // -> oz

  console.log(stre.substr(2)); 
  // -> zilla

toLowerCase() : Converts a string to lowercase letters

  const sentence = "Elon became the richest last night."; 

  console.log(sentence.toLowerCase()); 
  // -> elon became the richest last night.

JavaScript Array Method Cheet sheet

concat() : Joins two or more arrays, and returns a copy of the joined array

  let array1 = ["a", "b", "c"]; 
  let array2 = ["d", "e", "f"]; 
  let array3 = array1.concat(array2); 

  console.log(array3); 
  // -> Array(6) ["a", "b", "c", "d", "e", "f" ]

indexOf() : Search the array for an element and returns its position

  let beasts = ["ant", "bison", "camel", "duck", "bison"]; 

  console.log(beasts.indexOf("bison")); 
  // -> 1

  // start from index 2
  console.log(beasts.indexOf("bison", 2)); 
  // -> 4

join() : Joins all elements of an array into a string

  let elements = ["Fire", "Air", "Water"]; 

  console.log(elements.join()); 
  // -> Fire,Air,Water

  console.log(elements.join(" ")); 
  // -> Fire Air Water

pop() : Removes the last element of an array, and returns that element

  let plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"]; 

  console.log(plants.pop()); 
  // -> tomato

  console.log(plants); 
  // -> Array(4) ["brocxoli", "cauliflower", "cabbage", "kale"]

reverse() : Reverses the order of the elements in an array

  let array1 = ["one", "two", "three"]; 
  console.log("array1:", array1); 
  // -> array1: Array(3) [ "one", "two", "three" ]

  let reversed = array1.reverse(); 
  console.log("reversed", reversed); 
  // -> reversed: Array(3) [ "three", "two", "one" ]

shift() : Removes the first element of an array, and returns that element

  let array1 = [1, 2, 3]; 

  let firstElement = array1.shift(); 

  console.log(array1); 
  // -> Array [ 2, 3 ]

sort() : Sorts the element of an array

  let months = ["March", "Jan", "Feb", "Dec"]; 
  months.sort(); 

  console.log(months); 
  // -> Array(4) [ "Dec", "Feb", "Jan", "March" ]

toString() : Converts an array to string, and returns the result

  const array1 = [1, 2, "a", "1a"]; 

  console.log(array1.toString()); 
  // -> 1,2,a,1a

JavaScript Datatypes Cheat Sheet

var age = 18; // Number

var name = "Sam"; // string

var name = {first:"Sam", last:"Singh"}; // object

var truth = false; // boolean

var sheets = ["HTML", "CSS", "JS"]; // array

var a; typeof a; // undefined 

var a = null; // value null

JavaScript Operators Cheat Sheet

a = b + c - d; // addition, substraction

a = b * (c / d); // multiplication, division

x = 100 % 48; // modulo. 100 / 48 remainder = 4

a++; b--; // postfix increment and decrement

Variables cheat sheet

var : The most common variable. Can be reassigned but only accessed within a function. Variables defined with var move to the top when code is executed.
const : Cannot be reassigned and not accessible before they appear within the code
let : Similar to const, however, let variable can be reassigned but not re-declared

var a;            // variable
var b = "init";   // string
var c = "Hi" + "" + "Sam"; // "Hi Sam"
var d = 1 + 2 + "3";   // "33"
var e = [2,3,5,8];   // array
var f = false;       // boolean
var g = /()/; // RegEx
var h = function(){};   // function object
const PI = 3.14;        // constant
var a = 1, b = 2, c = a + b;    // one line
let z = 'zzz';        // block scope local variable

Get Date Methods Cheet Sheet

getFullYear() : Returns the year of the specified date according to local time

  const moonLanding = new Date("January 08, 69 00:20:10"); 

  console.log(moonLanding.getFullYear()); 
  // -> 1969

getMonth() : Returns the month in the specified date according to local time, as a zero-based value (where zero indicates the first month of the year).

  const moonLanding = new Date("January 08, 69 00:20:10"); 

  console.log(moonLanding.getMonth()); // (January gives 0)
  // -> 6

getDate() : Returns the day of the month for the specified date according to local time

  const birthday = new Date("June 16, 2004 23:14:00"); 
  const date1 = birthday.getDate(); 

  console.log(date1); 
  // -> 19

getHours() : Returns the hour for the specified date, according to local time

  const birthday = new Date("June 16, 04 4:20"); 

  console.log(birthday.getHours()); 
  // -> 4

getMinutes() : Returns the minutes in the specified date according to local time

  const birthday = new Date("June 16, 04 04:10"); 

  console.log(birthday.getMinutes());
  // -> 20

getSeconds() Returns the seconds in the specified date according to local time

  const moonLanding = newDate("June 16, 69 00:23:11"); 

  console.log(moonLanding.getSeconds()); 
  // -> 18

😎Thanks For Reading | Happy Coding⚡

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

22+ VS Code extension you should have

Dev Write Ups — Thu, 27 May 2021 07:00:21 +0000

Visual Studio Code is perhaps the most broadly utilized code editors in the developer community. One reason for VS Code's notoriety is its a huge number that accelerate the advancement interaction.

This post is mainly focused for newbie developer and pros.

Prettier

An opinionated code formatter
Supports many languages
Integrates with most editors
Has few options

Visit -> Prettier

Indent Rainbow

This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python.

Visit -> Indent Rainbow

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Visit -> Bracket Pair Colorizer 2

Better-Comments

The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categories your annotations into:

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings

Visit -> Better-Comments

Quokka.js

Testing JavaScript code made simple. Excellent plugin for prototyping and practicing JavaScript.

Visit -> Quokka.js

NodeJS Extension pack

VS Code comes with a ton of features for Node.js development out of the box. This extension pack adds more! These are some of my favorite extensions to make Node.js development easier and fun. Visit ->NodeJS Extension pack

PolaCode

This expansion is utilized for taking code piece screen captures. It very well may be utilized to reorder the code you need in bit screen captures effectively and save them in the wake of installing the extension.

Visit -> PolaCode

Auto Rename tags

Auto rename tags made easy to change the tags at once.

Visit -> Auto Rename tags

Tabnine

An extension which knows everything about what you gonna type next, Tabnine.

Visit ->Tabnine

Ionic Extension pack

This extension pack packages some of the most popular (and some I find very useful) VS Code Ionic (2.x and 3.x) extensions.

Visit ->Ionic Extension pack

ESLint

With this plugin, you can code with ease knowing that you will maintain correct code etiquette make things easier to read, either for yourself or others! I love how it is really easy to customise and how customisable it is! Everything is configurable through a single file.

Visit -> ESLint

Beautify

This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

Visit -> Beautify

VueJS extension pack

Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

Visit -> VueJS extension pack

Snippets

Snippets helps you increase your productivity while coding. You can find some useful extension snippets list below.

Markdown all in one

A markdown extension for writing your blog posts simply or anything else just inside your VS Code. Keyboard shortcuts, table of contents, auto preview and more.

Visit -> Markdown all in one

Search NODE Modules

Simple plugin for VS Code that allows you to quickly navigate the file inside your project's node_modules directory. Chances are you have the node_modules folder excluded from the built-in search in VS Code, which means if you want to open and/or edit a file inside node_modules, you can have to find it manually, which can be annoying when your node_modules folder is large.

Visit -> Search NODE Modules

JavaScript Booster

Boost your productivity with advanced JavaScript/TypeScript refactorings and commands.

Visit -> JavaScript Booster

Thanks for Reading. We'll give the most of the(images) credits to the developers behind these extension, who have spend some hours making these extensions. Shout out to them 🤯🤯. Also you can Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

22+ VS Code extension you should have

Dev Write Ups — Thu, 27 May 2021 07:00:01 +0000

Visual Studio Code is perhaps the most broadly utilized code editors in the developer community. One reason for VS Code's notoriety is its a huge number that accelerate the advancement interaction.

This post is mainly focused for newbie developer and pros.

Prettier

An opinionated code formatter
Supports many languages
Integrates with most editors
Has few options

Visit -> Prettier

Indent Rainbow

This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python.

Visit -> Indent Rainbow

Bracket Pair Colorizer 2

This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.

Visit -> Bracket Pair Colorizer 2

Better-Comments

The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categories your annotations into:

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings

Visit -> Better-Comments

Quokka.js

Testing JavaScript code made simple. Excellent plugin for prototyping and practicing JavaScript.

Visit -> Quokka.js

NodeJS Extension pack

VS Code comes with a ton of features for Node.js development out of the box. This extension pack adds more!
These are some of my favorite extensions to make Node.js development easier and fun.
Visit ->NodeJS Extension pack

PolaCode

Visit -> PolaCode

Auto Rename tags

Auto rename tags made easy to change the tags at once.

Visit -> Auto Rename tags

Tabnine

An extension which knows everything about what you gonna type next, Tabnine.

Visit ->Tabnine

Ionic Extension pack

This extension pack packages some of the most popular (and some I find very useful) VS Code Ionic (2.x and 3.x) extensions.

Visit ->Ionic Extension pack

ESLint

Visit -> ESLint

Beautify

Visit -> Beautify

VueJS extension pack

Popular VS Code extensions for Vue.js development providing Syntax highlighting, Code format, Code snippets, IntelliSense, Linting support, npm & node tools.

Visit -> VueJS extension pack

Snippets

Snippets helps you increase your productivity while coding. You can find some useful extension snippets list below.

Markdown all in one

A markdown extension for writing your blog posts simply or anything else just inside your VS Code. Keyboard shortcuts, table of contents, auto preview and more.

Visit -> Markdown all in one

Search NODE Modules

Visit -> Search NODE Modules

JavaScript Booster

Boost your productivity with advanced JavaScript/TypeScript refactorings and commands.

Visit -> JavaScript Booster

Thanks for Reading. We'll give the most of the(images) credits to the developers behind these extension, who have spend some hours making these extensions. Shout out to them 🤯🤯.
Also you can Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

8 TedX talk for Developer you can't miss

Dev Write Ups — Sun, 16 May 2021 02:40:26 +0000

TedX talks don't teach how to to code bu rather how to be a coder. Knowing how to think is the key. It could assist you with improving your meeting methods and trust in gatherings assisting you with propelling your vocation once you get your foot in the entryway. Let's explore the list of talk we think you should watch.

A delightful way to teach kids about computers | Linda Liukas

PC codes is the following all inclusive language, and its syntax will be restricted simply by the minds of the up and coming age of developers. Linda Liukas is assisting with teaching critical thinking kids, urging them to see PCs not as mechanical, exhausting and confounded however as bright, expressive machines intended to be dabbled with.

Thomas Suarez | 12 Year Old Developer (2012)

Most 12-year-olds love playing videogames - Thomas Suarez showed himself how to make them. In the wake of creating iPhone applications like "Bustin Jeiber," a whack-a-mole game, he is currently utilizing his abilities to help different children become engineers

Elon Musk | The future we're building

Elon Musk talks about his new task burrowing burrows under LA, the most recent from Tesla and SpaceX and his inspiration for building a future on Mars in discussion with TED's Head Curator, Chris Anderson.

Inside the mind of a master procrastinator | Tim Urban

Tim Urban realizes that lingering doesn't bode well, however he's always been unable to shake his propensity for holding up until the last moment to complete things.

The mind behind Linux

Linus Torvalds changed innovation twice — first with the Linux kernel, which helps power the Internet, and again with Git, the source code the executives framework utilized by designers around the world. In an uncommon meeting with TED Curator Chris Anderson, Torvalds talks about with astounding receptiveness the character characteristics that incited his exceptional way of thinking of work, designing and life.

How algorithms shape our world - Kevin Slavin

Kevin Slavin contends that we're living in a world intended for - and progressively constrained by - algorithms. In this arresting talk from TEDGlobal, he shows how these intricate PC programs decide surveillance strategies, stock costs, film contents, and design. Slavin additionally cautions that we are composing code we can't comprehend with suggestions we can't handle.

How a handful of tech companies control billions of minds every day | Tristan Harris

A small bunch of individuals working at a modest bunch of tech organizations steer the contemplation of billions of individuals consistently, says design thinker Tristan Harris. From Facebook notices to Snapstreaks to YouTube autoplays, they're all going after a certain something: your consideration. Harris shares how these organizations go after our brain science for their own benefit and requires a plan renaissance wherein our tech rather urges us to experience the timetable we need.

How to Get Your Brain to Focus | Chris Bailey | TEDxManchester

So how would we tackle our thoughtfulness regarding center further, get occupied less, and surprisingly become more inventive? Chris Bailey, writer of the new book Hyperfocus, discusses how our capacity to center is the way to profitability, innovativeness, and carrying on with a significant life.

😎Thanks For Reading | Happy Coding⚡

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

25 GitHub Repos you can't miss to bookmark

Dev Write Ups — Wed, 12 May 2021 04:52:43 +0000

Github is more than a version control service, it's place where developer contributes to the Community. Github is the ultimate place where you'll find some amazing free and ultimate resources for everything, from eBook to tutorials to lectures to projects and more. I have gathered list of some of the amazing Github Repository you can't miss to bookmark.

Best-websites-a-programmer-should-visit

When learning CS, there are some useful sites you must know to get always informed to do your technologies even better and learn new things. Here is a non-exhaustive list of some sites you should visit. Contains: Articles, tutorials, jobs, eBooks, english improvement, podcasts and more.

Visit -> Best-websites-a-programmer-should-visit

- gProfiler

gProfiler combines multiple sampling profilers to produce unified visualization of what your CPU is spending time on, displaying stack traces of your processes across native programs1 (includes Golang), Java and Python runtimes, and kernel routines.

gProfiler can upload its results to the Granulate Performance Studio, which aggregates the results from different instances over different periods of time and can give you a holistic view of what is happening on your entire cluster. To upload results, you will have to register and generate a token on the website.

gProfiler runs on Linux.

Big list of naughty strings

The Big List of Naughty Strings is an evolving list of strings which have a high probability of causing issues when used as user-input data. This is intended for use in helping both automated and manual QA testing; useful for whenever your QA engineer walks into a bar.

Visit -> Big list of naughty strings

Awesome talks

A curated list of screencasts, recordings of user group gatherings and conference talks available online.

Visit -> Awesome talks

DesignStripe - Illustration Maker

Good web design aims to create an expression, have fluid communication, and achieve personalization. If you want to work on all three, then DesignStripe can do just that.
With whatever style or mood you intend to have for your illustrations, website or graphic, DesignStripe is sure to have something for your taste. Versatility is its gift to its users with a vast amount of different themes that it could cater to any field of work out there. If you want to do some customization, it is not a problem with DesignStripe. It has a capable set of tools that allow you to be as creative as you wish to be with your designs.

DesignStripe has a free version with unlimited access to its theme and customization.
The full version starts at $20 per month with unlimited access to all styles, entire scene customization, and downloads in SVG, PNG, and JPG format.

the-book-of-secret-knowledge

This repository is a collection of various materials and tools that many people use every day in my work. It contains a lot of useful information gathered in one piece.

Visit -> the-book-of-secret-knowledge

coding-interview-university

This is my multi-month study plan for going from web developer (self-taught, no CS degree) to software engineer for a large company.

Visit -> coding-interview-university

Awesome

This is technically awesome. Front software development to hardware contains everything.

Visit -> Awesome

NodeJS Best practice

this repository is a summary and curation of the top-ranked content on Node.js best practices, as well as content written here by collaborators.

Visit -> NodeJS Best practice

WTFjs

JavaScript is a great language. It has a simple syntax, large ecosystem and, what is most important, a great community.

At the same time, we all know that JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

Visit -> WTFjs

Real World

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

Visit -> Real World

Free For DEV

Developers and Open Source authors now have a massive amount of services offering free tiers, but it can be hard to find them all to make informed decisions.

This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.

Visit -> Free For DEV

The Algorithms/Python

All of the computer science algorithms implemented in Python.

Visit -> The Algorithms/Python

JavaScript Algorithms

This repository contains JavaScript based examples of many popular algorithms and data structures.
Visit -> JavaScript Algorithms

Awesome Python

A curated list of awesome Python frameworks, libraries, software, and resources.

Visit -> Awesome Python

awesome-learning-resources

🔥 Awesome list of resources on Web Development.

Visit -> awesome-learning-resources

Tech Interview Handbook

Carefully curated content to help you ace your next technical interview, with a focus on algorithms. System design questions are in-progress. Besides the usual algorithm questions, other awesome stuffs.

Visit -> Tech Interview Handbook

Clean Code JavaScript

🛁 Clean Code concepts adapted for JavaScript

Visit -> Clean Code JavaScript

Front-End-Checklist

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

Visit -> Front-End-Checklist

33 JavaScript Concepts

This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis.

Visit -> 33 JavaScript Concepts

Project guidelines

Here's a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects here at elsewhen.

Visit -> Project guidelines

30 Seconds of Code

Short JavaScript code snippets for all your development needs

Visit -> 30 Seconds of Code

How to secure anything

Security engineering is the discipline of building secure systems.
Its lessons are not just applicable to computer security. In fact, in this repo, I aim to document a process for securing anything, whether it's a medieval castle, an art museum, or a computer network.

Visit -> How to secure anything

CSS ProTips

A collection of tips to help take your CSS skills pro.

Visit -> CSS ProTips

You Don't Know JavaScript

This is a series of books diving deep into the core mechanisms of the JavaScript language.

Visit -> You Don't Know JavaScript

Public APIs

A collective list of free APIs for use in software and web development.

Visit -> Public APIs

AirBnB JavaScript Guide

A mostly reasonable approach to JavaScript

Visit -> AirBnB JavaScript Guide

JavaScript Questions

From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview! 💪 🚀.
Visit -> JavaScript Questions

Drawkit

It is a wrong move not to invest in high-quality illustrations and visuals. Luckily, if you need stunning graphics, DrawKit can deliver.

DrawKit can assure high-quality vector illustrations and visuals wherever and however you may need it. With vector capabilities, unique design sets, a vast library filled with different icons and symbols, and templates that can suit any mood you want.

It is one of the few tools that can integrate both 3d and 2d illustrations, so as we said, DrawKit can deliver on many different leagues of demand from the imagination of creatives.
The illustrations come at varying prices; while some are free, prices can range from $15 to $90, depending on bundle size.

RemovalAI

Removal.ai is another background remover that can accurately erase backgrounds to your demand, and with AI integration, it is deserving of every bit of your trust to handle your graphics.

Whether you want transparent, white, or customized backgrounds, Removal.ai has got your back because it will automatically trace and detect the elements of your photo and remove the background impeccably. Moreover, you can do some customization yourself, editing the subject or foreground with available text and symbols. It is also available for free, so this is definitely a steal in the creative automation department.

Thank you for Reading.

10 Must read Books for Coder and Non Coders (personal reviews)

Dev Write Ups — Tue, 11 May 2021 02:49:34 +0000

You can get the amazing Daily.dev Extension to be updated daily with amazing Development news

A book can characterize an individual's inclination and knowledge. On the off chance that you are a coder, you ought to be additionally a decent peruser on the grounds that it builds up the brain and the psyche is your weapon. You need to prepare it day by day. Prior to discovering any answer for an issue Reading and understanding the issues is the most significant in the event that you are a coder or any difficult solver. Without great perusing and appreciation abilities, an individual sets aside more effort to comprehend the issues prior to tackling it.

For Non-Coder

Cryptonomicon

The book is somewhat delayed toward the start, and on the off chance that you are not used to Neal Stepheson's composing style (This was my first) you may get somewhat confounded and irritated.But kindly read on in light of the fact that after around 50 - 60 pages, you will be enchanted!!! This book genuinely is a work of art and for all individuals who has some information around IT this is an unquestionable requirement perused. ( Not saying non-specialized people cannot appreciate it ..... however, for IT people, I trust it will be considerably more charming)

Get the Book -> Cryptonomicon

Atomic Habits

This is a remarkable book! I have perused such countless books as a feature of my self-awareness yet I generally find that writers wind up extolling themselves all through persistently continuing forever about their own accomplishments. Indeed you finish the book feeling siphoned up partially and feeling like you as well, can be a whiz just to end up in a similar spot seven days after the fact.

This book is totally extraordinary, a straightforward, rational viable piece with fabulous takeaways which anybody can apply so effectively to find a place with their way of life. It is so orderly in it's methodology thus clear

Get the Book -> Atomic Habits

Deep Work

Deep work is a book for everybody albeit the writer accentuates it for information laborers. As I would like to think it is for money managers who needs to accomplish their objectives in their furious timetable, educators (resources) who needs to seek after explore notwithstanding their scholastic obligations, or a business person who needs to expand the profitability and innovativeness of the group, or simply some arbitrary person who needs to invest some quality energy with family yet can't. Books assists you with creating self-restraint. This book can best be put among books like Outliers/Mastery/Flow/Peak and so forth where significance of work and it's ramifications are clarified. Just thing is Deep work is more point by point as far as methodologies and touch less on brain science considers.

Get the Book -> Deep Work

Eat that Frog

This is a book that I decide to peruse consistently not long prior to Eating the Frog and it's really a piece of my Miracle Morning. Every single section is very short yet mind you, the Content is incredibly acceptable. You should simply peruse the entire book once and plan your Goal and Plan of activity following the standards lying in the book and attempt to peruse atleast 1 section/rule consistently and in a matter of seconds you will be the place where you need to be.

Get the Book -> Eat that Frog

For Coders

The Pragmatic Programmer

This book will show not about codes, in some cases you can peruse but rather the fundamental thought is to be a superior developer and think better, break the issues, consider calculation without help from anyone else. There isn't a lot to say, see the primary version was composed 20 years prior and when you begin perusing you see the nature of the book. Its separated in certain themes inside certain subjects. You can peruse by look or follow cover as far as possible. This book doesn't have a particular language or a 'formula' to follow, really it will open your brain to think better.

Get the Book -> The Pragmatic Programmer

Code Simplicity

The book is only 88 pages, yet experiences are helpful for any computer programmer.

At whatever point I go over strong explanations in the book, I would sit and think for 2 minutes to associate with my programming experience. More often than not I had the option to think of substantial model.

This book is energetically suggested for developers who had invested huge energy perusing different software engineers code. On the off chance that you are an accomplished developer you can think about the focuses in the books as to approve your present convictions. I will in general concur on the entirety of the focuses referenced in the book and associate with open source projects in certain and negative sense.

Not many of my top picks:

Everybody who composes programming is fashioner.
Design isn't majority rules system. Choices ought to be made by people.
There is something about future you don't have the foggiest idea.
Be just pretty much as conventional as you most likely are aware you should be at the present time.

Get the Book -> Code Simplicity

Coders: The Making of a New Tribe and the Remaking of the World

I get so energized when I track down an extraordinary book. I completed this book in seven days: intriguing and elegantly composed. It's true to life however it peruses practically like a novel, making it simple and amusing to peruse. I don't anticipate turning into a coder yet this has assisted me with seeing how pertinent software engineers are in the functioning scene. I altogether delighted in it; you will not find the mysteries of the universe or be motivated to set up a business, however it's a light and agreeable read. Suggested!

Get the Book -> Coders

Coders at Work: Reflections on the Craft of Programming Paperback

This resembles a set of experiences course book of the processing age. It's essentially an assortment of meetings with eminent developers, done in a characteristic and decipherable style. In case you're a geek, or you're in the innovation business in any capacity, at that point you should peruse it to get a feeling of where "it" all came from, and particularly to hear from a portion of individuals who got it going.

The difference between the various meetings is intriguing by its own doing - you can go starting with one person then onto the next to get a totally extraordinary or in any event, restricting perspective, so the final product is a wide viewpoint.

Get the Book -> Coders at Work: Reflections on the Craft of Programming Paperback

Design Patterns: Elements of Reusable Object-Oriented Software 1st Edition

As a software engineer or whoever working in the software development may it be a fresher or an experienced developer, this book is a must read. But sometimes it lacks more practical examples and the the example gives does not fully explains concept it is describing. Great patterns for programming but rubbish patterns for knitting.

Get the Book -> Design Patterns: Elements of Reusable Object-Oriented Software 1st Edition

Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

The book for the most part centers around broad rule about how to make a site pages so a client doesn't need to think a lot and can see quick from the plan and position of the areas.

It likewise disclose how to plan various areas of the page so client can undoubtedly distinguish what he/she is searching for and how to return from here. How a landing page should look a like. What a landing page ought to contain. Book is truly pleasant for a web designer also web deigner.

Get the Book -> Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability

Thank you for reading. Also you can Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

20+ Ultimate CSS Tricks and SASS Shorthands for code efficiency

Dev Write Ups — Mon, 03 May 2021 12:25:04 +0000

CSS may look exhausting, and not very many individuals can dominate it the correct way. So in this post we've written about 20+ CSS tricks and tips you should know also SASS mixins shorthand you should know. Notwithstanding, it is an expertise that can give you an incredible upper hand over different designers. On the off chance that you like addressing puzzles, you will discover bliss recorded as a hard copy CSS by viewing at it as a riddle to settle.

Let's look into some amazing CSS tricks 🤩.

Smooth Scrolling

When you visit some websites and try to got to different sections, it scrolls smoothly to that section. You can achieve this feature on your website by using one line CSS.

html {
   scroll-behavior: smooth;  
}

Prevent `<textarea>` resize

You can use the resize property to prevent <textarea> element form being resized (or limit it to one axis).

textarea.no-resize {
  resize: none;
}

textarea.horizontal-resize {
  resize: horizontal;
}

textarea.vertical-resize {
  resize: vertical;
}

Drop cap

You can add a drop cap to a paragraph by using the ::first-letter pseudo element.

::first-letter {
  font-size: 250%;
}

Input range pseudo-classes

The lesser-known :in-range and :out-of-range pseudo-classes can help you validate an <input> element by its min and max properties.

input:in-range{
  background: rgba(255, 0, 0, 0.6);
}

input:out-of-range {
  background: rgba(255, 0, 0, 0.2);
}

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

Useful CSS Pseudo elements selectors

Pseudo elements are a way to select and style a specific part of an element. You can think of them as a sub-element that are created as part of standard HTML elements.

How is it different pseudo class?

A pseudo class is used to select an element in a specific state(like hover or focus). A pseudo element is used to select a specific part of an element (like first-letter).

Pseudo element selectors begin with two colons(::) as a way to differentiate them from pseudo classes. This was only introduced in CSS3, therefore some selectors are backwards compatible and work with a single color(:).

`::before` and `::after`

Creates a pseudo-element that is the child of the selected element. The ::before pseudo element is assigned as the first child and ::after is the last.

.main-text{
  font-style: italic; 
 }

.main-text::before, 
.main-text::after {
  content:  ' " ' ;
  color: wheat; 
}

/*SUPPORTED IN ALL MODERN BROWSERS*/

`::first-line`

Applies styles of the first line of a block-level element. Keep in mind that the length of the first line will depend on the width of the element or viewport.

p::first-line {
   color: wheat;
   text-decoration: underline;  
 }

::placeholder

Represents the placeholder text in an <input> and <textarea> element. Only a subset of CSS properties can be used with the pseudo element.

input::placeholder {
  color: wheat;
  font-size: 1.2em;
  font-style: italic;
 }

::selection

Applies styles to the part of a document that has been highlighted by the user. Can be applied globally or to specific elements only.

::selection {
  color: #ffffff;
  background-color: #fa5094;
}

/*Only apply to selected text withing a paragraph element*/

p::selection {
  color: lightblue;
  background-color: #wheat;
}

CSS Short-hands for properties

CSS Short-hands properties allow you to set the values of multiple CSS properties simultaneously. They are useful to know as they make your code more concise and easier to read.

Edge properties

Properties related to edges of the elements box model (e.g margin or padding) follow 1 to 4 syntax .

[1 values syntax]Same value on all 4 edges

padding: 1rem;

[2 values syntax]First value for top and bottom and second value for left and right

padding: 1rem 2rem;

[3 values syntax]First value for top. Second value for left and right. Third value for bottom

padding: 1rem 2rem 3rem;

[4 values syntax]Separate value for each edge in clockwise order - top, right, bottom, left.

padding: 1rem 2rem 3rem 4rem;

Corner properties

Similarly, properties related to the corners of an elements box model (eg: borde-radius) also follow a 1-to-4 value syntax.

[1 values syntax]Same value on all 4 corner

border-radius: 1rem;

[2 values syntax]First value for top and bottom and second value for left and right

border-radius: 1rem 2rem;

[3 values syntax]First value for top. Second value for left and right. Third value for bottom

border-radius: 1rem 2rem 3rem;

[4 values syntax]Separate value for each corner in clockwise order - top, right, bottom, left.

border-radius: 1rem 2rem 3rem 4rem; 

### Border properties 

You can also condense border properties into one line. In this case though the order of the values doesn't matter.

css
/*LONG */
.blue-border{
border-width: 1px;
border-style: solid;
border-color: blue;
}

/*SHORTHAND */
.blue-border {
border: 1px solid blue;
}


### Font properties

Same applies to the font properties. Although in this case the values can get long individual properties can be easier to read sometime.

css
/* LONG */

.heading {
font-style: italic;
font-weight: bold;
font-size: 3rem;
line-height: 1.4;
font-family: Arial, sans-serif;
}

/SHORTHAND/

.heading {
font: italix bold 3rem/1.4 Arial, sans-serif;
}


### Background properties

And of course background properties can be condensed as well.

css
/LONG/
.background {
background-color: wheat;
background-image: url(../images/bg-cool.png);
background-repeat: no-repeat;
background-position: left top;
}

/Shorthand/

.background {
background: what url(../images/bg-cool.png) no-repeat left top;
}


--------

# SASS time-saving mixins

Using SASS makes your CSS codes very efficient. SASS is a CSS preprocessor and we have used it in almost every project. Here I am sharing some SASS mixins you can use to make your code efficient. 


### Center Blocks

We always find our self needing to center a block element so this mixin saves me a little typing.

css
@mixin center-block {
margin: {
left: auto;
right: auto;
}
}

// Use case
.wrapper {
@include center-block();
}

// Output
.wrapper {
margin-left: auto;
margin-right: auto;
}


### Pseudo

When using pseudo element you always need these 3 properties so why not put them in a mixin!

css
@mixin pseudo (
$display: block, $pos: absolute, $content: "";
) {
conent: $content;
display: $display;
position: $pos;
}

css
// Use case - default

.element:before {
@include pseudo();
}

// output
.element::before {
content: "";
display: block;
position: absolute;
}

css
// Use case - with args

.element:befire (
@include pseudo {
inline-block, relative, "*"
);
}

// output

.element:before {
content: "*";
display: inline-block;
position: relative;
}


### Ratio

A ratio mixin to create scalable elements (usually images). Since aspect ratio isn't very well-supported yet this alternative is useful.

css
@mixin responsive-ratio($x, $y) {
padding-top: unquote(($y / $x) * 100 + "%");
}

// use case
.wide-image {
@include responsive-ratio(16, 9);
}

// output
.wide-image {
padding-top: 56.25%;
}


### Truncate

Truncating text is another useful mixin have since it can be easy to forget the syntax.

css
@mixin truncate ($width-limit) {
max-width: $width-limit;
white-space: nowrap;
overflow: hidden;
text-overflow: hidden;
text-overflow: ellipsis;
}

// Use case
.excerpt {
@include truncate(10rem);
}

// output
.excerpt {
max-width: 10rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


### Cover background

If you're working a lot with cover background images this one can save a lot of typing.

css
@mixin cover-background ($image-src) {
background-image: url($image-src);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

// use case

.hero {
@include cover-background("../image/main.png")
}

// output

.hero {
background-image: url("../image/main.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}


### Organizing

Keep you SCSS files organized by keeping you mixing in a separate file. Since mixins don't generate any output until they are used it's easier to keep them in a separate file and import whenever you need to use one.

css
// keep all mixins together
@import "mixin.scss";

// Separate files for mixins
@import "center-block.scss";
@import "pseudo.scss";
@import "responsive-ratio.scss";
@import "truncate.scss";
@import "cover-background.scss";




--------

Thank you For Reading🤩 Subscribe to our  [newsletter](https://www.devintro.com) , we send it occasionally with amazing news, resources and many thing. Also if you find something useful share to world🥺.

8 Unique and Secret tricks Front-end Developers don't know

Dev Write Ups — Sun, 02 May 2021 03:38:57 +0000

This post comes with some of the unique and secrets(🤐) tricks developer don't know. Some tricks will help you in your career and will make you productive, take you to next level in development.

Datalist Tag

You can create an "autocomplete" feature for <input> elements by using the <datalist> tag. With this feature you will create a drop-down list of pre-defined options as you type.

<input list="cars" name="car" id="car">
<datalist id="cars">
     <option value="BMW">   
     <option value="Mustang">    
     <option value="Sienna">      
     <option value="Avalon">   
     <option value="Fortuner">   
</datalist>

CSS calc() function

This function allows you to perform calculations when specifying CSS property values. The most useful ability of calc() is that it mixed units, like percentages and pixels.

width: calc(5px + 100px)
width: calc(6em * 8)
width: calc(100% - 5px)

in operator

The in operator can check if an index exists in an array and will return true or false.

let cars = ['tesla', 'bentley', 'mustang', 'fortuner', 'Audi', 'BMW']; 

0 in cars // returns true
2 in cars // returns true
9 in cars // returns false

console.table()

This tools allows you to display a table in a console view in a very neat way by taking in an array object.

let actor = {name: 'Leonardo Di Caprio', movie: "Titanic"}
let actor2 = {name: "Shah Rukh Khan", movie: "DDLJ"}
let actor3 = {name: "Robert Downey JR", movie: "Iron Man 2"}

console.table([actor, actor2, actor3]);

Writing mode

This trick allows text to run vertically. This property has five possible options.

<p class="nlt">Subscribe to DevWriteUps</p>

<style>
 .nlt {
   writing-mode: vertical-rl;
 }
</style>

Legals or TnC

You can add legal docs, citations, terms and conditions or other prints in the bottom of your page with <small> tag.

<p>
  <small>* Please read Terms and Conditions</small
</p>

Math equations

Embeddings numerical problems, utilizing the MathML language is really basic in HTML5. You can put all your equations between the <math> tags.

<math>
            <mrow>
                <mrow>
                    <msup>
                        <mi>a</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>+</mo>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                </mrow>
                <mo>=</mo>
                <msup>
                    <mi>c</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
</math>

Direct children

Utilizing > to choose the immediate offspring of a component.

#footer > a

This will choose and style the entirety of the dynamic connection components that are quickly under the Footer ID. It will not choose anything past the dynamic component, or whatever else contained in the footer, similar to plain content. This works extraordinary with high level route components, as well.

Thank you For Reading🤩 Subscribe to our newsletter , we send it occasionally with amazing news, resources and many thing.

DEV Community: Dev Write Ups

320+ free resources for learning fullstack, frontend and backend

Blog your Journey

Must have Chrome extensions

VS Code Must have extensions

VS Code themes

General Resources

Learning Resources 📘

DOCS and Cheat sheets 😁

🌐 HOW DOES IT WORKS?

For HTML and CSS

📝 ONLINE IDE, EDITOR

📷 IMAGE RESOURCES

👓 ACCESSIBILITY

📄 TERMINALS FOR WINDOWS

📺 YOUTUBE CHANNELS

🖋 FONTS AND TYPOGRAPHY

🎨 ILLUSTRATIONS

💧 ICONS

Front-end Framework Learning Resources

⚡ JAVASCRIPT

⚡ REACT

Why React?

ES2015+

Routing

State Management

Bundlers

Build Stuff

🎮 APIs

⚡ NODEJS

😐 Learn GIT

Prepare for Interview (Questions)

Learn MongoDB

Courses

Blogs / Tutorials / Docs / eBooks

Videos

Learn Express

▶ Videos

Tutorials / eBooks / Blogs

Learn React

Blogs / eBooks / Tutorials / Docs

Course

React cheatsheets

React Interview Questions

React Styling

React and TypeScript

Learn Angular

Course / Videos

Tutorials / Docs / Blogs / eBooks

Cheatsheets

Learn NODEJS

📖MISC RESOURCES😉

JavaScript (A bit advanced)

Monetize Your Work

10 Crucial Tips For Better Social Media Management [Plus Tools]

10 Crucial Tips For Better Social Media Management

Top 5 Recommended Tools Automation Tools for Social Media Management

Takeaway

12 HTML things you should know about

Hide

<mark> tag

noscript

Voice search

preload attribute

Refreshing browser

Meta

Amazing <a>

<video> tag

<meter> tag

autofocus attribute

Progress tag

12 websites to learn to code by Playing Games

The ultimate JavaScript cheatsheet you'll ever need

JavaScript Number Method Cheat Sheet

JavaScript Loops Cheat Sheets

JavaScript String Methods Cheat Sheet

JavaScript Array Method Cheet sheet

JavaScript Datatypes Cheat Sheet

JavaScript Operators Cheat Sheet

Variables cheat sheet

`<mark>` tag

`noscript`

Amazing `<a>`

`<video>` tag

`<meter>` tag

`autofocus` attribute