r/web_design - Multiple .svg to create background (Beginner question)
Strategy

Multiple .svg to create background (Beginner question) : web…


Hello everyone, I’m new in the world of web design, and I’m trying to create my first website. I would like to ask for your help/advice for a problem I encountered. I’m designing a colorful background made of many layers, to which I would like to apply a parallax effect (keeping all layers apart). Here is a sample image to help you understand the composition of the background layers:

r/web_design - Multiple .svg to create background (Beginner question)

Example image

In your opinion there are no problems using many .svg images as background? Or do I make the site too heavy?

Do you also have advice on how I can adapt my images to the monitor view of the viewer? If I draw the background on a 1280*720 document, will it be displayed correctly in full screen even on larger monitors without losing the original aspect ratio?

In short, do you have advice on which is the best method to use to create such a background?

Thank you very much in advance!



Source link

Screenshot of the entire length of the homepage of ChrisCoyier.net. Four major boxes of content: build-your-own bio in yellow, blog posts in purple, action items in red, and a video in blue.
Strategy

Little Things on My Personal Site


I updated my personal website the other day. Always a fun project since it’s one of the few where it’s 100% just me. It’s my own personal playground with no other goal than making the site represent me to have a little fun. It’s not a complete re-write, just some new paint.

I thought I’d document little bits of it here just to hone in on some of the bits of trickery in the spirit of learning through sharing.

Screenshot of the entire length of the homepage of ChrisCoyier.net. Four major boxes of content: build-your-own bio in yellow, blog posts in purple, action items in red, and a video in blue.

Hoefler Fonts

I think the Inkwell family is super cool. I like mix and matching not just the weights but the serif and sans-serif and caps vs not.

From the Inkwell introduction post.

I used Inkwell in the last design as well, but I was worried that it was a little too jokey for blog post body copy. My writing is extremely casual, but not always, and Inkwell is way too jovial for serious topics. I went with Ideal Sans for body copy last time, but the pairing with Inkwell felt a little off.

This time I went with Whitney for general body copy, which is still pretty lighthearted, but works when the copy is more straight toned.

Blogroll

If you’re going to zebra-stripe a table, you’d do something like…

tr:nth-child(even) {
  background-color: var(--color-1);
}
tr:nth-child(odd) {
  background-color: var(--color-2);
}

What if you wanted to rotate four colors though? It’s still :nth-child trickery, selecting every four, and then offsetting. Here, I’ll do it with list items in Sass (the nesting is nice, not having to repeat the selector):

li {
  &:nth-child(4n) a {
    color: $blue;
  }
  &:nth-child(4n + 1) a {
    color: $yellow;
  }
  &:nth-child(4n + 2) a {
    color: $red;
  }
  &:nth-child(4n + 3) a {
    color: $purple;
  }
}

That’s what I did to build the colorized blogroll:

Note the Sass used above… I used Sass because it was already in use on the project. All I had to do was open CodeKit and the processing was ready-to-go.

Oh, and blogrolls are cool again.

Chill YouTube

I used this click-to-load-YouTube-(at all) technique which is still extremely clever. Having an <iframe> that behaves just like a YouTube embed would but only loading a simple static image (rather than heaps and heaps of resources) is great for performance and behaves essentially the same as a normal YouTube embed does.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>
Comparison of a YouTube embed and an iframe with just an image in side. Barely different at all, visually.

Custom Post Types everywhere

I’m a big fan of giving myself structured data to work with. In WordPress-land, that often means Custom Post Types paired with something like the Advanced Custom Fields plugin for just the right data needed for the job.

Three CMS input screens: Add New Conference (with conference related fields), Add New Interview, and Add New Action Item.

Then I can loop over stuff and output it however I want. This isn’t that fancy, but it opens up whatever future doors I want to a lot easier.

Build your own bio

There is nothing fancy about how this works:

Bio generator showing HTML for my personal bio. Radio buttons next to it to change 1st to 3rd person, length, and code type of bio.

I literally made 18 <div> elements (3 lengths * 2 styles * 3 code types = 18) and swap between with a bit of JavaScript that calculates a class string based on the current choices, selects that class, and unhides it while hiding the rest.

