#FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day20 : Bookmark reader using only Raindrop.io API

Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks

Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode

Project goals ↓

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

Falls Du gerade auf der Suche nach einem sinnvollen Freelance-Gig als Frontend-Entwickler*in bist, habe ich hier etwas passendes:

Wir suchen im Rahmen einer Elternzeitvertretung eine*n Frontend-Entwickler*in (Freelance) im Produkt-Kreis von wemakeit.com

Schau Dir doch mal die Ausschreibung an:

https://wemakeit.com/pages/jobs?locale=de#frontend-developer

#job #JobAlert #Karlsruhe #FrontEnd #FrontEndDev #FrontEndDevelopment #CrowdFunding

Wir suchen im Rahmen einer Elternzeitvertretung eine*n Frontend-Entwickler*in (Freelance) im Produkt-Kreis von wemakeit.com

Wenn Du Lust hast in einem tollen Team und mit mir zu arbeiten, dann schau Dir doch mal die Ausschreibung an:

https://wemakeit.com/pages/jobs?locale=de#frontend-developer

#job #JobAlert #Karlsruhe #FrontEnd #FrontEndDev #FrontEndDevelopment #CrowdFunding

Front-end developers at SPEC INDIA are your go-to choice for developing pixel-perfect user experience
👇
https://www.spec-india.com/hire-front-end-developer
.
.
.
.
.

#frontenddeveloper #hiredevelopers #hirededicateddevelopers #frontenddevelopment #frontendwebdeveloper #hirewebdeveloper #hireus #frontend#frontendwebdevelopment #frontendengineer #specindia #usadevelopers #webdeveloperusa #usaappdevelopment #usa #unitedstates

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day19 : Issue Tracker

Online demo :
https://teotimepacreau.github.io/Issue-Tracker-Day19-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Issue-Tracker-Day19-Of-100DaysOfCode

Project Goals :
- textArea length Checker with .length string property
- localStorage
- status updater is possible with a button that updates the JSON

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI

Just started using MUI for my project and I must say, it's an absolute delight to work with! The intuitive design system and easy-to-use components make frontend development a breeze. #MUI #frontenddevelopment #webdevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day18 : Github profile insights

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/My-Github-Insights-Day18-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/My-Github-Insights-Day18-of-100DaysOfCode

Project Goals :
- handle multiple API endpoints chaining promises method
- array destructuring, .map(), .join()

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day17 : List Randomizer

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Grocery-List-Randomizer-Day17-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Grocery-List-Randomizer-Day17-of-100DaysOfCode

Project Goals :
- FormData JS object
- users can add item, select a random item and see a toast notification
- localStorage

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day16 : DynamicTable Of Contents

Tuto by the great @cferdinandi

Online demo :
https://teotimepacreau.github.io/Dynamic-Table-of-content-Day16-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Table-of-content-Day16-Of-100DaysOfCode/blob/main/README.md

Project Goals :
- dynamic TOC by retrieving h2 ID's and then set anchor link
- Missing IDS are intentionnally set in
- User generate title

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment

Am I ever... ever going to be able to fundamentally understand what I'm doing? In #React, or any "modern" framework-based #frontendDevelopment for that matter?

I feel like I'm swimming in a mass of imports, props and hooks and the ((mysterious) => ({ useOf({ so, many }); }, [brackets, braces]);

I know people say knowing the web fundamentals will serve me beyond the current transient trends, but there's such a lot of this particular trend to learn, and frankly, it's paying my bills.

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day15 : Popover API and Anchor Positionning

Tuto by the great @jhey

Online demo :
https://teotimepacreau.github.io/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Popover-API-and-Anchor-Positioning-Day15-of-100DaysOfCode

Project goals :
- Popover API
- Anchor positioning to avoid position absolute
- Best UI practices for dropdown

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #Front #Components

3 Fragen an unsere nächste Sprecherin, Sophia Cook:

Wie bist du zur IT gekommen?

"Als mein Vater den ersten PC mitgebracht hat und ich das erstmal das Piep gehört habe, als er hochgefahren ist. Da war meine Neugier sofort geweckt und mir war mit 12 Jahren schon klar: ich will wissen, wie diese metallene Kiste diese Bilder auf den Bildschirm zaubert!"

