Stuff we use to build stuff

Before we bring things to Tech-Novice, we often try it out here first to see if it's working ok.

You can check out those app designs too...eventually we hope they will wind up here.

If you want to check out our code, remember, in Chrome you can RMC the browser window and ask to 'View Source' to see the underlying code. Links in the source code can be opened so you can see the source code for CSS and JavaScript as well.

Having trouble? Need to learn a new technology? This should be your first stop. You can interact with snippets of code and in some cases, add your own twist to stuff

Because this site is run by the World Wide Web Consortium, the material here is up-to-date and trustworthy.

Join Udemy and search just about any tech topic of interest and you can find excellent training with relevant materials.

Online materials are offered so you can follow along. Mobile and tablet technologies are supported.

Aimed at a Middle School and Upper School clientele, CHS offers training and support for teachers and students in many languages and arenas.

Free and paid options are available.

A readable, informative online guide to all things JavaScript!

It also provides a coding sandbox where you can experiment with code and attempt the book's exercises.

An extensive, well-written, colorful introduction to web design. Readable and comprehensive while being comprehensible.

Python is a relatively new language for us here at TNT labs, so we've been doing lots of reading, studying and coding based on their tutorials.

We've gotten about 7 books or more on Python3 and they've been great to get us up to speed.

Check out their site and see what you can find!

Excellent training on so many topics and platforms!

Credit where credit is due. That's what we always say. We used one of Daniel's tutorials when coding our Random Circles JS Processing app. We can't wait to view some of his other work.

Daniel also wrote a classic, in our view about coding: The Nature of Code, and this Java-based text is available free online as well as support software. Youza!

If you're a fan of P5JS Processing like we are, you'll appreciate Daniel's tutorial on the subject. It's a collection of 35 videos to help you get up to speed on the Processing ecosystem in JavaScript.

What's UX? Well if you asked that maybe you need Steve's book! Learn common sense principles of digital design.

Remember HTML is the structure or framework upon which all web pages are built. If its not sound, other things might not work.

We have supplied a framework upon which many of our pages are built and you can follow the link, pull up the source code, and copy it for your use.

The horizontal rules seen in the page reflect boundaries between the masthead, 'jumbotron' and footer areas. They can be replaced with border styles as the page develops. Notice, there are no overt styles in the page now except for the san-serif font supplied by Bootstrap.

You're welcome!

Unlike W3Schools, this is not a tutorial site, but answers abound here if you ask the right questions.