$(".bio-choices input").on("change", function () {
  var lengthClass = ".bio-" + $("input[name=length]:checked").attr("id");
  var styleClass = ".bio-" + $("input[name=style]:checked").attr("id");
  var codeClass = ".bio-" + $("input[name=code]:checked").attr("id");
  var selector = lengthClass + styleClass + codeClass;

  $(".bio").hide();
  $(selector).show();
});

jQuery! That’s what was already on the site, and the site also uses the jQuery version of FitVids for responsive videos — so I figured I’d just leave it all be.

If I was going to re-write these bits of the site, I’d probably rip out jQuery and use this for FitVids. Then I’d find a way to only have three bios (maybe six if I can’t find a nice way to handle first vs. third person with word swaps) and then get the rest by automatically converting the formats somehow (maybe some cloud function if I had to).

ztext.js

I used ztext for the header! It’s this kinda stuff that makes the web feel extra webby to me. I’m not sure I’d do something with quite so much movement on a site like CSS-Tricks (because people visit it more often and the time-on-site is higher). But for a site that people might land on once in a blue moon, it has the right amount of cheerful levity, I think.

Background SVG

I was stoked to see the SVG Backgrounds site get an upgrade lately. I was playing around in there and was like YES, I’m doing this.

SVG backgrounds website showing off wavy dark gray lines over black, configurable through a controls panel.

I went with a background-attachment: fixed look, which I think I like. I also added the slideout footer effect on desktop, but I’m less sold that it’s working here. It’s more fun when the background changes, and that doesn’t happen here. I’ll probably either change the background of the footer, or rip the effect out.

Filter trick for links

Some of the different sections on the site use a different primary highlight color, and I’m having the links in those sections follow that color. That might be questionable (perhaps all links should be blue) but, so far, I think it makes decent sense (they still have hover and focus styles). When you have a variety of colors and styles for interactive elements though, it often means that you have to create special alternate styles for hover and focus. That could mean crafting bespoke color alterations for each color. Not the end of the world, but I really like this little trick for interactive styles that ends up with a consistent look across all colors:

a:focus, .button:focus,
a:hover, .button:hover {
  filter: brightness(120%);
}

Anyway! This was just a couple hours of paint on this site. Mostly because blogrolls were the CodePen Challenge that week. But I can never touch a site I haven’t in a while and just do one thing. I get sucked in and gotta do more!



Source link

flutter
Strategy

Integrating HMS Analytics Kit to Flutter Projects and Sendin…


Hello everyone,

In this article, I am going to create a Flutter project — actually a tiny game — and explain how to implement Analytics Kit. But first, let me inform you about Huawei Analytics Kit a little.

flutter

Huawei Analytics Kit

Huawei Analytics Kit offers you a range of analytics models that help you not only to analyze users’ behavior with preset and custom events but also to gain insight into your products and contents. So that you can improve your skills in marketing your apps and optimizing your products.

HUAWEI Analytics Kit identifies users and collects statistics on users by an anonymous application identifier (AAID). The AAID is reset in the following scenarios:

1) Uninstall or reinstall the app.

2) The user clears the app data.

After the AAID is reset, the user will be counted as a new user.

HUAWEI Analytics Kit supports event management. For each event, a maximum of 25 parameters; for each app maximum of 100 parameters can be defined.

There are 3 types of events: Automatically collected, predefined, and custom.

Automatically collected events are collected from the moment you enable the kit in your code. Event IDs are already reserved by HUAWEI Analytics Kit and cannot be reused.

Predefined events include their own Event IDs which are predefined by the HMS Core Analytics SDK based on common application scenarios. The ID of a custom event cannot be the same as a predefined event’s ID. If so, you will create a predefined event instead of a custom event.

Custom events are the events that you can create for your own requirements.

More info about the kit and events.
Huawei Analytics Kit

Configuration in AppGallery Connect

Firstly, you will need a Huawei developer account. If you don’t have one, click here and register. It will be activated in 1–2 days.

