Sep 19, 2018 8:00 PM - edited May 31, 2019 5:43 AM
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.
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.
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.
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.
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/
Ultimate CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/
Other generators - https://html-css-js.com/css/generator/
So many other generators though I rarely use these.
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.
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
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.
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 Public - https://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
Oct 23, 2018 9:05 AM
This is awesome, thanks for putting this together. I'll add a couple I use as well.
Over the years, *W3Schools has built a slight reputation of serving some old/outdated information, so I've found it's better to go straight to the source; Mozilla Developer Network(MDN).
*I'm told they've gotten better at updating, but I still find MDN to be the most helpful.
Also for learning, you have sites like:
Stack Exchange Network: The Stack network contains a large amount of communities, but the two best for developers will probably be StackOverflow and CodeReview.
StackOverflow: Get real-time help on your code errors, supports many different languages, plugins, etc. The community is huge and I've found that if you're descriptive enough, you can get some pretty detailed answers in a matter of minutes.
Code Review: This is a great way to have a little help with refactoring. Just throw your working script up there, explain it's use, and users can comment to tell you how it could be simplified. Great for teams with a single developer.
There is also CodePen and Plunkr
CodePen: This works as a browser based sandbox mode, offering a handful of html/css template languages and JS plugins. It also includes a live view so you can see your changes take effect instantly. Free to sign up, and it has a save feature where users can see your work from your profile.
Plunkr: Similar to JSFiddle and Codepen, except it includes a whole file system (great for working with things like Vue, React and Angular).
Oct 23, 2018 10:57 AM
unsure if it is a paid feature, but codepen will allow to start a project that includes a filesystem and have some templating options. I dont know what i would do without codepen!
Oct 23, 2018 6:38 AM
Oct 18, 2018 1:25 AM
When i develop locally, I have an autoprefixer. When i dev in the design manager, i paste my code here: https://autoprefixer.github.io/
Oct 8, 2018 1:59 AM
here two nice pages to check if the wanted css code is supported by the browser:
Can I use
a site you can type any css command in and it will show you if it's supported and in which browser.
the site is offering a e-mail template builder but has also a neat overview of all css commands and shows which one is supported by which e-mail client
Sep 20, 2018 7:28 AM - edited Oct 25, 2018 10:41 AM
@Jsum - Love it.
This tool is a game changer as well https://pasteapp.me/
Hit CMD+SHIFT+V when pasting and it brings up a paste history in a nice UI and you can store pastes indefinitely
If this answer helped, please, mark as solved 😄
email@example.com | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.
Drop by and say Hi to me on slack.