A lovely impressionistic watercolor of an anonymous patch of clouds.

Cloud study

Robin Sloan
The Media Lab
March 2021

A lovely impressionistic watercolor of an anonymous patch of clouds.
Cloud study, anonymous, 19th century

The website you’re reading is mostly static HTML, just web pages on a CDN, but for newsletter subscribers, it does offer a few bits of interactivity, and those bits require code to run somewhere other than your browser.

For my projects, that “somewhere” has lately and reliably become cloud functions. They fit at least two ways:

  • practically, because every­thing in my ~digital universe~ is driven by newsletters, which means sharp spikes of reader­ship (and code execution) that atten­uate into trickles; and

  • emotionally, because I’ve always found the care and feeding of public servers, even just little EC2 instances, totally stressful. A regime of CDNs and cloud functions eliminates, at last, the whispering worry: is it still running…?

Back in January, when I was putting this website together, I’d already imple­mented the subscriber tools on AWS Lambda when Google announced that their Cloud Functions would support Ruby. I did a little inves­ti­ga­tion and was so impressed that I switched every­thing over; now, I want to share a couple of findings.

This message was emailed to the Media Lab committee. The assumed audience is subscribers who maintain their own websites or other small apps. (Here’s more about assumed audiences.)

The winner

I appre­ciate AWS Lambda’s role in kickstarting the whole “floating wisp of code” model, but/and I have found the system itself very funky to work with. Google’s Cloud Functions, particularly in Ruby, partic­u­larly with the scaffolding of the Functions Framework, has been a better experi­ence in every respect.

There’s a simple, useful local devel­op­ment mode. The function runs exactly as it would in the cloud, with no special setup or extra tinkering required.

Dependencies are as easy as a Gemfile. AWS, by contrast, requires funky “layers” that you need to build and maintain separately.

The single-page view of each function is terrific. Google’s dashboard shows you every­thing you need to know in one screen: the function’s activity over time, how quickly it’s responding, how many copies are running, etc. It’s perfect.

All in all, Google’s system has provided the most potent dose of like, “suddenly expanded technical capability” I’ve received since, I don’t know… Slicehost??

The mega function

One well-estab­lished drawback of cloud functions is the “cold start” problem. When your function is getting used a lot, the system spins up as many copies as needed; very slick. When it’s not getting used, the system spins up: zero. So, the first request after a period of slumber can be quite slow. One imagines the system nervously patting its pockets: “Where did I put that code…?”

It’s really not a huge deal, but there is a notice­able differ­ence between the perfor­mance of a function that’s “cold” vs. one that’s being pinged by a few thousand newsletter subscribers. The latter purrs; the former engages with a palpable ker-thunk.

The solution I’ve chosen might be “bad” practice, but it works for me. Instead of deploying each of my functions as Actually Different cloud functions, I’ve rolled them up into one “mega function”—really almost a tiny app.

The result is that when someone arrives to, say, modify their newsletter subscription, they rouse the code not only for future subscription-modifiers but for anyone who might need any part of it. That might include their future self, performing a different operation.

For routing, I use a parameter in the payload called method:

case body["method"]
when "get_tags"
when "update_tags"
when "send_response"
when "check_email"

Here, I’ll drop in one of my little response fields, just for the pleasure of plugging into a warmed-up function:

Another advantage, for me, of putting every­thing into one mega function is that it “fails fast”; if something isn’t working, nothing is working.

This is all in the context of an incon­se­quen­tial personal website… but that’s not an uncommon context! Just because critical enter­prise databases exist doesn’t mean we all need to program as if we’re supporting them.

Sloan’s mega function: I recom­mend it.

Pretty much the same as the first watercolor, but with the red glow of sunset.
Cloud study, anonymous, 19th century

From Berkeley,


Sent to the Media Lab committee in March 2021

Source link

r/webdev - My simple Github project went Viral - Thank you Reddit!

My simple Github project went Viral

Last month, I made a simple project which got spread in various tech communities and social media. On Github, It reached from 0 to 4k+ stars and 200+ forks within 7 days. Github featured it in Trending repositories of day section for straight 5 days or so.

Some of you might remember 🙂 this was the project:

r/webdev - My simple Github project went Viral - Thank you Reddit!

Trending on Github – 13 Mar’21

Clone Wars

70+ open-source clones or alternatives of popular sites like Airbnb, Amazon, Instagram, Netflix, Tiktok, etc. List contains source code, demo links, tech stack, and, GitHub stars count.

Project link: https://gourav.io/clone-wars

Github link: https://github.com/gorvgoyl/clone-wars

Motivation behind this project

I usually lurk in programming subreddits like webdev, reactjs, etc. to see what other devs are building or if any new JS framework is popping up. I noticed many devs were making clones of popular sites like Instagram, Trello, Spotify, etc. as part of their learning purpose, and they were sharing it with others to get feedback in terms of code quality and best practices.

r/webdev - My simple Github project went Viral - Thank you Reddit!

These clones were scattered all over the communities. So, I thought why not create a single list of all these clones which people can bookmark and revisit later for whatever purpose they need it for. Honestly, I wasn’t entirely sure at that time whether it would provide any good value to others or not. So, there was a way to find out that is to build it myself!

How I built it

1. Scrapping Reddit

I wanted to get all posts that contain the “clone” keyword. I initially did it with default reddit search reddit.com/r/reactjs/search/?q=clone&source=recent&restrict_sr=1&sort=new, (means look for all posts in reactjs subreddit with “clone” keyword and sort by new). It returned all posts, but that also included low-quality posts with 0 upvotes, questions on how to build a specific clone, etc. It would be a headache figuring out good clone projects from that dump. So, I used redditsearch.io instead, which provides advanced Reddit filtering like return posts that have at least 10 upvotes, posted during a specific timeline, etc.

Next, I made a list of all these clones, their Github repo, demo links, tech stack. It was manual work.

Additionally, I googled “open-source alternatives” and found some fully-functional clones of Slack, Airtable, Bit.ly, Evernote, Google analytics, etc. I added these to the list.

So, now there are 2 kinds of projects on the list. The first ones look quite similar (UI-wise) but aren’t fully-functional and the other ones which are fully-functional but UI is different (to avoid copyright issues, etc).

BTW, I named my project after Star Wars 2008 TV Series: “The Clone Wars” and also kept the similar color scheme of OG image.

2. Pretty view of table

I needed to make it look better (sticky header) which meant I needed to deploy this project somewhere else. I still needed it to be on Github so that others can collaborate easily. I decided to host it on my personal site https://gourav.io.

My site is built using NextJS, and I was already using markdown (mdx) to write blog posts, so it was just a matter of copy-pasting markdown file from my Github project to new page https://gourav.io/clone-wars. And on top of it, I use Tailwind CSS with “typography” plugin which makes tables pleasing to read along with other text.

I thought of automating it to the next level i.e. if any change happens to the Github project or someone’s PR gets merged, update the same on my site https://gourav.io/clone-wars. But, decided not to over-engineer it as changes weren’t that frequent.

Making it Viral

I posted in 2-3 relevant subreddits and it took off 🚀

r/webdev - My simple Github project went Viral - Thank you Reddit!
r/webdev - My simple Github project went Viral - Thank you Reddit!

After effects

Once the project gained some popularity many developers started raising PR to add their clone projects to the list. When I started it had around ~75 clones, but now it’s more than 120+ and I still get new PR every now and then.

I got to know from a friend that it was picked by React Newsletter. Such a serendipitous moment.

People were tweeting about Clone Wars. nickbulljs tweeted a neat idea for devs who are looking to get hired.

I got 150+ new followers after this tweet 😮

And one person donated $5 from BuyMeACoffee link I put on the project. Love you stranger.

r/webdev - My simple Github project went Viral - Thank you Reddit!

Within 30 days of launch, 40k+ people came to my personal site and viewed my project (80k+ views).

You can see users insights at the end of the article on my blog.

I know it was a long read, I hope you enjoyed it.

Source link


3 Steps to Give Your Spreadsheet a Modern Touch

Spreadsheets are no doubt the most popular business application – they are heavily used in all fields, favored by users from finance experts in Wall Street to top scientists in NASA. Spreadsheets allow users to calculate, organize and store data, and most important of all, analyze data without having to program.

