WebDevPro #32: Frontend Certifications, Python libraries, CSS properties, C++ complexities, URL explained, GPT-3.5 and Chain of Density
Advertise with Us | Sign Up to the Newsletter
November 23, 2023
Hi <<First Name>>,
Welcome to the _webdevpro! Your one stop for all things Web Dev!
We start today’s issue with community discussions on:
In our tutorial, we cover Exploring SVGs from the book React 18 Design Patterns and Best Practices to help articulate your coding. Don't miss repository of manually curated collection of resources for frontend web developers.
Our relatively new section captures internet jibber-jabber about topics in the web ecosystem:
Today's news covers Django, Laravel, Node, Spring and Ruby on Rails.
If you liked this installment, fill in our survey below and win a free Packt PDF.
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
WebDev Community Speak
What is the WebDev industry talking about? Latest Developments? Cool tricks? Tutorials? Cheatsheets? How are Web Developers upskilling? Read about it all here.
Decoding Why 0.6 + 0.3 = 0.8999999999999999 in JS and How to Solve? - In everyday math, we know adding 0.6 + 0.3 equals 0.9, right? But when we turn to computers it results in 0.8999999999999999. Surprisingly, this doesn’t just happen only in JavaScript; it’s the same in many programming languages like Python, Java, C too. Also, it’s not just about this specific calculation. There are many more decimal calculations showing similar not-quite-right answers. In this blog post, I will share my insights and discuss a few approaches to solve this.
7 Tips to Build Your GitHub Profile Like a Pro - This article shows you that building a professional GitHub profile is much easier than you think. That's right, even if you are not a seasoned expert, you can make your profile look solid. Here's an example GitHub Profile. Let's dive into how you can get your profile looking just as good in the next 10 minutes.
50 ways to hustle as a developer! - Times are tough now, but as developers we've got a unique set of skills which are in high-demand, if you know where to look! This post briefly outlines 50 side hustles you can use to bring in something extra as a developer.
26 Frontend Certifications for Web Developers - In the dynamic landscape of web development, staying ahead is key to success. Certifications serve as powerful tools, validating your expertise. Certifications also demonstrate your commitment to continuous learning, a trait highly valued in the tech industry. Whether you're a beginner or an experienced professional, this article will equip you with insights into 26 valuable front-end certifications, from HTML and CSS to JavaScript and the most common JS frameworks. Read more.
11 Fun Python libraries to make your day better - This blogpost curates a list of 11 python libraries that will hep you code better!
The CSS property you didn't know you needed - This article talks about a CSS feature that doesn't get too much attention... but it should! I'm talking about the isolation property! It basically provides more control over how elements interact with the rest of the document, and it is often an elegant solution forz-index issues. Let's start with a practical example.
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you manually curated collection of Languages, Protocols, Browser APIs for frontend web developers:
Cascading Style Sheets (CSS): CSS are a stylesheet language used to describe the presentation of a document written in HTML or XML. It describes how elements should be rendered on screen, on paper, in speech, or on other media.
Document Object Model (DOM): The DOM is a programming interface for HTML, XML and SVG documents. It defines methods that allow access to the tree, so that they can change the document structure, style and content.
HyperText Markup Language (HTML): HTML is the standard markup language used to create web pages and its elements form the building blocks of all websites.
Hypertext Transfer Protocol (HTTP): The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.
JavaScript (EcmaScript): JavaScript is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. It is defined by ECMAScript standard.
JavaScript Object Notation (JSON): JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language.
Scalable Vector Graphics (SVG): An XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
C++: The most important complexities - When I was interviewing for a position at a code analysis company, I clearly failed the interview due to my lack of knowledge in this field, but at least I learned a few tips about how to approach complexity analysis in future interviews, which clearly helped me get an offer from Spotify. Read all about it in Sandor Dargo’s Blog.
Sam Altman: Why You Should Fear Machine Intelligence - Development of superhuman machine intelligence (SMI) [1] is probably the greatest threat to the continued existence of humanity. There are other threats that I think are more certain to happen but are unlikely to destroy every human in the universe in the way that SMI could. Also, most of these other big threats are already widely feared – learn why it is realistic to fear AI from the horses’ mouth!
Scientist! - Let's pretend you're changing the way you handle permissions in a large web app. Tests can help guide your refactoring, but you really want to compare the current and refactored behaviors under load. Here is when Scientist! - a Ruby library for carefully refactoring critical paths comes into play.
URL explained - The Fundamentals - This post explains the syntax and use of an URL and the difference between URI, URL, URN, and URC.
How large pull requests slow down development - Change amplification is not just a theoretical problem - it clearly manifests in the time it takes to merge large& complex PRs. By keeping changes small and manageable, we can simultaneously increase development velocity while reducing the risk of regressions - and modern source control tooling such as Graphite can help you and your team achieve this.
Incomplete List of Mistakes in the Design of CSS - That should be corrected if anyone invents a time machine.
Smarter Summaries w/ Fine tuning GPT-3.5 and Chain of Density - In this article, we'll guide you through implementing the original Chain of Density method using Instructor, then show how to distile a GPT 3.5 model to match GPT-4's iterative summarization capabilities. Using these methods were able to decrease latency by20x, reduce costs by 50x and maintain entity density. By the end you'll end up with a GPT 3.5 model, (fine-tuned using Instructor's great tooling), capable of producing summaries that rival the effectiveness of Chain of Density [Adams et al. (2023)].
WebDev DIY Tutorial
Exploring SVG
SVG is a declarative way of describing vectors and it fits perfectly with the purposes of React. We used to use icon fonts to create icons, but they have well-known problems, with the first being that they are not accessible. It is also pretty hard to position icon fonts with CSS, and they do not always look beautiful in all browsers. These are the reasons we should prefer SVG for our web applications.
From a React point of view, it does not make any difference if we output a div or an SVG element from the render method, and this is what makes it so powerful. We also tend to choose SVG because we can easily modify them at runtime using CSS and JavaScript, which makes them an excellent candidate for the functional approach of React.
So, if we think about our components as a function of their props, we can easily imagine how we can create self-contained SVG icons that we can manipulate by passing different props to them. A common way to create SVG in a web app with React is to wrap our vectors into a React component and use the props to define their dynamic values.
Let’s look at a simple example where we draw a blue circle, thus creating a React component that wraps an SVG element:
const Circle = ({ x, y, radius, fill }) => (
<svg>
<circle cx={x} cy={y} r={radius} fill={fill} />
</svg>
)
As you can see, we can easily use a stateless functional component that wraps the SVG markup, and it accepts the same props as SVG does.
An example usage is as follows:
<Circle x={20} y={20} radius={20} fill="blue" />
We can obviously use the full power of React and set some default parameters so that, if the circle icon is rendered without props, we still show something.
For example, we can define the default color:
const Circle = ({ x, y, radius, fill = 'red' }) => (...)
This is pretty powerful when we build UIs, especially in a team where we share our icon set and we want to have some default values in it, but we also want to let other teams decide their settings without having to recreate the same SVG shapes...read more.
Read the free chapter from 'React 18 Design Patterns and Best Practices' now!
What's Happening in Web Dev?
Your dose of the latest releases, news and happenings in the Web Development industry!
Django
Django 5.0 release candidate 1 released - Django 5.0 release candidate 1 is the final opportunity for you to try out a deluge of exciting new features before Django 5.0 is released. The release candidate stage marks the string freeze and the call for translators to submit translations. Provided no major bugs are discovered that can't be solved in the next two weeks.
Node
Node v20.10.0 (LTS) - The new flag --experimental-default-type can be used to flip the default module system used by Node.js. Input that is already explicitly defined as ES modules or CommonJS, such as by a package .json"type" field or .mjs/.cjs file extension or the --input-type flag, is unaffected.
Laravel
Wirebox: Your Livewire Playground Awaits - Experience Laravel Livewire component development like never before, from your browser with Wirebox. Wirebox gives you a sandbox environment to quickly work on your Livewire component ideas and share them with others! The editor makes it easy to find component files with accompanying views, models, and routes.
Laravel 10.33 Released - This week, the Laravel team released v10.33, with new number helper methods, test assertions about batches that exist in a job chain, a hex color validation rule, and more.
Spring
Spring for GraphQL 1.2.4 released - This release closes 23 issues. Thanks to community feedback, there are several bug fixes, some minor improvements, and documentation updates that help us evolve 1.2.x specific features such as pagination support, and exception handling with annotated controller methods. The 1.2.4 version will ship with Spring Boot 3.1.6 and 3.2.0, to be released later this week.
Spring for Apache Kafka, Spring for RabbitMQ 3.1 Releases Available - Hot on the heels of Spring Framework 6.1, are the 3.1 releases of Spring for Apache Kafka and Spring AMQP (Spring for RabbitMQ). See the release notes for the3.1.0, 3.1.0-RC1 and 3.1.0-M1 releases of each project - Spring for Apache Kafka and Spring AMQP for detailed content.
Ruby on Rails
Changes this week!- Action Mailer bug report template, Active Storage fixes and more! You can view the whole list of changes here.
See you next week!
Copyright (C) 2023 Packt Publishing. All rights reserved.
As a GDPR-compliant company, we want you to know why you’re getting this email. The _webdevpro team, as a part of Packt Publishing, believes that you have a legitimate interest in our newsletter and the products associated with it. Our research shows that you, <<Email Address>> , opted-in for communication with Packt Publishing in the past and we think that your previous interest warrants our appropriate communication. If you do not feel that you should have received this or are no longer interested in _webdevpro, you can opt out of our emails by unsubscribing here.
Our mailing address is:
Want to change how you receive these emails?
You can update your preferences or unsubscribe