r/graphic_design - Need help on a mock record label logo
Strategy

Need help on a mock record label logo : graphic_design


Needed to make a logo for a record label called ‘That Record’ (I know-real creative) and these two designs are me experimenting with the 80’s style sort of logo. I made two designs but I need your advice on which one would be more suitable! I’ve got a personal affinity towards the right one due to its simplicity but the gradient on the left one IMO is just SOOO sweet that I couldn’t let it go without a second opinion.

All compliments and criticisms are appreciated!

r/graphic_design - Need help on a mock record label logo



Source link

r/web_design - Exporting artboards for behance, PNG are filled with dots which looks weird on behance
Strategy

Exporting artboards for behance, PNG are filled with dots wh…


This is NOT a self promotion for hire or money at all ! (this is even a personnal fake project)

So the PNG are made with illustrator (i prefer to work my behance presentation projects with illustrator rather than photoshop haha)

So i exported my PNGs the same way ans same settings as usual like i do for my other projects. But on behance the project looks weird and really bad quality. You can clearly see all the dots even without zooming : https://www.behance.net/gallery/112079339/Startup-Website-Design

Do you guys know why ? others projects i imported on behance does not have this problem.. thanks !

Flat one color vector is filled with dots :

r/web_design - Exporting artboards for behance, PNG are filled with dots which looks weird on behance

Random other project, i zoom in at max and no weird dots :

r/web_design - Exporting artboards for behance, PNG are filled with dots which looks weird on behance



Source link

Flow chart depicting the difficulty of maintaining a DIY frame with React
Strategy

Fusion Full-Stack Framework for Modern Web Dev on Java Backe…


Marcus Hellberg explains what Vaadin Fusion full-framework is and how it leverages Lit, MobX, and Spring Boot to make building web apps easy. 

(If you love Vaadin’s 100% pure Java Flow framework, do not panic! Fusion is not a replacement. Instead, it complements Flow.)

A live-coded intro makes it quite clear why full-stack frameworks make your life easier as opposed to maintaining a DIY frame on top of React. Not only is making the right choices hard (see below), but keeping everything in sync over time is a lot of work.

Flow chart depicting the difficulty of maintaining a DIY frame with React

Flow chart depicting the difficulty of maintaining a DIY frame with React

This video gives a thorough starting-from-zero walkthrough on how to build a full-stack app for a shopping cart like this:
Shopping cart example

Shopping cart app example

A Reactive template based on Lit leverages ready-made standard web components, automatically binding them to a data model.

Reactive template on Lit

TypeScript gives auto-completion across all layers and Vaadin automates communication and forms for you based on this simple service definition.

Auto-completion across all layers

The data model is in plain Java, with Lombok taking care of the boilerplate for you.

Validation annotations above are automatically run in both the browser and in the server for security. 

Spring Data takes care of storing it in a database.

Yes, that is all! See the tutorial first and then take a look at the code.

Application structure, routing, build tooling, etc. were all automatically created for you.

Try it out!

Vaadin App builder

Vaadin App Builder



Source link

The Holy Grail Layout with CSS Grid
Strategy

The Holy Grail Layout with CSS Grid


A reader wrote in asking specifically how to build this layout in CSS Flexbox:

My answer: That’s not really a layout for CSS Flexbox. You could pull it off if you had to, but you’d need some kind of conceit, like grouping the nav and article together in a parent element (if not more grouping). CSS Grid was born to describe this kind of layout and it will be far easier to work with, not to mention that the browser support for both is largely the same these days.

What do you mean by “Holy Grail”?

See, kids, layout on the web used to be so janky that the incredible simple diagram above was relatively difficult to pull off, particularly if you needed the “columns” there to match heights. I know, ridiculous, but that was the deal. We used super weird hacks to get it done (like huge negative margins paired with positive padding), which evolved over time to cleaner tricks (like background images that mimicked columns). Techniques that did manage to pull it off referred to it as the holy grail. (Just for extra clarity, usually, holy grail meant a three-column layout with content in the middle, but the main point was equal height columns).

CSS is much more robust now, so we can use it without resorting to hacks to do reasonable things, like accomplish this basic layout.

Here it is in CSS Grid

This grid is set up both with grid-template-columns and grid-template-rows. This way we can be really specific about where we want these major site sections to fall.

  • I had another question come my way the other day about doing 1px lines between grid areas. The trick there is as simple as the parent having a background color and using gap: 1px;, so I’ve done that in the demo above.
  • It’s likely that small screens move down to a single-column layout. I’ve done that at a media query above. Sometimes I use display: block; on the parent, turning off the grid, but here I’ve left grid on and reset the columns and rows. This way, we still get the gap, and we can shuffle things around if needed.
  • Another recent question I was asked about is the subtle “body border” effect you can see in the demo above. I did it about as simple as possible, with a smidge of padding between the body and the grid wrapper. I originally did it between the body and the HTML element, but for full-page grids, I think it’s smarter to use a wrapper div than use the body for the grid. That way, third-party things that inject stuff into the body won’t cause layout weirdness.



Source link

Form it
Strategy

Form it’s not responsive


Form it's not responsive

Hello guys, I'm having a problem with my form. As you can see in the first photo with the red, it is very long and it's not responsive, and I don't understand why… Can somebody please help me? Here's my HTML code:

<!DOCTYPE html><html lang="en"><head> <?php include '../php/registrat – Pastebin.com

And this is my CSS file:

body {}.profileimage { max-width: 35px; max-height: 35px;} – Pastebin.com

Thanks!

https://preview.redd.it/ugjpks0bpvd61.jpg?width=1886&format=pjpg&auto=webp&s=7558e72e92861a917c406118dbecc0eed9601209

submitted by /u/robi101012981
[comments]



Source link

r/web_design - Form it
Strategy

Form it’s not responsive : web_design


Hello guys, I’m having a problem with my form. As you can see in the first photo with the red, it is very long and it’s not responsive, and I don’t understand why… Can somebody please help me? Here’s my HTML code:

<!DOCTYPE html><html lang=”en”><head> <?php include ‘../php/registrat – Pastebin.com

And this is my CSS file:

body {}.profileimage { max-width: 35px; max-height: 35px;} – Pastebin.com

Thanks!

r/web_design - Form it's not responsive



Source link

r/webdev - [Question] Problem with vue-material and md-card
Strategy

[Question] Problem with vue-material and md-card : webdev


Hello,

I am currently doing an assignment for university and I have encountered a problem that I don’t know how to fix.

I am using vue, vue-material and vue material kit. While using md-card and md-card-media-cover I want to use the prop md-text-scrim, but it doesn’t apply the gradient background on top of the picture.

What I get is this:

r/webdev - [Question] Problem with vue-material and md-card

What I want is this:

r/webdev - [Question] Problem with vue-material and md-card

Code:

r/webdev - [Question] Problem with vue-material and md-card

Devtools of my code:

r/webdev - [Question] Problem with vue-material and md-card

Only thing that I found in relation to my problem is this, and I have to admit I don’t understand the proposed workaround.

You may also look at the devtools yourself here or the code on github.

Thank you in advance for your input.



Source link

r/webdev - Facebook Attribution API - Stuck for days
Strategy

Facebook Attribution API – Stuck for days : webdev


I am really having a very hard time as a junior developer to useFacebook Attribution API. What I am trying is to make a simple API request to get the list of all of my Attribution sources (channel included if possible). On the documentation, there is a source_channel attribution but it’s very generic (only 5 types: direct, organic, paid facebook, paid third party, paid).

Do you know if it’s possible with the API to just get that list of 10 sources listed bellow?

r/webdev - Facebook Attribution API - Stuck for days

https://business.facebook.com/attribution/<BUSINESS_ID>/performance



Source link

r/webdev - HELP A STUDENT INSPECT ELEMENT THEIR WAY INTO LITCHARTS? :D
Strategy

HELP A STUDENT INSPECT ELEMENT THEIR WAY INTO LITCHARTS? :D …


I saw that you can allegedly inspect-element your way out of a text blur. It looked amazing.

Here’s what I’m trying to use: https://www.litcharts.com/poetry/maya-angelou/still-i-rise

I’m a little stuck. I’ve been able to get rid of a big box but it doesn’t seem to be working. The text seems to be an image, and I’m not sure how to get the analysis from there.

What I’m trying to do is unblur the text (which turned out to be an image) and get to the analysis. Here is where I am so far, by changing something from “blur” to class=”extended-fallback”

r/webdev - HELP A STUDENT INSPECT ELEMENT THEIR WAY INTO LITCHARTS? :D

Even if it doesn’t work in the end, I’d love to be educated a little more on how this works or if its possible through just inspect-element. To be honest I’m kind of less focused on the analysis on more of how this all actually works

Here is what I was following:

https://www.reddit.com/r/Teachers/comments/5c6l0u/does_anyone_have_a_litcharts_account_any_help_is/

Comment from post above by Redditor Xicarius – [“I have not been able to find account details and information, but I have found a quick and easy way to get the content with 100% accuracy.

First, ‘inspect’ the element. You can do this by right-clicking the web page where there are no links and then clicking the “inspect” or “inspect element” option in the menu. Then, press command-f or whatever hotkey you use to “find” something (or you can go to the box within the new inspect element window to find what you want). Once you are there, type in “blur”. This will take you to just about where you want to be.

Scroll to the top of the page of the new inspect element window. If you hover your mouse over the code, you will see that the webpage you had been visiting will have its respective elements highlighted. Now, scroll (on your webpage) to the bit that you want. Then, move your mouse over the code in the “inspect element” window until you’ve located the big box where your target is. Once there, double-click on it, and scroll down to “class=”extended-fallback””. This is where all the stuff that is blurred and unselectable is, including related characters, related themes, etc. Then find and double click on “class=”attr explanation””, and then the bit of code starting with “class=”blurred-text content””. Here, just move your mouse up and down with your eyes on the actual webpage. Usually, litcharts splits its explanations into two paragraphs. Once you find the code relating to these two bits, which is something which looks like “<p>…</p>”, double click and there you go, you have your text which you can just click and copy and paste. PLEASE keep in mind two things:

  1. The explanations usually come in two paragraphs

  2. For some reason sometimes the paragraphs are split into two with a word in between so you’ll have to copy and paste three bits sometimes (although rarely) and type in the ‘in-between’ word.”]

Maybe this is wrong to do but it’s honestly really fascinating lol can anyone help me out?

ohno i got downvoted



Source link