Mastering Web Development: A Comprehensive Guide for Beginners
In the vast landscape of technology, web development stands as a crucial cornerstone. It encompasses the art and science of building websites, ranging from simple static pages to complex web applications. Whether you're aiming to pursue a career in software development or seeking to enhance your digital presence, understanding web development is essential.
In this comprehensive guide, we'll take you through the fundamental concepts and practical skills needed to master web development from scratch. Let's dive in!
1. Understanding HTML (Hypertext Markup Language)
HTML serves as the backbone of every web page, providing the structure and content. It uses tags to define different elements such as headings, paragraphs, images, and links. By mastering HTML, you'll be able to create well-structured and semantically meaningful web documents.
2. Exploring CSS (Cascading Style Sheets)
CSS is the language used to style HTML elements, enhancing their appearance and layout. With CSS, you can customize colors, fonts, spacing, and more, giving your website a polished and professional look. Understanding CSS selectors and properties is essential for effective styling.
3. Introduction to JavaScript
JavaScript is a versatile programming language that adds interactivity and dynamic behavior to web pages. From simple animations to complex web applications, JavaScript powers a wide range of functionalities. Learning JavaScript fundamentals such as variables, functions, and events is crucial for web development.
4. Building Responsive Websites
In today's mobile-centric world, it's essential to create websites that adapt seamlessly to various screen sizes and devices. Responsive web design achieves this by using fluid grids, flexible images, and media queries. Mastering responsive design principles ensures that your websites look great on desktops, tablets, and smartphones.
5. Introduction to Version Control with Git
Git is a powerful tool for tracking changes in your codebase and collaborating with other developers. By learning Git basics such as branching, merging, and committing, you can streamline your development workflow and effectively manage project versions.
6. Introduction to Front-End Frameworks
Front-end frameworks like Bootstrap, Foundation, and Materialise provide pre-designed components and stylesheets to expedite web development. By leveraging these frameworks, you can create responsive and visually appealing websites with less effort and code.
7. Introduction to Back-End Development
While front-end development focuses on the user interface, back-end development deals with server-side logic and database management. Learning back-end languages such as Node.js, Python, or PHP enables you to build dynamic web applications and handle user interactions efficiently.
8. Deploying Your Website
Once you've developed your website, it's time to make it accessible to the world. Deploying a website involves selecting a web hosting provider, uploading your files, and configuring domain settings. Understanding the deployment process ensures that your website goes live smoothly.
9. Conclusion and Next Steps
Congratulations on completing this comprehensive guide to mastering web development! By now, you've gained a solid understanding of HTML, CSS, JavaScript, version control, frameworks, and deployment. As you continue your journey in web development, remember to stay curious, practice regularly, and explore advanced topics to further refine your skills.
Resources for Further Learning:
Online tutorials and documentation
Interactive coding platforms
Community forums and discussion groups
Next Steps:
Explore advanced topics such as web performance optimization, server-side rendering, and progressive web apps.
Build real-world projects to apply your skills and showcase your portfolio.
Stay updated with the latest trends and technologies in web development through blogs, podcasts, and conferences.
With dedication and perseverance, you'll continue to evolve as a proficient web developer, creating innovative solutions and contributing to the ever-changing digital landscape . Happy coding!
This week I have been developing my knowledge of using APIs within my web app using the javascript Fetch API. In the small app below I have used the dictionary API (which is free, link below):
Free Dictionary API
This very basic API returns a JSON with a meaning of the world and audio snippet of how to pronounce the word. I followed along to a very good tutorial on YouTube to help build this app which is here:
(43) JavaScript Project in 5 min - English Dictionary Project #HTML, #CSS and #JavaScript - YouTube
You can see the finished product below:
As you can see this is a very good example of working with a very basic API. It basically returns a JSON object which we then turn into an iterable JS object with the .json() method. You can see a snippet of the script below:
Once we have generated an object we can point to the data within its arrays and assign it to the innerText or 'src' (audio) of the website's elements.
Some further learning required to understand exactly how this works is:
Promises
Async functions
Await
Although this is basic I plan to go to Rapid API and look through the various free APIs available and build a bigger application that requires API keys, options which are included within the API calls header.
i would die for a "how to use html and css to format ao3" lesson from you 👀 no pressure but i'm genuinely in awe :)
Hello! So sorry it’s taken me ages to get to this.
It's no pressure at all! I have tried to cover the basics of HTML/CSS on AO3 here, and instead of writing very extensively about the syntax which is very Google-able, I have tried to include little tips and tricks that have come in handy for me.
This, by no means, is a complete guide but I hope it can get you started with HTML and CSS on AO3!
It got pretty long, so the answer’s below the cut.
Okay, so let’s start at the very beginning, shall we?
What is HTML and CSS?
Well, HTML is Hyper Text Markup Language and CSS is Cascading Style Sheets.
But that is something that probably doesn’t help a lot, so to put it very simply, HTML provides the structure of a webpage while CSS does the styling, that is, fixing how and where the elements should exist, how to shape them, how to space them, all so that the webpage looks great.
Something to keep in mind is that all web pages can run only on HTML but the end result is not going to be something that’s nice to look at. In fact, without CSS, the page might not even make a lot of sense. Here, take a look at Tumblr itself with all CSS disabled (there’s a very useful extension called Web Developer that allows you to do this):
Not very nice to look at, but all the elements of the page are here only with the help of HTML.
And look, this is what the above section looks like with CSS enabled:
This was just a brief visual walkthrough to show what HTML and CSS really do, but let’s move on to HTML and CSS in the world of AO3.
Where does the HTML and CSS go on AO3?
The HTML part of the code is put into the text box when you post a new story/new chapter. You must have noticed the two options — Rich Text and HTML — and it’s important to have HTML selected for AO3 to identify the HTML tags that you’ll be using.
All your content goes into this textbox. Whatever text you may be writing, whatever images you may be hosting, whatever links you might want to add— everything goes here.
Now, for styling all the content that you’ve put into the textbox, you need CSS, and that happens through work skins. It’s super simple, and all you have to do is go to Skins on your AO3 panel and then to My Work Skins, and then create a new work skin where you can dump all of your CSS code.
Okay, so onward we go.
How to HTML and CSS?
I’m no expert in web design and my knowledge mostly comes from Coursera, one summer internship, one class in college, and extensive online searching. And, I’ll tell you this, the most I have learnt is from extensive online searching.
Because at the very heart of it, web design is not so much about understanding and applying concepts (as with other coding languages) but more about visualizing elements and testing them out. I must add that this is completely my opinion as a person who rather enjoys data structures and algorithms as compared to web dev, and I’m certain that seasoned web developers will disagree with my views here.
Right, so the online searching. The best in the business when it comes to explaining HTML/CSS is www.w3schools.com. They have sample code, short and sweet explanations, and an online IDE to test your code. Really, it’s a win-win situation.
Alrighty, so now you know where to look for your HTML tags and CSS properties but how do you figure out which ones to use?
HTML Tags
I’ll talk about the HTML that’s required for coding on AO3 exclusively.
But before that— every HTML document has two main parts: the <head> and the <body>. But here on AO3, we only code the <body> which, as its name suggests, holds the content that’s going to appear on the browser. The <head> part is not required for AO3 work skins at all.
Okay, so how to code HTML on AO3? Well, your best friends are going to be the container tags such as <div> and <span>, and the paragraph tag <p>. What these tags do is they create areas on your browser — you can imagine them as small rectangles and squares — where you can put in your content via HTML, and then later style using CSS.
See this? The entire shaded area belongs to a <div> which is styled by a CSS class called “tumblr” (to keep things simple, we’ll only focus on CSS classes, and not id’s. It won’t really hamper developing a workskin in any way.)
This above belongs to a <p> that is styled by a CSS class “tumblrbody”. And, this <p> exists within the <div> mentioned above.
Here’s a <span> styled using the CSS class “tumblrtags”, which comes within the <div> and <p> we just discussed.
Basically, the idea is that the entire page will have to be divided into all these subsections, nested within each other if required, so that they can then be styled using CSS.
Other HTML tags that come in handy are the <a> and <img> tags.
The <a> or anchor tag is used to embed links. Want your reader to be led to a separate page while they’re reading your story? This is it. (This one’s quite common, and authors use them quite frequently in their notes to link to their Twitter/Tumblr etc.)
The <img> tag is used to embed images as the name suggests.
See how the picture is within an <img> tag styled by a CSS class “tumblrimg”?
Again, I’m not talking about the syntax of these tags or how they have to be written because that’s something which can very easily be found on w3schools or any other web dev tutorial website.
So, that’s pretty much about HTML. Now, CSS.
CSS Properties
So, when I talk about how most of my web dev happens through thorough internet searching, I’m mostly talking about CSS. Because HTML tags aren’t difficult to remember, they stay in memory when you keep designing web pages, but CSS properties... ugh.
But before we begin, a short note on CSS classes. To simplify matters you can look at them as labels given to your HTML container tags (<div> for example). Once you assign the label to your HTML element, you can then style that label in your CSS, and introduce properties to it which you want to see in your HTML. It basically forms the link between your HTML and CSS.
Say, I have a <div> that I want to style, then I’ll give it a label like this: <div class=”mongoosesurprise”>Your code</div>. The class name is mongoosesurprise, and when I have to style that particular <div>, I’ll have CSS code that looks like this:
Now, about CSS properties.
You see all the words in white followed by a colon? max-width? border? background-image? That’s it— CSS properties. I can never remember if it is maxwidth or max-width, whether it’s margin-right or right-margin, whether it’s padding-right or right-padding, and that’s where the Googling comes in.
Again, like with HTML, I’ll only talk about CSS on AO3. Unlike regular CSS, CSS here always has to start with #workskin. And then, #workskin can be followed by our class name. (The class name must be preceded by a fullstop though, like in the picture above.)
My CSS design procedure is all over the place. I entirely work on the basis of trial and error. I keep adjusting properties like max-width and padding and margin to see how the elements fit best. (It doesn’t take me as long as it did four-five years ago to estimate these values and I’d attribute that to practice and inspecting a lot of web pages. On a related note, it’s great to learn web design by inspecting other pages.)
I realize this isn’t great advice but like I said, it’s always been about trial and error when it comes to CSS. What I can say conclusively is that with properties width, height, display, position, padding, and margin most of your HTML tags will be placed properly. But when it comes to styling, the list is really quite endless. From a number of font-related properties to border, there’s a lot— and, thus, Google.
And, finally, what you must know for HTML/CSS on AO3 is how to host images.
Hosting Images
If you want your work to contain images, it’s best to host them somewhere online. Imgur is a great option; it’s free and really simple to use. Once the image is uploaded, you can get the share links and put it in your HTML <img> tag (under the src attribute— again, very syntactical so I’m not getting into that), or if you want you can put it in your CSS as an attribute for the property “background-image” (like in the code above).
You’ll have to make minor changes to the share link though, that is, add the image extension (.png or .jpg) to the end of the link. Also, sometimes the image doesn’t render if there’s no ‘i’ preceding ‘imgur.com’. Here’s a sample link that works perfectly: http://i.imgur.com/aSMSztl.png.
And, I think that’s pretty much it.
This covers the absolute basics of how to code HTML/CSS on AO3. But I’d like to repeat that by no means is this everything. If there’s a particular area you’d want me to explain, please feel to drop in an ask!
I just watched the excellent video by Sarah Z about fake made-up posts, i.e. screenshots of Tumblr posts that are clearly stupid made-up stories, except the screenshot itself is also fake. And that inspired me to do something I’ve wanted to do for a while: Make an illustrated tutorial on how to make a fake a screenshot of a tweet, Tumblr post or similar that are indistinguishable from real ones.
This works on desktop on any modern web browser, though the specific UI will look a bit different depending on which one you use.
Step 0 - if your web browser is Safari on Desktop
This step is not necessary if you’re using Firefox, Chrome, or something based on either (typically the latter) like Edge or Brave.
Open the preferences.
[Image description: Screenshot of Safari app menu open on macOS with the “Preferences…” item highlighted]
Go to “Advanced” (the last tab) and at the very bottom, make sure that “Show Develop menu in menu bar” is selected.
[Image description: Screenshot of Safari preferences window on the “Advanced” tab; the last item, a checkbox saying “Show Develop menu in menu bar”, is selected.]
Step 1 - Open an example post
I’m going to fake a tweet by myself, which you can find here: https://twitter.com/zcochrane/status/1406004939810295808
The specific tweet is irrelevant; this one is about programming and complains about how SwiftUI, a technology for developing Mac apps, is full of issues. It’s easiest to choose one that doesn’t have any hashtags.
Step 2 - Drill down
Now, right-click on the text of the tweet, and select “inspect element” or whatever menu item in your browser sounds the most like that.
[Image description: Screenshot of a random tweet by twitter user zcochrane (aka me); a word is highlighted, and a context menu is open, with the item “Inspect Element” highlighted]
This isn’t to give anyone ideas; you can assume that all the worst people on the internet already know this. That is really the key. I want to destroy your trust in screenshots of posts, especially screenshots of very weird and outlandish posts. (Note also that this isn’t the only way to do this, and it only works on desktop, but it illustrates how easy it is).
On the bottom or the side of the window, a new, complicated view will open that shows you the inner workings of the web page. You can do a lot of fun stuff here, but we don’t need a lot for our purposes.
[Image: Screenshot of a Safari window showing the same tweet, now with a blue box is lying over the text, and the bottom half of the window has a complex view of details about the text in that box and its place in the site’s internal structure.]
The important thing is the tree view on the left. If you can’t see the text of the tweet in there, click the disclosure triangle next to whatever thing is highlighted there. This should show the text directly.
[Image: Screenshot of a tree view showing various HTML elements. They are all expanded. The inner-most item is just the text of the tweet from above.]
Step 3 - Change it
Now you can just double-click on that text and enter something new.
[Image: Screenshot of the same tree view, now wider (don’t know why the window just jumped around on me). In place of the static text from last time is now a text entry box containing the words “It is impossible to fake screenshots of tweets.”]
Once you press enter or the focus moves somewhere else, the text on the website will change.
Step 4 - Take a screenshot
[Image: Screenshot of a tweet, the same one we’ve had the entire time with the same user and date, but it now says “It is impossible to fake screenshots of tweets.”]
And that’s it! If you want to do something with multiple paragraphs like your average Tumblr post, then you probably need to know a little HTML, but it’s not that hard.
For better results, you can also use the same technique to fake the time and date when the post was made, so it looks like the post was deleted - though honestly, that’s probably not worth the time and effort. And you can, of course, also change the number of likes and retweets, or for Tumblr posts, the number of notes, and other information like the user names and so on to fit whatever narrative you want to tell.
What makes this particular technique so useful is that you cannot compare pixels or whatever to prove a tweet is fake. The pixels that the screenshot grabs get generated in exactly the same way as for the real tweet. Proving that this tweet is fake is somewhere between difficult and completely impossible.
The point
This may seem like dangerous secret knowledge to some, maybe. But it’s really not that difficult, and you can assume that everyone who has more than a passing knowledge of web development (and that is a lot of people) can figure this out if they want to. (And if you’re into web development but didn’t know this yet, try it out, it’s super useful!)
In particular, you can safely assume that all the worst people in the world already know this trick and others like it. What this means is that every single screenshot ever is suspicious. Did that post really exist? There is genuinely no way of knowing, unless you find the actual post in question.
That means if you see a particularly stupid post, or a particularly offensive one, by someone you respect, or by someone you hate, or by just anyone in general, then you must always assume that it’s very possibly fake. It takes maybe ten seconds more to create a fake screenshot than to create a real one.
Not all screenshots are fake, and sometimes screenshots are the only source for something because the original was deleted, but all screenshots might be fake, and so you should tread very carefully when one is involved.
There is also an inverse to that: If you want to share a post or a tweet somewhere that you know is real, you should always include a link to the original (and also an image description for people using screen readers). If it’s a good post, it allows people to leave the hearts and stars where they belong; if not (or if that’s debatable), it provides the context and proves that the post is, in fact, real.
Fandom Userscript Cookbook: Five Projects to Get Your Feet Wet
Target audience: This post is dedicated, with love, to all novice, aspiring, occasional, or thwarted coders in fandom. If you did a code bootcamp once and don’t know where to start applying your new skillz, this is for you. If you're pretty good with HTML and CSS but the W3Schools Javascript tutorials have you feeling out of your depth, this is for you. If you can do neat things in Python but don’t know a good entry point for web programming, this is for you. Seasoned programmers looking for small, fun, low-investment hobby projects with useful end results are also welcome to raid this post for ideas.
You will need:
The Tampermonkey browser extension to run and edit userscripts
A handful of example userscripts from greasyfork.org. Just pick a few that look nifty and install them. AO3 Savior is a solid starting point for fandom tinkering.
Your browser dev tools. Hit F12 or right click > Inspect Element to find the stuff on the page you want to tweak and experiment with it. Move over to the Console tab once you’ve got code to test out and debug.
Javascript references and tutorials. W3Schools has loads of both. Mozilla’s JS documentation is top-notch, and I often just keep their reference lists of built-in String and Array functions open in tabs as I code. StackOverflow is useful for questions, but don’t assume the code snippets you find there are always reliable or copypastable.
That’s it. No development environment. No installing node.js or Ruby or Java or two different versions of Python. No build tools, no dependency management, no fucking Docker containers. No command line, even. Just a browser extension, the browser’s built-in dev tools, and reference material. Let’s go.
You might also want:
jQuery and its documentation. If you’re wrestling with a mess of generic spans and divs and sparse, unhelpful use of classes, jQuery selectors are your best bet for finding the element you want before you snap and go on a murderous rampage. jQuery also happens to be the most ubiquitous JS library out there, the essential Swiss army knife for working with Javascript’s... quirks, so experience with it is useful. It gets a bad rap because trying to build a whole house with a Swiss army knife is a fool’s errand, but it’s excellent for the stuff we're about to do.
Git or other source control, if you’ve already got it set up. By all means share your work on Github. Greasy Fork can publish a userscript from a Github repo. It can also publish a userscript from an uploaded text file or some code you pasted into the upload form, so don’t stress about it if you’re using a more informal process.
A text editor. Yes, seriously, this is optional. It’s a question of whether you’d rather code everything right there in Tampermonkey’s live editor, or keep a separate copy to paste into Tampermonkey’s live editor for testing. Are you feeling lucky, punk?
Project #1: Hack on an existing userscript
Install some nifty-looking scripts for websites you visit regularly. Use them. Ponder small additions that would make them even niftier. Take a look at their code in the Tampermonkey editor. (Dashboard > click on the script name.) Try to figure out what each bit is doing.
Then change something, hit save, and refresh the page.
Break it. Make it select the wrong element on the page to modify. Make it blow up with a huge pile of console errors. Add a console.log("I’m a teapot"); in the middle of a loop so it prints fifty times. Savor your power to make the background wizardry of the internet do incredibly dumb shit.
Then try a small improvement. It will probably break again. That's why you've got the live editor and the console, baby--poke it, prod it, and make it log everything it's doing until you've made it work.
Suggested bells and whistles to make the already-excellent AO3 Savior script even fancier:
Enable wildcards on a field that currently requires an exact match. Surely there’s at least one song lyric or Richard Siken quote you never want to see in any part of a fic title ever again, right?
Add some text to the placeholder message. Give it a pretty background color. Change the amount of space it takes up on the page.
Blacklist any work with more than 10 fandoms listed. Then add a line to the AO3 Savior Config script to make the number customizable.
Add a global blacklist of terms that will get a work hidden no matter what field they're in.
Add a list of blacklisted tag combinations. Like "I'm okay with some coffee shop AUs, but the ones that are also tagged as fluff don't interest me, please hide them." Or "Character A/Character B is cute but I don't want to read PWP about them."
Anything else you think of!
Project #2: Good Artists Borrow, Great Artists Fork (DIY blacklisting)
Looking at existing scripts as a model for the boilerplate you'll need, create a script that runs on a site you use regularly that doesn't already have a blacklisting/filtering feature. If you can't think of one, Dreamwidth comments make a good guinea pig. (There's a blacklist script for them out there, but reinventing wheels for fun is how you learn, right? ...right?) Create a simple blacklisting script of your own for that site.
Start small for the site-specific HTML wrangling. Take an array of blacklisted keywords and log any chunk of post/comment text that contains one of them.
Then try to make the post/comment it belongs to disappear.
Then add a placeholder.
Then get fancy with whitelists and matching metadata like usernames/titles/tags as well.
Crib from existing blacklist scripts like AO3 Savior as shamelessly as you feel the need to. If you publish the resulting userscript for others to install (which you should, if it fills an unmet need!), please comment up any substantial chunks of copypasted or closely-reproduced code with credit/a link to the original. If your script basically is the original with some key changes, like our extra-fancy AO3 Savior above, see if there’s a public Git repo you can fork.
Project #3: Make the dread Tumblr beast do a thing
Create a small script that runs on the Tumblr dashboard. Make it find all the posts on the page and log their IDs. Then log whether they're originals or reblogs. Then add a fancy border to the originals. Then add a different fancy border to your own posts. All of this data should be right there in the post HTML, so no need to derive it by looking for "x reblogged y" or source links or whatever--just make liberal use of Inspect Element and the post's data- attributes.
Extra credit: Explore the wildly variable messes that Tumblr's API spews out, and try to recreate XKit's timestamps feature with jQuery AJAX calls. (Post timestamps are one of the few reliable API data points.) Get a zillion bright ideas about what else you could do with the API data. Go through more actual post data to catalogue all the inconsistencies you’d have to catch. Cry as Tumblr kills the dream you dreamed.
Project #4: Make the dread Tumblr beast FIX a thing
Create a script that runs on individual Tumblr blogs (subdomains of tumblr.com). Browse some blogs with various themes until you've found a post with the upside-down reblog-chain bug and a post with reblogs displaying normally. Note the HTML differences between them. Make the script detect and highlight upside-down stacks of blockquotes. Then see if you can make it extract the blockquotes and reassemble them in the correct order. At this point you may be mobbed by friends and acquaintainces who want a fix for this fucking bug, which you can take as an opportunity to bury any lingering doubts about the usefulness of your scripting adventures.
(Note: Upside-down reblogs are the bug du jour as of September 2019. If you stumble upon this post later, please substitute whatever the latest Tumblr fuckery is that you'd like to fix.)
Project #5: Regular expressions are a hard limit
I mentioned up above that Dreamwidth comments are good guinea pigs for user scripting? You know what that means. Kinkmemes. Anon memes too, but kinkmemes (appropriately enough) offer so many opportunities for coding masochism. So here's a little exercise in sadism on my part, for anyone who wants to have fun (or "fun") with regular expressions:
Write a userscript that highlights all the prompts on any given page of a kinkmeme that have been filled.
Specifically, scan all the comment subject lines on the page for anything that looks like the title of a kinkmeme fill, and if you find one, highlight the prompt at the top of its thread. The nice ones will start with "FILL:" or end with "part 1/?" or "3/3 COMPLETE." The less nice ones will be more like "(former) minifill [37a / 50(?)] still haven't thought of a name for this thing" or "title that's just the subject line of the original prompt, Chapter 3." Your job is to catch as many of the weird ones as you can using regular expressions, while keeping false positives to a minimum.
Test it out on a real live kinkmeme, especially one without strict subject-line-formatting policies. I guarantee you, you will be delighted at some of the arcane shit your script manages to catch. And probably astonished at some of the arcane shit you never thought to look for because who the hell would even format a kinkmeme fill like that? Truly, freeform user input is a wonderful and terrible thing.
If that's not enough masochism for you, you could always try to make the script work on LiveJournal kinkmemes too!
Firefox 70 Released — The latest release includes a handful of interesting CSS changes, such as the display property now accepting two keyword values (for setting both inner and outer display types), password generation for input type='password' fields, improved underline styling, and more. There's also the usual Firefox 70 for developers post outlining all the key changes in a bulletpoint fashion.
Mozilla
Focusing on Focus — Focus behavior in Web browsers has been in flux and under-specified for years. Efforts are now underway to clear up some of the confusion (particularly around Shadow DOM and autofocus) and begin to firm up the specs “to hopefully make focus in HTML make sense to browser engineers and web authors”.
Rakina Zata Amni (WHATWG)
Frontends Without Backend with FaunaDB Auth + Native GraphQL — FaunaDB is a globally distributed, scalable database. Thanks to built-in security and native GraphQL, frontends can directly communicate with FaunaDB in a secure way which eliminates the need to pass through a backend and greatly reduces latency.
FaunaDB sponsor
The "P" in Progressive Enhancement Stands for "Pragmatism" — Demonstrates how using progressive enhancement with CSS can be used to build things up gradually. “With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.”
Andy Bell
Can We Please Style The <select> Control? — Highlights issues developers are facing when working with the the built-in <select> element, and what efforts are being undertaken to hopefully improve it.
Greg Whitworth
Style Hover, Focus, and Active States Differently — Why you should (and how to) style hover, focus, and active states differently.
Zell Liew
💻 Jobs
Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers.
X-Team
Have You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.
Vettery
📙 Articles, Tutorials & Opinion
Making Tables Responsive with Minimal CSS — When creating table-based layouts you may be tempted to implement some sort of custom grid-system or pull in a pre-built library. The author argues against this, recommending using just “tables and some simple CSS”.
Bradley Taunt
Box Alignment and Overflow — Runs through a data-loss issue you may face when using box alignment properties in certain scenarios, and highlights how the 'safe' overflow alignment keyword can help prevent such a loss.
Chen Hui Jing
State Management for Flutter Apps with MobX — Learn how to use MobX to ease state management on a Flutter project.
CircleCI sponsor
How to Design Delightful Dark Themes — Plenty of practical tips here on how to design dark themes that are “readable, balanced, and delightful”.
Teresa Man
Options for Hosting Your Own Non-JavaScript-Based Analytics — Rounds-up a range of alternatives to Google Analytics.
Chris Coyier
The 'Perfect' Responsive Menu — Here’s how to create a menu that is accessible and works across mobile and desktop browsers without any duplication.
Polypane
JAMstack Tools and The Spectrum of Classification — An overview of JAMStack services and tools, along with some notes on their pros and cons.
Chris Coyier
The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning
Progress KendoReact sponsor
An Introduction to Regular Expressions for Web Developers
Chris Achard
🔧 Code, Tools & Resources
Peaks.js: Interact with Audio Waveforms — A client-side JavaScript component to display and interact with audio waveforms in the browser. Here’s the related GitHub repo.
Indrek Lasn
TinaCMS: A Site Editing Toolkit for Modern React-Based Sites — An open-source real-time site editing toolkit currently aimed at Gatsby and Next.js users.
Tina
Open Doodles: A Collection of Free CC0 'Sketchy' Illustrations — You can even generate a set with your own custom colors (as above).
Pablo Stanley
Typetura: Fluid Typesetting — We linked to this responsive typography tool when it was in beta earlier this year, and now it’s generally available (paid). It'll help set up text transitions between breakpoints — here’s a demo of it in action.
Typetura
▶ A Realistic 'Water Effect' with Just HTML & CSS — A very convincing effect using the <feTurbulence> SVG filter. Here's the code.
Red Stapler
🗓 Upcoming Events
VueConfTO 2019, November 11-12 — Toronto, Canada — The first ever Vue Conference in Canada.
Chrome Dev Summit, November 11-12 — San Francisco, USA — A two-day summit to learn about the latest from Chrome, plus techniques for building the modern Web. Note: Registrations are now closed, but the event can be joined remotely.
Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen speakers, covering the most important web perf insights.
HalfStack Conf, November 22 — London, UK — A single day event focused on UI-centric JavaScript and web development.
Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ experts with over 500 experienced frontend pros from all over the world.
dotCSS, December 4 — Paris, France — The largest CSS conference in Europe.
i know css/html and code my own themes. one side effect of this is that every so often i encounter someone—a friend or a friend’s friend, usually—who has installed a new theme and is now struggling to customize or tweak it without knowing how to go about doing that.
now i’m always happy to help out, but these are always things that take just a few minutes to figure out if you can read the code and, well, give a man a fish or teach a man to fish. you know how it goes.
so here we go: this is how to fish.
PART ONE: UNDERSTANDING CSS & HTML
let me lead with this: it is normal to feel confused, overwhelmed, intimidated, stupid, and/or frustrated when working with an unfamiliar coding language. my father has been writing software for forty years, but he will look at what is to me a page of very basic css/html and be completely baffled by it all the same. this is normal. please don’t let it discourage you if you feel this way at first.
in my opinion, the first step to conquering these feelings is to wrap your brain around the big picture of what these languages do. what do we use them for?
well, all web pages — and thus, all tumblr themes — are written in these two languages. the only thing you need to know for our purposes is this: html holds the content of a web page, and css controls its appearance.
how does this work?
a webpage is built of html objects called <div> tags. think of them like bricks: you stack a bunch of <div>s on top of each other and bam! you have a house. but it’s a terrible house, because it’s just a pile of bricks with stuff scribbled on them.
this is where the css comes in. a <div> tag can have a unique id or belong to a general class, and we use css to style the appearances of our <div>s on a per-id and per-class basis. to return to our housebuilding metaphor, css is our blueprint: it gives order, structural stability, and aesthetic coherence to our messy pile of bricks, and now, bam! we have a house. for real.
PART TWO: THE SYNTAX
coding languages are like human languages in that they have their own unique vocabulary and grammar. to tweak a tumblr theme, you need to have a basic grasp of this syntax so you can understand what you’re looking at.
css manipulates objects called elements. usually, an element is the id or class of a <div>, but an element can correlate to any html tag. the basic anatomy of a css element goes like this:
selector {
property: value;
}
and we can translate this into english as “when the element this selector is looking for occurs, it will look the way i have described it here.”
selectors might look like this: h1 { or #id { or .class {
the distinction between these different types of selectors is not important for our purposes. all you need to know is that the selector corresponds to (or selects) a particular html tag, like: <h1>, <div id = "id">, or <div class="class">.
properties are the visual features of an element, like its height, width, color, and so on, and the value is a statement that describes the desired setting for the property. a property-value statement is called a declaration, and a collection of declarations is called a declaration block.
you can generally figure out what a declaration is doing by looking at the name of the property, since they’re pretty self explanatory most of the time. for example, font-size: 12px; says that any text contained in this element is going to have its size set such that a character is 12 pixels tall.
[ sidebar: if you are a Tiny Font person, consider using the knowledge you’ve gained from this tutorial to edit your theme such that the text of all your posts is very small, and then don’t use small text or sub/superscripts in your replies. you’ll get the Tiny Font aesthetic on your blog with perfect consistency, without rendering your posts illegible on the dashboard. ]
PART 3: MAKING YOUR CHANGES
the key to quickly and easily modifying a tumblr theme is to be able to identify the name of the css selector for the element you want to modify. let’s look at my own theme as an example.
depending on what changes you want to make and how the theme’s creator laid out their code, you may not have to do much work at all to get the selector.
for example, if you want to do something with your theme’s pagination buttons, it’s a pretty reasonable guess that the css selector will be something like “pagination_next” or “pagination_prev”, and you can go straight to the html editor and do a ctrl+F search for “pagination” to find it.
but what if the selector isn’t immediately obvious? for the purposes of this example, let’s say i want to change the text of the blog description from red to dark blue (while preserving the red color of other elements in the theme, which precludes simply using tumblr’s in-built color picker.)
i could just scroll through the theme code until i found a selector that looked like the one i wanted, and then change something and update the preview & repeat ad nauseum until i found the right one. but again, depending on how the theme’s creator did their coding, this might be very difficult, frustrating, and time consuming. many prolific tumblr theme creators don’t lay out their code in a particularly human-readable way.
fortunately, there is a much easier way.
step 1: load your tumblr and right-click somewhere on the page. depending on what browser you use, the exact name of what you’re looking for will vary, but the keyword to look for is “inspect”:
click this.
(if you are using safari, you need to make sure “show develop menu” is checked in the advanced tab of the preferences window.)
step 2: your screen will now look something like this:
if the element you want to change is in a popup or tab, open it so it’s visible on the screen.
step 3: the topmost box in the inspector displays all the html of your theme. if you hover over an html tag, the corresponding element will be highlighted in blue.
find the <body> tag. you may need to expand this manually depending on your browser. move your mouse down the line of divs until you find the element you want to modify.
here, my mouse is hovering over <div id="blg_desc"> in the inspector, and you can see how the blog description is shown in a blue rectangle. (the large orange shape shows the size of the element’s margins.)
this tells me that the css selector for this element is #blg_desc.
step 4: close the inspector and open tumblr’s theme customization interface. go to edit html. ctrl+f to find the css selector:
now, my goal is to change the text color, so the declaration i’m interested in is color:{color:6};. the {color:6} value is an object tumblr uses to store colors in a theme as an alternative to using rgb or hex codes (like #B61818, which is the shade of red i have stored in {color:6}. these objects correlate to the color picker under theme options:
thus, if i change the value of color to {color:1}, the text of my blog description will be blue instead of red. i can also write this as color:#0d52c0;.
(note that the exact shade of red/blue in my description varies a little from line to line; this is because of styling i did within the html itself that makes some lines transparent, and thus lighter because of the pale grey background.)
& if you use pages with custom html, the inspector trick will of course work for them too.
PART FOUR: IN SUMMARY
remember that css/html is not magic. it might feel intimidating, but at the end of the day it’s just a language for translating human thoughts like “i want a small purple square” into instructions a computer can understand, like this:
and all you need to do to make the changes you want is 1) identify the css selector and 2) understand the properties you’re manipulating. 1) is the difficult part, because everybody lays out their selectors differently—but using the inspector will allow you to instantly identify selectors by sight. and once you have that, 2) is super easy, because properties are standard and intended to be readily legible to humans.
you may occasionally run into tricky properties, like for example display or position, which do things that are a little more abstract / not immediately obvious. for those cases, refer to the w3schools css dictionary for clear, simple, but still comprehensive explanations for proper usage.
Angular 2 is one of the most popular platforms which are a successor to Google Angular 1 framework. With its help, Angular JS developers can build complex applications in browsers and beyond. Angular 2 is not only the next or advanced version of Angular 1, it is fully redesigned and rewritten. Thus, the architecture of Angular 2 is completely different from Angular 1. This tutorial looks at the various aspects of Angular 2 framework which includes the basics of the framework, the setup of Angular and how to work with the various aspects of the framework. Unlike its predecessor, Angular 2 is a TypeScript-based, web application development platform that makes the switch from MVC (model-view-controller) to a components-based approach to web development.
Benefits of Angular 2
Mobile Support: Though the Ionic framework has always worked well with Angular, the platform offers better mobile support with the version 2. The 1.x version compromised heavily on user experience and application performance in general. With its built-in mobile-orientation, Angular 2.0 is more geared for cross-platform mobile application development.
Faster and Modern Browsers: Faster and modern browsers are demanded by developers today. Developers want Angular 2 stress more on browsers like IE10/11, Chrome, Firefox, Opera & Safari on the desktop and Chrome on Android, Windows Phone 8+, iOS6 & Firefox mobile. Developers believe that this would allow AngularJS codebase to be short and compact and AngularJS would support the latest and greatest features without worrying about backward compatibility and polyfills. This would simplify the AngularJS app development process.
High Performance: Angular2 uses superset of JavaScript which is highly optimized which makes the app and web to load faster. Angular2 loads quickly with component router. It helps in automatic code splitting so user only load code required to vendor the view. Many modules are removed from angular’s core, resulting in better performance means you will be able to pick and choose the part you need.
Changing World of Web: The web has changed noticeably and no doubt it will continue changing in the future as well. The current version of AngularJS cannot work with the new web components like custom elements, HTML imports; shadow DOM etc. which allow developers to create fully encapsulated custom elements. Developers anticipate with all hopes that Angular 2 must fully support all web components.
Component Based Development: A component is an independent software unit that can be composed with the other components to create a software system. Component based web development is pretty much future of web development. Angular2 is focused on component base development. Angularjs require entire stack to be written using angular but angular2 emphasis separation of components /allow segmentation within the app to be written independently. Developers can concentrate on business logic only. These things are not just features but the requirement of any thick-client web framework.
Why to upgrade to Angular 2 ?
Angular 2 is entirely component-based and even the final application is a component of the platform. Components and directives have replaced controllers and scopes. Even the specification for directives has been simplified and will probably further improve. They are the communication channels for components and run in the browser with elements and events. Angular 2 components have their own injector so you no longer have to work with a single injector for the entire application. With an improved dependency injection model, there are more opportunities for component or object-based work.
Optimized for Mobile- Angular 2 has been carefully optimized for boasting improved memory efficiency, enhanced mobile performance, and fewer CPU cycles. It’s as clear of an indication as any that Angular 2 is going to serve as a mobile-first framework in order to encourage the mobile app development process. This version also supports sophisticated touch and gesture events across modern tablet and mobile devices.
Typescript Support- Angular 2 uses Typescript and variety of concepts common in back-end. That is why it is more back-end developer-friendly. It's worth noting that dependency injection container makes use of metadata generated by Typescript. Another important facet is IDE integration is that it makes easier to scale large projects through refactoring your whole code base at the same time. If you are interested in Typescript, the docs are a great place to begin with. Moreover, Typescript usage improves developer experience thanks to good support from text editors and IDE's. With libraries like React already using Typescript, web/mobile app developers can implement the library in their Angular 2 project seamlessly.
Modular Development- Angular 1 created a fair share of headaches when it came to loading modules or deciding between Require.js and Web Pack. Fortunately, these decisions are removed entirely from Angular 2 as the new release shies away from ineffective modules to make room for performance improvements. Angular 2 also integrates System.js, a universal dynamic modular loader, which provides an environment for loading ES6, Common, and AMD modules.
$scope Out, Components in- Angular 2 gets rid of controllers and $scope. You may wonder how you’re going to stitch your homepage together! Well, don’t worry too much − Angular 2 introduces Components as an easier way to build complex web apps and pages. Angular 2 utilizes directives (DOMs) and components (templates). In simple terms, you can build individual component classes that act as isolated parts of your pages. Components then are highly functional and customizable directives that can be configured to build and specify classes, selectors, and views for companion templates. Angular 2 components make it possible to write code that won’t interfere with other pieces of code within the component itself.
Native Mobile Development- The best part about Angular 2 is “it’s more framework-oriented”. This means the code you write for mobile/tablet devices will need to be converted using a framework like Ionic or Native Script. One single skillset and code base can be used to scale and build large architectures of code and with the integration of a framework (like, you guessed it, NativeScript or Ionic); you get a plethora of room to be flexible with the way your native applications function.
Code Syntax Changes- One more notable feature of Angular 2 is that it adds more than a few bells and whistles to the syntax usage. This comprises (but is not limited to) improving data-binding with properties inputs, changing the way routing works, changing an appearance of directives syntax, and, finally, improving the way local variables that are being used widely. One more notable feature of Angular 2 is that it adds more than a few bells and whistles to the syntax usage. This comprises improving data-binding with properties inputs, changing the way routing works, changing an appearance of directives syntax, and, finally, improving the way local variables that are being used widely.
Comparison between Angular 1 and Angular 2
Angular 1
In order to create service use provider, factory, service, constant and value
In order to automatically detection changed use $scope, $watch, $scope, $apply, $timeout.
Syntax event for example ng-click
Syntax properties for example ng-hid, ng-checked
It use Filter
Angular 2
In order to create service use only class
In order to automatically detection changed use Zone.js.
Syntax event for example (click) or (dbl-click)
Syntax properties for example [class: hidden] [checked]
It use pipe
How to migrate Angular 1 to Angular 2
It is a very simple and easy task to upgrade Angular 1 to Angular 2, but this has to be done only if the applications demand it. In this article, I will suggest a number of ways which could be taken into consideration in order to migrate existing applications from Angular 1.x to 2. Therefore, depending on the organizational need, the appropriate migration approach should be used.
Upgrading to Angular 2 is quite an easy step to take, but one that should be made carefully. There are two major ways to feel the taste of Angular 2 in your project. Which you use depends on whatever requirements your project has. The angular team have provided two paths to this:
ngForward
ngForward is not a real upgrade framework for Angular 2 but instead we can use it to create Angular 1 apps that look like Angular 2.
If you still feel uncomfortable upgrading your existing application to Angular 2, you can fall to ngForward to feel the taste and sweetness of the good tidings Angular 2 brings but still remain in your comfort zone.
You can either re-write your angular app gradually to look as if it was written in Angular 2 or add features in an Angular 2 manner leaving the existing project untouched. Another benefit that comes with this is that it prepares you and your team for the future even when you choose to hold onto the past for a little bit longer. I will guide you through a basic setup to use ngForward but in order to be on track, have a look at the Quick Start for Angular 2.
If you took time to review the Quick Start as I suggested, you won't be lost with the configuration. SystemJS is used to load the Angular application after it has been bootstrapped as we will soon see. Finally in our app.ts, we can code like its Angular 2.
ngUpgrade
Writing an Angular 1.x app that looks like Angular 2 is not good enough. We need the real stuff. The challenge then becomes that with a large existing Angular 1.x project, it becomes really difficult to re-write our entire app to Angular 2, and even using ngForward would not be ideal. This is where ngUpgrade comes to our aid. ngUpgrade is the real stuff.
Unlike ngForward, ngUpgrade was covered clearly in the Angular 2 docs. If you fall in the category of developers that will take this path, then spare few minutes and digest this.
We'll also be writing more articles on upgrading to Angular 2 and we'll focus more on ngUpgrade in a future article.