After signing in to AppGallery Connect, you can add a new project or select an existing project. In the project you choose, add an app. While adding an app, make sure you enter the package name right. It should be the same as your Flutter project’s package name.

Also, make sure you set data storage location, enable Analytics kit, and add SHA-256 fingerprint to AppGallery Connect.

data storage locations

manage API

How to Generate SHA-256 Fingerprint?

In Android Studio, right-click on the android folder under your project and select the Flutter > Open Android module.

How to Generate SHA-256 Fingerprint?

On the right panel, select Gradle and follow the steps that are shown in the picture below. Open signingReport and there is your SHA-256 fingerprint.

signingReport

Copy the code and paste it on the project settings in the AppGallery Connect.

AppGallery Connect

Integrate HMS to Your Project

Integrate HMS to Your Project

Download the agconnect-services.json file and place it under the project_name > android > app.

agconnect-services.json

Add Signing Configuration

Create a file named key.properties under the android folder and add your signing configs here.

storeFile file(‘<keystore_file>.jks

storePassword ‘<keystore_password>'

keyAlias ‘<key_alias>'

keyPassword ‘<key_password>’

Define your key.properties file by adding the code below, before the android block in your app-level build.gradle file.

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file(‘key.properties’) 
if (keystorePropertiesFile.exists()) { 
keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) }

TO-DOs in Project-level Build.gradle

TO-DOs in App-level Build.gradle

Add Analytics Kit to Your Project

There are 2 ways to do this step.

1) Go to the developer website and download the plugin. In Android Studio create a new folder in your root directory and name it “hms”. Unzip the plugin and paste it into the “hms” folder.

flutter_analytics

Then, go to pubspec.yaml and add the plugin under dependencies.

 pubspec.yaml

2) This way is much easier and also more familiar to Flutter developers. In pub.dev copy the plugin and add it under dependencies as usual.

pub.dev

For both ways, after running the pub get command, the plugin is ready to use!

For more information about HMS Core integration, click.

We are all done. Let’s begin coding.

I will make a tiny and very easy game that I believe most of you know the concept: Guess the number!

As you play the game and try to guess the number, Huawei Analytics Kit will collect statistics on how many times you guessed.

Make a Simple Game With Flutter

First, let’s write a method to create a random number. You should import ‘dart:math’ for this.

And call it in initState

We will need a TextField and a button to check the user’s guess.

We need a method if the user guessed the number right or not.

Let’s add a message Text in Column widget to give hints to users, also a replay button.

We have done a simple but fun game. Let’s play it!

HMS analytics

Define HMS Analytics Kit and Send Events

As we’re done with the widgets, we will define the kit and enable logs.

Once we call _enableLog(), we are ready to see auto collected events on AppGallery Connect.

What about our custom events? How can we send custom events and see them?

We have _count variable and every time user clicks OK! button, it increases. Now we will map it and send it as a custom event. We need a name for the custom event, and a map value.

And we call it when we are sure that the user guessed the number right. In the _compareValues method.

Let’s go back to AppGallery Connect. In the left panel, under the Management section click Events.

appgallery

event management

After _sendEvent builds for the first time, you can see your custom event with the name you have entered in your code. Click Edit.

edit event

Add your attribute and click Save.

On the left panel, click Real-Time Monitoring under Overview.

monitoring

Now you can see the attribute and its value in your custom event. Also, you can see how many times you get this value and its proportion of all values.

Let’s play our game a few times more.

playing our games more

Despite I am the only user, you see 2 users in AG Connect. That’s because I uninstalled the app and installed it again. Now I have a different AAID as I mentioned in the first part.

Under the graphics, there is an event analysis. Here you can see all events, all attributes you’ve added and statistics for both events and attributes. 11 of them are custom events that I have sent by playing the game. And the rest is collected automatically.

event analytics

event analytics

You can find the full code on my Github page. Here is the link for you. 

https://github.com/HMS-Core/hms-flutter-plugin/tree/master/flutter-hms-analytics

Conclusion

In this article, you have learned how to integrate HMS Analytics to your Flutter projects, send custom events, and monitor them in AppGallery Connect. You can use custom events in your apps to see user behaviors so that you can improve your app depend on them.

