Logo for a welder. Dorak Metal.
Strategy

Logo for a welder. Dorak Metal.


Logo for a welder. Dorak Metal.

Hello everyone, i'm creating a logo for a welder. İ'm pretty new to this, i could use some advices. But my main question is about text, is it readable enough? And if not, what can i do to improve it?

https://preview.redd.it/qzoy27f12xh61.png?width=921&format=png&auto=webp&s=7752fbad95cfce09c4c9a34818340aca1e7de1f5

submitted by /u/Madcey
[comments]



Source link

How to Create a Shrinking Header on Scroll Without JavaScrip...
Strategy

How to Create a Shrinking Header on Scroll Without JavaScrip…


Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content.

Normally you would have to use some JavaScript to add a shrinking effect like that, but there’s a way to do this using only CSS since the introduction of position: sticky.

Let me just get this out there: I’m generally not a fan of sticky headers. I think they take up too much of the screen’s real estate. Whether or not you should use sticky headers on your own site, however, is a different question. It really depends on your content and whether an ever-present navigation adds value to it. If you do use it, take extra care to avoid inadvertently covering or obscuring content or functionality with the sticky areas — that amounts to data loss.

Either way, here’s how to do it without JavaScript, starting with the markup. Nothing complicated here — a <header> with one descendant <div> which, intern, contains the logo and navigation.

<header class="header-outer">
  <div class="header-inner">
    <div class="header-logo">...</div>
    <nav class="header-navigation">...</nav>
  </div>
</header>

As far as styling, we’ll declare a height for the parent <header> (120px) and set it up as a flexible container that aligns its descendant in the center. Then, we’ll make it sticky.

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  height: 120px;
}

The inner container contains all the header elements, such as the logo and the navigation. The inner container is in a way the actual header, while the only function of the parent <header> element is to make the header taller so there’s something to shrink from.

We’ll give that inner container, .header-inner, a height of 70px and make it sticky as well.

.header-inner {
  height: 70px;
  position: sticky;
  top: 0; 
}

That top: 0? It’s there to make sure that the container mounts itself at the very top when it becomes sticky.

Now for the trick! For the inner container to actually stick to the “ceiling” of the page we need to give the parent <header> a negative top value equal to the height difference between the two containers, making it stick “above” the viewport. That’s 70px minus 120px, leaving with with — drumroll, please — -50px. Let’s add that.

.header-outer {
  display: flex;
  align-items: center;
  position: sticky;
  top: -50px; /* Equal to the height difference between header-outer and header-inner */
  height: 120px;
}

Let’s bring it all together now. The <header> slides out of frame, while the inner container places itself neatly at the top of the viewport.

We can extend this to other elements! How about a persistent alert?

While it’s pretty awesome we can do this in CSS, it does have limitations. For example, the inner and outer containers use fixed heights. This makes them vulnerable to change, like if the navigation elements wrap because the number of menu items exceeds the amount of space.

Another limitation? The logo can’t shrink. This is perhaps the biggest drawback, since logos are often the biggest culprit of eating up space. Perhaps one day we’ll be able to apply styles based on the stickiness of an element…



Source link

Swagger Web API UI
Strategy

Test a Web Service Using Swagger UI


Swagger UI is a tool that makes the job of testing web APIs easier.

In this sample, we build on on the previous sample where we created a messaging app web API using Linx. In that sample, we tested our web methods using Postman. In this sample, we will test them using the built-in Swagger UI feature of the Linx web service.

Before you start:
For a quick review of Linx, a low-code backend developer tool, and how it works, see this video.

Pre-requisites:

Add Swagger UI to the Messaging App

Open the Linx Designer, and open the Messaging_App solution, which was created in the ‘Create a Messaging Server with a Linx Web Service’ sample. Select the Web_service in the Solution Explorer, and change the API documentation property to Swagger UI.

Open the Messaging_App database in MongoDB, and delete all the documents from the User and Message collections.

Test the Add_user Web Method

Select the Web_service in the Linx Designer, and start the debugger. Since Swagger UI is enabled for the Web_service, it will be available at the sub-path /swagger of the base URI. Open a web browser, and browse to the Swagger UI at http://localhost:8095/messaging_app/api/swagger.

