Forem: Devyn Clark

Tailwind v4.0

Devyn Clark — Fri, 31 Jan 2025 18:03:57 +0000

Tailwind v4.0 is finally here!

This new version of the popular CSS framework has been reconfigured for greater efficiency and is taking the new web platform by the horns to lighten the load on all of web-dev!

Boosted Performance engine
Full builds have now increased to five times the speed. If that isn't enough, the speed of an incremental build has boosted by 100 times.

Simplified Installation
The amount of dependencies has lessened as well as zero configuration.

Automatic content detection

Adding onto the lack of configuration needed, your template files may now be detected automatically.

An instance of this would be avoiding scan your project's '.gitignore' file or any binary extensions like images or videos.

CSS-first configuration

In a major shift, you may now use your CSS file to directly configure your customizations when you've imported tailwind.

CSS theme variables
Tailwind v4.0 allows you to take your design tokens and make them available as variables by default, allowing you to reference them during the runtime.

This will make using them as inline styles or passing them to libraries like Motion easier.

Additional 3-D transformation ultlities

New API's have been added to bump up 3-D transformations: 'rotate-x-', 'rotate-y-', 'scale-z-', 'translation-z-' as well as others.

Look to the updated transform-style, rotate, perspective, and perspective-origin documentation to get started.

CSS Updates

Devyn Clark — Wed, 22 Jan 2025 12:16:37 +0000

As one of the most essential and popular Front-end languages, CSS has received a litany of new updates to assist developers in the new year ahead and beyond. As is expected of updates in the world of Web Development, the storied language has again found a way to pick up speed.

Starting things off is the new @property syntax which can be used to create custom properties in your CSS selectors.

Example:

@property --my-textColor {
syntax: ' ';
inherits:true;
initial-value:black;
}
.element {
color: var(--my-color); /* Defaults to black */
}

Syntax: Specifies our allowed data type that will be used in type-checking and validations, to prevent any unexpected behavior.

Inherits: This syntax controls if the property can inherit its value from parent elements.

Initial-Value: Sets the default value going forward.

I happen to quite like this syntax since it not only decreases the amount of time spent on global-scale CSS, but also allows for a great amount of variety in potential website themes as well as the ability to toggle between said themes.

Moving from @property, we also have @scope. As implied by the name, this syntax applies a range to the rules created by your selectors.

This paragraph is inside the scope.

This paragraph is outside the scope.

@scope (#my-component) {
p {
color: black;
}
}

With @scope, style conflicts can be nothing more than a distant memory, thanks to it preventing styles from leaking into parts of the page where they don’t belong. This can be a particular boon when using third-party libraries and or Component-based architecture since it can quarantine any Widgets or Components that overlap with the rules of other elements in your website.

The mod() function allows Modulo operations to be done in the comfort of your stylesheet. The function takes the first argument as the dividen and the second element as the divisor, before returning the remainder as the value.

.container {
width: mod(500px, 120px); /* Returns 20px */
}

As seen above this function can see great use in calculating the size of certain elements as well as calculating the positions as well as creating patterns for the elements that you animate. Combining mod() with media queries can also be used to simplify responsive design.

HTML Updates

Devyn Clark — Mon, 20 Jan 2025 01:29:56 +0000

HTML Updates

With 2025 here at last, HTML has received a plethora of updates that we as developers can sink our teeth into to improve our skills.

A group of tags can now be used in a manner similar to an accordion layout, meaning that only one tag’s summary may be opened at a time. In addition to this, any non-summary content can now be styled with CSS using the Sub Selector ::details-content.

Speaking of styling your elements, tags can now have their tags styled through the ::picker(select) CSS Selector. Additionally, your tags can also be separated horizontally through the

tag.

Back on the purely HTML side of things, your checkbox may now be toggled when given the switch attribute, providing further accessibility. In terms of your text-typed inputs, they may now be wrapped in the tags to provide future developers an easier time reading legacy code.

After having been removed from browsers for years, the Media attribute is once again usable for tags. In case you don’t remember, the use of this attribute allows for you to make your video files as responsive as your img files.

In terms of updates on the server-side, the Declarative Shadow DOM now allows for better use of Web Components without the need for Javascript. For the longest time, the use of Javascript rendering was the only way for a developer to have a Web Component use the Shadow DOM, and leaving the Component without the Server-Side Rendering needed for faster performance, resilience, and hosting options. Now all you must do is place the shadowrootmode attribute to their elements and breathe a sigh of relief.