Nowadays spreadsheets extend their reach more – they no longer sit inside a user’s Excel desktop application, they are now widely used online, either being embedded inside applications or run on an online platform like google sheets. But when a spreadsheet goes online, can we do more than just duplicating Excel’s functionality into the browser?

More Than a Spreadsheet

While spreadsheets are great for displaying tabular data, presenting forms or charts, it is not always great to display a large block of text or display images and other elements that have varied dimensions. This is where we can leverage today’s fancy and easy-to-use web UI components to work with an online spreadsheet and upgrade spreadsheet users’ experience.

Here I am taking Keikai spreadsheet and a ZK drawer component as an example demonstrating how this can be done in a few steps. In this example, we will add a slide-in/out Help panel to our spreadsheet where we can display large blocks of Help text in a much more easy-to-read format.

Let me show you how to build this application.

Step 1: Load the Excel File

I can load my helpTemplate.xlsx in a zul by specifying src at <spreadsheet/>. The zul is an XML-formatted UI language supported by ZK framework. formHelp.zul.

Other attributes of the tag determine spreadsheet looking; please refer to Keikai Developer Reference.

Step 2: Include Additional UI Components

Then I will create the help page and show it in a sliding drawer.

There are 5 blocks of numbers in the form above. Hence, I create an HTML page and put help descriptions into 5 different color boxes. Each box has a corresponding help box with the same background and title. So people who read the help page can easily identify which help text matches their needs for the current block.


Then I use the <include> component to include that help HTML into <drawer>.

  • visible="false" means it’s hidden by default, so you won’t see the drawer at first. But users can click the ‘Help’ cell to show the help.

Note, this is just a simple example; you can definitely put any other HTML content (images, videos…) to the help page based on your own context.

Step 3: Implement Application Logic with Event Listeners

To show the help panel when a user clicks the Help button (made by a cell with borders), I need to add an event listener for the cell click event in a controller. Keikai supports the MVC pattern, so it’s better to implement my application logic in a controller with a better OO design. The controller looks like this:

  • SelectorComposer helps me to get a reference of helpDrawer which is instantiated by the ZK framework. That’s why I declare a variable of Drawer without instantiating its object.
  • @Listen can register the method as an event listener for Events.ON_CELL_CLICK of the spreadsheet. So when a user clicks a cell, ZK will invoke this method.
  • RangeHelper.getTargetRange(e) returns a Range that represents the clicked cell. Then I can check the cell’s value by cell.getCellValue().toString() to know whether a user clicks the ‘Help’ cell or not.
  • helpDrawer.open() makes the drawer slide in.

With these 3 steps, you can combine the best of both worlds: the classic spreadsheet and the modern web.

Advanced Example: Turn an Excel File into a Hotel Voting App

The example above shows how you can integrate a static “help” with your sheet. Now let me take it further and demonstrate a more complicated example where the additional UI component (panel) interacts with the spreadsheet.

This example is a hotel voting application for all employees. For an employee, he can:

  1. Click a cell to vote for a hotel.
  2. Click a hotel to show more information and also vote for the hotel.

Here is a short clip for the features:

Short Clip of Features

Step 1: Load Pre-designed Excel File

Firstly, I create a table of hotels and voting checkboxes in an Excel file like:

Pre-designed Excel FileLike step 1 in my previous example, load the designed Excel file into Keikai with a zul.

Step 2: Add Additional UI Components

Similar to the previous step 2, I still add a drawer to show the ‘More Info’ panel on the right-hand side. Since I need to show different details for different hotels, I don’t include a fixed page this time. I will inject a different zul page for each clicked hotel.

Step 3: Implement Application Logic with Event Listeners

Keikai supports an event-driven programming model, I should implement application logic in event listeners.

Click to Vote a Hotel

Add ON_CELL_CLICK event listener:

To check the cell clicking easily, I create 4 named Range: Vote1 ~ Vote4 for 4 voting areas, so that I can easily determine whether a user clicking is inside these 4 ranges or not.

Vote Ranges

  • Line 4: Ranges.rangeByName(), get a range of cells by a name. With this approach, the Java code can resist cell position change which is better than using cell reference.