When googling for an answer to a technology question, preface your question with a context (like 'javascript' or 'CSS' then a short phrase with keyword that summarize your inquiry.

When you get your search results, give focused attention on any 'hits' from Stack Overflow. They are often right on target and a green checkmark on a response lends all the more credibility to an answer.

We ♥ Stack Overflow!

How do you know your code is 'valid'?

Sites that validate both HTML and CSS are so important that we put links to them on every page, in our footer.

They help us find syntax errors which might cause our code not to work as expected.

See how professionals debug their programs!

Any time we are doing work at the labs, we hit pockets of turbulence. When we finally recover, we like to document the issues in code, often with the phrase: 'DWR' which means: 'Danger, Will Robinson!'

Are you perplexed? Well, that's a catch phrase from the 1960s campy sci-fi series 'Lost in Space' (which Netflix recently revived with a classy spinoff that was far from campy and actually pretty good!)

We use this phrase to alert us to past dangers so we can avoid them and learn from them.

What about 'Eureka?' Well, it's a phrase from antiquity meaning 'I found it' which alerts us to solutions to 'DWR' difficulties.

Follow this link to learn more and to see a table of our problems and their resolutions.

Novice web page evaluations uncovered several common issues that needed to be addressed. Based on these observations, we put together a checklist you can go through to help you as you develop your own pages.

Integrate GitHub Copilot into VSCode and streamline your coding process with AI assistance!

We at TNT have been using this for the last several months and really like it for Web Development

Here are some helpful extensions we've found to make our work easier: (Hover over them for details)

• W3C Web Validator (Celian Reiboulet)
• HTML formatter (Nikolaos Georgiou)
• Live Preview (Microsoft)
• HTML CSS Support (ecmel)
• IntelliSense for CSS class names in HTML (Zignd)
• HTML Boilerplate (sidthesloth)
• Code Spell Checker (Street Side Software)
• Live Server (Ritwick Dey)
• p5.vscode (Sam Lavigne)
• Prettier+ (Benas Svipas)
• Print (PD Consulting)

Many Android app developers use this IDE to do their magic!

This is a great first language if you are wanting to learn how to code!

If you are an iPad/iPhone user, Pythonista is a platform where you can code on your mobile device.

Our legacy TNT site featured a series of movies showing Python in cahoots with Processing. You ought to check it out; we even included some Python source code.

Get this platform to visualize coding designs with animations

Faster game development! Be sure to check it out!

Download the platform and incorporate innovative functionalities with this slick platform

PHP is a server-side language and you need to have a 'testing server' on your local machine to test your PHP designs. This is an easy-install solution that creates that 'sandbox' for you!

Author Paul McFedries offers a genius website (for free) for testing HTML and CSS code blocks. He wrote the book Web Coding and Development (All-In-One) for Dummies which has been a great resource for our wizards!

We at TNT believe there is no substitute for learning HTML5 and CSS3 (and JQuery) from scratch...

With that said, sometimes you just need to crank out a design quickly, and Bootstrap helps you do that with it's extensive use of classes.

Their site provides many examples and, not surprisingly, W3Schools offers some great tutorials on it as well.

A novice introduced this to us as a platform they used to make a 'sprite' in a Processing game. We can't wait to learn more about it!

We often use Heath's Colorsliders to design colors, but it has its limitations. This site offers more options

One of our novices, Sergio, directed us to this nifty resource!

Offers a 'catalog' of various patterns you can use in your CSS to make backgrounds more engaging

Sports a 'free' and 'professional' platform for making creations in a fairly simple manner

Why fuss with making a CSS gradient when they will make one for you and give you the CSS rule?! Imagine the apps that you can improve by using this!

Grayson T., a talented novice, showed the TTG this fun site and it's great for practicing your skills! You can create a free account and save your work and review your progress.

Only used once so far, but was useful to extract a bunch of tags while retaining content so we could send desired 'copy' to our HTML5 structural engineers!

Sweet! Use phrases, paragraphs, etc generated randomly using this site. Since they are English words, they will not trigger your spell checker unlike traditional Lorem Ipsum.

Using 'filler' like this frees you to make your designs and test them with test content without having to generate your real content until you or your team is ready for it.

Use this site to create a harmonious color palette with up to 5 colors

Another engine for picking and designing colors

This tool allows you to upload a photo and it will find an harmonious color pallete to go with it.

Favicons serve as 'branding' images that identify and personalize your site. They appear in the browser tabs to the left of your page names and also appear when you bookmark pages.

This site lets you create not only favicons but also imagery for mobile devices

Favicons serve as 'branding' images that identify and personalize your site. They appear in the browser tabs to the left of your page names and also appear when you bookmark pages.

We had previously been using Favicomatic, but recently it's not been cooperating with downloading the results. This current site seems to work similarly.

Find beautiful, thematic fonts you can utilize with CSS to enhance the quality of your pages

Icons from this site are available for free on a limited basis; more are available in multiple formats with an affordable membership.

Simply search for an image, customize its color, format and size, and drag it to your desired location. This app is also available on your mobile devices.

Again, like Noun Project, icons from this site are available for free on a limited basis; more are available in multiple formats with an affordable membership.

These fonts are activated using JavaScript and CSS and can be styled; therefore they are more flexible than ones from the Noun Project.

Useful site for generating random profiles and pics for testing your site's 'look and feel' using realistic imagery and text

Need that 'special symbol' that isn't on the keyboard? Here's a site that lets you get it using special codes called 'character entities'

When using JavaScript you might want to perform an action using a keystroke as we did in the Password Peek-A-Boo app. This site gives you the key codes!

Use this site to find unicodes to make your output in Java apps a little bit more cool.

Many great ideas here on how to make responsive designs for various products.

Sometimes emojis can be used instead of regular images. We're currently developing a JS Matching Game we hope to release soon, and it uses these delightful emojis without the hassle of image tags.

It's a pain to create CSS background patterns from scratch. In December 2022 we stumbled onto this site and indeed, Christmas came early! Check it out!

See how we used Magic Pattern to style a heading for our Recipe Recreation app.

You should check out your web designs on all modern browsers, but our lab environment lends itself well to using Google Chrome, so that's what we are mentioning here.

You can customize Chrome with some plug-in software tools called 'extensions' and we have found these particularly helpful:

• Web Developer Toolbar by Chris Pederick
• ColorZilla
• Aesop Ipsum
• Yet Another Lorem Ipsum Generator
• View Rendered Source

When coding, you can use Chrome's 'Developer Tools' to check on various aspects of your page's performance. The console is particularly helpful when checking out errors or variable values. Pull it up with: Shift-Control-J

Upload your site into this little app and it will show you what it looks like on various platforms. Responsiveness and "Responsive Web Design" is a very desirable goal in our current coding environment.

A great resource for techies. There's an app for your iPhone as well. A must have!

A mathematical picture is worth 1K words

An alternative to the TI-Graphing Calculator

If you want an alternative to PowerPoint, here's a platform for you. Offers both free and paid memberships!

Want to embed a YouTube? This little app will help you do it.

Maybe you'll find some inspiration here too!

Find some encapsulated wisdom and humor

Important images we've collected over the years

Wow. We've had great success creating artwork using AI here at TNT. Our CSS Styling Demo needed a goofy cartoon featuring a skeleton with green polka-dot shorts. No problem. We hope this site remains free!

This site was mentioned in a training video by Brad Hussey on the CRAP rule.

You'll probably get a chuckle at how crude some of it all is, but we've been learning all this time, and they say at Shipley's Donuts: 'Quality takes time.' But at least, you might be entertained.

Maybe, just maybe, you will appreciate how much has happened to get this upgrade launched.

Some really great work to explore (and 'borrow', wink)

Have to see this to believe it!

This app is like the one above, but does not (currently) have an associated fee for use.

This interface is a bit awkward but this software is amazing! May never trust my eyes again...

You may never look at computing the same way again...

According to the AI itself, GPT stands for:

"GPT stands for "Generative Pre-trained Transformer". It is a type of language model developed by OpenAI that is designed to generate human-like text. It has been trained on a large dataset of human-generated text and can be fine-tuned for specific tasks, such as translation, summarization, and language modeling."

By the folks at OpenAI, this framework generates realistic art based on natural language descriptions of an image.

In a 2015 production by NOVA, The Great Math Mystery, scientist Elizabeth Brannon is shown researching whether or not lemurs have a 'number sense' using specialty software. You never know where your coding skills might be required!