Share Your Work

Jsum
Key Advisor

Developers Tools Cheat Sheet

I don't know if this is appreciated here, but you see this in other forums. Below is a list of tools I have collected and use frequently. I thought it might be helpful for others. If you would like to add to this list just post below and I will update it.

 

Chrome Extensions

Page Ruler - https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme
px measurements directly in the browser.

 

ColorPick Eyedropper - https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
Eyedrop hexidecimal or rgb color codes from any webpage.

 

Font Ninja - https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh
Get information about live fonts on web pages. family, size, letter-spacing, line-height.

 

Huspot Sales - https://chrome.google.com/webstore/detail/hubspot-sales/oiiaigjnkhngdbnoookogelabohpglmd
I use this with gmail and it tells me when someone opens my emails. Very useful for inticipating responses.

 

Awesome Screenshot - https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj
capture parts of a webpage, the whole page, and etc.

 

Block Yourself From Analytics -https://chrome.google.com/webstore/detail/block-yourself-from-analy/fadgflmigmogfionelcpalhohefbnehm
The name says it all. I believe this only works for Google analytics.

 

Javascript and CSS Beautifier - https://chrome.google.com/webstore/detail/javascript-and-css-code-b/iiglodndmmefofehaibmaignglbpdald
Open a .css or .js page in your browser and it will automatically ask to format it. This works for Developer Info in Hubspot.

 

Live edit for CSS - https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol
Enter css into the extension window and it automatically applies to the page you are on. Write out entire style sheets then copy and paste them into your .css file.

 

Vidyard - https://chrome.google.com/webstore/detail/screen-and-webcam-recorde/jiihcciniecimeajcniapbngjjbonjan
I actually got this from several people at Hubspot and now I use it all the time, even here on the forum. screen, browser, or tab capture with super simple sharing that doesn't appear to expire.


Image Optimization

Compressor.io - https://compressor.io/
I use this mainly for PNGs but it works for all image types.

 

Jpeg-Optimizer - http://jpeg-optimizer.com/
This isn't as pretty as compressor.io but I like it over compressor.io for JPGs due to it performing better in my tests with JPG images.


Calculators & Converters

Wyzant Proportion Calculator - https://www.wyzant.com/resources/lessons/math/algebra/calculators/proportion
Cross multiplication is neccessary when I am using a 4500px wide design to build a 1950px wide website.

 

percentage calculator - https://percentagecalculator.net/
I use this er'time.

 

Google Calculator - https://www.google.com/search?q=calculator
Just search calculator. Better yet, just type the math problem into the address bar when your search engine is google. I like this better than my os calculator.

 

PX to EM Converter - http://pxtoem.com/
Pixels, EMs, Percents, Points... It's all relative.


HTML, CSS, Javascript

Dirty Markup - https://www.10bestdesign.com/dirtymarkup/
Hubspot's old design manager used 4 space tabs, the new one uses 2 space tabs, my notepad uses 8 space tabs and my text editor uses etc. Also there are times when you have to go through svg markup, someone elses markup, or generated markup. This tools is great for setting markup straight. pay attention to the settings on the sidebar though, in most cases you will want the output to be code fragment, full page adds html, head, and body tags.

 

DiffNow - https://diffnow.com/
Paste a different version of a script to each side, submit, and DiffNow will tell you the difference. If you have ever fumbled script versions like I have then you know the power in this.

 

JSFiddle - http://jsfiddle.net/
I still prefer to build my modules in JSFiddle then plug them into Hubspot. Having hte preview on the same page and not having to worry about all of the skipping and freezing bugs makes it so much faster to get the functionality squared away.

 

CSSMatic Box shadow - https://www.cssmatic.com/box-shadow
I do not write my own box shadow code, ever.

 

CSS3 Text Shadow Generator - https://css3gen.com/text-shadow/
Same.

 

Ultimate CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/
Ditto.

 

Other generators - https://html-css-js.com/css/generator/
So many other generators though I rarely use these.

 