Thank you for reading this article, I hope you enjoyed it.

References 

Analytics Kit Document

HMS-Core/HMS-analytics-demo-android

For More Details, You Can go to:

  • Official website: https://developer.huawei.com/consumer/en/hms
  • Documentation page: https://developer.huawei.com/consumer/en/doc/development
  • Reddit to join our developer discussion: https://www.reddit.com/r/HMSCore/
  • GitHub: https://github.com/HMS-Core
  • Stack Overflow: https://stackoverflow.com/questions/tagged/huawei-mobile-services



Source link

Using Your Own Design System with KendoReact Components
Strategy

Using Your Own Design System with KendoReact Components


Maybe you’ve already heard of (or even worked with!) KendoReact. It’s popped up in some of my day-to-day conversations, especially those about working with design systems and React. You could think of it as a component library like Bootstrap or Material Design, except the components in KendoReact are far more robust. These are interactive, state-driven components ready to start building full-blown UI’s right out of the gate (not to mention, if you want to use Bootstrap as the theme, you absolutely can).

Whenever you’re thinking about using a UI library, you need to think about the styling capabilities. Are you able to really express your brand with these? Were they meant to be styled? What is the styling experience going to be like?

Fortunately, KendoReact really makes styling a citizen of the entire UI library.

KendoReact is a collection of UI components for building sites. It’s a pretty massive one. Over 80 by my count, and that doesn’t include the child components of heavy lifters like the <Grid /> family.

Here’s one, the <DropDownList />, and just using the default theme (even that is optional):

If I want to style this, I don’t need any special proprietary skills, I can just use CSS. Here’s me forcing a whole new look onto it with different colors and fonts, with just some simple CSS:

But hey, maybe you want to do something a bit more systematized than cowboying some random override CSS. I don’t blame you. Good news: KendoReact themes are Sass-powered. So you can control a lot of the colorization and styling just by changing a few Sass variables.

They have a whole theme builder you can use right on their site that spits out exactly what you need. Say you want to start from their base theme and go from there, select the Default theme:

Then you can play with all the colors in the UI to your liking. Here’s me poking at a theme with some CSS-Tricks colors.

I can download that from the site which will give me the variables as a SCSS file that I can apply before the default theme in my build (there is a great tutorial covering how to do that over on the Telerik blog). Plus, it gives me the whole dang CSS file of the theme if I want to use it that way, which is simple and quick. Here’s me using their conversational chat widget with that theme:

Again, I can start with Bootstrap, I can start with Material, I can start with their default theme, or I can start from scratch. Styling is totally up to me. Each theme has its perks and, as you might expect, are super flexible as far as configuring colors, fonts, and other design elements.

If you really get into this, of course you’ll be consulting their docs and finding your way around there (it’s nice to know they have really comprehensive docs). It’s all pretty straightforward though, you’ll do great! If you need to get going building out a state-driven interactive interface quickly without sacrificing any customizability or power, you’ll find KendoReact is your friend.



Source link

r/webdev - Footer error
Strategy

Footer error : webdev


When using bootstraps cover template:

https://getbootstrap.com/docs/4.0/examples/cover/#

If I resize the window to a small level to allow scrolling or simply include enough text to warrant scrolling the footer goes a solid colour (see picture). It even does this on the template but I’d love to fix it

Can anyone help with this would really really appreciate it

r/webdev - Footer error



Source link

Comparing Static Site Generator Build Times
Strategy

Comparing Static Site Generator Build Times


There are so many static site generators (SSGs). It’s overwhelming trying to decide where to start. While an abundance of helpful articles may help wade through the (popular) options, they don’t magically make the decision easy.

I’ve been on a quest to help make that decision easier. A colleague of mine built a static site generator evaluation cheatsheet. It provides a really nice snapshot across numerous popular SSG choices. What’s missing is how they actually perform in action.

One feature every static site generator has in common is that it takes input data, runs it through a templating engine, and outputs HTML files. We typically refer to this process as The Build.