#femalepower #womeninit #frontenddevelopment #Duesseldorf

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day14 : Interactive Form

Online demo :
https://teotimepacreau.github.io/Interactive-Form-Day-14-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Interactive-Form-Day-14-of-100DaysOfCode/blob/main/README.md

Project goals :
- learning input, forms and radio buttons UI best practices
- form validation, error alerts, password visibility
- checking for best practices to control email, passwords

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

I should hashtag more. Let's do a new #introduction :)

Right now I'm doing a slow re-#buildInPublic of my website.

I'm both an old hand and new to modern #webDev. I coded my own homepages in notepad as a teenager and have recently become a #careerSwitcher from electronic/general #engineering to #frontEndDevelopment.

I was a #swingDancer (and occasional DJ) and keep telling myself I'll get back into it. I miss it. Tiredness from #parenting small children and a pandemic got in the way!

CFFR (Call For Following Recommendations):
#UrbanCycling #Veganism #Climbing #Travelling #DadJokes #Comics #Tattoo #TrailRunning #UX #DX #Agile #FrontendDevelopment #EmberJS

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day13 : Sliding Menu and Grid App View

Online demo :
https://teotimepacreau.github.io/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Sliding-menu-and-grip-app-view-Day13-Of-100DaysOfCode

Project goals :
- lch() color function
- button alignment with ::before technique (vertical-align: middle) and UI principles of 2ex padding-inline for 1ex padding-block

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

#100DaysOfCode : #HTML #CSS

#Day12 : Card Hover Reveal

Online demo :
https://teotimepacreau.github.io/Card-Hover-Reveal-Day12-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Card-Hover-Reveal-Day12-Of-100DaysOfCode

Project goals :
- div overlay up to 100% on hover with transition cubic-bezier
- transform: scale() in order to create the zoom effect
- z-index in order to put lettering above

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily

#Raimoncoding #SoftwareEngineering #FrontEndDevelopment #Python #DataAnalysis #Flutter #CustomSoftware #BusinessSolutions #InnovativeTechnology #TechSolutions #SoftwareDevelopment #Expertise #HighQualityResults

#100DaysOfCode : #HTML #CSS

#Day11 : View Transitions API for MPA

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-for-MPA-Day11-of-100DaysOfCode

Project goals :
- HTML meta tags on both pages to unlock transitions API without JS
- Transition composed by opacity, left and transform scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily #ViewTransitionsAPI

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day10 : View Transitions API

Online demo :
https://teotimepacreau.github.io/View-Transitions-API-Day10-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/View-Transitions-API-Day10-Of-100DaysOfCode

Project goal :
- View Transitions API experimentation : understanding principle of implementation with VanillaJS .startViewTransition and DOMChanges activator

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode #LearningDaily #ViewTransitionsAPI

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day9 : Expandable FAQ

Online demo :
https://teotimepacreau.github.io/Expandable-FAQ-Day9-of-100DaysofCode/

Source Code : https://github.com/teotimepacreau/Expandable-FAQ-Day9-of-100DaysofCode

Project goals :
- VanillaJS closest selector and lastElementChild + DOM manipulation
- CSS use of linear gradient and box shadows
- multiple flexbox imbrication
- Font awesome icon toggle

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment #UIDesign #UITrend #CodingChallenge #LearnCode

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day8 : Glassmorphism split page

Online demo :
https://teotimepacreau.github.io/Split-Glassmorphism-Landing-Day8-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Split-Glassmorphism-Landing-Day8-of-100DaysOfCode

Goals :
- glassmorphism effect with CSS z-index, backdrop-filter, background-clip and box-shadow
- Vanilla JS add a class on mouseenter and remove class on mouseleave event
- CSS opacity and visibility transition for smooth

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #WebDevelopment

Am 19. April findet unser zweites Event statt. Als Sprecherin bringt uns diesmal Sophia Cook hexagonale Architektur im Frontend näher. Genug Zeit zum Netzwerken ist auch eingeplant. Kommt gerne vorbei, wir freuen uns auf euch!

Bitte meldet euch über Meetup an:
https://www.meetup.com/de-DE/female-dev-club/events/291950953/
#womeninit #femalepower #frontenddevelopment #Düssedorf

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day7 : Brutalist portfolio landing page and reveal animation

