#web Development

[meltknuckles]

also, i've made a new personal site!! @ meltknuckles.net

for now it's just a simple about me, my gifs & pixels, and my links. feel free to check it out 🐛💚

[geminisee]

x

[prokopetz]

I think the real reason most websites are janky as hell to use these days is because web developers have become so specialised that nobody really understands how anything works anymore. The other day I had to explain why hosting critical Javascript libraries on a third-party CDN is a bad idea to a "lead developer" who genuinely didn't know the difference between server-side versus client-side scripting.

[intrexel]

blinkie drop<3

[pizza-and-ramen]

Tumblr is Tracking Shared Links

It looks like Tumblr @staff have finally implemented tracking garbage into shared links in the Tumblr mobile app. It took them years and years, but Tumblr is finally making an attempt to track shared links you click or links you share with friends.

When you share a post and choose to “copy” a link to your clipboard, you can see that they use their (new?) url shortener, at.tumblr.com.  The shortened URL appears to contain: your blog name; either the ID of the destination post, or the short string associated with the post; and an alphanumeric string.  Eg:

https://at.tumblr.com/pizza-and-ramen/im-fucking-dying-this-is-hilarious/uqndb20nkyob

The shortened URL redirects you to the destination link, but with 2 URL parameters: _branch_referrer and _branch_match_id.  Both are associated with a third-party analytics tool, branch.io.  Eg:

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious?_branch_referrer=H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D&_branch_match_id=1104914739086906151

_branch_referrer appears to be another shortened at.tumblr.com URL, except it’s been gzipped, base64 encoded, then URL encoded.  Eg:

H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D

URL decode to:

H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86+eK3w8ByqcWsU7jHnql0u99xd0v/AuVQAAAA==

base64 decode to (in hex for legibility):

1F8B0800 00000000 000315C4 C10D8020 0C00C089 4A1FC68F DB545069 A4805082 32BD9A5C CEABE6BA 20921A6D B286626C 12CC3C06 01450785 648BC802 7BB327C7 03DCF3AF 9E2B7C3C 072A9C5A C53B8C79 EA974BBD F71774BF F02E5500 0000

and unzipped with gunzip:

https://at.tumblr.com/pizza-and-ramen/im-fucking-dying-this-is-hilarious/xlz53wqdowww

which directs to the post with the same _branch_referrer but a new _branch_match_id:

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious?_branch_match_id=1104899685865808870&_branch_referrer=H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D

_branch_match_id, according to this stackoverflow answer, is an identifier unique to you, used to track users.  It could be based on browser fingerprinting, as branch.io’s branch_match_id is.

Anyway, there’s not a terribly easy way to avoid this tracking from the Tumblr mobile app, but if you get a link that has the id, not the string, you can modify it to the format of blog.tumblr.com/ID, like so before sending it to a friend:

https://at.tumblr.com/pizza-and-ramen/118684413624/uqndb20nkyob

https://pizza-and-ramen.tumblr.com/118684413624

Alternately, you could paste the link in your browser, allow it to redirect, then remove everything past the ? at the end, eg:

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious?_branch_referrer=H4sIAAAAAAAAAxXEwQ2AIAwAwIlKH8aP21RQaaSAUIIyvZpczqvmuiCSGm2yhmJsEsw8BgFFB4Vki8gCe7MnxwPc86%2BeK3w8ByqcWsU7jHnql0u99xd0v%2FAuVQAAAA%3D%3D&_branch_match_id=1104914739086906151

https://pizza-and-ramen.tumblr.com/post/118684413624/im-fucking-dying-this-is-hilarious

Anyway, this has been my privacy rant of the day.  Thanks for reading, and let me know if you know more about this than I do!

[codingquill]

Essentials You Need to Become a Web Developer

HTML, CSS, and JavaScript Mastery

Text Editor/Integrated Development Environment (IDE): Popular choices include Visual Studio Code, Sublime Text.

Version Control/Git: Platforms like GitHub, GitLab, and Bitbucket allow you to track changes, collaborate with others, and contribute to open-source projects.

Responsive Web Design Skills: Learn CSS frameworks like Bootstrap or Flexbox and master media queries

Understanding of Web Browsers: Familiarize yourself with browser developer tools for debugging and testing your code.

Front-End Frameworks: for example : React, Angular, or Vue.js are powerful tools for building dynamic and interactive web applications.

Back-End Development Skills: Understanding server-side programming languages (e.g., Node.js, Python, Ruby , php) and databases (e.g., MySQL, MongoDB)