Flexbox references:
cssreference.io - https://cssreference.io/flexbox/
CSS-tricks - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It's the almighty flexbox. It would be so much easier to remember all of the attributes if there weren't all of those prefixes involved, but at least there are a few nice references that stay up to date.

 

w3schools.com - https://www.w3schools.com/
try searching 'text-align w3schools' in google. This is how I quicky reference html and css directly from w3schools in google. The first result is your uncle, and he will tell you what you need to know.

 

Google Maps API Styling Wizard - https://mapstyle.withgoogle.com/
I read a book on the Google Maps API a couple a years ago and it kind of became my thing to deliver cleverly style maps to my clients. This app lets you choose your styles then gives you the json to use in your google maps function.


Learning

Codecademy - https://www.codecademy.com/
Free educational platform for coding. Work in real modules with guided instructions, hint, and live preview. I have spent hundreds of hours on the site.

 

Team Treehouse - http://referrals.trhou.se/jonathansumner2
I've spent thousands of hours here. If you want to take development seriously then learn from the best. This site is the best with video tracks containing video modules, quizzes, and it's own coding platform. Learn about HTML, CSS, Javascript, Python, SVGs for web, app developement, design, etc. etc. etc.

 

w3schools.com - https://www.w3schools.com/
again, of course.

 

CodeWars - https://www.codewars.com/
Not for the meek. You have to pass a test in your chosen language before being allowed access. Battle it out with a large community of developers by solving coding problems of different difficulties and in different languages. It's free.


Other Tools

Zeplin - https://zeplin.io/
View Sketch files on Windows.

 

Coggle - https://coggle.it
'a freeware mind-mapping web application'. hierarchically structure information (like a site map) through branching.

 

Toggl - https://toggl.com/
Mostly because it rhymes with Coggle. Also I use this for time management.

 

freedcamp - https://freedcamp.com/
I've used all of the project management softwares. Some are great but expensive, others are horrible and expensive. I prefer freedcamp and it's comparable functionality, along with all of its add ons.

 

Anwer the Publichttps://answerthepublic.com

Creates a web of google search around your keyword for topic ideas.

 

I'm sure there are plenty more I can list here, and I might update this list at a later date if anyone is interested.

 

 

Need help? Hire Us Here

32 Replies 32
largeLine
Member

Developers Tools Cheat Sheet

Hey hi, @Jsum that are really cool apllication for image compression but I always use https://jpegcompressor.com/ for compressing my images and it supports all type of images too and it has addition features.

0 Upvotes
AKhan614
Member

Developers Tools Cheat Sheet

Hey there! Imagine you have a big size picture you want to put on the internet, but it’s too large. Usually, when you try to make it smaller, it becomes blurry or pixelated, and that’s not cool. But now, there’s a new tool in town that can resize image to 20kb to a tiny size without making them look bad! This tool is like magic, it takes your big size picture and resize it down to just 20KB, which is super small, but it still keeps the image looking great. How does it do it? Well, it’s kind of like when you pack a suitcase really efficiently, making sure everything fits snugly without squishing anything important

Techziz
Participant

Developers Tools Cheat Sheet

Here i go to share some of the developers from my knowledge... first of all, thank you to everyone above many tools so useful for me thank you so much you all... i upvoted 👍 all tools...

 

https://redketchup.io/ - always my favorite for resize bulk images - its completly free tool...

 

https://quillbot.com/ - i use for grammar correction and also everyone know chatgtp also...

 

then i refer one blog website... wikis blog

wikiblog.org is lyrics, bio, A Nursery Rhyme Poem for Kids lyrics sharing website... its useful for my relatives kids... check the kids corner...

 

speaker trends - Here you can get recent speaker information like specs, price and features and so on...

 

0 Upvotes
RAhmad1
Member

Developers Tools Cheat Sheet

design and resize images 200x200 image converter tool

Eric_Goldman
Participant

Developers Tools Cheat Sheet

Wanted to add a tool we built that can help you work with all your HubSpot data using SQL or your ORM:

 

Sequin - Sequin will sync your HubSpot data to your database in real-time. You can use good 'ol SQL to work with your data, build internal tools, and reporting.