Then, I need to update the checkmark position and the corresponding vote count.

  • Line 8-9: I can change the checkmark’s position by setting the cell value with  ‘√’.
  • Line 17: CellOperationUtil.applyFontColor() can change the text color in cells.

Show More Info When Clicking on a Hotel

Show more info when clicking on a hotel

When a user clicks a cell on Day 1 (C6:F9), I will call helperDrawer.open() to show more information. But each hotel has different details, I create each zul for each hotel like:

Silver Oyster Resort.zul
Silver Mountain Resort.zul
Ivory Baron Hotel.zul
Crown Lodge Resort & Spa.zul

Then I put a template injection component inside the drawer, so that I can dynamically switch the page inside the template.

  • Line 1,6: create a template inject component and put it into helpDrawer
  • Line 10: get hotel name from cell value
  • Line 11~12: switch to the corresponding zul page and enforce  apply() to recreate the new zul again

‘Vote This Hotel’ Button

Vote This Hotel Button

After the drawer opens, it shows more information of a hotel and a “Vote This Hotel” button and users can click the button to vote for the said hotel. Because the page is dynamically created for each cell clicking, I can’t add a listener to the button. I need to forward its onClick event to drawer (see Event Forwarding).

Then listen to my custom forwarding event onVote to update the vote count:

  • Line 1: Listen to onVote event on the drawer
  • Line 3~4: convert user-clicked cell into the cell in Vote1 to update the checkmark and vote count.


Spreadsheets are brought online for easier sharing and collaboration. But we can do more! This example uses Keikai Spreadsheet and ZK components to demonstrate how you can leverage rich UI components to upgrade a user’s spreadsheet experience while preserving its benefits.

Source Code

You can see the complete source code in Keikai developer reference repository.

Source link

r/webdev - Need Help will pay someone for help at this point

Need Help will pay someone for help at this point : webdev

Long story short I contracted someone through fiverr for an idea I have because I’m not up to that point yet, in the site I have an audio player that plays tracks but I have no idea how to implement my own tracks in the site, I’ve included a picture of the code where the dev implemented it but there’s a language barrier I think or he’s just choosing not to respond. Can anyone help me I’ll literally pay someone to walk me through it at this point I’m just super frustrated and want to deploy this thing.

r/webdev - Need Help will pay someone for help at this point

Source link

See You Around | CSS-Tricks

See You Around | CSS-Tricks

Get it? Because this blog post is about Around, the wonderful new video call software. I’ve been using it for my video calls and I’d be happy to deliver you a TLDR right off the bat: It’s nice. It has all the important features of video call software you need while being very design-focused in a way that feels stand-out fresh. Thank god someone is getting this right.

Little floating circles

Make no mistake: chatting with people where you see their faces in a little floating circle is way nicer than a giant rectangle. It may not seem like a massive difference, but it really does feel different and better, particularly when you’re chatting with multiple people and/or people you chat with all the time.

You still get the face, that all-important human connector, but you aren’t seeing my disheveled bookshelf, my laundry hamper, or my dead plant in the corner. Even if you have a nice background or nobody cares about your unmade bed in the background (they probably don’t), there is a literal fatigue that sets in when you have a camera pointed at your whole area for any sustained period. It’s hard to describe, but it just feels like… a lot. That all changes for the better when all you are sharing is a cropped circle of your face. There is less pressure to be maintaining eye contact, for one thing. Here’s me and Geoff:

I have these little circles tucked into the upper right of my monitor.

There is real tech behind these circles. The virtual camera “zooms” to properly size your face in the circle so you’re always in focus. If you move off to any direction, it “pans” to keep you centered (as much as it can). Even the color filters it offers, while on the surface might just seem like a bit of fun, lower video fatigue. I gotta imagine the pressure to wear makeup is a bit lower when you’re green and pixelated:

The circles go everywhere in Around. They don’t have to be floating (although I like that mode the best). If you pop into Campfire mode, you’ll see everyone together in a more normal/dedicated window. If you pop into Notes or Image Sharing view, they come along in there too. Speaking of which…