There’s too much nuance, context, and variability needed to compare how various SSGs perform during the build process to display on a spreadsheet — and thus begins our test to benchmark build times against popular static site generators.

This isn’t just to determine which SSG is fastest. Hugo already has that reputation. I mean, they say it on their website — The world’s fastest framework for building websites — so it must be true!

This is an in-depth comparison of build times across multiple popular SSGs and, more importantly, to analyze why those build times look the way they do. Blindly choosing the fastest or discrediting the slowest would be a mistake. Let’s find out why.

The tests

The testing process is designed to start simple — with just a few popular SSGs and a simple data format. A foundation on which to expand to more SSGs and more nuanced data. For today, the test includes six popular SSG choices:

Each test used the following approach and conditions:

  • The data source for each build are Markdown files with a randomly-generated title (as frontmatter) and body (containing three paragraphs of content).
  • The content contains no images.
  • Tests are run in series on a single machine, making the actual values less relevant than the relative comparison among the lot.
  • The output is plain text on an HTML page, run through the default starter, following each SSG’s respective guide on getting started.
  • Each test is a cold run. Caches are cleared and Markdown files are regenerated for every test.

These tests are considered benchmark tests. They are using basic Markdown files and outputting unstyled HTML into the built output.

In other words, the output is technically a website that could be deployed to production, though it’s not really a real-world scenario. Instead, this provides a baseline comparison among these frameworks. The choices you make as a developer using one of these frameworks will adjust the build times in various ways (usually by slowing it down).

For example, one way in which this doesn’t represent the real-world is that we’re testing cold builds. In the real-world, if you have 10,000 Markdown files as your data source and are using Gatsby, you’re going to make use of Gatsby’s cache, which will greatly reduce the build times (by as much as half).

The same can be said for incremental builds, which are related to warm versus cold runs in that they only build the file that changed. We’re not testing the incremental approach in these tests (at this time).

The two tiers of static site generators

Before we do that, let’s first consider that there are really two tiers of static site generators. Let’s call them basic and advanced.

  • Basic generators (which are not basic under the hood) are essentially a command-line interface (CLI) that takes in data and outputs HTML, and can often be extended to process assets (which we’re not doing here).
  • Advanced generators offer something in addition to outputting a static site, such as server-side rendering, serverless functions, and framework integration. They tend to be configured to be more dynamic right out of the box.

I intentionally chose three of each type of generator in this test. Falling into the basic bucket would be Eleventy, Hugo, and Jekyll. The other three are based on a front-end framework and ship with various amounts of tooling. Gatsby and Next are built on React, while Nuxt is built atop Vue.

Basic generators Advanced generators
Eleventy Gatsby
Hugo Next
Jekyll Nuxt

My hypothesis

Let’s apply the scientific method to this approach because science is fun (and useful)!

My hypothesis is that if an SSG is advanced, then it will perform slower than a basic SSG. I believe the results will reflect that because advanced SSGs have more overhead than basic SSGs. Thus, it’s likely that we’re going to see both groups of generators — basic and advanced — bundled together, in the results with basic generators moving significantly quicker.

Let me expand on that hypothesis a bit.

Linear(ish) and fast

Hugo and Eleventy will fly with smaller datasets. They are (relatively) simple processes in Go and Node.js, respectively, and their build output will reflect that. While both SSG will slow down as the number of files grows, I expect them to remain at the top of the class, though Eleventy may be a little less linear at scale, simply because Go tends to be more performant than Node.

Slow, then fast, but still slow

The advanced, or framework-bound SSGs, will start out and appear slow. I suspect a single-file test to contain a significant difference — milliseconds for the basic ones, compared to several seconds for Gatsby, Next, and Nuxt.

The framework-based SSGs are each built using webpack, bringing a significant amount of overhead along with it, regardless of the amount of content they are processing. That’s the baggage we sign up for in using those tools (more on this later).

But, as we add thousands of files, I suspect we’ll see the gap between the buckets close, though the advanced SSG group will stay farther behind by some significant amount.