Web Hosting and Deployment Knowledge: Platforms like Heroku, Vercel , Netlify, or AWS can help simplify this process.

Basic DevOps and CI/CD Understanding

Soft Skills and Problem-Solving: Effective communication, teamwork, and problem-solving skills

Confidence in Yourself: Confidence is a powerful asset. Believe in your abilities, and don't be afraid to take on challenging projects. The more you trust yourself, the more you'll be able to tackle complex coding tasks and overcome obstacles with determination.

[rtiodev]

I've been a local PHP community/meetup organizer for about 10 years, and I also run Discord/Telegram groups on the same topic. I was thinking, why not start a PHP Tumblr community as well? If you want to join, follow https://www.tumblr.com/communities/phpeanuts

[draculasdaughterrr]

⭒ ⋆ 🩹 random stamps ⋆ฺ࿐🧷⁎˚

[codemerything]

A structured way to learn JavaScript.

I came across a post on Twitter that I thought would be helpful to share with those who are struggling to find a structured way to learn Javascript on their own. Personally, I wish I had access to this information when I first started learning in January. However, I am grateful for my learning journey so far, as I have covered most topics, albeit in a less structured manner.

N/B: Not everyone learns in the same way; it's important to find what works for you. This is a guide, not a rulebook.

EASY

What is JavaScript and its role in web development?

Brief history and evolution of JavaScript.

Basic syntax and structure of JavaScript code.

Understanding variables, constants, and their declaration.

Data types: numbers, strings, boolean, and null/undefined.

Arithmetic, assignment, comparison, and logical operators.

Combining operators to create expressions.

Conditional statements (if, else if, else) for decision making.

Loops (for, while) for repetitive tasks. - Switch statements for multiple conditional cases.

MEDIUM

Defining functions, including parameters and return values.

Function scope, closures, and their practical applications.

Creating and manipulating arrays.

Working with objects, properties, and methods.

Iterating through arrays and objects.Understanding the Document Object Model (DOM).

Selecting and modifying HTML elements with JavaScript.Handling events (click, submit, etc.) with event listeners.

Using try-catch blocks to handle exceptions.

Common error types and debugging techniques.

HARD

Callback functions and their limitations.

Dealing with asynchronous operations, such as AJAX requests.

Promises for handling asynchronous operations.

Async/await for cleaner asynchronous code.

Arrow functions for concise function syntax.

Template literals for flexible string interpolation.

Destructuring for unpacking values from arrays and objects.

Spread/rest operators.

Design Patterns.

Writing unit tests with testing frameworks.

Code optimization techniques.

That's it I guess!

[computer-nerd-girl]

[zai-gq]

I made a portfolio website for @kaylasartwork! Here's a snippet of it. It isn't live because I can't get Github Pages to work, so any help would be great! (It's having issues verifying the DNS .-.)

Edit: it works now because I'm stupid

[code-es]

Coding resource!

exercism.org

A free website where you get specific problems to methodically learn small concepts of a programming language. Do 10 minutes to 1 hour every day, and then you will keep practicing every day, and you will be able to use the skills you learn in your real projects. They walk you through the problem all the way, and it's a super good way to learn!

[ruienr]

PLANTS PART 3 OF 9

[ayeforscotland]

Ad | Absolute banger of a Web Design & UX bundle here. Honestly amazed at what's on offer here. HTML, CSS, Figma prototyping - Loads of solid basics to give you a solid foundation.

[codingquill]

I'm currently learning React and I'm taking a 13-hour course. I can't keep this website to myself because it's truly amazing. It's perfect, it's free, and there are other courses out there with much less interaction and smoothness that make you pay a lot.

The website I'm talking about is Scrimba. I highly recommend it for anyone starting their front-end journey. I'm confident that no one will disagree with me on this.

Have a great day! <3

[mckencodes]

8-18-24

I am starting SQL on Codecademy today! I know nothing about databases, despite taking a class on in 2020 (😅). My sister has a bunch of photos from when she made a baking instagram and I want to make a website using them. I'm thinking a recipe that you can search based on ingredients. I'm taking a break from JavaScript, so the backend will be using Flask. I love JavaScript, but I'm a bit bored of it right now tbh. I'll try to update about this project, but this blog is kind of a mess (oops).

🎧: Join the Club by Tilly Louise

P.s. the coffee is cookie butter caramel latte with almond milk, from local coffee shop 🧡