There is a collaborative Notes view in every call. The editor is very polished, and I was impressed. This isn’t some half-baked slapped-on chatroom-esque thing; it’s for actual formatted note-taking. The real-time-ness of it is spot on.

But here’s the actual best feature… when the meeting ends, everyone in the meeting gets emailed a copy of the notes. I’m going to give that three clap-hands emojis: 👏👏👏. Here’s Dave and I having a little call about ShopTalk, writing some silly notes, next to the emailed notes that arrive immediately after the end of the call:

Just the notes. No crap.

Notes can have a chat-like feel to them, but there is literally a chat feature as well. Like everything in Around, it’s got interesting UX to it. When you type and send a chat message, it appears next to your floating head. Just one chat message. It stays there until you remove it. It just makes a ton of sense. You don’t really need a traditional chatroom, you’re already talking to each other! More likely you need to share a link or something, and this UI is perfect for that.


Aside from notes, there is Image Sharing, which is a very focused way to get everyone looking at one thing.

And then, of course, Screen Sharing. All the features you need for that are there. You can share your whole screen, or select just one window. Here’s me having a meeting with Dave where we’re looking at different polling options:

I’m sharing my browser window. I have the floaty heads I can move wherever.
Dave sees my screen within the Around interface with the floaty heads in there.

You can give control of your computer to the person you are sharing with as well, which is awfully handy for pair programming sessions, which I’m doing constantly.

Audio quality

The first thing that Geoff said to me when we popped on to our first Around call was “Wow, you sound good.” I don’t hear that often at my desk because I work in an office with glass walls and it’s a bit echo-y and I haven’t gotten around to sound-dampening stuff in here yet. There is more real tech at work here with Around’s build-in noise reduction.

Around takes this echo cancellation stuff even further with their EchoTerminator feature (video). Even if you’re in the same room as other people on the same Around call, you don’t have to do that little dance where everyone mutes except one and hope that works. With Around, you don’t have to think about it, it just works (without the echo and feedback).


I spent a good while today watching Dave basically re-create the Dramatic Chipmunk GIF with his face, playing with how Around detects and zooms on faces. So that was a good time. But many of the features of Around have fun built right in.

You can just straight up turn off your video if you want, of course, or, you can be a cute bear GIF. It just stays that way until you turn it off. So you can use it as a reaction, a replacement for yourself, or just for a quick bit of fun.
Emoji reactions pop up and cover your face for a second. Way more fun that it should be.


The most important integration for a video call app to me is Slack. That’s where my co-workers are, so kicking off a call happens many times a day right from there. As expected, you can do /around and off we go. Google Calendar is also a no-brainer.

On a serious note, it’s good to see Around on top of security. For example, if you share an image, it’s on their servers only until the call is over and then deleted. All text is encrypted. Meeting rooms aren’t going to get bombed as there are one-off ID’s and entrance controls.

Ready to give it a try?

Around is free for anyone to download, with pricing coming later this year.

Source link

A tooltip that reads, “var content: any. Property ‘content’ does not exist on type ‘PropsWithChildren<Props>’. ts(2339). View Problem (Option F8). No quick fixes available. Tooltip is pointing towards an argument called “content.”

CSS is a Strongly Typed Language

One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, “typed” means if variables are known at compile time. An example of this would be a scenario where an integer (1) is added to a string containing an integer ("1"):

result = 1 + "1";

The string containing an integer could have been unintentionally generated from a complicated suite of logic with lots of moving parts. It could also have been intentionally generated from a single source of truth.

Despite the connotations that the terms “weak” and “strong” imply, a strongly-typed programming language isn’t necessarily better than a weakly-typed one. There may be scenarios where flexibility is needed more than rigidity, and vice-versa. As with many aspects of programming, the answer is dependent on multiple external contexts (i.e “it depends”).

The other interesting bit is there is no formal definition of what constitutes strong or weak typing. This means that perceptions of what is considered a strongly or weakly-typed language differ from person to person, and may change over time.


JavaScript is considered a weakly-typed language, and this flexibility contributed to its early adoption on the web. However, as the web has matured and industrialized, use cases for JavaScript have become more complicated.