Swagger Web API UI

Expand the /add_user web method, and press the Try it out button. Change the text in the request body input box to the following:

Post /add_user

Execute the /add_user web method. The HTTP response code should be 200 OK. The newly created user should appear in the User collection in the Messaging_App database.

db.getCollection('User')

Execute /add_user again. The HTTP response code should be 500 Internal Server Error, with an error that indicates that the specified email address already exists in the system.

Add another user with the following request body:

Test the Get_users Web Method

Expand the /get_users web method in the Swagger UI, press the Try it out button, and Execute it.

/get_users web method

Test the Send_message Web Method

Expand the /send_message web method, and press the Try it out button. Change the text in the request body input box to the following:

/send_message

Execute /send_message. This request should fail with HTTP status code 500, and an error to indicate that the user with the specified ID is not found. This is because the User_ID in the /send_message request body, highlighted in red above, is from my database. You will have to change this to use the correct value from your database.

In Robo 3T, edit the document of the first user in the User collection. Copy the value of the ObjectId, and replace the User_ID in the /send_message request body in the Swagger UI.

Edit Document _id

Execute /send_message again. This time the HTTP response code should be 200 OK. The newly sent message should appear in the Message collection in the database.

Execute /send_message once more. This should succeed because there is no natural key violation.

db.getCollection('Message')

Test the Get_messages_for_user Web Method

Expand /get_messages_for_user in the Swagger UI, and press the Try it out button. Set the following parameter values in the parameter input boxes:

Parameter

Value

Is_read

false

User_ID

5faa6094bc6e2d10a89fcbaf

/get_messages_for_user

Execute /get_messages_for_user. This request should succeed but will return no messages. This is because the user ID parameter of /get_messages_for_user, highlighted in red above, is from my database. You will have to change this to use the correct value from your database.

In Robo 3T, edit the document of the user in the User collection, to which we have sent messages previously. Copy the value of the ObjectId, and replace the User_ID parameter of /get_messages_for_user in the Swagger UI.

Now execute /get_messages_for_user again. The current list of messages for the specified user should be returned in JSON format.

Server response > Response body

Test the Read_message Web Method

Expand /read_message in the Swagger UI, and press the Try it out button. Set the Message_ID parameter to 5faa6094bc6e2d10a89fcbaf.

Execute /read_message. This request should fail with an error indicating that a message with the specified ID is not found. This is because the sample message ID, highlighted in red above, is from my database. You will have to change this to use the correct value from your database.

In Robo 3T, edit the document of the first message in the Message collection. Copy the value of the ObjectId, and replace the message ID parameter for /read_message in the Swagger UI.

Now execute /read_message again. The message with the specified ID should be returned in JSON format.

/read_messages

Stop and close the debugger in the Linx Designer.

Voila! We’re done. 



Source link

r/web_design - How Can I add line dividers to my outlook emails ?
Strategy

How Can I add line dividers to my outlook emails ? : web_des…


I tried this to add a red line of 1 px, I felt like I am naive for doing this, Outlook does not understand what is 1px apaprently :

r/web_design - How Can I add line dividers to my outlook emails ?

This is the result : ( does this look like 1 pixels for you 🙂 ? )

r/web_design - How Can I add line dividers to my outlook emails ?

WTH is this ?

This an other solution tried :

r/web_design - How Can I add line dividers to my outlook emails ?

Why ? :'(

And that’s how it looks like on Outlook 2016 desktop app :

r/web_design - How Can I add line dividers to my outlook emails ?

🙂

Does anyone have a solution for this ? because I am about to throw computer out of the window !

Edit :

10 minutes & I will throw the computer for serious



Source link

The web didn't change; you did
Strategy

The web didn’t change; you did


If you didn’t gather off the bat from the title, the problem with developing front end projects isn’t that it’s harder or more complicated, it’s that you made it harder and more complicated. You have the power of choice, so choose what you want to do – because the choices are overwhelming and there’s enough regular world overwhelming for a lifetime right now.