Online demo :
https://teotimepacreau.github.io/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Brutalist-portfolio-landing-page-Day7-of-100DaysOfCode

Goals :
- IntersectionObserver of VanillaJS to rerecreate scroll trigger without GSAP
- different CSS transition-delay on each line element to give the stagger feel
- CSS translateY, opacity and cubic-bezier

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS #GSAP

#Day6 : Text line filling opacity animation

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Text-line-filling-animation-on-scroll-Day6-Of-100DaysOfCode

Goals :
- VanillaJSto add a line-mask div in each line (forEach and appendChild)
- line-mask CSS class with position absolute that cover the line from right to left with high opacity

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock

#100DaysOfCode : #HTML #CSS #GSAP #JS

#Day5 : Text landing animation and variable font

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Text-landing-animation-and-variable-fonts-Day5-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Text-landing-animation-and-variable-fonts-Day5-of-100DaysOfCode

Goals :
- word / line animation coming from bottom with opacity handled with GSAP fundamentals
- variable font discovery
smooth transition playing with weight of the font and color

@gsap #WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment #Greensock

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day4 : #SlidingMenu and art landing page

Le projet est à retrouver sur :
https://teotimepacreau.github.io/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Sliding-Menu-and-art-landingpage-Day4-of-100DaysOfCode

Goals :
- grid template areas
- position absolute and z-index for menu slider
- opacity transition
- mouse follower
- :hover and ::before to anim menu items
- Vanilla JS class toggle with click listener

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

Just doing some email templates today and trialing Tailwind verbose mode™

#Developer #WebDeveloper #FrontendDeveloper #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day3 : Effet de défausse et #ContainerQueries

Le projet est à retrouver sur : https://teotimepacreau.github.io/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Discarding-effect-and-container-queries-Day3-of-100DaysOfCode

Goals :
- enabling dynamic and adaptive styling with container queries
- border-radius container handle images thanks to "overflow: hidden"
- discarding effect with translateX + rotate + scale

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day2 : Barre de progression évolutive accompagnée d'icônes

Le projet est à retrouver sur : https://teotimepacreau.github.io/Progress-Steps-Day2-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Progress-Steps-Day2-of-100DaysOfCode

Objectifs :
- position relative and position absolute to create the progress bar
- disabling and enabling buttons
- Cursor not-allowed and cursor pointer
- Vanilla JS IF logic

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #FrontendDevelopment

#100DaysOfCode : #HTML #CSS #VanillaJS seulement !

#Day1 : Création de cartes extensibles pour contenir des images dynamiquement

Le projet est à retrouver sur : https://teotimepacreau.github.io/Expanding-Cards-Day1-of-100DaysOfCode/

Code source : https://github.com/teotimepacreau/Expanding-Cards-Day1-of-100DaysOfCode

- handle images with object-fit: cover
- Vanilla JS eventListener, loops, class and attributes handling, create/remove DOM elements

#WebDev #Frontend #WebDesign #CodingChallenge #Javascript #LearnToCode #CodingDay #LearningDaily #FrontendDevelopment #WebDevelopment

Tell me you're building a SaaS product and mobile app all by yourself and just pushing to main all day long, without actually telling me you are 😬

#developer #frontend #FrontendDevelopment #FullstackDeveloper #Javascript #Vue #Supabase #SaaS

A few of the teams that I work with at Docker, Inc are hiring! Check out our open roles:

- Backend Engineer (Software Supply Chain - Clojure) - https://www.docker.com/career-openings/?ashby_jid=6368ccad-8850-43c5-b2a7-02f16736e406

- Backend Engineer (Software Supply Chain) - https://www.docker.com/career-openings/?ashby_jid=9cca946c-0740-46eb-8581-c32ca59a52b6

- Frontend Engineer (Supply Chain) - https://www.docker.com/career-openings/?ashby_jid=7259dbba-f110-47c2-8a8c-71629ef88fcf

#docker #hiring #backenddeveloper #frontenddevelopment #clojure #kubernetes #containers #security

Modern front end development is exhausting.

#frontenddevelopment #webdev

HTML stands for Hypertext Markup Language, it is a standard markup language used to create web pages. HTML uses tags to define the structure and content of a web page, making it a key component of the Internet and the World Wide Web. It has undergone several revisions over the years, with the latest version being HTML5, which provides new features and capabilities for web development.