Extensions like TypeScript were created to help with this. Think of it as a “plugin” for JavaScript, which grafts strong typing onto the language. This helps programmers navigate complicated setups. An example of this could be a data-intensive single page application used for e-commerce.

TypeScript is currently very popular in the web development industry, and many new projects default to using TypeScript when first setting things up.

Compile time

Compile time is the moment when a programming language is converted into machine code. It is a precursor to runtime, the moment when machine code is performed by the computer.

As with many things on the web, compile time is a bit tricky. A setup that utilizes TypeScript will stitch together component pieces of JavaScript code and compile them into a single JavaScript file for the browser to read and run.

The time when component pieces compile is when they are all combined. TypeScript serves as a kind of overseer, and will yell at you if you try to break the typed conventions you have set up for yourself before combination occurs.

A tooltip that reads, “var content: any. Property ‘content’ does not exist on type ‘PropsWithChildren<Props>’. ts(2339). View Problem (Option F8). No quick fixes available. Tooltip is pointing towards an argument called “content.”
A sample TypeScript error in VS Code.

The stitched-together JavaScript file is then ingested by the browser, which has its own compile time. Browser compile time is highly variable, depending on:

  • The device the browser is on,
  • What other work the browser is doing, and
  • What other work the device’s other programs are doing.

TypeScript isn’t directly used by the browser, but its presence is felt. JavaScript is fragile. TypeScript helps with this fragility by trying to prevent errors upstream in the code editor. This lessens the chance errors occur in the JavaScript read by the browser — errors that would cause JavaScript to stop functioning on the website or web app a person is using.


CSS is a declarative, domain-specific programming language. It is also strongly typed. For the most part, values in CSS stay declared as authored. If a value is invalid the browser throws the entire property away.

Types in CSS

The list of types in CSS is thorough. They are:

Textual types
  • Globally-scoped keywords:
    • initial
    • inherit
    • unset
    • revert
  • Custom identifies, which are specifically used for things, such as providing a grid-area name
  • Strings, such as, "hello"
  • URLs, such as https://css-tricks.com/
  • Dashed idents (--), which are used to create custom properties (more on this in a bit)
Numeric types
  • Integers, which are decimal numbers 0–9
  • Real numbers, such as 3.14
  • Percentages, such as 25%
  • Dimensions, a number with a unit appended to it such as (100px or 3s)
  • Ratios, such as 16/9
  • flex, a variable length for CSS grid calculation
Quantity types
  • Lengths:
  • Angles, such as 15deg
  • Time, such as 250ms
  • Frequencies, such 16Hz
  • Resolution, such as 96dpi

Dimensions and lengths might seem similar, but dimensions can contain percentages and lengths cannot.

Color types
  • Keywords:
    • Named colors, such as papayawhip
    • transparent
    • currentColor
  • RGB colors:
    • Hexidecimal notation, such as #FF8764
    • RGB/RGBa notation, such as rgba(105, 221, 174, 0.5)
  • HSL/HSLA colors, such as hsl(287, 76%, 50%)
  • System colors, such as ButtonText
Image types
  • Image, which is a URL reference to an image file or gradient
  • color-stop-list, a list of two or more color stops, used for gradient notion
  • linear-color-stop, a color and length expression used to indicate a gradient color stop
  • linear-color-hint, a length percentage used to interpolate color
  • ending-shape, which uses a keyword of either circle or ellipse for radial gradients
2D positioning types
  • Keywords:
  • A percentage length, such as 25%

Programming in CSS

The bulk of programming in CSS is authoring selectors, then specifying a suite of properties and their requisite values. Collections of selectors give content a visual form, much as how collections of JavaScript logic creates features.

CSS has functions. It can perform calculation, conditional logic, algorithmic expressions, state, and mode-based behavior. It also has custom properties, which are effectively CSS variables that allow values to be updated dynamically. Heck, you can even solve fizzbuzz with CSS.

Like other programming languages, there is also a “meta” layer, with different thoughts and techniques on how to organize, manage and maintain things.

Throwing errors

Unlike other programming languages where code largely exists under the hood, CSS is highly visual. You won’t see warnings or errors in the console if you use an invalid value for a property declaration, but you will get visuals that don’t update the way you anticipated.