READER DISCOUNTSave $50 on terminal.training

I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.

Framework fatigue

I can’t remember when I started seeing this phrase but is was definitely in the last couple of years. Post after post in the open web community about framework fatigue. That is, the cognitive overload from not only being told that you’re using the wrong framework but that even if you are using the right one, there’s a new version that adds some brand new programming paradigm.

This is a real thing and there are more and more shifts in framework and library options. I do sincerely believe that these solutions do solve some problem that exists somewhere. Take React and GraphQL for instance. They solved Facebook’s specific problems with respect to their web site and the disproportionate amount of information they glean from their unsuspecting users. Somewhere along the line Facebook devs realised that this tech could be used in much simpler situations and thus open sourced the code. Same goes for Google with Polymer, and the iterations of Angular.

The thing is of course, if all these frameworks did actually stop evolving we’d very quickly get stuck and the web would stop innovating. Remember the days when everyone complained about IE6? If you don’t you’re lucky – you couldn’t turn a webby corner without someone kicking off about how terrible IE6 was (and indeed is… compared to the latest).

This period of time that has brought rise to the Vue and Reacts has helped spawn reactionary projects like Preact and Svelte which, I my opinion, try to pare back the amount the framework can solve and helps reduce the general footprint of functionality (and in some ways complexity).

During 2019 and 2020 there wasn’t a month that went by without a blog post about framework fatigue. Now if your job is to keep changing the frameworks that the business uses on a regular basis – then you’re definitely got your work cut out for you. But if your job is to keep an ear out for evolving technology on the web, well, then welcome to what every other web developer is doing.

Framework fatigue definitely exists. It’s also known as innovation in this particular area of software development. Which is also not a mandatory part of web development.

The illusive freedom of the jQuery days

What spurred on this blog post that Jeremy Keith bookmarked and shared. Asko Nõmm wrote:

Starting a new project? Make sure to write your project idea down because by the time you are finished setting up the vast boilerplate you have probably forgotten it.

Now, this advice on it’s own is useful, but not for the reasons it’s given. The complaint is that starting a new project is so time consuming with “frameworks, libraries, build, tools, pipeline and complexity” that it’s likely to wipe you out before starting.

I keep reading lately about how complex web development has become. How, now you can’t build a site before getting all the tooling in place and selecting the “right” framework or spending untold hours learning some new JavaScript technology.

I keep reading how there was once a time that you could just write some PHP and HTML and hit refresh and you’d see the fruits of your efforts.

How you could drop in jQuery and things were easier, and now the complicated web is here, and it’s here to stay.

Dear reader – let me ask you this, and I hope you ask your colleagues the same: what’s stopping you from using exactly method today?.

I say: nothing.

jQuery is still there. PHP and HTML (though I don’t think I ever saw a time where those were treated as two things rather than one weird mash of the two in a single file) and regular old JavaScript is still there.

What’s amusing to me today in 2021 is that I don’t even need jQuery to do a lot of what I was using jQuery for – which just means I don’t need to load additional JavaScript to play and create a web site.

These days are not illusive. This so-called simplicity has not gone. This simple pleasure of creating is still right there.

Sure the choices might be overwhelming, but what you learnt in the mid-2000s still works. Browsers bend over backwards to maintain backward compatibility. As someone who is personally embedded very deep in web development I can tell the only big tech that’s actually hard to do “the old” way is http (as in non-SSL) or “old https” because the new TLS stuff isn’t supported by old browsers and the entire page fails to load.

But when it comes to web development there is a massive range of options, except, perhaps if you’re still using document.layers you’re out of luck, but we’re talking about dropping support for a non-standard API from over 2 decades ago (and don’t worry, document.all does still work).

It’s the same old web

Web development did not change. Web development grew. There are more options now, not different options.

Browsers have become more capable and still work with web pages built over 20 years ago.

You can use as little as you want or as much as you please. Here, for example is a web site I built that ported a Windows XP tool to the browser without using a single framework. The tooling pipeline, originally was: a text editor and the ability to upload to a hosting platform – nothing else. In my case, I wanted something that behaved like a specific Windows program so that prerequisite relies on some dynamic programming language (JavaScript).