In the advanced SSG group, I expect Gatsby to be the fastest, only because it doesn’t have a server-side component to worry about — but that’s just a gut feeling. Next and Nuxt may have optimized this to the point where, if we’re not using that feature, it won’t affect build times. And I suspect Nuxt will beat out Next, only because there is a little less overhead with Vue, compared to React.

Jekyll: The odd child

Ruby is infamously slow. It’s gotten more performant over time, but I don’t expect it to scale with Node, and certainly not with Go. And yet, at the same time, it doesn’t have the baggage of a framework.

At first, I think we’ll see Jekyll as pretty speedy, perhaps even indistinguishable from Eleventy. But as we get to the thousands of files, the performance will take a hit. My gut feeling is that there may exist a point at which Jekyll becomes the slowest of all six. We’ll push up to the 100,000 mark to see for sure.

A hand-drawn line chart showing build time on the y-axis and number of files on the x-asix, where Next is a green line, then nuxt is a yellow line, gatsby is a pink line jekyll is a blue line, eleventy is a teal line and hugo is an orange line. All lines show the build time increasing as the number of files increase, where jekyll has the sharpest slope.

The results are in!

The code that powers these tests are on GitHub. There’s also a site that shows the relative results.

After many iterations of building out a foundation on which these tests could be run, I ended up with a series of 10 runs in three different datasets:

  • Base: A single file, to compare the base build times
  • Small sites: From 1 to 1024 files, doubling each to time (to make it easier to determine if the SSGs scaled linearly)
  • Large sites: From 1,000 to 64,000 files, double on each run. I originally wanted to go up to 128,000 files, but hit some bottlenecks with a few of the frameworks. 64,000 ended up being enough to produce an idea of how the players would scale with even larger sites.

Click or tap the images to view them larger.

Summarizing the results

A few results were surprising to me, while others were expected. Here are the high-level points:

  • As expected, Hugo was the fastest, regardless of size. What I didn’t expect is that it wasn’t even close to any other generator, even at base builds (nor was it linear, but more on that below.)
  • The basic and advanced groups of SSGs are quite obvious when looking at the results for small sites. That was expected, but it was surprising to see Next is faster than Jekyll at 32,000 files, and faster than both Eleventy and Jekyll at 64,000 files. Also surprising is that Jekyll performed faster than Eleventy at 64,000 files.
  • None of the SSGs scale linearly. Next was the closest. Hugo has the appearance of being linear, but only because it’s so much faster than the rest.
  • I figured Gatsby to be the fastest among the advanced frameworks, and suspected it would be the one to get closer to the basics. But Gatsby turned out to be the slowest, producing the most dramatic curve.
  • While it wasn’t specifically mentioned in the hypothesis, the scale of differences was larger than I would have imagined. At one file, Hugo was approximately 170 times faster than Gatsby. But at 64,000 files, it was closer — about 25 times faster. That means that, while Hugo remains the fastest, it actually has the most dramatic exponential growth shape among the lot. It just looks linear because of the scale of the chart.

What does it all mean?

When I shared my results with the creators and maintainers of these SSGs, I generally received the same message. To paraphrase:

The generators that take more time to build do so because they are doing more. They are bringing more to the table for developers to work with, whereas the faster sites (i.e. the “basic” tools) focus their efforts largely in converting templates into HTML files.

I agree.

To sum it up: Scaling Jamstack sites is hard.

The challenges that will present themselves to you, Developer, as you scale a site will vary depending on the site you’re trying to build. That data isn’t captured here because it can’t be — every project is unique in some way.

What it really comes down to is your level of tolerance for waiting in exchange for developer experience.

For example, if you’re going to build a large, image-heavy site with Gatsby, you’re going to pay for it with build times, but you’re also given an immense network of plugins and a foundation on which to build a solid, organized, component-based website. Do the same with Jekyll, and it’s going to take a lot more effort to stay organized and efficient throughout the process, though your builds may run faster.

At work, I typically build sites with Gatsby (or Next, depending on the level of dynamic interactivity required). We’ve worked with the Gatsby framework to build a core on which we can rapidly build highly-customized, image-rich websites, packed with an abundance of components. Our builds become slower as the sites scale, but that’s when we get creative by implementing micro front-ends, offloading image processing, implementing content previews, along with many other optimizations.