Jaycee_Lewis
Community Manager
Community Manager

Developers Tools Cheat Sheet

Thanks, @Eric_Goldman!

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

JeremiahH
Participant

Developers Tools Cheat Sheet

Cool!

 

MZuberi
Member

Developers Tools Cheat Sheet

i always use ColorPick Eyedropper when ever i am working on any project for Marketing.net.pk | Marketing Company in Pakistan  

braindean
Member

Developers Tools Cheat Sheet

To this precious piece of content I want to add one more JPEG OPTIMIZER - https://digitalexpertsolution.com/jpeg-optimizer/ which will provide you the best image optimization as per your requirement with the help of customized options.

tehreke
Member

Developers Tools Cheat Sheet

That's a nice list. I also use - https://www.showmyip.com/bulk-ip-lookup/ for verifying my traffic.

smkprojects
Participant

Developers Tools Cheat Sheet

 Thank you Smiley Happy

 

Also, Check this below some cool tool 

 

Hike Calculator  -- When you got a hike or when you switch to another job with a salary hike, then its important to know how much percentage of the hike you have got in your new job.

 

Percentage Calculator --- General Percentage Calculator

 

Json to String  --  Online json to String Converter.

Also ounce to cup - This website also cooking related converted here you find the ounce cup conversion measurements easy and accuratetly. cm to foot -- Centimeter to Foot conversion free online tool. 

 

image to css - Online image to cascading stylesheet converter.

 

Blog

https://w3percentagecalculator.com/blog/is-mb-bigger-than-kb/   -    Is mb bigger than kb

 

Webziz - is encyclopedia blog you can learn lot of things here...

 

Phones Specs - Awesome designed website you can check here all phones specification instanly...

 

dp whatsapp - website name is more familier, yes can find awesome picture here... check it on...

 

 

 

 

 

smkprojects
Participant

Developers Tools Cheat Sheet

 Thank you Smiley Happy

 

Also, Check this below some cool tool 

 

Hike Calculator  -- When you got a hike or when you switch to another job with a salary hike, then its important to know how much percentage of the hike you have got in your new job.

 

Percentage Calculator --- General Percentage Calculator

warrendavey
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Developers Tools Cheat Sheet

Awesome!  Thanks!

✔️ Was I able to help answer your question? Help the community by marking it as a solution.

Davey Waren
Pearagon

Still have questions? Let's Talk

JonStanis
Contributor | Diamond Partner
Contributor | Diamond Partner

Developers Tools Cheat Sheet

Adding a few of mine not listed.

 

HubX - Copy and paste modules across templates. Also, I prefer this extension's dark theme.

 

Brave - Just like Chrome but with more tools for blocking tracking, making surfing faster.

 

Check My Links - Make sure there are not any broken links on your page.

Anonymous
Not applicable

Developers Tools Cheat Sheet

These are great - thanks for sharing!

Another great free tool for putting together flowcharts and other similar visuals: https://www.draw.io/ 

 

-----------------

Heidi1
Contributor

Developers Tools Cheat Sheet

These are great — thank you!

Jon_McLaren
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Developers Tools Cheat Sheet

Adding the Front End Handbook to the mix, it's free web based and basically an aggregation of everything front end web development.
https://frontendmasters.com/books/front-end-handbook/2019/

 

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Developers Tools Cheat Sheet

Just found https://getstation.com/ - Loving how I can have an app for my 6 gmail accounts instead of pinned tabs in my main browser.

Anton
Thought Leader

Developers Tools Cheat Sheet

CSS Media Queries

(most-likely) all media queries on css-tricks.com - you don't need to know them all, that's why there is such a list 🙂

Anton Bujanowski Signature
Jon_McLaren
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Developers Tools Cheat Sheet

Just a word of caution on the media queries on that page, while they're useful if you're building say a web app that has to look a certain way for specific devices. You really should be using media queries that are not that limiting, and are design specific not device specific. Even says it on the page. 

Though CSS-Tricks itself is probably the best resource on the whole list.

Messages posted by this account have been preserved for their historical usefulness. Jon has a new profile now.