But there’s no doubt that it’s entirely possibly (and likely) that you’re working on a project with a complicated pipeline of tech all connected up. Maybe it’s some tools to check your code for errors (linting), and some tools to build and transform your code (like JSX to JavaScript, etc), and some aspect of CI (for tests or automated accessibility checks) and then some provisioning and staging environment (Netlify, Google Cloud, etc) and then some end point analytics or smoke tests.

But that’s because the businesses online have evolved and grown. In 1997, if your company was exclusively online you were either an innovator or a fool that was going to be quickly parting with their investment. Today, an exclusively online business is completely normal – so it’s understandable that the parts that go into supporting that business are larger and more involved.

I wouldn’t dream of hosting a business product on a platform that I couldn’t scale through some web interface.

But for my own playing? There’s no way and no need for the complexity that larger businesses need.

In the same way that if you wanted to sell an old monitor on a site like ebay, you’re not going to set up a limited business, file for VAT registration, appoint an accountant, get insurance and all the other very involved complicated tasks.

The web really didn’t change. It really didn’t become complex. The web development process is not one single path. There is simply more choice and more options.

We, you and I, the developers, consumers and businesses are responsible for demanding more complicated (and more thorough) tools. We are not, however, beholden to complexity.



Source link

r/web_design - How do I get multiple columns in my "collapsible-body" in handlebars?
Strategy

How do I get multiple columns in my “collapsible-body” in ha…


I have the following code, using handlebars and materialize to populate a div.

<li>
        <div class="collapsible-header"><i class="material-icons">face</i>Your favorite artists (top 50)</div>
        <div class="collapsible-body">
            <span>
                <table>
                    {{#each artistPreferences}}
                    <tr>
                        <td>
                            <b>{{this.name}}</b><br>
                            <a href="{{this.url}}">
                                <img src="{{this.image}}" alt="{{this.name}}" width="100">
                            </a>
                        </td>
                    </tr>
                    {{/each}}
                </table>
            </span>
        </div>
    </li>

It looks like the following:

r/web_design - How do I get multiple columns in my "collapsible-body" in handlebars?

But I want to have multiple artists beside each other – 2 or 3 columns perhaps. How can I adjust so it is shown like this?



Source link

r/webdev - How to prevent td that contains a link from being clickable in a table on Outlook Emails ?
Strategy

How to prevent td that contains a link from being clickable …


The problem is so simple, I have a table & tr & td etc .. inside a td there is a link !

The link has an image inside it..

I get the expected result on Outlook web desktop & gmail web desktop, mobile apps of outlook & gmail, but when it comes to Outlook 2016 Desktop, I get thios weird behavior !

r/webdev - How to prevent td that contains a link from being clickable in a table on Outlook Emails ?

td : red, a link : green

This is the code :

<td style="box-sizing: border-box; font-family: Arial, sans-serif; text-align: right; background-color: red;" width="220">     <a class="infos__link--img" href="https://www.google.com" style="background-color: green; box-sizing: border-box; font-family: Arial, sans-serif; display: inline-block;                                      width: 100%;">         <img alt="more info" src="https://wvw.naef.ch/l/881863/2021-02-15/n48v/881863/1613421727UpzRLznj/green_cta.png" style="box-sizing: border-box; font-family: Arial, sans-serif; max-width: 480px;" width="200" >     </a> </td>  

As you can see, the td has a red background & the link has a green one, but when I click the red zone, I am redeirected to the link! This is not supossed to happen!

Any idea on how to prevent that ?

Any help would be much appreciated really!



Source link

Any ideas on how to achieve this kind of animation?
Strategy

Any ideas on how to achieve this kind of animation?


Any ideas on how to achieve this kind of animation?

I can get as far as use js to trigger the change in the positioning of a button (on scroll past a certain element) but i have no idea how to 'transform' the button from there. is it possible with css 'transform' property? thanks in advance

https://i.redd.it/mx551jkm8qh61.gif

submitted by /u/hitmaizer
[comments]



Source link