The reason for this is that CSS is resilient. When visuals don’t update because of a misconstructed declaration, CSS is prioritizing, ensuring content can be shown at all costs and will render every other valid declaration it possibly can. This is in keeping with the design principles of the language, the principles of the platform, and the overarching goals of the web’s mission.


Let’s demonstrate how strong typing in CSS keeps the guardrails on in three examples: one with a straightforward property/value declaration, one with calculation, and one with redefining a custom property.

Example 1: Straightforward property/value declaration

See the Pen
Basic example
by Eric Bailey (@ericwbailey)
on CodePen.

For this example, the browser does not understand the banner’s border-style “potato” declaration. Note that the other .banner class selector property/value declarations are honored by the browser and rendered, even though border-style has a type mismatch. This is an example of how resilient CSS is.

The border-style declaration is expecting one of the following textual style types:

  • Globally-scoped keywords, or a
  • Dashed indent for a custom property.

If we update border-style to use a valid, typed value of dotted, the browser will render the border!

Example 2: Calculation

The calc() function in CSS allows us to take two arguments and an operator to return a calculated result. If one of the arguments doesn’t use a valid type, the calculation won’t work.

In this Pen, the p selector’s font-size property is expecting a value with a numeric dimension type (e.g. 1.5rem). However, the calculation function produces an invalid type value for the font-size property. This is because the second argument in the calc() function is a string ("2rem"), and not a numeric dimension type.

Because of this, the paragraph’s font size falls back to the next most applicable parent node — the font-size of 1.5rem declared on the body element.

This is a bit in the weeds, but worth pointing out: Combining two custom properties in a calc() function can cause errors. While both custom properties may be valid on their own, calc() will not accept dashed indent textual types. Think of a scenario where we might try multiplying custom properties that contain mismatched units, e.g. --big: 500px and --small: 1em.

Example 3: Redefined custom property

Like JavaScript variables, custom property values can be redefined. This flexibility allows for things like easily creating dark mode color themes.

In the :root selector of this CodePen, I have set a custom property of --color-cyan, with a value of #953FE3. Then, in the .square class, I have updated the --color-cyan custom property’s value to be top. While top is a valid, typed value, it is not a type that background-color honors.

Notice that the updated custom property is scoped to .square, and does not affect other usages, such as the right-hand border on the phrase “Don’t play to type.” And if you remove the redefined custom property from .square, you’ll see the cyan background color snap back in.

While this is a bit contrived, it serves as an example of how redefining custom properties can get away from you if you’re not careful.

This phenomenon can be found in projects with poor communication, larger CSS codebases, and situations where CSS preprocessors are used to construct custom properties at scale.


With the gift of hindsight, I think a lack of console warnings for CSS is a flaw, and has contributed to a lot of the negative perceptions about the language.

Hoping a developer will notice a potentially tiny visual change is too big an ask, and does not meet them where they are for most of their other daily tools. There are a couple of initiatives I’m aware of that try to address this.

First is stylelint, a linter made specifically to deal with CSS and CSS-like preprocessing languages. stylelint can integrate with code editors, task runners, command line tools, and GitHub actions to help keep your CSS under control. This allows it to meet developers where they already are.

A tooltip that reads, “var content: any. Property ‘content’ does not exist on type ‘PropsWithChildren<Props>’. ts(2339). View Problem (Option F8). No quick fixes available. Tooltip is pointing towards an argument called “content.”
stylelint terminal output.

Second is Firefox’s excellent suite of CSS inspection options in its Developer Tools. In particular, I would like to call attention to its ability to identify unused CSS. This is extremely helpful for identifying selectors that may have run afoul of a type mismatch.

Tooltip attached to an unused selector in the Developer panel. The tooltip reads, “vertical-align has no effect on this element since it’s not an inline or table-cell element. Try adding display: inline or display: table-cell. Learn more. Screenshot.”
Firefox Developer edition

Wrapping up

CSS has been strongly typed for as long as it has been a programming language, and as a programming language it has been around for a long time. It’s also done a lot of growing up lately. If you haven’t checked in, there are some new, amazing features available.