With all this and more, the future is looking bright for HTML.

Single Page Multi-difficulty Quiz application

Devyn Clark — Sat, 18 Jan 2025 14:55:41 +0000

Looking to spice up your average Quiz app? With the power of ReactJs and a little creative thinking, I might have created just the idea.

We will start off with three arrays containing a maximum of ten objects.

Each new Array will serve as the content for a new type of difficulty, from easy to hard, to extreme. Each object within the array will contain three properties: the question number, question text, and most importantly, the Array containing the potential answers for the question. The answers Array will contain four objects, each containing a string property of a potential answer and another property denoting the answer as true and or false. These Arrays will then be exported to the quiz navigation file where the real work begins.

After importing the various arrays to our chooseDifficulty file, we will create a Component for to select which difficulty we want along with our chosenQuiz variable which will be used to contain the selected quiz.

Our next task is to create two const variables: const navigate will be used to navigate to our page proper and const setDifficulty will then be used to determine which set of quizzes we will use.

For our navigate const, we will import useNavigate and get navigate to equal useNavigate. From there, we will have to set up the route for our quiz Component in App.js.

Using the event object, setDifficulty will use the event value of the various buttons on the page in order to determine which quiz to load into the chosenQuiz variable as stringified JSON. It will decide this through the use of a switch statement.

The switch statement will then place the selected array in the chosenQuiz variable and will then load that variable into localStorage under the key name of "chosenQuiz".

In the Component's return statement, we will create three buttons and give them the values that we want to be accessed through the setDifficulty function. In the onClick function, we will put both of our const variables in an object so they will both be called at the same time.
Within the parentheses of const navigate type the string that you defined the quiz route with in order to navigate to the quiz Component upon the click of the button. Within the parentheses of setDifficulty place the event object in so that it may be read when called.

Once the buttons are clicked, the quiz will be loaded. We will use the State const of currentQuestion to define which question we are on and increment the value the further that we get through the quiz.

The variable of quizData will equal the localStorage item of "ChosenQuiz" and then will have its JSON parsed by and placed into the displayedQuiz const to allow the data to be read by a map method.

Finally, we will use the currentQuestion const in order to guide our map method to append list elements with the answers that correspond with currentQuestion's current value.

2025 Programming Goals

Devyn Clark — Sat, 18 Jan 2025 08:54:20 +0000

What Happens Next

With 2025 on the move, my plans for breaking into the Front-End side of web development will be facing challenges new and old. I’ll have a few languages to learn and a few more to deepen my understanding of. There will also be a few more technologies outside of languages that I’ll be adding to my arsenal. And above all, I’ll be deepening my knowledge of the industry as a whole.

Languages New and Old
In terms of new languages, I will be putting PHP on my shelf of skills: HTML, CSS, JavaScript, React. On the side of older languages, I’ll be using JavaScript to improve my array-sorting skills,as well as my understanding of time complexity. I’ll also be brushing up on my React skills and creating new projects to test how far I’ve come with the language. Finally, with HTML being upgraded with new tags this year, I’ll be having my hands full getting those down along with everything else.

Beyond Languages
Most of the non-language technologies I'll be putting under my belt will be command-based, since I haven’t had a chance to grasp them in the past. For my first new technology to add, I’ll be putting work into learning GitBash commands. I’ll also be looking into NodeJS down the line to speed projects along. Learning Node will be particularly helpful since it will deepen my understanding of React projects and allow me to work with various packages that I’ve been neglecting.

The Better the Dev, the Better the Chance
Most importantly, this will be the year where I attempt to expand my knowledge of Web Development as an industry as opposed to just a practice. I’ll be bringing attention to myself and my career through not only my projects but community challenges such as this. I’ll also regularly look into news surrounding the job market for new and promising technologies to master. Above all, I’m hoping to make this year one where I can move closer to getting my career and keep up my growth as a web dev.

Looking for companies

Devyn Clark — Fri, 10 Jan 2025 23:17:43 +0000

Does anyone know of any companies that are accepting remote work for junior front-end devs or UI designers? I'm not even looking for something from Big Tech, just some remote work for me to get my feet wet with.

Is there anything left for me?

Devyn Clark — Wed, 08 Jan 2025 21:45:26 +0000

As a student in college looking for a way to break into Front-end Web Development, the rise of things such as AI being used to replace juniors has really unnerved me. Is there any place for my skills(HTML, CSS, JavaScript, ReactJS) outside of Front-end?