#frontenddevelopment #html5 #webdesign

If you have a server-side app and you want to add some interactivity, consider hypermedia-driven approaches like htmx and hotwire. You’ll be able to enhance the UX of your application incrementally, maintain a lean frontend, and mitigate the complexity that integrating JavaScript frameworks, build tools and dependency management inevitably leads to #WebDevelopment #FrontendDevelopment #javascript #UserExperience

CSS logic lol

#css #WebDev #webdevelopment #frontend #frontenddevelopment #Programming #fosserytech

Hey, check out my latest post, explaining how kickstartDS is a meta framework for design system creation that helps streamline the process, resulting in robust and efficient design systems. 
👉 https://www.kickstartds.com/blog/everything-meta-and-everything-matters/
#designsystem #uxdesign #frontenddevelopment #meta #framework

Gotta be honest folks, as a front-ender, relearning #SQL and picking up #Supabase feels a bit like getting super powers 😅

#WebDeveloper #WebDevelopment #FrontendDevelopment #FrontendDeveloper #Postgres #PostgreSQL #Founder

I’m not an expert on #frontenddevelopment but it’s clear even to me that performance has for far too long been traded off for shiny animations and developer experience. This is driving an accessibility and #userexperience crisis, making the internet less equal and less equitable

“nearly half of devices have:

HDDs (not SSDs)
2-4 CPU cores
4GB RAM or less”

Would your site run well on these specs?

#softwaredevelopment #inclusivity

https://infrequently.org/2022/12/performance-baseline-2023/

Some you might be aware that I tried to start a business with my mate/colleague Jen – it's called LAYBL (https://laybl.app) and we're trying to tackle the clothing waste problem via data.

Well we got funded last week! 🙌🏻😱

Our pre-seed round completed and things are now a little less 'trying' to start a business and a lot more 'actually running one'.

Thought I'd mention as it gives context to my ramblings as this is the only place I talk tech

#FrontendDevelopment #WebDevelopment

I’m curious what the audience here thinks.
Do you consider html and css programming languages? Why or why not? #programming #frontenddevelopment

Is anyone after an Arc browser invite?

#Arc #ArcBrowser #FrontendDevelopment #FrontendDeveloper #WebDevelopment

#CSS #CheatSheet

#webdev #dev #frontendwebdev #frontenddevelopment #frontenddeveloper #web #style #html #code #stylesheet

Check out my #Twitter clone! Just in time for #RIPTwitter
https://www.linkedin.com/posts/brock-penner-97322062_riptwitter-pennerdev-javascript-ugcPost-7002816472750202880-wtF7?utm_source=share&utm_medium=member_ios

#PennerDev #javascript  #html   #css  #findapro  #findajob  #findajobyoulove  #webdevelopment  #frontend  #frontenddeveloper  #frontenddevelopment  #frontendjobs

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

#flexbox #css #frontenddevelopment #learning

Hello #webdev community of masto, I'm a compsci drop out who has in the last year started trying to break into #frontenddevelopment particularly with #react . Finished my #freecodeccamp certificates in responsive web design, #javascript algorithms and data structures and front end libraries. Hit a bit of a wall though, trying to build a #portfolio and finding work (or if I'm even job ready). Would love to chat to some folks about it! Please reply or dm if you're willing/interested!

I always get a little inconsistent with BEM-style `--modifier`s and SMACSS-style `is-active` status classes.

I've shied away from HTML attribute selectors but this is a really nice approach! https://elisehe.in/2022/10/16/attribute-selectors

#frontEndDevelopment #css #html

And now for the #FollowBackFriday part: I appreciate being followed back by everyone who shares one or more common interests:

#WebDevelopment / #FrontendDevelopment / #WebDesign

#ComputerScience (I study it via distance learning)

#VideoProduction / #AIArt / #GraphicDesign / #Typography

#Music / #MusicProduction (too seldom)

#DigitalMarketing (my day job)

Is there something in the wild that encrypts/decrypts data to push/pull on #indexeddb using browser’s #cryptoapi ?

#frontend #frontenddevelopment #javascript

#FrontEndDevelopment

Putting #miragejs into operations have provide simpler than expected, even though coming up with kind of "scenario" feature has proved a bit tricky
#javascript #test #FrontEndDevelopment