As strongly-typed JavaScript becomes more popular, it is my hope that it helps developers become more comfortable with the firm, yet flexible approach of CSS.

Thank you to Miriam Suzanne for her feedback.

Source link

Logo Design reel on Shutterstock

Logo Design reel on Shutterstock

Logo Design reel on Shutterstock

Again, I am so grateful to all of you.
Shutterstock has approved 12 of my recent Logo Design EPS files on 12/04/2021.

Miracle's Unlimited….!

Are these resources really blow your mind??? Huh…


submitted by /u/djeducation

Source link

r/webdev - PHP Paypal checkout - transaction data - only returning PayerID

PHP Paypal checkout – transaction data

First time integrating paypal, sorry if it’s a bad question. I’ve made a shop page which uses php for the back end and this is my code for single item purchases:

r/webdev - PHP Paypal checkout - transaction data - only returning PayerID

but on the return success.php the only transaction data that paypal returns after a successful payment is the PayerID. The output of: print_r( $_REQUEST ); is just Array ( [PayerID] => SOME_HEXADECIMAL )

r/webdev - PHP Paypal checkout - transaction data - only returning PayerID

I have ‘Auto return for website payments’ and ‘Payment data transfer’ turned on in my PayPal business account. The return address in the Auto return I’ve set to: http://localhost/test/success.php

The site isn’t live and I’m in a sandbox version of paypal. What am I doing wrong?

Source link

r/graphic_design - How would one do this kind of art?

How would one do this kind of art? : graphic_design

I saw this on the Internet and was told it was a vector graphic. I was shocked at how detailed it was for it to be a vector graphic. I couldn’t imagine where to even start doing this kind of art on vector software. But it does seem too smooth to be a raster graphic.

r/graphic_design - How would one do this kind of art?

That 3D building, especially its lighting, looks too complex for a 2D vector work. The l

Is this a vector graphic? How would you go on making something similar to this?

Source link

r/webdev - Wordpress Bootstrap Navwalker with Bootstrap 5.0.0 - dropdown does not drop down on small screens/mobile?

WordPress Bootstrap Navwalker with Bootstrap 5.0.0

Hi everyone,

I am currently doing a seminar on web development. I have never done web development before so please bare with me – I am a complete noob…

I am currently trying to implement the Bootstrap Navwalker (see here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker) in my wordpress files with the latest Bootstrap version 5.0.0. However, there seems to be an issue with the Navwalker when using this Bootstrap version. Everything works the way it should on desktop. However, on small screens or mobile, the dropdown doesn’t drop down (it that makes sense). I am attaching a picture – basically, if I click on the circled button nothing from the nav comes down and I can’t click any sites.

r/webdev - WordPress Bootstrap Navwalker with Bootstrap 5.0.0 - dropdown does not drop down on small screens/mobile?

I’ve tried looking around on the internet but haven’t found a solution that works yet. I have tried changing all the data attributes in my header.php file to “data-bs-” like it’s suggested here: https://wordpress.stackexchange.com/questions/383286/why-is-my-bootstrap-5-navbar-not-displaying-the-drop-down-menu-on-smaller-screen – didn’t work. I have also tried using this solution with the functions.php and header.php file: https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker – didn’t work either.

So my question is – could anyone help me here or have any of you used one of these solutions and they worked? I would like to work with Bootstrap 5 if possible because that’s what I just learned 2 weeks ago.

This is my current functions.php code:


function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '5.0.0', true );

add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );

function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
add_action( 'after_setup_theme', 'register_navwalker' );

function wpb_custom_new_menu() {
  register_nav_menu('primary',__( 'Hauptmenu' ));
add_action( 'init', 'wpb_custom_new_menu' );

And this is my current header.php file in case this helps:

<!DOCTYPE html >
<html lang="de">
		<title><?php wp_title(' - ', true, 'right'); bloginfo('name'); ?></title>
		<meta charset='utf-8'>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
		<?php wp_head(); ?>
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
        <span class="navbar-toggler-icon"></span>

    <a class="navbar-brand" href="#">Ginas website</a>
        wp_nav_menu( array(
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );

The rest is currently just extremely barebones as I am just learning how to build it and customise it.

Source link