On the side, I tend to prefer working with Eleventy. It’s usually just me writing code, and my needs are much simpler. (I like to think of myself as a good client for myself.) I feel I have more control over the output files, which makes it easier for me to get ?s on client-side performance, and that’s important to me.

In the end, this isn’t only about what is fast or slow. It’s about what works best for you and how long you’re willing to wait.

Wrapping up

This is just the beginning! The goal of this effort was to create a foundation on which we can, together, benchmark relative build times across popular static site generators.

What ideas do you have? What holes can you poke in the process? What can we do to tighten up these tests? How can we make them more like real-world scenarios? Should we offload the processing to a dedicated machine?

These are the questions I’d love for you to help me answer. Let’s talk about it.



Source link

r/graphic_design - Looking for logo feedback
Strategy

Looking for logo feedback : graphic_design


Wanted to get your feedback. Started teaching myself Illustrator last year and this is my first ever logo commission. Friend of mine is a known traveler and photographer and always owned VW buses/vans. She has a catering company called Vagabond Catering. She and her son have started a new venture, opening a gallery to show their travel photos, host events, live music, etc. This is the second draft of a logo she encouraged me to pursue, having the idea of using the van, travel as a theme. It was her son’s idea to use camera iris’s as wheels. Looking to get feedback before presenting it as a second draft. Thanks!

r/graphic_design - Looking for logo feedback



Source link

r/graphic_design - help with school assignment
Strategy

help with school assignment : graphic_design


hi, i need to create a poster for a fake art exhibit based on these photos. my mind is completely blank and i don’t really have any ideas, could anyone help me with this? i need to send it in on thursday….

“Lasimaailma” is the title of the exhibit and “En värld av glas” is the subtitle and also a translation. Preferably I’d need to fit the fake artist’s name somewhere too but yeah. I’ve tried a couple different styles and they all look bad 🙁

r/graphic_design - help with school assignment

i know this looks bad please help

r/graphic_design - help with school assignment

a pig

r/graphic_design - help with school assignment

whole picture . no im not a photographer this isnt part of my degree why do they want me to take so many photos-



Source link

r/web_design - CSS Hack: Smooth neumoprhism smooth bevels without box-shadows
Strategy

Smooth neumoprhism smooth bevels without box-shadows : web_d…


.bevel {
    position: relative;
}

.bevel::after {
    position: absolute;
    content: '';
    display: block;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    mix-blend-mode: overlay

    border-style: solid
    border-width: 2px
    border-color: white black black white
    filter: blur(4px)
}
r/web_design - CSS Hack: Smooth neumoprhism smooth bevels without box-shadows

You can also add some inset box-shadows on ::after for interesting effect

r/web_design - CSS Hack: Smooth neumoprhism smooth bevels without box-shadows



Source link

Exploring the Fundamentals of Node.js With Mario Casciaro an...
Strategy

Exploring the Fundamentals of Node.js With Mario Casciaro an…


Node.js’ high scalability and its ability to run Javascript code outside the territories of the web browsers gives it an edge over traditional platforms for web development. It is considered to be possibly the biggest innovation of the decade and is loved not just for its technical capabilities, but also for the paradigm shift that it introduced in web development and, in general, in the software development ecosystem. 

Let’s explore the journey of Mario Casciaro and Luciano Mammino, the authors of Node.js Design Patterns, Third Edition, and get some insights on how they mastered the platform. 

What was your approach to learning Node.js when you started? 

Mario Casciaro: When I started experimenting with Node.js, the platform was still in its infancy. I think it was around 2012, just 3 years after Ryan Dahl presented his new technology to the world.  The learning material was very limited and the approach to development was completely different to that of my favourite technologies at the time (Java, C and PHP). I started reading the official documentation and, as always, worked on side projects. I immediately enjoyed creating software with Node.js, so I started working on larger projects such as a blogging platform and an Inversion of Control container. I also read the code of the most famous Node.js developers of the time to extract patterns and principles.  

 
Luciano  Mammino: I’d had a number of years of experience with clientside JavaScript when I started to learn about Node.js. Fun fact: the book that made me appreciate the capabilities of running JavaScript also on the server was the first edition of Node.js Design Patterns, originally authored by Mario. I was incredibly lucky, a few years later, to have the chance to become the co-author for the second edition. 

Where does Node.js stand in comparison to its alternatives, including .NET, PHP, etc.? 

Node.js is a great runtime for server-side JavaScript. Its main strengths are great performance, a small but powerful standard library and a huge ecosystem of third-party libraries (currently the biggest software ecosystem by far, thanks to NPM). From a stylistic perspective, being a modern JavaScript runtime, Node.js is a very practical choice to write software that has to deal with asynchronous IO, which is one of the most common use cases in the age of the interconnected web and the internet of things. 

Most alternative languages are synchronous by default, which means that, in order to be able to write asynchronous code, the developer has to master the complexity of threads. Conversely, Node.js, with its “asynchronous by default” approach and its design based on the event loop and the reactor pattern, effectively lowers the barrier to entry to writing effective asynchronous code. 

Which type of projects are best suited to be coded in Node.js? 

Node.js is a great choice for pretty much any kind of application that relies heavily on IO: web servers, IoT devices, distributed systems, etc. Throughout the book we present many real-life examples including a website spider and downloader, a streaming file archive pipeline, a full stack web application (frontend and backend), a dynamic load balancer, a peer-to-peer network for web services, a distributed real-time chat application and a worker pool for background jobs. 

Mario, you founded FrontendRobot.com, an online service that simplifies end-to-end testing. What motivated you to start your own entrepreneurial journey? 

Mario: I’ve always worked on side projects mainly to learn new things or to solve my own problems. Frontend Robot was born from one of these side projects.  

I realized that testing was for me one of the aspects of software development that I enjoyed the least and consequently was also the aspect that I neglected the most in my own software projects. To start creating end-to-end tests you have to choose a framework, then learn the framework, then write the actual test creating selectors for elements which you have to look up in a separate browser window, then after all that, you need to setup a testing infrastructure with browsers and test runners on one or more servers. This process would intimidate any software professional, without considering the costs involved in creating and maintaining such testing infrastructure. This is clearly not an ideal situation, since testing is actually a critical step in software engineering.  

That’s how Frontend Robot was born. Its goal is to make testing fun, enjoyable and approachable for everyone. You can literally go from signing up to creating and running your first test in just a couple of minutes. There is no code to write or servers to maintain, so that the users can focus on just one thing: testing.  

And of course, most of FrontendRobot is built on Node.js using many of the patterns and techniques described in Node.js Design Patterns. 

Luciano, you started your professional career by freelancing instead of joining an established firm. What inspired you towards freelancing?  

Luciano: I started my career very early when I was studying for my Computer Science degree. It wasn’t an easy choice, but freelancing allowed me to keep my work schedule flexible so I could complete my degree. Interestingly enough, freelancing also exposed me to a vast variety of projects which probably helped me to ramp up quickly in my career.  

Tell us a bit about your book Node.js Design Patterns, Third Edition? What makes this book necessary? 

Node.js Design Patterns, Third Edition aims to be the go-to book for Node.js developers who want to master the most important patterns and best practices to be able to take Node.js applications to production with confidence. In this book we have collected many of the real-life lessons that we learned in our 15+ years of collective experience with running production-grade Node.js applications. We believe that Node.js is a great piece of technology which allows for rapid prototyping of applications. We feel that there isn’t a great bulk of literature on how to take these prototypes to the next level, with Node.js Design Patterns, Third Edition we want to fill this gap. 

About

Mario Casciaro is a software engineer and entrepreneur who worked at IBM for a number of years. He currently splits his time between Var7 Technologies (his own software company) and its role as Lead Engineer at D4H Technologies where he creates software for emergency response teams.    

Luciano Mammino wrote his first line of code at the age of 12 on his father’s old i386. Since then, he has never stopped coding. He is working at FabFitFun as Principal Software Engineer where he is building software to serve millions of users every day.



Source link